0


jQuery 筛选&文档处理

** 前言**

昨天给大家分享了jQuery的$工具方法&属性&css,今天给大家分享的内容是jQuery筛选&文档处理

首先来看一下思维导图。

本次分享的主要内容为筛选文档处理

筛选:又分为过滤查找

文档处理:又分为增 删 改

下面请看正文。


一、筛选

1、过滤

(1)first():获取匹配的第一个元素

代码:

  1. $(function(){
  2. // 获取ul中所有的li元素,然后找到第一个元素
  3. $("ul>li:first").css("background","yellow")
  4. $("ul>li").first().css("background","yellow")
  5. })

**html代码: **

  1. <body>
  2. <h2>jQuery03:筛选、文档处理</h2>
  3. <!-- 筛选和查找案例 -->
  4. <ul>
  5. <li>1</li>
  6. <li title="a">2</li>
  7. <li title="b">3</li>
  8. <li title="a"><span><b>4</b></span></li>
  9. <li title="b"><span>5</span></li>
  10. <ol>
  11. <li>6</li>
  12. <li>7</li>
  13. </ol>
  14. <span>8</span>
  15. </ul>
  16. <button type="button" id="btn">返回顶部</button>
  17. </body>

注意:下面大部分效果图html代码与此一致,为方便浏览,下文相同的地方就不写了。

两种方式效果一致。

效果图:

(2)last():获得匹配的最后一个元素

代码:

  1. $(function(){
  2. // 找到最后一个元素
  3. $("ul>li").last().css("background","yellow");
  4. })

和上面的**first() **类似

效果图:

(3)eq(N):获取匹配的第N或-N个元素

代码:

  1. $(function(){
  2. // 找到指定的某一个元素,例如第3个
  3. $("ul>li:eq(2)").css("background","yellow")
  4. $("ul>li").eq(-2).css("background","yellow");//倒着数
  5. })

效果图:

(4)filter(selector):筛选出与指定表达式匹配的元素集合

代码:

  1. $(function(){
  2. // 找到属性title为a的元素
  3. $("ul>li").filter("[title=a]").css("background","yellow");
  4. // 找到属性title不为a的元素
  5. // $("ul>li").filter("[title][title!=a]").css("background","yellow");
  6. // 筛选出有title属性的元素集合
  7. // $("ul>li").filter("[title]").css("background","yellow")
  8. })

效果图:

(5)has(selector):筛选出包含特定特点的元素的集合

代码:

  1. $(function(){
  2. // 筛选出有<span>标签的元素集合
  3. $("ul>li").has("span").css("background","yellow");
  4. })

效果图:

(6)not(selector):筛选出不包含特定特点的元素的集合

代码:

  1. $(function(){
  2. // 筛选出没有title属性的元素集合
  3. $("ul>li").not("[title]").css("background","yellow");
  4. })

效果图:

2、查找

(1)children():子标签中找

代码:

  1. $(function(){
  2. // 查找ul的所有子标签,并且指定为li子标签
  3. // $("ul>li").css("background","yellow");
  4. $("ul").children().css("background","yellow");
  5. })

效果图:

(2)find():后代标签中找

代码:

  1. $(function(){
  2. // 查找ul下面所有的span标签
  3. // $("ul span").css("background","yellow");
  4. $("ul").find("span").css("background","yellow");
  5. })

效果图:

(3)parent():父标签

代码:

  1. $(function(){
  2. // 查找b标签的父元素标签
  3. $("b").parent().css("background","yellow");
  4. })

效果图:

(4)prevAll():前面所有的兄弟标签

代码:

  1. $(function(){
  2. // 查找第三个li标签前面所有的兄弟标签
  3. $("ul>li").eq(2).prevAll().css("background","yellow");
  4. })

效果图:

(5)nextAll():后面所有的兄弟标签

代码:

  1. $(function(){
  2. // 查找第三个li标签后面所有的兄弟标签,并且只能是li标签
  3. // $("ul>li").eq(2).nextAll().css("background", "yellow");
  4. $("ul>li").eq(2).nextAll("li").css("background", "yellow");
  5. })

效果图:

(6)siblings():前后所有的兄弟标签

代码:

  1. $(function(){
  2. // 查找第三个li标签所有的兄弟标签
  3. $("ul>li").eq(2).siblings().css("background","yellow");
  4. })

效果图:

二、文档处理

1.增加

(1)内部插入

  1. **1append():将内容添加到指定的元素后面**

代码:

  1. $(function(){
  2. $("ul>li").last().append("<a href='http://www.baidu.com'>嘿嘿嘿</a>")
  3. })

效果图:

  1. ** 2appendTo():和append()颠倒**

代码:

  1. $(function(){
  2. $("<a href='http://www.baidu.com'>嘿嘿嘿</a>").appendTo($("ul>li").last())
  3. })

效果图:

  1. ** 3prepend():将内容添加到指定元素前面**

代码:

  1. $(function(){
  2. $("ul>li").first().prepend("<a href='http://www.baidu.com'>哈哈哈</a>")
  3. })

效果图:

  1. ** 4prependTo():和prepend()颠倒**

代码:

  1. $(function(){
  2. $("<a href='http://www.baidu.com'>哈哈哈</a>").prependTo($("ul>li").first())
  3. })

效果图:

(2)外部插入

  1. ** 1after():在匹配元素之后插入内容**

代码:

  1. $(function(){
  2. // 在属性title为b的li后面插入一个a标签
  3. $("ul>li").filter("[title=b]").after("<a href='www.baidu.com'>嗨嗨</a>")
  4. })

效果图:

  1. ** 2before():在匹配元素之前插入内容**

代码:

  1. $(function(){
  2. // 在属性title为b的li后面插入一个a标签
  3. $("ul>li").filter("[title=b]").before("<a href='www.baidu.com'>嗨嗨</a>")
  4. })

效果图:

2.删除

  1. **(1empty():删除匹配的元素集合中所有的子节点(不包含匹配的元素)**

代码:

  1. $(function(){
  2. //清空ul中所有li的内容
  3. $("ul li").empty();
  4. })

效果图:

** 注意:empty():**只会清空其中的内容

  1. **(2remove():删除匹配的元素集合中所有的子节点(包含匹配的元素)**

3.修改

代码:

  1. $(function(){
  2. //移除ul中所有的li
  3. $("ul li").remove();
  4. })

效果图:

**注意: remove():**会连带标签一起删除

三、补充内容

1、父容器与大容器的区别

html代码:

  1. <body>
  2. <h2>位置</h2>
  3. <div id="aa">
  4. <div id="bb">
  5. </div>
  6. </div>
  7. <button type="button" id="btn">返回顶部</button>
  8. </body>

**代码: **

  1. $(function(){
  2. // 1、父容器和大容器的区别
  3. var a = $("#aa").offset();
  4. console.info(a.top,a.left);
  5. var b = $("#aa").position();
  6. console.info(b.top,b.left);
  7. var a1 = $("#bb").offset();
  8. console.info(a1.top,a1.left);
  9. var b1 = $("#bb").position();
  10. console.info(b1.top,b1.left);
  11. })

效果图:

因为提前设置了样式所以是这个样子。

以蓝色的div为例的话,粉色的div是父容器,整个界面是大容器

2、获取顶部距离 返回顶部

** html代码:**

  1. <body>
  2. <h2>jQuery03:筛选、文档处理</h2>
  3. <!-- 筛选和查找案例 -->
  4. <ul>
  5. <li>1</li>
  6. <li title="a">2</li>
  7. <li title="b">3</li>
  8. <li title="a"><span><b>4</b></span></li>
  9. <li title="b"><span>5</span></li>
  10. <ol>
  11. <li>6</li>
  12. <li>7</li>
  13. <li>7</li>
  14. <li>7</li>
  15. <li>7</li>
  16. <li>7</li>
  17. <li>7</li>
  18. </ol>
  19. <span>8</span>
  20. </ul>
  21. <button type="button" id="btn">返回顶部</button>
  22. </body>

**代码: **

  1. $(function(){
  2. // 2、获取顶部距离 返回顶部
  3. $("#btn").click(function(){
  4. var a = $("html,body").scrollTop();
  5. $("body,html").scrollTop(0);
  6. })
  7. })

效果 :

因为没有准备录屏工具,所以返回顶部的效果可能不明显。


总结

以上就是今天要分享的内容,希望今天分享的jQuery筛选&文档处理能够对你有帮助,

都看到这里了给个三连呗!!!后续会有更多内容分享

标签: jquery java

本文转载自: https://blog.csdn.net/qq_62331938/article/details/123584016
版权归原作者 安离九歌 所有, 如有侵权,请联系我们删除。

“jQuery 筛选&amp;文档处理”的评论:

还没有评论