AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

jQuery筛选&文档处理

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

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

  1. 1. first()  获取ul中所有的li元素，然后找到第一个元素
  2. 2.last()找到最后一个元素
  3. 3.eq(元素下标) 找到指定的某一个元素
  4. 4.filter 找出指定元素属性集合
  5. 5.has()筛选出指定标签元素集合
  6. 6.children()取得一个包含匹配的元素集合中每一个元素的所有子元素的元素集合
  7. 7.find()搜索所有与指定表达式匹配的元素
  8. 8.parent()查找父节点
  9. 9.prevAll()查找前面所有的兄弟标签
  1. 10.nextAll()查找后面所有的兄弟标签
  2. 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. 1.append()向每个匹配的元素内部追加内容
  2. 2.appendTo()与append作用一致，用法不同
  3. 3.before()在每个匹配的元素之前插入内容
  4. 4.replaceWith()将所有匹配的元素替换成指定的HTML或DOM元素。
  1. 5.remove()从DOM中删除所有匹配的元素。
  2. 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>


文章标签：
JavaScript
关键词：
jquery筛选
jQuery筛选文档处理
ChatYU.
目录
相关文章
瑶大头*^_^*
|
前端开发 JavaScript 容器
jQuery03(筛选&文档处理&CSS位置)
jQuery03(筛选&文档处理&CSS位置)
瑶大头*^_^*
43 0
不念那年晚春
|
JavaScript
jQuery筛选&文档处理
jQuery筛选&文档处理
不念那年晚春
50 0
云小君
|
JavaScript
jQuery筛选&文档处理器
jQuery筛选&文档处理器
云小君
61 0
卡尔特斯
|
JavaScript
jQuery 筛选选择器
jQuery 筛选选择器
卡尔特斯
55 0
无法自律的人
|
JavaScript 前端开发 Java
JQuery的使用（工具方法、CSS属性及方法、筛选、文档处理、事件、动画）后续
元素 . animate({属性：属性值 } , time);缩放：width height移动：top left移动本元素，距离：top = "+=" left = "-="上一章：JQuery（入门~选择器）
无法自律的人
99 1
前端歌谣
|
JavaScript
js基础笔记学习309筛选jquery对象1
js基础笔记学习309筛选jquery对象1
前端歌谣
74 0
js基础笔记学习309筛选jquery对象1
前端歌谣
|
JavaScript
js基础笔记学习312筛选jquery对象4
js基础笔记学习312筛选jquery对象4
前端歌谣
75 0
js基础笔记学习312筛选jquery对象4
前端歌谣
|
JavaScript
js基础笔记学习311筛选jquery对象3
js基础笔记学习311筛选jquery对象3
前端歌谣
83 0
js基础笔记学习311筛选jquery对象3
t75yjb52rsccc
|
JavaScript
JQUERY选择器--筛选选择器
JQUERY选择器--筛选选择器
t75yjb52rsccc
68 0
卡卡西最近怎么样
|
JavaScript 前端开发 索引
jQuery 筛选方法
jQuery 筛选方法
卡卡西最近怎么样
122 0
jQuery 筛选方法