jQuery学习--------jQuery过滤器-创新互联

each() 方法规定为每个匹配元素规定运行的函数。

创新互联专业为企业提供龙凤网站建设、龙凤做网站、龙凤网站设计、龙凤网站制作等企业网站建设、网页设计与制作、龙凤企业网站模板建站服务,十载龙凤做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。

过滤:

下标过滤:

  eq(index)//获取第index个元素

类过滤:

   hasClass(class)  //检查当前元素是否含有某个特定的类,如果有,返回true

            例如:$("div").hasClass("div1") //含有div1类的div元素

表达式过滤:

   filter(expr) //筛选出与指定表达式expr匹配的元素集合,用逗号分隔多个表达式

  filter(fn)   //筛选出与指定函数fn返回值匹配的元素集合

         例如:$("div").filter(".red")这里的表达式是指:选择器表达式

   has(expr)//参数expr是一个jQuery选择器表达式字符串

          也可以是一个元素或者一组元素

        例如:$("p").has(span.red) 选择拥有子元素span,并且子元素类为red的p元素

判断:表达式判断的方法不直接过滤元素,

   仅作为一个检测工具判断当前jQuery对象是否包含满足条件的元素

   is(expr)

  例如:$("div").is(.red) //判断是否有含有类red的div元素,如果有返回true

映射:将jQuery中的每个对象映射到一个数组

   map(callback)

   callback:给每个元素执行的函数

清洗:从jQuery对象中删除符合条件的元素,并返回这个清洗后的jQuery

    not(expr)

截取:截取当前jQuery对象中的部分元素,并将部分元素装在一个jQuery对象中返回。

   slice(start,[end])

   start表示开始选择子集的位置,第一个元素是0,

       如果该参数为负数,则表示从集合的尾部开始选起。

   end如果不指定,则表示到集合的结尾

     注意:被截取元素不包含end指定的位置

查找:

向下查找后代元素:

  DOM提供了三种方法:

    使用childNodes属性

    使用firstChild和lastChild属性

    使用getElementById()和getElementsByTagName()方法

  jQuery访问后代元素:

    children()方法:查找当前元素的所有或部分子元素

           语法:children([expr])

    contents()方法:返回所有的子元素,还可以获取文本节点、注释节点

           语法:contents();该方法没有参数

    find()方法:查找所有的后代元素

          语法:find(expr)

          例子:$("body").find("p") //返回body下所有的p元素

向上查找祖先元素:

   DOM提供了parentNode属性来访问父元素。

  jQuery访问父元素

    parents()方法:返回被选元素的所有祖先元素,直到根元素

           语法:parent([expr]):expr表达式过滤查询到的祖先元素

    parent()方法:返回被选元素的直接父元素。

    parentsUntil()方法:查找指定范围内的父元素。

             例子:$("span").parentsUntil("ul")//返回的父元素到ul标签为止。

    offsetParent()方法:返回被选元素的第一个定位父元素。

    closest()方法:查找指定的父元素

           语法:closest(expr,[context])

向上查找兄弟元素:

  DOM提供了previousSibling属性

  jQuery访问向上的兄弟节点:

    prev()方法:返回上一个相邻的元素(不包括文本节点)

          语法:prev([expr])

    prevAll()方法:返回当前元素以上的所有同辈元素

           语法:prevAll([expr])

    prevUntil()方法:返回当前元素到selector(不包含selector选择的元素)的所有同辈元素

            语法:prevUntil([selector])

向下查找兄弟元素:

  DOM提供nextSibling属性

  jQuery访问向下的兄弟节点:

    next()方法:匹配下一个相邻的节点,不包括文本节点

          语法:next([expr])

    nextAll()方法

    nextUntil()方法

查找兄弟元素:

  jQuery方法:

    siblings()方法:查找所以的兄弟元素。

添加查找对象:

  add()方法:向查找结果中添加新的查找内容。

        语法:add(expr,[context])

        示例:$("div").css("border","solid 5px #000")

         .add("p")

         .css("background","#990044")

串联:

   addSelf()方法:将堆栈中的元素加入到查找结果的中

          示例:

             


                   
  • list item 1

  •                
  • list item 2

  •                
  • list item 3

  •                
  • list item 4

  •                
  • list item 5

  •               

            查询代码:

            $("li.third-item").nextAll().andSelf()
                     .css("background-color", "red");

            该代码会设置3,4,5项的背景颜色。

          解释:初始的选择器会定位项目 3,初始化的堆栈存有仅包含该项目的集合。

               调用 .nextAll() 会将项目 4, 5 的集合推入堆栈。

               最后,调用 .andSelf() 会合并这两个集合。

               所创建的 jQuery 对象指向按照文档顺序的所有三个项目:

                        {[,

  • ,
  • ]}。

       end()方法:结束当前链条中的最近的筛选操作,并将匹配元素集还原为之前的状态

    另外有需要云服务器可以了解下创新互联scvps.cn,海内外云服务器15元起步,三天无理由+7*72小时售后在线,公司持有idc许可证,提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案,具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势,专为企业上云打造定制,能够满足用户丰富、多元化的应用场景需求。


    网站栏目:jQuery学习--------jQuery过滤器-创新互联
    URL链接:http://ybzwz.com/article/deojjg.html