• 为了保证你在浏览本网站时有着更好的体验,建议使用类似Chrome、Firefox之类的浏览器~~
    • 如果你喜欢本站的内容何不Ctrl+D收藏一下呢,与大家一起分享各种编程知识~
    • 本网站研究机器学习、计算机视觉、模式识别~当然不局限于此,生命在于折腾,何不年轻时多折腾一下

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

web admin 3年前 (2016-07-16) 1358次浏览 0个评论 扫描二维码

 

jquery-selectors-02

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 代码:

1
2
<p>This is just a test.</p>
<p>So is this</p>

jQuery 代码:

1
$("p").eq(1);

结果:

1
[ <p> So is this</p> ]

获取匹配的第二个元素

HTML 代码:

1
2
<p>This is just a test.</p>
<p> So is this</p>

jQuery 代码:

1
$("p").eq(-2);

结果:

1
[ <p> This is just a test.</p> ]
  • $("SET").first();

获取匹配的第一个元素

HTML 代码:

1
2
3
4
5
6
7
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

jQuery 代码:

1
$('li').first();

结果:

1
[ <li>list item 1</li> ]
  • $("SET").last();

获取匹配的最后个元素

HTML 代码:

1
2
3
4
5
6
7
<ul>
    <li>list item 1</li>
    <li>list item 2</li>
    <li>list item 3</li>
    <li>list item 4</li>
    <li>list item 5</li>
</ul>

jQuery 代码:

1
$('li').last();

结果:

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

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

HTML 代码:

1
<div class="protected"></div><div></div>

jQuery 代码:

1
2
3
4
5
6
7
8
9
$("div").click(function(){
  if ( $(this).hasClass("protected") )
    $(this)
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: -10 })
      .animate({ left: 10 })
      .animate({ left: 0 });
});
  • $("SET").filter(expr|obj|ele|fn);

filter 参数说明

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

保留带有 select 类的元素

HTML 代码:

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

jQuery 代码:

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

结果:

1
[ <p class="selected">And Again</p> ]

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

HTML 代码:

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

jQuery 代码:

1
$("p").filter(".selected, :first");

结果:

1
[ <p>Hello</p>, <p class="selected">And Again</p> ]

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

HTML 代码:

1
<p><ol><li>Hello</li></ol></p><p>How are you?</p>

jQuery 代码:

1
2
3
$("p").filter(function(index) {
  return $("ol", this).length == 0;
});

结果:

1
[ <p>How are you?</p> ]
  • $("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 代码:

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

jQuery 代码:

1
$("input[type='checkbox']").parent().is("form");

结果:

1
true
  • $("SET").has(expr|ele);

给含有 ul 的 li 加上背景色

HTML 代码:

1
2
3
4
5
6
7
8
9
10
11
<ul>
  <li>list item 1</li>
  <li>list item 2
    <ul>
      <li>list item 2-a</li>
      <li>list item 2-b</li>
    </ul>
  </li>
  <li>list item 3</li>
  <li>list item 4</li>
</ul>

jQuery 代码:

1
$('li').has('ul').css('background-color', 'red');
  • $("SET").not(expr/ele/fn);

not 参数

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

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

HTML 代码:

1
<p>Hello</p><p id="selected">Hello Again</p>

jQuery 代码:

1
$("p").not( $("#selected")[0] );

结果:

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

HTML 代码:

1
<p>Hello</p><p>cruel</p><p>World</p>

选择前两个 p 元素

jQuery 代码:

1
$("p").slice(0, 2).wrapInner("<b></b>");

结果:

1
[ <p><b>Hello</b></p>,<p><b>cruel</b></p> ]

只选取第二个 p 元素

jQuery 代码:

1
$("p").slice(1, 2).wrapInner("<b></b>");

结果:

1
[ <p><b>cruel</b></p> ]

只选取第二第三个 p 元素

jQuery 代码:

1
$("p").slice(1).wrapInner("<b></b>");

结果:

1
[ <p><b>cruel</b></p>, <p><b>World</b></p> ]

选取第最后一个 p 元素

jQuery 代码:

1
$("p").slice(-1).wrapInner("<b></b>");

结果:

1
[ <p><b>World</b></p> ]

Deeplearn, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明前端开发利器 jQuery-筛选器之过滤
喜欢 (1)
admin
关于作者:
互联网行业码农一枚/业余铲屎官/数码影音爱好者/二次元

您必须 登录 才能发表评论!