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

前端开发利器jQuery-筛选器之查找

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

 

jquery-selectors-02

jQuery 筛选器之查找

筛选器 描述
$("SET").children([expr]); 取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合
$("SET").find(expr/obj/ele); 搜索所有与指定表达式匹配的元素
$("SET").closest(expr/object/element); 从元素本身开始,逐级向上级元素匹配,并返回最先匹配的元素
$("SET").next([expr]); 取得一个包含匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合
$("SET").nextAll([expr]); 查找当前元素之后所有的同辈元素
$("SET").nextUntil([exp/ele][,fil]); 查找当前元素之后所有的同辈元素,直到遇到匹配的那个元素为止
$("SET").offsetParent(); 返回第一个匹配元素用于定位的父节点
$("SET").parent([expr]); 取得一个包含着所有匹配元素的唯一父元素的元素集合
$("SET").parents([expr]); 取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。
$("SET").parentsUntil([expr/element][,filter]); 查找当前元素的所有的父辈元素,直到遇到匹配的那个元素为止
$("SET").prev([expr]); 取得一个包含匹配的元素集合中每一个元素紧邻的前一个同辈元素的元素集合
$("SET").prevAll([expr]); 查找当前元素之前所有的同辈元素
$("SET").prevUntil([exp/ele][,fil]); 查找当前元素之前所有的同辈元素,直到遇到匹配的那个元素为止
$("SET").siblings([expr]); 取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

jQuery 筛选器之查找示例

  • $("SET").children([expr]);

可以通过可选的表达式来过滤所匹配的子元素。注意:parents()将查找所有祖辈元素,而 children()只考虑子元素而不考虑所有后代元素。

参数 描述
expr 用以过滤子元素的表达式

查找 DIV 中的每个子元素。

HTML 代码:

1
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代码:

1
$("div").children();

结果:

1
[ <span>Hello Again</span> ]

在每个 div 中查找 .selected 的类。

HTML 代码:

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

jQuery 代码:

1
$("div").children(".selected");

结果:

1
[ <p class="selected">Hello Again</p> ]
  • $("SET").find(expr/obj/ele);

这个函数是找出正在处理的元素的后代元素的好方法,所有搜索都依靠 jQuery 表达式来完成。这个表达式可以使用 CSS1-3 的选择器语法来写。

参数 描述
expr 用于查找的表达式
jQuery object 一个用于匹配元素的 jQuery 对象
element 一个 DOM 元素

从所有的段落开始,进一步搜索下面的 span 元素。与$("p span");相同。

HTML 代码:

1
<p><span>Hello</span>, how are you?</p>

jQuery 代码:

1
$("p").find("span");

结果:

1
[ <span>Hello</span> ]
  • $("SET").closest(expr/object/element);

closest 会首先检查当前元素是否匹配,如果匹配则直接返回元素本身。如果不匹配则向上查找父元素,一层一层往上,直到找到匹配选择器的元素。如果什么都没找到则返回一个空的 jQuery 对象。closest 对于处理事件委托非常有用。

参数 描述
expr 用以过滤元素的表达式。
jQuery object 一个用于匹配元素的 jQuery 对象
element 一个用于匹配元素的 DOM 元素

展示如何使用 clostest 查找多个元素

HTML 代码:

1
<ul><li></li><li></li></ul>

jQuery 代码:

1
$("li:first").closest(["ul", "body"]);

结果:

1
[ul, body]

展示如何使用 clostest 来完成事件委托。

HTML 代码:

1
2
3
4
<ul>
    <li><b>Click me!</b></li>
    <li>You can also <b>Click me!</b></li>
</ul>

jQuery 代码:

1
2
3
$(document).bind("click", function (e) {
    $(e.target).closest("li").toggleClass("hilight");
});
  • $("SET").next([expr]);

这个函数只返回后面那个紧邻的同辈元素,而不是后面所有的同辈元素(可以使用 nextAll)。可以用一个可选的表达式进行筛选。

参数 描述
expr 用于筛选的表达式

找到每个段落的后面紧邻的同辈元素

HTML 代码:

1
<p>Hello</p><p>Hello Again</p><div><span>And Again</span></div>

jQuery 代码:

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

结果:

1
[ <p>Hello Again</p>, <div><span>And Again</span></div> ]

找到每个段落的后面紧邻的同辈元素中类名为 selected 的元素。

HTML 代码:

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

jQuery 代码:

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

结果:

1
[ <p class="selected">Hello Again</p> ]
  • $("SET").nextAll([expr]);
属性 描述
expr 用来过滤的表达式

给第一个 div 之后的所有元素加个类

HTML 代码:

1
<div></div><div></div><div></div><div></div>

jQuery 代码:

1
$("div:first").nextAll().addClass("after");

结果:

1
[ <div class="after"></div>, <div class="after"></div>, <div class="after"></div> ]
  • $("SET").nextUntil([exp|ele][,fil]);

如果提供的 jQuery 代表了一组 DOM 元素,.nextUntil()方法也能让我们找遍所有元素所在的 DOM 树,直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个新 jQuery 对象里包含了下面所有找到的同辈元素,但不包括那个选择器匹配到的元素。

如果没有选择器匹配到,或者没有提供参数,那么跟在后面的所有同辈元素都会被选中。这就跟用没有提供参数的.nextAll()效果一样。

[expr][,filter]

  • expr: 用于筛选祖先元素的表达式
  • filter: 一个字符串,其中包含一个选择表达式匹配元素|

[element][,filter]

  • element: 用于筛选祖先元素的 DOM 元素。
  • filter: 一个字符串,其中包含一个选择表达式匹配元素。

#term-2后面直到 dt 前的元素加上红色背景

HTML 代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<dl>
  <dt>term 1</dt>
  <dd>definition 1-a</dd>
  <dd>definition 1-b</dd>
  <dd>definition 1-c</dd>
  <dd>definition 1-d</dd>

  <dt id="term-2">term 2</dt>
  <dd>definition 2-a</dd>
  <dd>definition 2-b</dd>
  <dd>definition 2-c</dd>

  <dt>term 3</dt>
  <dd>definition 3-a</dd>
  <dd>definition 3-b</dd>
</dl>

jQuery 代码:

1
2
3
4
$('#term-2').nextUntil('dt').css('background-color', 'red');

var term3 = document.getElementById("term-3");
$("#term-1").nextUntil(term3, "dd").css("color", "green");
  • $("SET").offsetParent();

这返回父元素中第一个其 position 设为 relative 或者 absolute 的元素。此方法仅对可见元素有效。

设置最近的祖先定位元素的背景颜色

HTML 代码:

1
2
3
4
5
6
<div style="width:70%;position:absolute;left:100px;top:100px">
  <div style="margin:50px;background-color:yellow">
     <p>点击下面的按钮可以设置本段落的最近的父(祖先)元素的背景色。</p>
   <div>
</div>
<button>点击这里</button>

jQuery 代码:

1
2
3
$("button").click(function(){
    $("p").offsetParent().css("background-color","red");
});
  • $("SET").parent([expr]);
参数 描述
expr 用来筛选的表达式

查找每个段落的父元素

HTML 代码:

1
<div><p>Hello</p><p>Hello</p></div>

jQuery 代码:

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

结果:

1
[ <div><p>Hello</p><p>Hello</p></div>]

查找段落的父元素中每个类名为 selected 的父元素。

HTML 代码:

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

jQuery 代码:

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

结果:

1
[ <div class="selected"><p>Hello Again</p></div> ]
  • $("SET").parents([expr]);
参数 描述
expr 用于筛选祖先元素的表达式

找到每个 span 元素的所有祖先元素。

HTML 代码:

1
<html><body><div><p><span>Hello</span></p><span>Hello Again</span></div></body></html>

jQuery 代码:

1
$("span").parents();

找到每个 span 的所有是 p 元素的祖先元素。

jQuery 代码:

1
$("span").parents("p");
  • $("SET").parentsUntil([expr/element][,filter]);

如果提供的 jQuery 代表了一组 DOM 元素,.parentsUntil()方法也能让我们找遍所有元素的祖先元素,直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个返回的 jQuery 对象里包含了下面所有找到的父辈元素,但不包括那个选择器匹配到的元素。

[expr][,filter]

  • expr: 用于筛选祖先元素的表达式
  • filter: 一个字符串,其中包含一个选择表达式匹配元素。

[element][,filter]

  • element: 用于筛选祖先元素的 DOM 元素
  • filter: 一个字符串,其中包含一个选择表达式匹配元素。

查找 item-a 的祖先,但不包括 level-1

HTML 代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

jQuery 代码:

1
$('li.item-a').parentsUntil('.level-1').css('background-color', 'red');
  • $("SET").prev([expr]);

可以用一个可选的表达式进行筛选。只有紧邻的同辈元素会被匹配到,而不是前面所有的同辈元素

属性 描述
expr 用于筛选前一个同辈元素的表达式

找到每个段落紧邻的前一个同辈元素。

HTML 代码:

1
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代码:

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

结果:

1
[ <div><span>Hello Again</span></div> ]

找到每个段落紧邻的前一个同辈元素中类名为 selected 的元素。

HTML 代码:

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

jQuery 代码:

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

结果:

1
[ <p class="selected">Hello Again</p> ]
  • $("SET").prevAll([expr]);
属性 描述
expr 用于过滤的表达式

给最后一个之前的所有 div 加上一个类

HTML 代码:

1
<div></div><div></div><div></div><div></div>

jQuery 代码:

1
$("div:last").prevAll().addClass("before");

结果:

1
[ <div class="before"></div>, <div class="before"></div>, <div class="before"></div> ]
  • $("SET").prevUntil([exp/ele][,fil]);

如果提供的 jQuery 代表了一组 DOM 元素,.prevUntil()方法也能让我们找遍所有元素所在的 DOM 树,直到遇到了一个跟提供的参数匹配的元素的时候才会停下来。这个新 jQuery 对象里包含了前面所有找到的同辈元素,但不包括那个选择器匹配到的元素。

如果没有选择器匹配到,或者没有提供参数,那么排在前面的所有同辈元素都会被选中。这就跟用没有提供参数的.prevAll()效果一样。

[expr][,filter]

  • expr: 用于筛选祖先元素的表达式
  • filter: 一个字符串,其中包含一个选择表达式匹配元素。

[element][,filter]

  • element: 用于筛选祖先元素的 DOM 元素
  • filter: 一个字符串,其中包含一个选择表达式匹配元素。

#term-2前面直到 dt 前的元素加上红色背景

HTML 代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<dl>
  <dt>term 1</dt>
  <dd>definition 1-a</dd>
  <dd>definition 1-b</dd>
  <dd>definition 1-c</dd>
  <dd>definition 1-d</dd>

  <dt id="term-2">term 2</dt>
  <dd>definition 2-a</dd>
  <dd>definition 2-b</dd>
  <dd>definition 2-c</dd>

  <dt>term 3</dt>
  <dd>definition 3-a</dd>
  <dd>definition 3-b</dd>
</dl>

jQuery 代码:

1
$('#term-2').prevUntil('dt').css('background-color', 'red');
  • $("SET").siblings([expr]);

找到每个 div 的所有同辈元素。

HTML 代码:

1
<p>Hello</p><div><span>Hello Again</span></div><p>And Again</p>

jQuery 代码:

1
$("div").siblings();

结果:

1
[ <p>Hello</p>, <p>And Again</p> ]

找到每个 div 的所有同辈元素中带有类名为 selected 的元素。

HTML 代码:

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

jQuery 代码:

1
$("div").siblings(".selected");

结果:

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

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

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