jquery节点操作

1、 查找所有符合条件的元素find() 
举例: $('ul').find('li').addClass('tmpExample'); 
查找页面中ul 元素下的所有 li 元素,并为查找到的 li 元素增加 tmpExample 样式。

2、 查找指定元素的兄弟节点siblings() 
举例:$('li#tmpCarrot').slblings().addClass('tmpExample'); 
查找ID 为 tmpCarrot 的 li 元素所有的兄弟节点,并为查找到的兄弟节点增加 tmpExample 样式。 
可以在slblings() 的括号中添加选择器来查找指定条件的兄弟节点。如: slblings('.tmpClass'), 就是查找类为 tmpClass 的兄弟节点。

3、 查找指定节点的下一个兄弟节点 next() 
举例:$('li#tmpBroccoli').next().addClass('tmpExample'); 
查找ID 为 tmpBroccoli 的 li 节点的下一兄弟节点。并为查找到的兄弟节点增加 tmpExample 样式。

4、 查找指定节点的后面的所有兄弟节点 nextAll() 
举例:$('li#tmpBroccoli').nextAll().addClass('tmpExample'); 
查找ID 为 tmpBroccoli 的 li 节点后面的所有兄弟节点。并为查找到的兄弟节点增加 tmpExample 样式。

5、 查找指定节点的前一个兄弟节点 prev() 
举例:$('li#tmpBroccoli').prev().addClass('tmpExample'); 
查找ID 为 tmpBroccoli 的 li 节点的前一个兄弟节点。并为查找到的兄弟节点增加 tmpExample 样式。

6、 查找指定节点的前面所有的兄弟节点 prevAll() 
举例:$('li#tmpBroccoli').prevAll().addClass('tmpExample'); 
查找ID 为 tmpBroccoli 的 li 节点的前面所有的兄弟节点。并为查找到的兄弟节点增加 tmpExample 样式。 
可以在prevAll() 的括号中添加选择器来查找指定条件的兄弟节点。如: prevAll('li.tmpClass'), 就是查找当前节点前面所有类为 tmClass 的兄弟节点。

7、 查找所有符合条件的上级节点 parents() 
举例:$('li#tmpCarrot').parents('div#tmpSelection').addClass('tmpExample'); 
查找ID 为 tmpCarrot 的 li 节点所有 id 为 tmpSelection 的 div 上级节点。并为查找到的节点增加tmpExample 样式。

8、 查找上级节点 parent() 
举例:$('li#tmpCarrot').parent().addClass('tmpExample'); 
查找ID 为 tmpCarrot 的 li 节点的上级节点。并为查找到的节点增加 tmpExample 样式。

9、 查找子节点 children() 
举例:$('div.tmpList').children('h4').addClass('tmpExample'); 
查找class 为 tmplist 的 div 下面的子节点中为 h4 标签的。并为查找到的节点增加 tmpExample 样式。

10、 查找到的节点集合中反选 not() 
举例:$('ul li').not('li.tmpVegetables').addClass('tmpExample'); 
查找到的li 集合中,除了 class 为 tmpVegetables 的节点,都增加一个 tmpExample 样式。

11、 选择节点集合中的片段 slice() 
举例:$('ul li').slice(1,4).addClass('tmpExample'); 
查找到的li 集合中,选择从第 1 个(从 0 计数,第一个其实是第二个)节点开始的,向后 4 个节点,并为这 4 个节点增加 tmpExample 样式。

12、 向查找的结果集中添加节点 add() 
举例:$('ul#tmpAnimals li').add('li#tmpBrocoli,li#tmpPepper').addClass('tmpExample'); 
id为 tmpAnimals 的 ul 节点下的 li 节点集,添加 id 为 tmpBrocoli 的 li 节点和添加 id  为 tmpPepper 的 li节点。并将组合后的集合中所有 li 节点增加 tmpExample 样式。

13、 结果集中选择指定元素 eq() 
举例:$('ul li').eq(10).addClass('tmpExample'); 
页面ul 下面的 li 集合中,给第 10 元素增加 tmpExample 样式。

 

在节点内部增加节点

$("#designer_id").append("<br>");                (节点内部的最后面增加新节点)

$("#designer_id").prepend("<br>");               (节点内部的最前面增加新节点)

 

在节点前后增加节点

$("#designer_id").before("<br>");              (节点的前面增加新节点)

$("#designer_id").after("<br>");               (节点的后面增加新节点)

 

 

为新增的节点绑定事件:

------------------------------------------------------

$("#ddd").click(function(){

$("#designer_id").before("<input type=\"file\" name=\"filedata\"/><a class=\"removebefore\" href=\"removebefore\">移除 </a><br>");

$('#designer_id').prev().prev().bind("click",function(){

$(this).prev().remove();

$(this).next().remove();    

$(this).remove();

return false;

});  

return false;

});

   //几种添加节点的方法 
     //$("p").append("<b>你好吗? </b>");// 向 p 元素中追加《 b 》 
     //$("<b>你好吗? </b>").appendTo("p");// 将《 b 》追加到 p 元素中 
     //$("p").prepend("<b>你好吗? </b>");// 向 p 中前置《 b 》 
     //$("<b>你好吗? </b>").prependTo("p");// 将《 b 》前置到 p 元素中 
     //$("p").after("<b>你好吗? </b>");// 向 p 元素后插入《 b 》 
     //$("<b>你好吗? </b>").insertAfter("p");// 将《 b 》插入到 p 元素后边 
     //$("p").before("<b>你好吗? </b>");// 在 p 元素之前添加《 b 》 
     //$("<b>你好吗? </b>").insertBefore("p");// 将《 b 》插入到 p 元素前面 
   
   
       //几种删除节点的方法 
     //var $li=$("ul li:eq(1)").remove();//删除 ul 节点中第 2 个元素节点 
     //$("ul").append($li);//把刚删除的元素节点从新添加到 ul 元素中去 
     //$("ul li").remove("li[title!=菠萝 ]");// 将 ul 元素下 title 属性不等于 " 菠萝 " 的 li 元素删除 
     //$("ul li:eq(1)").empty();//清空 ul 节点下第 2 个 li 元素的内容 
   
     //复制节点 
    /*   $("ul li").click(function(){ 
     $(this).clone(true).appendTo("ul");//复制当前点击的节点,并将它追加到《 ul 》元素中,当添加参数时复制它的事件 
    
    }); 
    */ 
     //替换节点 
    //   $("p").replaceWith("<strong>你最不喜欢的水果是? </Strong>"); 

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页