jQuery中的筛选

Posted 2020-12-01 myitnews

1. eq(index|-index)

获取当前链式操作中第N个jQuery对象，返回jQuery对象，当参数大于等于0时为正向选取，比如0代表第一个，1代表第二个。当参数为负数时为反向选取，比如-1为倒数第一个。

$("p").eq(1)

2. first(), 获取第一个元素

$(‘li‘).first()

3. last(), 获取最后一个元素

$(‘li‘).last()

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

$(this).hasClass("protected")

5. filter(expr|obj|ele|fn), 筛选出与指定表达式匹配的元素集合

这个方法用于缩小匹配的范围。用逗号分隔多个表达式。

参数说明：

• expr：Stirng, 字符串值，包含供匹配当前元素集合的选择器表达式
• obj：现有的jQuery对象，以匹配当前的元素
• ele：一个用于匹配元素的DOM元素
• function(index)：Function，个函数用来作为测试元素的集合。它接受一个参数index，这是元素在jQuery集合的索引。在函数， this指的是当前的DOM元素。

<p>Hello</p><p>Hello Again</p><p class="selected">And Again</p>

$("p").filter(".selected")

//结果:
 <p class="selected">And Again</p> 

//$("p").filter(".selected, :first")

6. is(expr|obj|ele|fn), 根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合，如果其中至少有一个元素符合这个给定的表达式就返回true

参数说明：

• expr：Stirng, 字符串值，包含供匹配当前元素集合的选择器表达式
• obj：现有的jQuery对象，以匹配当前的元素
• ele：一个用于匹配元素的DOM元素
• function(index)：Function，个函数用来作为测试元素的集合。它接受一个参数index，这是元素在jQuery集合的索引。在函数， this指的是当前的DOM元素。

<form><input type="checkbox" /></form>

$("input[type=‘checkbox‘]").parent().is("form")

//结果true

7. map(callback), 将一组元素转换成其他数组（不论是否是元素数组）

你可以用这个函数来建立一个列表，不论是值、属性还是CSS样式，或者其他特别形式。这都可以用‘$.map()‘来方便的建立。

<p><b>Values: </b></p>
<form>
  <input type="text" name="name" value="John"/>
  <input type="text" name="password" value="password"/>
  <input type="text" name="url" value="http://ejohn.org/"/>
</form>

$("p").append( $("input").map(function(){
  return $(this).val();
}).get().join(", ") );

结果：<p>John, password, http://ejohn.org/</p>

8. has(expr|ele), 保留包含特定后代的元素，去掉那些不含有指定后代的元素

.has()方法将会从给定的jQuery对象中重新创建一组匹配的对象。提供的选择器会一一测试原先那些对象的后代，含有匹配后代的对象将得以保留。

参数说明：

• expr：String，一个选择器字符串
• element：一个DOM元素

//给含有ul的li加上背景色
$(‘li‘).has(‘ul‘).css(‘background-color‘, ‘red‘);

9. not(expr|ele|fn), 从匹配元素的集合中删除与指定表达式匹配的元素

参数说明：

• expr：String，一个选择器字符串
• element：一个DOM元素
• function(index)：Function, 一个用来检查集合中每个元素的函数。this是当前的元素

//从p元素中删除带有 select 的ID的元素
$("p").not( $("#selected")[0] )

10. slice(start, [end]), 选取一个匹配的子集

参数说明：

• start：Integer，开始选取子集的位置。第一个元素是0.如果是负数，则可以从集合的尾部开始选起
• end：Integer，结束选取自己的位置，如果不指定，则就是本身的结尾。

//选择第一个p元素
$("p").slice(0, 1).wrapInner("<b></b>");