jQuery筛选&文档处理

2023-09-14 23

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： jQuery筛选&文档处理

一、过滤出指定表达式匹配的元素

1. first() 获取ul中所有的li元素，然后找到第一个元素
2.last()找到最后一个元素
3.eq(元素下标) 找到指定的某一个元素
4.filter 找出指定元素属性集合
5.has()筛选出指定标签元素集合
6.children()取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合
7.find()搜索所有与指定表达式匹配的元素
8.parent()查找父节点
9.prevAll()查找前面所有的兄弟标签

10.nextAll()查找后面所有的兄弟标签
11.siblings()查找所有的兄弟标签

完整案例演示

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <!-- 引入外部js -->
    <script src="js/jquery-3.6.4.js"></script>
    <script type="text/javascript">
      $(function(){
        /* 一、 在jQuery对象数组中，筛选出一部分元素 */
        //1.1 过滤
        //--过滤出指定表达式匹配的元素
        // 获取ul中所有的li元素，然后找到第一个元素
        $("ul>li").first().css("background","rebeccapurple")
        // 找到最后一个元素
        $("ul>li").last().css("background","cadetblue")
        // 找到指定的某一个元素，例如第3个
        $("ul>li").eq(2).css("background","cadetblue")
        //--过滤出指定表达式匹配的元素集合
        // 找到属性title为a的元素
        $("ul>li[title=a]").css("background","beige")
        $("ul>li").filter("[title=a]").css("background","beige")
        // 筛选出有title属性的元素集合
        $("ul>li").filter("[title]").css("background","navajowhite")
        // 筛选出有<span>标签的元素集合
        $("ul").has("span").css("background","forestgreen")
        // 筛选出没有title属性的元素集合
        $("ul>li").not("[title]").css("background","aqua")
        //1.2 查找
        // 查找ul的所有子标签,并且指定为li子标签
        $("ul").children("li").css("background","saddlebrown")
        // 查找ul下面所有的span标签
        $("ul").find("span").css("background","fuchsia")
        // 查找b标签的父元素标签
        $("b").parent().css("background","cadetblue")
        // 查找第三个li标签前面所有的兄弟标签
        $("ul>li").eq(2).prevAll("li").css("background","fuchsia")
        // 查找第三个li标签后面所有的兄弟标签,并且只能是li标签
        $("ul>li").eq(2).nextAll("li").css("background","honeydew")
        // 查找第三个li标签所有的兄弟标签
        $("ul>li").eq(2).siblings("li").css("background","cadetblue")
        </script>
  </head>
  <body>
    <h2>jQuery03：筛选、文档处理</h2>
    <button id="btn">点击设置</button>
    <!-- 筛选和查找案例 -->
    <ul>
      <li>1</li>
      <li title="a">2</li>
      <li title="b">3</li>
      <li title="a"><span><b>4</b></span></li>
      <li title="b"><span>5</span></li>
      <ol>
        <li>6</li>
        <li>7</li>
      </ol>
      <span>8</span>
    </ul>
    <hr>
  </body>
</html>

二、文档处理

1.append()向每个匹配的元素内部追加内容
2.appendTo()与append作用一致，用法不同
3.before()在每个匹配的元素之前插入内容
4.replaceWith()将所有匹配的元素替换成指定的HTML或DOM元素。

5.remove()从DOM中删除所有匹配的元素。
6.clone()克隆匹配的DOM元素并且选中这些克隆的副本。

完整案例演示

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
    <!-- 引入外部js -->
    <script src="js/jquery-3.6.4.js"></script>
    <script type="text/javascript">
      $(function(){
/* 二、 文档处理  */
        //2.1 增
        //--内部插入(前面和后面)
        $("#btn").click(function(){
        //   插入到最后面(给ul中最后一个li中插入一个a标签)
        $("ul>li").last().append("<a href='#'>YU</a>")
        //   插入到最前面(给ul中第一个li中插入一个a标签)
        $("<a href='#'>YU</a>").appendTo($("ul>li").first())
        //--外部插入(之前和之后)
        //   在属性title为b的li前面插入一个a标签
        $("ul>li[title=b]").before("<span style='background:pink'>YU</span>")
        //   在属性title为b的li后面插入一个a标签
        //2.2 改       replace
        //把li下面所有的span标签替换为<a>标签
        // $("ul>li").replaceWith("<h1>YU</h1>");
        //2.3 删       
        //清空ul中所有li的内容
        //移除ul中所有的li
        // $("ul>li").remove()
        //将div克隆到ul末尾
        $("ul").clone().appendTo($("ul"))
        })
      });
    </script>
  </head>
  <body>
    <h2>jQuery03：筛选、文档处理</h2>
    <button id="btn">点击设置</button>
    <!-- 筛选和查找案例 -->
    <ul>
      <li>1</li>
      <li title="a">2</li>
      <li title="b">3</li>
      <li title="a"><span><b>4</b></span></li>
      <li title="b"><span>5</span></li>
      <ol>
        <li>6</li>
        <li>7</li>
      </ol>
      <span>8</span>
    </ul>
    <hr>
  </body>
</html>

jQuery筛选&文档处理

一、过滤出指定表达式匹配的元素

完整案例演示

二、文档处理

完整案例演示

热门文章

最新文章

相关课程

相关电子书

相关实验场景

jQuery筛选&文档处理

一、过滤出指定表达式匹配的元素

完整案例演示

二 、文档处理

完整案例演示

热门文章

最新文章

相关课程

相关电子书

相关实验场景

二、文档处理