锋利的jQuery总结（二）

第三章 jQuery中的DOM 操作

 

12. 查找节点

i 查找元素节点：选择器

ii 查找属性节点：attr( )   e.g. varp_text = $(“p”).attr(“title”)   获取<p>元素的属性title

 

13. 创建节点

i 创建元素节点：$(html)  e.g.  var $li=$(“<li></li>”);  $(“ul”).append($li);

ii 创建文本节点：var $li=$(“<li>hello</li>”);

iii 创建属性节点：var $li=$(“<li title=’hello’>hello</li>”);

 

 

 

14. 插入节点：

append()  $(A).append(B) 将B元素插入到A元素中

appendTo() $(B).appendTo(A)  同上作用

prepend()  $(A).prepend(B) 将B 元素在A 元素中前置

prependTo() $(B).prepend(A)  同上

after()       $(A).after(B)在元素A 后插入元素B

insertAfter() $(B).insertAfter(A) 同上

before()     $(A).before(B)  在元素A前插入元素B

insertBefore()  $(B).insertBefore(A)同时国内

 

15.  删除节点

remove()   某个节点用remove()删除后，其包含的所有后代节点都会被删除，返回值为一个指向已被删除的节点的引用，还可以继续使用这个元素

          可以通过传递参数选择性的删除元素 $(“ul li”).remove(“li[title=hello]”);

detach()   与remove()的区别是，所有绑定的事件，附加的数据都会保留下来

empty()   清空元素中所有的后代节点

 

16. 复制节点

clone()  注意复制后得到的新节点不具有任何行为，如果也想让新节点可以复制，要传入.clone(true),传入的参数true表示复制元素的同时复制元素中所绑定的事件

 

17. 替换节点

replaceWith()  $(A).replaceWith(B) 用B元素替换A元素

replaceAll()    $(B). replaceAll(A)  作用同上

注意：替换之后原先的元素上绑定的事件会消失，需要在新元素上重新绑定

 

18. 包裹节点

wrap() $(A).wrap(B) 用B把A包裹起来（使A成为B的子节点）（每个匹配的A单独来一遍）

wrapInner()   $(A).wrap(B)用B把A的子内容包裹起来

wrapAll()  $(A).wrapAll(B)  用一个B把所有的匹配的A都包裹起来

 

19. 属性操作

i 获取属性和设置属性

  var p_txt =$(“p”).attr(“title”); 获取<p>元素节点属性title

 $(“p”).attr(“title” , ”your title”); 设置<p>的title属性 得到 <p title=”yourtitle”>

  $(“p”).attr({

“title”: ”yourtitle”,

“name”: “test”

});       //设置多个属性

ii 删除属性

 removeAttr()

 

20. 样式操作

i 获取样式 .attr(“class”)

ii 设置样式 .attr(“class” ,”high”)

iii 追加样式addClass() $(“p”).addClass(“another”) 会合并两个样式，后者覆盖前者

iv 移除样式removeClass()  移除多个样式： $(“p”).removeClass(“highanother”);

v  切换样式 toggleClass()

vi 判断元素中是否含有某个class，hasClass()

          $("p”).hasClass(“another”); ==  $(“p”).is(“.another”);

 

21. 获取、设置HTML、文本、和值  (在括号中传入参数即为设置)

html()

text()

val()

defaultValue表示该表单元素的初始值

 

22. 遍历节点

i  children()   匹配元素的子节点

ii  next()   匹配元素后紧邻的同辈元素

iii  prev()  匹配元素前紧邻的同辈元素

iv siblings()  匹配元素的所有同辈元素

v  closest()  先检查当前元素是否匹配，若匹配直接返回元素，否则逐级向上查找父元素

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

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

 

23. css的DOM操作

i   $(“p”).css(“color”,”red”);

$(“p”).css({

“color:,”red”,

“opacity”:”0.5”

});

ii  offset() 获取元素在当前视窗的相对偏移，返回的对象包含两个值 top left

   e.g.  var os =$(“p”).offset();

        varosle=os.left;

        var ost =os.top; 

iii position() 获取元素相对于最近的一个position样式属性设置为relative或absolute的祖父节点的相对偏移，返回得对象包含top和left

iv scrollTop()   scrollLeft() 获取元素的滚动条距顶端与左侧的距离

   e.g.  var $p=$(“p”);

        varscrollTop = $p.scrollTop();

        varscrollLeft = $p.scrollLeft(300);