DOM

1.1    查找节点

1、  查找元素节点

就是应用各种选择器抓取节点

2、  查找属性节点

使用上一步抓取到的元素的attr(‘属性名’)方法，获取节点的属性值。很多时候，在标签中加一个data-**的属性，用jquery获取属性时就可以直接用.data抓取，如下：

<div class="abc"data-class="abc" data-id="qq" id="qq"></div>

alert("class="+$('.abc').attr('class'));

        alert($('.abc').data().class);

两个输出效果相同

1.2    创建结点

var 变量名 = $(“html代码”)，创建节点首先定义一个html代码的变量，然后将其插入到文档中，需要结合下一节的插入节点，才能真正的创建节点。

1、  创建元素节点

var 变量名 = $(“<li></li>”)

2、  创建文本节点

var 变量名 = $(“<li>香蕉、苹果、橘子</li>”)

3、  创建属性节点

var 变量名 = $(“<li title=’水果’></li>”)

1.3    插入节点

A.append(B)：<A>…+B</A>；等价于B.appendTo(A)

A.prepend(B)：<A>B+…</A>；等价于B.prependTo(A)

A.after(B)：<A></A>+B；等价于B.insertAfter(A)

A.befor(B)：B+<A></A>；等价于B.insertBefore(A)

1.4    删除节点

remove():删除节点和子代节点，绑定的事件将永远删除

detach():并没有真正删除，添加回来后，绑定的事件依然有效

empty():清空标签里的内容

1.5    复制节点

clone():复制当前节点

clone(true):复制当前节点，并将行为一同复制

1.6    替换节点

A.replaceWith(B):A中的内容用B替换，等价于B.replaceAll(A)

1.7    包裹节点

A.warp(“<b></b>”): <b>A</b>

……

1.8    属性操作

获取属性：选择器选择元素，元素.attr(‘属性名’)

设置元素：单个元素：元素.attr(‘属性名’，‘属性值’)

          多个元素：元素.attr(‘属性名’:属性值,’属性名’:属性值)

删除属性：元素.removeAttr(‘属性名’)

1.9    样式操作

1、  获取样式和设置样式

获取元素的class：元素.attr(“class”)

设置元素的class：元素.attr(“class”,”属性名”)

2、  追加样式

元素.addClass(“定义在css中的样式名”)，添加之后和现有的class值以空格隔开

3、  移除样式

元素.removeClass(“class名”)

4、  切换样式

元素.toggleClass(“class名”)：元素有此class时删除此属性，无此class时添加此属性

5、  判断是否含有某个样式

hasClass()：有此属性时返回true，无此属性时返回flase

1.10设置和获取HTML的值和文本

html()=js中的innerHtml()

text()=js中的innerText()：读取或设置某个元素的文本内容

val()方法=js中的value属性：同上可设置属性值，多选时返回数组

1.11遍历节点

Children()，只考虑子元素，不考虑其后代元素

Next()，匹配与元素相邻的下一个兄弟元素

Prev(),匹配与元素相邻的上一个兄弟元素

Siblings(),取得匹配元素前后的所有同辈元素

Closest(),最近的匹配元素

Parent()，每个匹配元素的父元素

Parents()，每个匹配元素的祖先元素

1.12CSS-DOM操作

元素.css(“color”)：获取元素的颜色

元素.css(“color”,”red”)：设置元素颜色为红色

元素.css(“color”:”red”,”background”:”#000”)：设置两个属性

offset()/position()/scrollTop()/scrollLeft()