jQuery的筛选和文档处理

最新推荐文章于 2023-06-16 20:36:22 发布

YangKen_liu

最新推荐文章于 2023-06-16 20:36:22 发布

阅读量109

点赞数 1

文章标签： jquery

本文链接：https://blog.csdn.net/YangKen_liu/article/details/123568986

版权

这篇博客深入探讨了jQuery中针对DOM的操作，包括如何筛选特定元素，如找到指定索引、属性匹配的元素，以及查找子元素和父元素。此外，还详细讲解了如何在文档中进行增加、修改和删除操作，如内部和外部插入元素，替换标签内容，以及清除或移除元素。实例丰富，适合初学者掌握jQuery的DOM操作技巧。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       
       <script type="text/javascript" src="js/jquery-3.3.1.js"></script>

       <script type="text/javascript">
           $(function(){
               /* 一、在jQuery对象数组中，筛选出一部分元素 */

               //1.1 过滤

//--过滤出指定表达式匹配的元素
// 获取ul中所有的li元素，然后找到第一个元素

// 找到最后一个元素

// 找到指定的某一个元素，例如第3个

//--过滤出指定表达式匹配的元素集合
// 找到属性title为a的元素

// 筛选出有title属性的元素集合

// 筛选出有<span>标签的元素集合

// 筛选出没有title属性的元素集合

//1.2 查找

// 查找ul的所有子标签,并且指定为li子标签

// 查找ul下面所有的span标签

// 查找b标签的父元素标签

// 查找第三个li标签前面所有的兄弟标签

// 查找第三个li标签后面所有的兄弟标签,并且只能是li标签

// 查找第三个li标签所有的兄弟标签

/* 二、文档处理 */

               //2.1 增
               //--内部插入(前面和后面)
               // 插入到最后面(给ul中最后一个li中插入一个a标签)

// 插入到最前面(给ul中第一个li中插入一个a标签)

//--外部插入(之前和之后)
// 在属性title为b的li前面插入一个a标签

// 在属性title为b的li后面插入一个a标签

//2.2 改
//把li下面所有的span标签替换为<a>标签

//2.3 删
//清空ul中所有li的内容

//移除ul中所有的li
           })
       </script>
   </head>

   <body>
       <h2>jQuery03：筛选、文档处理</h2>
       
       <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>
   </body>
</html>