zoukankan      html  css  js  c++  java
  • JQuery 选择和过滤方法总结(转)

    http://www.cnblogs.com/chybin500/archive/2010/11/18/1881216.html

    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、查找指定节点的后面的所有兄弟节点 next()
         举例:$('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样式。

  • 相关阅读:
    CSS中关于BFC的背后原理是什么
    CSS中浏览器是怎样解析CSS选择器的?
    JavaScript中关于 == 和 === 的区别是什么?
    JavaScript中关于继承的实现方式
    Vue双向绑定原理
    Node之TinyPNG图片无限次数压缩
    React的生命周期示意图
    Image-webp探究
    JavaScript中关于事件的循环机制
    vue导航点击切换 1.0
  • 原文地址:https://www.cnblogs.com/gossip/p/2215593.html
Copyright © 2011-2022 走看看