jQuery中的Dom操作

1.查找节点

通过jQuery选择器来完成

2.创建节点

  创建元素节点：var newTd = $("<td></td>")
  创建文本节点：var newTd = $("<td>文本内容</td>")

3.插入节点

  1) $A.append(B)
       将B追加到A的末尾处，作为它的最后一个子元素
  2) $A.appendTo(B)
       将A追加到B的末尾，作为它的最后一个子元素
  3) prepend() 
       $A.prependTo(B)
            将A追加到B的前面，作为它的第一个子元素
       $A.after(B)
            在A之后追加B，作为它的兄弟元素
       $A.insertAfter(B)
            在B之后追加A，作为它的兄弟元素
       $A.before(B)
            在A之前追加B，作为它的兄弟元素
       $A.insertBefore(B)
             在B之前追加A，作为它的兄弟元素

4.删除节点

   remove([selector])
       从DOM中删除所有匹配的元素，返回值是一个指向已经被删除的节点的引用，可以在以后再使用这些元素。
       该方法会移除元素，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jQuery数据。
   detach([selector])
       与remove()类似，但是detach()保存所有jQuery数据和被移走的元素的相关联事件。
   empty()
       无参数。从DOM中清空集合中匹配元素的所有的子节点。

5.复制节点

 $("#id").clone(false);
  该方法返回的是一个节点的引用，参数默认为false，为浅复制；
  参数是true,为深复制，含义是：复制元素的同时复制元素中所绑定的事件。

6.替换节点

   replaceWith(newContent);
        用新内容替换集合中所有匹配的元素，并且返回被删除的元素的集合。
        该方法会删除与节点相关联的所有数据和事件处理程序。
   replaceAll(target);
        用集合的匹配元素替换每个目标元素。颠倒了replaceWith()操作效果。

7.包裹节点

   wrap([wrappingElement])
        在每个匹配的元素外层包上一个html元素
   warpAll([wrappingElement])
        将所有匹配的元素用一个元素来包裹，在所有匹配元素外面包裹一层HTML结构
   warpInner([wrappingElement])
        每个匹配元素里面内容(子元素)都会被这种结构包裹

8.节点遍历

   children([selector]) 
        用于取得匹配元素的子元素集合(只考虑子元素而不考虑任何后代元素)
      $('.content.inner')=>$('.content').children('.inner');  
   find(selector)
        在当前对象元素中的子元素查找，和参数所匹配的所有的后代元素
   next([selector])
        取得匹配的元素集合中每一个元素紧邻的后面兄弟元素
   nextAll([selector])
        查找当前元素之后所有的同辈元素
   prev([selector])
         取得匹配元素前面紧邻的兄弟元素
   prevAll([selector])
         取得当前元素之前所有的同辈元素
   silibinng([selector])
         取得匹配元素的前后所有的兄弟元素
   closest(selector)
         取得和参数匹配的最近的元素，如果匹配不上继续向上查找父元素
   filter(selector)
         把当前所选择的所有元素再进行筛选过滤
   parent([selector])
         取得匹配元素的集合中，每个元素的父元素
   parents([selector])
         获得集合中每个匹配元素的祖先元素

jQuery中的Dom操作

评论 (0)