jquery节点操作

很久没有jquery写东西了，最近使用jquery的时候发现很多节点的操作都不太熟悉了，于是就进行了一个小小的总结。

创建节点：var dom=$('<div></div>');

添加节点： 

添加节点的方法不仅可以创建新节点进行添加，还可以实现节点的移动。

• 添加子节点

          (1) 在父级元素的末尾追加  append() /appendTo()

               例如：向div中添加p节点

               $('div').append('p');   / $('p').appedTo('div');

          (2) 在父级元素的开始位置追加   prepend/prependTo 

               用法与 append /appendTo相同，区别就在于向父级元素添加时的位值不同。

 

• 添加同级节点

          (1) after() /before()  :在匹配元素之后／前插入节点。

               例如：<p class="p1"></p>

               $('.p1').after('<p>我是新来的</p>');   /     $('.p1').before('<p>我是新来的</p>');

               <p class="p1"></p><p>我是新来的</p>  /  <p>我是新来的</p><p class="p1"></p>

          (2) insertAfter() /insertBefore()   :将匹配的元素插入到指定元素的后面／前面。

               与after/before作用相同，写法位置刚好相反

               例如：<p class="p1"></p>

        $('<p>我是新来的</p>').insertAfter('.p1');   / /<p class="p1"></p><p>我是新来的</p>  

　　$('<p>我是新来的</p>').insertBefore('.p1');/  <p>我是新来的</p><p class="p1"></p>

 

删除节点:  $('.p1).remove()

 

查找节点：

• 查找父节点

          parent(expr)/parents(expr)   :expr为查询条件，可以选填，根据条件查询

          parent是找到父节点。parents是找到所有的祖先元素     

• 查找子节点

          (1) childern(expr)  :找到满足表达式的一级子节点。

          (2) contents()  :找到此节点下的所有内容，包括节点、文本

• 查找同级节点

          (1) prev()/ next()  :查找上一个/下一个相邻的兄弟节点。

          (2) prevAll() /nextAll()  :查找之前/之后的所有兄弟节点。

          (3) siblings()  :查找与之前后相邻的兄弟节点。

• 利用选择器查找节点

          <p>0</p>

          <p class="p1">1</p>

          <div>

               <p>2</p>

          </div>

          <p>3</p>

        (1) 查找所有子孙节点   $('A B')

        (2) 查找一级子节点 $('A>B')

　　(3) 查找位于之后的兄弟节点,包括兄弟节点中满足条件的节点  $('A+B')   // <p>2</p>  <p>3</p>

　　(4) 查找位于之后的兄弟节点，不在兄弟节点的子节点中查找   $('A~B')  //<p>3</p>

• 查找第一个/最后一个节点

          (1) $("li").first()  / $('li').last()

          (2) $('li:first'); /$('li:last') 

• 查找第一个子节点

          (1) $('.par').children('div').get(0)  得到class为.par下的第一个子div元素，为一个dom对象。

          (2) $('.par).children(':first')  得到class为.par下的第一个子元素

• 查找第n个节点

           $('li:eq(n)')   n从0开始。

 

复制节点 

     $(this).clone(true).appendTo("ul");

     clone()实现节点的复制，默认不复制绑定的事件，如果需要给复制元素的时候也同时复制这个元素身上的事件，需要增加一个参数true。

 

替换节点

      //replaceWith()使用with后面的标签替换匹配的元素

       $("p").click(function(){

             $("p").replaceWith("<span>这是一个span</span>")

        })

 

hover函数实现样式切换 ：

$("p").hover(function(){

     $("p").css("background-color","yellow");

},function(){

     $("p").css("background-color","pink");

});

 

移除hover事件，要分别移除mouseover和mouseout事件