jQuery — 元素筛选

一、过滤元素

  1、eq(index | -index)

    用法:

格式: $("p").eq(1|-2)

说明:获取指定索引的元素,如果是一个正整数,从0开始算起;如果是一个负整数,从集合中最后一个元素倒数(1算起)。

  2、first()

    用法:

格式:$("li").first()

说明:获取匹配的第一个元素

  3、last()

    用法:

格式:$("li").last()

说明:获取匹配的最后一个元素

  4、hasClass(class)

    用法:

格式: $("div").hasClass("myclass")

说明:检查当前的元素是否含有某个特定的类,如果有,返回true,否则返回false

  5、filter(expr|obj|ele|fn)

    用法:

格式:$("p").filter(".slected, :first")

说明:筛选出于指定表达式匹配的元素集合,如果有多个表达式,用逗号分隔

  6、is(expr|obj|ele|fn)

     用法:

格式:$("input[type='checkbox']").parent().is("form")

说明:根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。

  7、map(callback)

    用法:

格式:$("input").map(function() { return $(this).var(); })

说明:将一组元素转换成其他数组(不论是否是元素数组),可以用这个函数来建立一个列表,不论是值、属性还是CSS样式,或者其他特别形式。

  8、has(expr|ele)

    用法:

格式:$("li").has("ul")                    只保留含有ul的li

说明:保留包含特定后代的元素,去掉那些不含有指定后代的元素。

  9、not(expre|ele|fn)

    用法:

格式:$("p").not("#selected")

说明:删除与指定表达式匹配的元素

  10、slice(start,[end])

    用法:

格式: $("p").slice(0,1)  只选择第一个p元素

说明:选取一个匹配的子集

二、查找元素

  1、children([expr])

    用法:

格式:$("div").children(".selected")                 在每个div中查找 .selected  的类

说明:取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合(只考虑子元素)

  2、find(e|o|e)

    用法:

格式:$("p").find("span")

说明:搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法(后代,包括子代和孙子等)

  3、next([expr])

    用法:

格式:$("p").next()

说明:取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合(只是返回一个紧邻的同辈元素)

  4、nextAll([expr])

    用法:

格式:$("p").nextAll()

说明:查找当前元素之后所有的同辈元素

  5、nextUntil([e|e][,fil])

    用法:

格式:$("p").nextUntil("span")

说明:查找当前元素之后所有的同辈元素,直到遇到匹配的那个元素为止

  6、offsetParent()

    用法:

格式:$("p").offsetParent()

用法:返回第一个匹配元素用于定位的父节点。返回父元素中第一个其position设为relative或者absolute的元素。此方法仅对可见元素有效。

  7、parent([expr])

    用法:

格式:$("p").parent()

说明:取得一个包含着所有匹配元素的唯一父元素的元素集合。

  8、parents([expr])

    用法:

格式:$("span").parents("p")           找到每个span的所有是 p 元素的祖先元素

说明:取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选

  9、parentsUntil([e|e],[,f])

    用法:

格式:$("li.item-a").parentsUntil(".level-1")          查找item-a的祖先,但不包括level-1

说明:查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止。

  10、prev([expr])

    用法:

格式:$("p").prev()

说明:取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合(只匹配一个紧邻的同辈元素)

  11、prevAll([expr])

    用法:

格式:$("div:last").prevAll()

说明:查找当前元素之前所有的同辈元素

  12、prevUntil([e|e][,f])

    用法:

格式:$("p").prevUntil("span")

说明:查找当前元素之前所有的同辈元素,直到遇到匹配的那个元素为止。

  13、siblings([expr])

    用法:

格式:$("div").siblings()                找到每个div所有的同辈元素
说明:
取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合。可以用可选的表达式进行筛选。

三、串联元素

  1、add(expr|ele|obj)

    用法:

格式:$("p").add("span")          等价于 $("p,span")

说明:把与表达式匹配的元素添加到jQuery对象中。这个函数可以用于连接分别与两个表达式匹配的元素结果集

  2、contents()

    用法:

格式:$("p").contents().not("[nodeType=1]").wrap("<b/>")      查找所有文本节点并加粗
说明:
查找匹配元素内部所有的子节点(包括文本节点)。如果元素是一个iframe,则查找文档内容

  3、end()

    用法:

格式:$("p").find("span").end()                       选取所有的p元素,查找并选取span子元素,然后再回过来选取p元素

说明:回到最近的一个"破坏性"操作之前。即,将匹配的元素列表变为前一次的状态

猜你喜欢

转载自www.cnblogs.com/niujifei/p/12395883.html