Jquery的DOM操作

Jquery中DOM的操作

节点操作

一、查找节点

1、查找元素节点 ；利用Jquery的选择器

2、查找属性节点 ；利用Jquery的选择器查找到需要的元素之后，就可以使用attr()方法来获取它的各种属性的值。Attri()方法的参数可以是一个，也可以是零个。当参数是一个时，则是要查询的属性的名字。

二、创建节点

1、创建元素节点

第一 创建元素节点 第二将其插入文档中

$(html) --->创建节点 ，append()添加到文档中

2、创建文本节点

创建文本节点就是在创建元素节点时直接把文本内容写出来，然后使用append()等方法将它们添加到文档中就可以了。

3、创建属性节点

创建属性节点与创建文本节点类似，也是之金额在创建元素节点时一起创建

三、插入节点

append() 向每个匹配的元素内部追加内容

appendTo() 与上诉追加相反

Perpend() 向每个匹配的元素内容前置内容

perpendTo() 与上诉前置内容相反

After() 在每个匹配的元素之后插入内容

inserAfter() 与上诉插入相反

Before() 在每个匹配的元素之前插入内容

Insertbefore() 与上诉插入相反

四、删除节点

remove() 从DOM中删除所有匹配的元素，其后面的子节点也将同时删除 ， 也可以设置其参数进行有选择性的删除

detach() 跟remove()不同的是，所有绑定的事件、附加的数据都会保留下来

empty() 并不是删除节点，而是清空节点。，也能清空所有后代的子节点。

五、复制节点

（通过鼠标拖动商品并将其放到购物车中）商品拖动就是用的复制节点

Clone() 复制节点后，被复制的新元素并不具有任何行为，如果需要新元素也具有复制功能，可以使用clone(true)

六、替换节点

replacewith() 将所有匹配的元素都替换成指定的HTML或DOM元素

replaceaAll() 与上诉方法作用相同，只是颠倒了replaceWith()的操作。

七、包裹节点

wrapAll() \ wrap()

将所有匹配的元素用一个元素来包裹，wrap()方法是将所有的元素进行单独的包裹。

wrapInner()方法

将每一个匹配的元素的子内容（包括文本节点）用其他结构化的标记包裹起来。

属性操作

1获取属性和设置属性

获取 attr(name);

设置单个属性值 atrr(name,value) ;

设置多个属性值 attri(name:value ,name:value) ;

2 删除属性

removeAttr(name)

样式操作

1获取样式和设置样式

可以使用attr()来获取样式和设置样式

$(“p”).attr(“class”)

$(“p”).attr(“class”,”hight”)

2追加样式

addClass()

多次使用addClass()样式，不会覆盖其原先的样式。使用attr()方法会覆盖其原先的样式

3删除样式

removeClass(name) ,如果不带任何参数则就删除其所有的样式

4切换样式

Toggle()方法主要是控制行为上的重复切换。

toggleClass()方法控制样式上的重复切换

5判断是否含有某个样式

hasClass()可以用来判断元素是否含有某个class，如有，则返回TRUE，否则为FALSE

$(“p”).hasClass(“another”) 等价于 $(“p”).is(“.another”);

设置和获取HTML、文本 和值

1html() 用来读取或者设置某个元素中的HTML内容，设置时只需在括号里写入值即可

2text() 用来读取或者设置某个元素中的TEXT内容，设置时只需在括号里写入值即可

3val() 此方法类似JavaScript中的value属性，用来设置和获取元素的值，无论元素是文本框，还是下拉列表还是单选框，都可以返回元素的值，如果元素是多选，则返回一个包含所有选择的值的数组 设置时只需在括号里写入值即可

遍历节点

1children() 获得子元素

2next() 后面紧邻的同辈元素

3prev() 前面紧邻的同辈元素

4siblings() 前后所有的同辈元素

5closest() 从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素

6parent(),parents(),closest()之间的区别

parent() 获得集合中每个匹配元素的父级元素

Parents() 获得集合中每个匹配元素的祖先元素

CSS-DOM操作

Css()方法获取元素的样式属性 如 $(“p”).css(“color”);

也可以通过css()设置某个元素的单个样式 如$(“p”).css(“color”,”red”);

也可以同时设置多个样式属性 如$(“p”).css({“color”:”red” ,”fontSize”,”30px”});

设置透明度 $(“p”).css(“opacity”,”0.5”);

可以通过height()方法获取元素高度。 它的作用是取得匹配元素当前计算的高度值

Css()获取的高度跟样式有关，但是height()获取的高度跟样式设置无关的，是元素在页面中的实际高度

通过width()方法取得匹配元素的宽度值

元素定位

1 1offset()方法 获取元素在当前视窗的相对偏移，其中返回的对象包含两个属性，即top和left，它只对可见元素有效

2 position()方法 获取元素相对于最近的一个position样式属性设置为relative或者absolute的父节点的相对偏移，其中返回的对象包含两个属性，即top和left

3scrollTop()方法和scrollLeft()方法

获取元素的滚动条距顶端和距左端的距离。

另外，可以为这两个方法指定一个参数，控制参数的滚动条到指定位置。

Jquery事件绑定类型比普通的JavaScript事件绑定类型少了”on”.