前端开发利器jQuery-筛选器之过滤

1,759次阅读次阅读
没有评论

 

前端开发利器jQuery-筛选器之过滤

jQuery筛选器之过滤

筛选器 描述
$("SET").eq(index/-index); 获取当前链式操作中第N个jQuery对象,当参数大于等于0时为正向选取,当参数为负数时为反向选取
$("SET").first(); 获取匹配到的第一个元素
$("SET").last(); 获取最后个元素
$("this").hasClass(class); 检查当前的元素是否含有某个特定的类,如果有,则返回true
$("SET").filter(expr/obj/ele/fn); 筛选出与指定表达式匹配的元素集合
$("SET").is(expr/obj/ele/fn); 根据选择器、DOM元素或 jQuery 对象来检测匹配元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true
$("SET").has(expr/ele); 保留包含特定后代的元素,去掉那些不含有指定后代的元素
$("SET").not(expr/ele/fn); 删除与指定表达式匹配的元素
$("SET").slice(start, [end]); 选取一个匹配的子集

jQuery筛选器之过滤示例

  • $(“SET”).eq(index/-index);

获取匹配的第二个元素

HTML代码:

<span class="line">1</span>
<span class="line">2</span>
<span class="line"><span class="tag"><<span class="name">p</span>></span>This is just a test.<span class="tag"></<span class="name">p</span>></span></span>
<span class="line"><span class="tag"><<span class="name">p</span>></span>So is this<span class="tag"></<span class="name">p</span>></span></span>

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"p"</span>).eq(<span class="number">1</span>);</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">p</span>></span> So is this<span class="tag"></<span class="name">p</span>></span> ]</span>

获取匹配的第二个元素

HTML代码:

<span class="line">1</span>
<span class="line">2</span>
<span class="line"><span class="tag"><<span class="name">p</span>></span>This is just a test.<span class="tag"></<span class="name">p</span>></span></span>
<span class="line"><span class="tag"><<span class="name">p</span>></span> So is this<span class="tag"></<span class="name">p</span>></span></span>

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"p"</span>).eq(<span class="number">-2</span>);</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">p</span>></span> This is just a test.<span class="tag"></<span class="name">p</span>></span> ]</span>
  • $("SET").first();

获取匹配的第一个元素

HTML代码:

<span class="line">1</span>
<span class="line">2</span>
3
4
5
6
7
<span class="line"><span class="tag"><<span class="name">ul</span>></span></span>
<span class="line">    <span class="tag"><<span class="name">li</span>></span>list item 1<span class="tag"></<span class="name">li</span>></span></span>
<span class="line">    <span class="tag"><<span class="name">li</span>></span>list item 2<span class="tag"></<span class="name">li</span>></span></span>
<span class="line">    <span class="tag"><<span class="name">li</span>></span>list item 3<span class="tag"></<span class="name">li</span>></span></span>
<span class="line">    <span class="tag"><<span class="name">li</span>></span>list item 4<span class="tag"></<span class="name">li</span>></span></span>
<span class="line">    <span class="tag"><<span class="name">li</span>></span>list item 5<span class="tag"></<span class="name">li</span>></span></span>
<span class="line"><span class="tag"></<span class="name">ul</span>></span></span>

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">'li'</span>).first();</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">li</span>></span>list item 1<span class="tag"></<span class="name">li</span>></span> ]</span>
  • $("SET").last();

获取匹配的最后个元素

HTML代码:

<span class="line">1</span>
<span class="line">2</span>
3
4
5
6
7
<span class="line"><span class="tag"><<span class="name">ul</span>></span></span>
<span class="line">    <span class="tag"><<span class="name">li</span>></span>list item 1<span class="tag"></<span class="name">li</span>></span></span>
<span class="line">    <span class="tag"><<span class="name">li</span>></span>list item 2<span class="tag"></<span class="name">li</span>></span></span>
<span class="line">    <span class="tag"><<span class="name">li</span>></span>list item 3<span class="tag"></<span class="name">li</span>></span></span>
<span class="line">    <span class="tag"><<span class="name">li</span>></span>list item 4<span class="tag"></<span class="name">li</span>></span></span>
<span class="line">    <span class="tag"><<span class="name">li</span>></span>list item 5<span class="tag"></<span class="name">li</span>></span></span>
<span class="line"><span class="tag"></<span class="name">ul</span>></span></span>

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">'li'</span>).last();</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">li</span>></span>list item 5<span class="tag"></<span class="name">li</span>></span> ]</span>
  • $("this").hasClass(class);

给包含有某个类的元素进行一个动画。

HTML代码:

<span class="line">1</span>
<span class="line"><span class="tag"><<span class="name">div</span> <span class="attr">class</span>=<span class="string">"protected"</span>></span><span class="tag"></<span class="name">div</span>></span><span class="tag"><<span class="name">div</span>></span><span class="tag"></<span class="name">div</span>></span></span>

jQuery代码:

<span class="line">1</span>
<span class="line">2</span>
3
4
5
6
7
8
9
<span class="line">$(<span class="string">"div"</span>).click(<span class="function"><span class="keyword">function</span>()</span>{</span>
<span class="line">  <span class="keyword">if</span> ( $(<span class="keyword">this</span>).hasClass(<span class="string">"protected"</span>) )</span>
<span class="line">    $(<span class="keyword">this</span>)</span>
<span class="line">      .animate({ left: <span class="number">-10</span> })</span>
<span class="line">      .animate({ left: <span class="number">10</span> })</span>
<span class="line">      .animate({ left: <span class="number">-10</span> })</span>
<span class="line">      .animate({ left: <span class="number">10</span> })</span>
<span class="line">      .animate({ left: <span class="number">0</span> });</span>
<span class="line">});</span>
  • $("SET").filter(expr|obj|ele|fn);

filter参数说明

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

保留带有select类的元素

HTML代码:

<span class="line">1</span>
<span class="line"><span class="tag"><<span class="name">p</span>></span>Hello<span class="tag"></<span class="name">p</span>></span><span class="tag"><<span class="name">p</span>></span>Hello Again<span class="tag"></<span class="name">p</span>></span><span class="tag"><<span class="name">p</span> <span class="attr">class</span>=<span class="string">"selected"</span>></span>And Again<span class="tag"></<span class="name">p</span>></span></span>

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"p"</span>).filter(<span class="string">".selected"</span>);</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">p</span> <span class="attr">class</span>=<span class="string">"selected"</span>></span>And Again<span class="tag"></<span class="name">p</span>></span> ]</span>

保留第一个以及带有select类的元素

HTML代码:

<span class="line">1</span>
<span class="line"><span class="tag"><<span class="name">p</span>></span>Hello<span class="tag"></<span class="name">p</span>></span><span class="tag"><<span class="name">p</span>></span>Hello Again<span class="tag"></<span class="name">p</span>></span><span class="tag"><<span class="name">p</span> <span class="attr">class</span>=<span class="string">"selected"</span>></span>And Again<span class="tag"></<span class="name">p</span>></span></span>

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"p"</span>).filter(<span class="string">".selected, :first"</span>);</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">p</span>></span>Hello<span class="tag"></<span class="name">p</span>></span>, <span class="tag"><<span class="name">p</span> <span class="attr">class</span>=<span class="string">"selected"</span>></span>And Again<span class="tag"></<span class="name">p</span>></span> ]</span>

保留子元素中不含有ol的元素。

HTML代码:

<span class="line">1</span>
<span class="line"><span class="tag"><<span class="name">p</span>></span><span class="tag"><<span class="name">ol</span>></span><span class="tag"><<span class="name">li</span>></span>Hello<span class="tag"></<span class="name">li</span>></span><span class="tag"></<span class="name">ol</span>></span><span class="tag"></<span class="name">p</span>></span><span class="tag"><<span class="name">p</span>></span>How are you?<span class="tag"></<span class="name">p</span>></span></span>

jQuery代码:

<span class="line">1</span>
<span class="line">2</span>
3
<span class="line">$(<span class="string">"p"</span>).filter(<span class="function"><span class="keyword">function</span>(<span class="params">index</span>) </span>{</span>
<span class="line">  <span class="keyword">return</span> $(<span class="string">"ol"</span>, <span class="keyword">this</span>).length == <span class="number">0</span>;</span>
<span class="line">});</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">p</span>></span>How are you?<span class="tag"></<span class="name">p</span>></span> ]</span>
  • $("SET").is(expr/obj/ele/fn);

如果没有元素符合,或者表达式无效,都返回'false'。 注意:在jQuery 1.3中才对所有表达式提供了支持。在先前版本中,如果提供了复杂的表达式,比如层级选择器(比如 + , ~ 和 > ),始终会返回true

is参数说明

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

由于input元素的父元素是一个表单元素,所以返回true。

HTML代码:

<span class="line">1</span>
<span class="line"><span class="tag"><<span class="name">form</span>></span><span class="tag"><<span class="name">input</span> <span class="attr">type</span>=<span class="string">"checkbox"</span> /></span><span class="tag"></<span class="name">form</span>></span></span>

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"input[type='checkbox']"</span>).parent().is(<span class="string">"form"</span>);</span>

结果:

<span class="line">1</span>
<span class="line">true</span>
  • $("SET").has(expr|ele);

给含有ul的li加上背景色

HTML代码:

<span class="line">1</span>
<span class="line">2</span>
3
4
5
6
7
8
9
10
11
<span class="line"><span class="tag"><<span class="name">ul</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">li</span>></span>list item 1<span class="tag"></<span class="name">li</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">li</span>></span>list item 2</span>
<span class="line">    <span class="tag"><<span class="name">ul</span>></span></span>
<span class="line">      <span class="tag"><<span class="name">li</span>></span>list item 2-a<span class="tag"></<span class="name">li</span>></span></span>
<span class="line">      <span class="tag"><<span class="name">li</span>></span>list item 2-b<span class="tag"></<span class="name">li</span>></span></span>
<span class="line">    <span class="tag"></<span class="name">ul</span>></span></span>
<span class="line">  <span class="tag"></<span class="name">li</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">li</span>></span>list item 3<span class="tag"></<span class="name">li</span>></span></span>
<span class="line">  <span class="tag"><<span class="name">li</span>></span>list item 4<span class="tag"></<span class="name">li</span>></span></span>
<span class="line"><span class="tag"></<span class="name">ul</span>></span></span>

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">'li'</span>).has(<span class="string">'ul'</span>).css(<span class="string">'background-color'</span>, <span class="string">'red'</span>);</span>
  • $("SET").not(expr/ele/fn);

not参数

参数 描述
expr 一个选择器字符串
element 一个DOM元素
function(index) 一个用来检查集合中每个元素的函数。this是当前的元素

从p元素中删除带有 select 的ID的元素

HTML代码:

<span class="line">1</span>
<span class="line"><span class="tag"><<span class="name">p</span>></span>Hello<span class="tag"></<span class="name">p</span>></span><span class="tag"><<span class="name">p</span> <span class="attr">id</span>=<span class="string">"selected"</span>></span>Hello Again<span class="tag"></<span class="name">p</span>></span></span>

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"p"</span>).not( $(<span class="string">"#selected"</span>)[<span class="number">0</span>] );</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">p</span>></span>Hello<span class="tag"></<span class="name">p</span>></span> ]</span>
  • $("SET").slice(start, [end]);
参数 描述
start 开始选取子集的位置。第一个元素是0.如果是负数,则可以从集合的尾部开始选起
end 结束选取自己的位置,如果不指定,则就是本身的结尾

HTML代码:

<span class="line">1</span>
<span class="line"><span class="tag"><<span class="name">p</span>></span>Hello<span class="tag"></<span class="name">p</span>></span><span class="tag"><<span class="name">p</span>></span>cruel<span class="tag"></<span class="name">p</span>></span><span class="tag"><<span class="name">p</span>></span>World<span class="tag"></<span class="name">p</span>></span></span>

选择前两个p元素

jQuery 代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"p"</span>).slice(<span class="number">0</span>, <span class="number">2</span>).wrapInner(<span class="string">"<b></b>"</span>);</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">p</span>></span><span class="tag"><<span class="name">b</span>></span>Hello<span class="tag"></<span class="name">b</span>></span><span class="tag"></<span class="name">p</span>></span>,<span class="tag"><<span class="name">p</span>></span><span class="tag"><<span class="name">b</span>></span>cruel<span class="tag"></<span class="name">b</span>></span><span class="tag"></<span class="name">p</span>></span> ]</span>

只选取第二个p元素

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"p"</span>).slice(<span class="number">1</span>, <span class="number">2</span>).wrapInner(<span class="string">"<b></b>"</span>);</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">p</span>></span><span class="tag"><<span class="name">b</span>></span>cruel<span class="tag"></<span class="name">b</span>></span><span class="tag"></<span class="name">p</span>></span> ]</span>

只选取第二第三个p元素

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"p"</span>).slice(<span class="number">1</span>).wrapInner(<span class="string">"<b></b>"</span>);</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">p</span>></span><span class="tag"><<span class="name">b</span>></span>cruel<span class="tag"></<span class="name">b</span>></span><span class="tag"></<span class="name">p</span>></span>, <span class="tag"><<span class="name">p</span>></span><span class="tag"><<span class="name">b</span>></span>World<span class="tag"></<span class="name">b</span>></span><span class="tag"></<span class="name">p</span>></span> ]</span>

选取第最后一个p元素

jQuery代码:

<span class="line">1</span>
<span class="line">$(<span class="string">"p"</span>).slice(<span class="number">-1</span>).wrapInner(<span class="string">"<b></b>"</span>);</span>

结果:

<span class="line">1</span>
<span class="line">[ <span class="tag"><<span class="name">p</span>></span><span class="tag"><<span class="name">b</span>></span>World<span class="tag"></<span class="name">b</span>></span><span class="tag"></<span class="name">p</span>></span> ]</span>
admin
版权声明:本站原创文章,由admin2016-07-16发表,共计27084字。
转载提示:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)