jQuery筛选&文档处理

最新推荐文章于 2024-09-14 19:44:09 发布

绥彼岸

最新推荐文章于 2024-09-14 19:44:09 发布

阅读量1k

点赞数 3

分类专栏：笔记文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/qq_62217605/article/details/123563799

版权

笔记专栏收录该内容

50 篇文章 0 订阅

订阅专栏

jQuery筛选&文档处理

筛选：
- 过滤：
- 查找：
文档处理：

筛选：

过滤：

1.first()：获取第一个元素

2.last()：获取最后个元素

3.eq(index|-index)：获取当前链式操作中第N个jQuery对象，返回jQuery对象

使用eq时，当参数大于等于0时为正向选取，比如0代表第一个，1代表第二个。当参数为负数时为反向选取，比如-1为倒数第一个

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

5.has(expr|ele)：筛选出包含特定特点的元素的集合

6.not(expr|ele|fn)：筛选出不包含特定特点的元素的集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<ul id="u1">
    <li id="l1">list item 1</li>
    <li id="l2">list item 2</li>
    <li id="l3">list item 3</li>
    <li id="l4">list item 4</li>
    <li id="l5">list item 5</li>
</ul>
<ul id="u2"></ul>
<script>
    //获取匹配的第一个元素
    console.log($('li').first());
    //获取最后个元素
    console.log($('li').last());
    //获取当前链式操作中第N个jQuery对象，返回jQuery对象
    console.log($("li").eq(1));
    console.log($("li").eq(-2));
    //筛选出与指定表达式匹配的元素集合
    console.log($("li").filter("#l3"));
    //筛选出包含特定特点的元素的集合
    console.log($("ul").has("li"));
    //筛选出不包含特定特点的元素的集合
    console.log($("li").not("#l1"));
</script>
</body>
</html>

效果如下（页面放大200%）：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DMBlW3Wt-1647531535042)(C:\Users\zjjt\AppData\Roaming\Typora\typora-user-images\image-20220317230005492.png)]$

查找：

1.children([expr])：取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合（子标签找）

2.find(expr|obj|ele)：搜索所有与指定表达式匹配的元素（后代标签找）

3.parent([expr])：取得一个包含着所有匹配元素的唯一父元素的元素集合

4.prevAll([expr])：查找当前元素之前所有的同辈元素

5.nextAll([expr])：查找当前元素之后所有的同辈元素

6.siblings([expr])：取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<ul id="u1">
    <li id="l1">list item 1</li>
    <li id="l2">list item 2</li>
    <li id="l3"><p id="p1">list item 3</p></li>
    <li id="l4">list item 4</li>
    <li id="l5">list item 5</li>
</ul>
<ul id="u2"></ul>
<script>
    //取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合（子标签找）
    console.log($("ul").children());
    //搜索所有与指定表达式匹配的元素（后代标签找）
    console.log($("ul").find("p"));
    //取得一个包含着所有匹配元素的唯一父元素的元素集合
    console.log($("li").parent());
    //查找当前元素之前所有的同辈元素
    console.log($("#l3").prevAll());
    //查找当前元素之后所有的同辈元素
    console.log($("#l3").nextAll());
    //取得一个包含匹配的元素集合中每一个元素的所有唯一同辈元素的元素集合
    console.log($("#l3").siblings());
</script>
</body>
</html>

效果如下（页面放大200%）：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9va93DrV-1647531535056)(C:\Users\zjjt\AppData\Roaming\Typora\typora-user-images\image-20220317230927671.png)]$

文档处理：

增加：

内部插入：

1.append(content|fn)：向每个匹配的元素内部追加内容

2.appendTo(content)：把所有匹配的元素追加到另一个指定的元素元素集合中

3.prepend(content)：向每个匹配的元素内部前置内容

4.prependTo(content)：把所有匹配的元素前置到另一个、指定的元素元素集合中

外部插入：

1.after(content|fn)：在每个匹配的元素之后插入内容

2.before(content|fn)：在每个匹配的元素之前插入内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<p>I would like to say: </p>
<div id="d1">1</div> <div id="d2">2</div>
<script>
    //向每个匹配的元素内部追加内容
    $("p").append("<b>Hello World</b>");
    //把所有匹配的元素追加到另一个指定的元素元素集合中
    $("p").appendTo("div");
    //向每个匹配的元素内部前置内容
    $("p").prepend("<s>Hello World</s>");
    //把所有匹配的元素前置到另一个、指定的元素元素集合中
    $("p").prependTo("#d2");
    //在每个匹配的元素之后插入内容
    $("p").after("<i>Hello World</i> <br>");
    //在每个匹配的元素之前插入内容
    $("p").before("<u>Hello World</u> <br>");
</script>
</body>
</html>

效果如下（页面放大200%）：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EOtXVRCv-1647531535057)(C:\Users\zjjt\AppData\Roaming\Typora\typora-user-images\image-20220317232609498.png)]$

删除：

1.empty()：删除匹配的元素集合中所有的子节点（不包括匹配的元素）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<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>
<p>Hello World</p>
<script>
    //删除匹配的元素集合中所有的子节点（不包括匹配的元素）
    $("li").empty();
</script>
</body>
</html>

效果如下（页面放大200%）：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MLZ3f7mF-1647531535059)(C:\Users\zjjt\AppData\Roaming\Typora\typora-user-images\image-20220317233354107.png)]$

2.remove([expr])：从DOM中删除所有匹配的元素（包括匹配的元素）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<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>
<p>Hello World</p>
<script>
    //从DOM中删除所有匹配的元素（包括匹配的元素）
    $("li").remove();
</script>
</body>
</html>

效果如下：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8Iiyp8qJ-1647531535060)(C:\Users\zjjt\AppData\Roaming\Typora\typora-user-images\image-20220317233430376.png)]$

修改：

1.replaceWith(content|fn)：将所有匹配的元素替换成指定的HTML或DOM元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<p>Hello</p><p>cruel</p><p>World</p>
<div class="container">
    <div class="inner first">Hello</div>
    <div class="inner second">And</div>
    <div class="inner third">Goodbye</div>
</div>
<script>
    //把所有的段落标记替换成加粗的标记
    $("p").replaceWith("<b>Paragraph. </b>");
    //用第一段替换第三段，你可以发现他是移动到目标位置来替换，而不是复制一份来替换
    $('.third').replaceWith($('.first'));
</script>
</body>
</html>

前后对比图（页面放大200%）：

修改前：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aGz1k0p7-1647531535062)(C:\Users\zjjt\AppData\Roaming\Typora\typora-user-images\image-20220317233734327.png)]$

修改后：

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8vSkfZ9R-1647531535063)(C:\Users\zjjt\AppData\Roaming\Typora\typora-user-images\image-20220317233802726.png)]$
本文到此为止，接下来小编还会写一些关于jQuery内容的博客，如果有喜欢的话，希望可以给予小编三连（点赞、收藏+关注）