jQuery 筛选方法
前言
在jQuery中所有的东西全部都包含在jQuery对象中，并没有单独的DOM元素这一说法。
要想获取单独的DOM元素请用[index]获取，下面介绍的所有方法都会返回新的jQuery对象，而不是单一的DOM元素。
获取方法
first()
获取jQuery对象中第一个DOM元素，返回一个新的jQuery对象。
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
"use strict";
let $elements = $("li").first();
console.log($elements[0].innerText); // 1
</script>
last()
获取jQuery对象中最后一个DOM元素，返回一个新的jQuery对象。
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
"use strict";
let $elements = $("li").last();
console.log($elements[0].innerText); // 3
</script>
eq(index)
根据索引值获取jQuery对象中的DOM元素，返回一个新的jQuery对象。
<body>
<ul>
<li>index 0</li>
<li>index 1</li>
<li>index 2</li>
<li>index 3</li>
</ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
"use strict";
let $elements = $("li").eq(1);
console.log($elements[0].innerText); // index 1
</script>
odd()
获取jQuery对象中索引为奇数的DOM元素，返回一个新的jQuery对象。
<body>
<ul>
<li>index 0</li>
<li>index 1</li>
<li>index 2</li>
<li>index 3</li>
</ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
"use strict";
let $elements = $("li").odd();
console.log($elements[0].innerText); // index 1
console.log($elements[1].innerText); // index 3
</script>
even()
获取jQuery对象中索引为偶数的DOM元素，返回一个新的jQuery对象。
<body>
<ul>
<li>index 0</li>
<li>index 1</li>
<li>index 2</li>
<li>index 3</li>
</ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
"use strict";
let $elements = $("li").even();
console.log($elements[0].innerText); // index 0
console.log($elements[1].innerText); // index 2
</script>
slice()
对jQuery对象根据索引进行切片操作，返回一个新的jQuery对象。
切片取头不去尾
<body>
<ul>
<li>index 0</li>
<li>index 1</li>
<li>index 2</li>
<li>index 3</li>
</ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
"use strict";
let $elements = $("li");
console.log($elements.slice(1,3));
// jQuery.fn.init(2) [li, li, prevObject: jQuery.fn.init(4)]
// index 1 index 2
</script>
增加方法
add()
将一个jQuery对象中的DOM元素与另一个jQuery对象中的DOM元素进行合并，返回一个新的jQuery对象
<body>
<ul>
<li>1</li>
<li class="del">2</li>
<li>3</li>
<div>add</div>
<div>add</div>
<div>add</div>
</ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
"use strict";
let $elements = $("li");
console.log($elements.length); // 3
let $new_elements = $elements.add($("div"));
console.log($new_elements.length); // 6
</script>
删除方法
not()
删除与指定表达式匹配的DOM元素，返回一个新的jQuery对象。
<body>
<ul>
<li>1</li>
<li class="del">2</li>
<li>3</li>
</ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
"use strict";
let $elements = $("li");
console.log($elements.length); // 3
$new_elements = $elements.not($(".del"));
console.log($new_elements.length); // 2
</script>
检测方法
is()
检测一个元素是否存在于另一个jQuery对象中，返回boolean类型。
<body>
<ul>
<li>1</li>
<li class="show">2</li>
<li>3</li>
</ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
"use strict";
let $elements = $("li");
let $li = $("li.show");
let result = $li.is($elements);
console.log(result); // true
</script>
has()
检测一个元素是否包含另一个元素，如果包含则返回一个新的jQuery对象，该jQuery对象中存有被检测的DOM元素。
以下示例将演示如果一个<div>中包含<span>则该<div>的背景色变为红色。
<body>
<div>无</div>
<div><span>有</span></div>
<div>无</div>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
"use strict";
$("div").has("span").css("background-color","red");
</script>
遍历方法
filter()
过滤筛选出与指定表达式匹配的元素集合，返回一个新的jQuery对象。
条件为true的元素会添加到新的jQuery对象中，为false则忽略
与
Array的filter()相似，但是回调函数的参数有差别
| 参数位置 | 传递值 |
|---|---|
| 参数1 | Array.prototype.filter()为元素本身，$.prototype.filter()为索引值 |
| 参数2 | Array.prototype.filter()为索引值，$.prototype.filter()为元素本身 |
| 参数3 | Array.prototype.filter()为被操纵对象，$.prototype.filter()无此参数 |
<body>
<ul>
<li>1</li>
<li class="show">2</li>
<li>3</li>
</ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
"use strict";
let $elements = $("li");
let $new_elements = $elements.filter((index, ele) => {
return ele.classList.contains("show"); // ele是DOM元素
});
console.log($new_elements);
// jQuery.fn.init [li.show, prevObject: jQuery.fn.init(3)]
</script>
map()
对一个jQuery对象中的元素进行挨个操作，并返回一个新的jQuery对象。
以下示例将展示使用map()将jQuery对象中的元素innerHTML改为"一致"
与
Array的map()相似，但是回调函数的参数上有差别
| 参数位置 | 传递值 |
|---|---|
| 参数1 | Array.prototype.map()为元素本身，$.prototype.map()为索引值 |
| 参数2 | Array.prototype.map()为索引值，$.prototype.map()为元素本身 |
| 参数3 | Array.prototype.map()为被操纵对象，$.prototype.map()无此参数 |
<script>
"use strict";
let $eleDivList = $("div");
let $newDivList = $eleDivList.map((index, ele) => {
ele.innerHTML = "一致";
});
console.log($newDivList);
// jQuery.fn.init [prevObject: jQuery.fn.init(4)]
</script>
each()
对一个jQuery对象中的元素进行挨个操作,效果与map()相同，但无返回值。
以下示例将展示使用each()将jQuery对象中的元素innerHTML改为"一致"
与
Array的forEach()相似，但是回调函数的参数有差别
| 参数位置 | 传递值 |
|---|---|
| 参数1 | Array.prototype.forEach()为元素本身，$.prototype.each()为索引值 |
| 参数2 | Array.prototype.forEach()为索引值，$.prototype.each()为元素本身 |
| 参数3 | Array.prototype.forEach()为被操纵对象，$.prototype.each()无此参数 |
<body>
<div>1-</div>
<div>2-</div>
<div>3-</div>
<div>4-</div>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
"use strict";
let $eleDivList = $("div");
let $newDivList = $eleDivList.each((index, ele) => {
ele.innerHTML = "一致";
});
</script>
关系获取
children()
获取其子代元素，返回一个新的jQuery对象
如下示例将展示如何获得li.me标签。
<body>
<ul style="list-style: none;">
<li>1-1</li>
<li>1-2</li>
<li>1-3</li>
<li>
<ol style="list-style: none;">
<li>2-1</li>
<li class="me">2-2</li>
<li>2-3</li>
</ol>
</li>
</ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
"use strict";
let $ul = $("ul");
let $ele = $ul.children("li").children("ol").children("li.me");
console.log($ele);
// jQuery.fn.init [li.me, prevObject: jQuery.fn.init(1)]
</script>
find()
获取其后代元素，返回一个新的jQuery对象
如下示例将展示如何获得li.me标签。
<body>
<ul style="list-style: none;">
<li>1-1</li>
<li>1-2</li>
<li>1-3</li>
<li>
<ol style="list-style: none;">
<li>2-1</li>
<li class="me">2-2</li>
<li>2-3</li>
</ol>
</li>
</ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
"use strict";
let $ul = $("ul");
let $ele = $ul.find("li.me");
console.log($ele);
// jQuery.fn.init [li.me, prevObject: jQuery.fn.init(1)]
</script>
parent()
获取其父级元素，返回一个新的jQuery对象
<body>
<ul style="list-style: none;">
<li>1-1</li>
<li>1-2</li>
<li>1-3</li>
<li>
<ol style="list-style: none;">
<li>2-1</li>
<li class="me">2-2</li>
<li>2-3</li>
</ol>
</li>
</ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
"use strict";
let $ele = $("li.me");
console.log($ele.parent());
// jQuery.fn.init [ol, prevObject: jQuery.fn.init(1)]
</script>
parents()
获取其祖先元素，返回一个新的jQuery对象
<body>
<ul style="list-style: none;">
<li>1-1</li>
<li>1-2</li>
<li>1-3</li>
<li>
<ol style="list-style: none;">
<li>2-1</li>
<li class="me">2-2</li>
<li>2-3</li>
</ol>
</li>
</ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
"use strict";
let $ele = $("li.me");
console.log($ele.parents());
// jQuery.fn.init(5) [ol, li, ul, body, html, prevObject: jQuery.fn.init(1)]
</script>
parentsUntil()
从当前对象开始，查找直系祖先级的所有标签，直到指定的祖先标签结束，返回一个新的jQuery对象
不取头，不取尾
相当于孙子问爷爷的爷爷，你的后代除了我还有谁。
<body>
<main class="taiye">
<div class="yeye">
<section class="baba">
<article class="erzi">
<span class="sunzi"></span>
</article>
</section>
</div>
</main>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
"use strict";
let $sunzi = $(".sunzi");
console.log($sunzi.parentsUntil(".taiye"));
// 孙子问太爷，你的后代除了我还有谁。
// jQuery.fn.init(3) [article.erzi, section.baba, div.yeye, prevObject: jQuery.fn.init(1)]
</script>
closest()
查找最近的符合选择器的祖先元素（包括自身），返回一个新的jQuery对象
找祖先，看最近的祖先能不能被选择器选中，如果不能继续向上找。
这与
JavaScript中的closest()方法基本相同，但Js中返回的是单个DOM元素，而jQ中返回一个jQuery对象。
<body>
<main class="show">
<div class="hidden">
<article class="float"></article>
</div>
</main>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
"use strict";
let $floatEle = $(".float");
console.log($floatEle.closest(".show"));
// jQuery.fn.init [main.show, prevObject: jQuery.fn.init(1)]
</script>
prev()
获取当前元素同级中的前一个元素，返回一个新的jQuery对象
<body>
<ul style="list-style: none;">
<li class="prev">1</li>
<li class="me">2</li class="me">
<li class="next">3</li>
</ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
"use strict";
let $me = $("li.me");
console.log($me.prev());
// [li.prev, prevObject: jQuery.fn.init(1)]
</script>
prevAll()
获取当前元素同级里排在前面的所有元素，返回一个新的jQuery对象
<body>
<ul style="list-style: none;">
<div></div>
<article></article>
<li class="prev">1</li>
<li class="me">2</li class="me">
<li class="next">3</li>
</ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
"use strict";
let $me = $("li.me");
console.log($me.prevAll());
// jQuery.fn.init(3) [li.prev, article, div, prevObject: jQuery.fn.init(1)]
</script>
prevUntil()
从当前对象开始，查找同级向前的所有标签，直到指定标签结束，返回一个新的jQuery对象
不取头，不取尾
相当于弟弟问某一个哥哥，你的其他弟弟是谁
<body>
<ul style="list-style: none;">
<li>大哥</li>
<li>二弟</li>
<li>三弟</li>
<li>四弟</li>
<li>五弟</li>
<li>六弟</li>
<li>七弟</li>
</ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
"use strict";
let $qidi = $("li:contains(七弟)");
console.log($qidi.prevUntil("li:contains(大哥)").text());
// 六弟 五弟 四弟 三弟 二弟
</script>
next()
获取当前元素同级中紧跟其后的一个元素，返回一个新的jQuery对象
<body>
<ul style="list-style: none;">
<li class="prev">1</li>
<li class="me">2</li class="me">
<li class="next">3</li>
</ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
"use strict";
let $me = $("li.me");
console.log($me.next());
// jQuery.fn.init [li.next, prevObject: jQuery.fn.init(1)]
</script>
nextAll()
获取当前元素同级里排在后面的所有元素，返回一个新的jQuery对象
<body>
<ul style="list-style: none;">
<li class="prev">1</li>
<li class="me">2</li class="me">
<li class="next">3</li>
<div></div>
<article></article>
</ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
"use strict";
let $me = $("li.me");
console.log($me.nextAll());
// jQuery.fn.init(3) [li.next, div, article, prevObject: jQuery.fn.init(1)]
</script>
nextUntil()
从当前对象开始，查找同级向后的所有标签，直到指定标签结束，返回一个新的jQuery对象
不取头，不取尾
相当于哥哥问某一个弟弟，你的其他哥哥是谁
<body>
<ul style="list-style: none;">
<li>大哥</li>
<li>二哥</li>
<li>三哥</li>
<li>四哥</li>
<li>五哥</li>
<li>六哥</li>
<li>七弟</li>
</ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
"use strict";
let $dage = $("li:contains(大哥)");
console.log($dage.nextUntil("li:contains(七弟)").text());
// 二哥 三哥 四哥 五哥 六哥
</script>
siblings()
获取当前对象的所有其他同级标签（不包含自身）
body>
<ul style="list-style: none;">
<li>大哥</li>
<li>二哥</li>
<li>三哥</li>
<li>我</li>
<li>五弟</li>
<li>六弟</li>
<li>七弟</li>
</ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
"use strict";
let $me = $("li:contains(我)");
console.log($me.siblings().text());
// 大哥 二哥 三哥 五弟 六弟 七弟
</script>
定位关系
offsetParent()
第一个匹配出元素用于定位的父节点元素将会添加至新的jQuery对象中并返回。
<body>
<ul style="list-style: none;">
<li style="position: absolute;">1</li>
<!-- ul未设置定位，以<html>为参照 -->
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
"use strict";
let $start = $("li:contains(1)");
console.log($start.offsetParent()[0].nodeName);
// HTML
</script>
其他方法
andSelf()
将先前一次所选择的jQuery对象与最近一次所选择的jQuery对象中的元素进行合并，返回一个新的jQuery对象。
对于筛选或查找后的元素，要加入先前所选元素时将会很有用。
以下示例将展示选取所有<div>以及内部的<p>，并加上border类
<body>
<div>
<p>First Paragraph</p>
<p>Second Paragraph</p>
</div>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
"use strict";
$("div").find("p").andSelf().addClass("border");
</script>
结果如下
<div class="border">
<p class="border">First Paragraph</p>
<p class="border">Second Paragraph</p>
</div>
contents()
查找匹配元素内部所有的子节点（包括文本节点）。如果元素是一个<iframe>，则查找文档内容
<body>
<span>帅哥</span>
<span>美女</span>
<span>丑八怪</span>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
"use strict";
let result = $("span").contents();
console.log(result);
// jQuery.fn.init(3) [text, text, text, prevObject: jQuery.fn.init(3)]
</script>
end()
对jQuery对象进行回溯，当我们操作完一组jQuery对象中的元素后又想拿到操作之前的原本jQuery对象就可使用此方法。
以下示例将展示使用end()选取所有的<p>元素，查找并将<span>子元素颜色，然后再回过来选取<p>元素
<body>
<p><span>Hello</span>,how are you?</p>
</body>
<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>
<script>
"use strict";
console.log($("p").find("span").css("color","red").end())
// jQuery.fn.init [p, prevObject: jQuery.fn.init(1)]
</script>
jQuery 筛选方法的更多相关文章
- jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法
jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...
- JQuery框架2.位置属性|筛选方法|事件
1.位置属性 jquery的css position获取匹配元素相对父元素的偏移位置:offset获取匹配元素在当前视口的相对偏移,返回的对象包含两个整型属性:top 和 left $("p ...
- 前端开发之jQuery位置属性和筛选方法
主要内容: 1.jQuery的位置属性及实例 (1)位置属性 (2)实例 --- 仿淘宝导航栏 2.jQuery的筛选方法及实例 (1)筛选方法 (2)实例一:嵌套选项卡 (3)实例二:小米官网滑动 ...
- JQuery的筛选方法
前面咱们学习到了jquery的选择器的筛选用法,那么咱们接下来学习一下jquery的常用筛选方法,一张图搞定一切.
- jQuery三——筛选方法、事件
一.jquery常用筛选方法 以下为jquery的常用筛选方法: 代码示例如下: <!DOCTYPE html> <html lang="en"> < ...
- jQuery -- is() 方法
定义和用法: 根据选择器.DOM元素或 jQuery 对象来检测匹配元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true.如果没有元素符合,或者表达式无效,都返回'false'. ''' ...
- 先说一下JS的获取方法，其要比JQUERY的方法麻烦很多，后面以JQUERY的方法作对比。
先说一下JS的获取方法,其要比JQUERY的方法麻烦很多,后面以JQUERY的方法作对比. JS的方法会比JQUERY麻烦很多,主要则是因为FF浏览器,FF浏览器会把你的换行也当最DOM元素 复制代码 ...
- jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法
一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...
- jQuery 事件方法大全-超全的总结
jquery经常使用的事件: /* on off hover blur change click dblclick focus ...
随机推荐
- 深入理解Spring AOP 1.0
本文相关代码(来自官方源码spring-test模块)请参见spring-demysify org.springframework.mylearntest包下. 统称能够实现AOP的语言为AOL,即( ...
- AI大厂算法测试心得：人脸识别关键指标有哪些？
仅仅在几年前,程序员要开发一款人脸识别应用,就必须精通算法的编写.但现在,随着成熟算法的对外开放,越来越多开发者只需专注于开发垂直行业的产品即可. 由调查机构发布的<中国AI产业地图研究> ...
- Spring Cloud系列之使用Feign进行服务调用
在上一章的学习中,我们知道了微服务的基本概念,知道怎么基于Ribbon+restTemplate的方式实现服务调用,接着上篇博客,我们学习怎么基于Feign实现服务调用,请先学习上篇博客,然后再学习本 ...
- 安装 kreas 2.2.4 版本问题
python 版本 3.6 不要使用 3.7 和 3.8 否则导致安装失败 tensorflow 使用 1.12.0 keras 使用 2.2.4 版本 pip install 包名 -i http: ...
- Jmeter 中 CSV 如何参数化测试数据并实现自动断言
当我们使用Jmeter工具进行接口测试,可利用CSV Data Set Config配置元件,对测试数据进行参数化,循环读取csv文档中每一行测试用例数据,来实现接口自动化.此种情况下,很多测试工程师 ...
- PHP imagecolorallocatealpha - 为一幅图像分配颜色和透明度
imagecolorallocatealpha — 为一幅图像分配颜色和透明度.高佣联盟 www.cgewang.com 语法 int imagecolorallocatealpha ( resour ...
- EC R 86 D Multiple Testcases 构造 贪心 二分
LINK:Multiple Testcases 得到很多种做法.其中O(n)的做法值得一提. 容易想到二分答案 check的时候发现不太清楚分配的策略. 需要先考虑如何分配 容易发现大的东西会对小的产 ...
- 4.26 ABC F I hate Matrix Construction 二进制拆位 构造 最大匹配
LINK:I hate Matrix Construction 心情如题目名称. 主要说明一下构造的正确性. 准确来说这道题困扰我很久. 容易发现可以拆位构造. 这样题目中的条件也比较容易使用. 最后 ...
- java开发-flyway
数据库版本管理工具 什么是数据库版本管理? 做过开发的小伙伴们都知道,实现一个需求时,一般情况下都需要设计到数据库表结构的修改.那么我们怎么能保证项目多人开发时,多个数据库环境(测试,生产环境)能够保 ...
- Ubuntu16.04忘记用户登录密码以及管理员密码，重置密码的解决方案
1. 问题现象: 密码遗忘 2. 问题原因 问题原因,搞不懂,只是修改了/etc/shadow和/etc/sudoers这俩文件 3. 解决方案 在系统开机前常按shift键进入grub界面,如下: ...