很久没有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事件