jq03课堂所有知识

最新推荐文章于 2024-08-03 21:02:21 发布

狼少不在低调

最新推荐文章于 2024-08-03 21:02:21 发布

阅读量78

点赞数

文章标签： java

本文链接：https://blog.csdn.net/m0_64273143/article/details/123614857

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
   </head>
   <body>
       <script src="js/jquery-3.3.1.js"></script>
       <script type="text/javascript">
           $(function() {
               /* 一、在jQuery对象数组中，筛选出一部分元素 */

//1.1 过滤

               //--过滤出指定表达式匹配的元素
               // 获取ul中所有的li元素，然后找到第一个元素
               // $("ul li").css("background","pink");
               // $("ul>li").css("background","pink");
               // $("ul>li:first").css("background","pink");//得到第一个元素
               // $("ul>li").first().css("background","pink");//第二种方法
               // 找到最后一个元素
               // $("ul>li").last().css("background","pink");
               // 找到指定的某一个元素，例如第3个
               // $("ul>li").eq(2).css("background","pink");
               // $("ul>li:eq(2)").css("background","pink");//第二种方法
               //--过滤出指定表达式匹配的元素集合
               // 找到属性title为a的元素
               // $("ul li").filter("[title=a]").css("color","red");
               // 筛选出有title属性的元素集合
               // $("ul li").filter("[title]").css("color","red");
               // 筛选出有<span>标签的元素集合
               // $("ul li").has("span").css("color","red");
               // 筛选出没有title属性的元素集合
               // $("ul li").not("[title]").css("color","red");

//1.2 查找

               //2.1 增
               //--内部插入(前面和后面)
               // 插入到最后面(给ul中最后一个li中插入一个a标签)
               // $("ul li").last().append("<a href='#'>哈哈</a>");

//颠倒
// $("<a href='#'>哈哈1</a>").appendTo($("ul li").last());

               // 插入到最前面(给ul中第一个li中插入一个a标签)
               // $("ul li").first().prepend("<a href='#'>嘿嘿</a>");
               //--外部插入(之前和之后)
               // 在属性title为b的li前面插入一个a标签
               // $("ul li").filter("[title=b]").before("<a href='#'>嘻嘻</a>");
               // 在属性title为b的li后面插入一个a标签
               // $("ul li").filter("[title=b]").after("<a href='#'>呵呵</a>");

/* 二、文档处理 */

//颠倒
// $("<a href='#'>哈哈1</a>").appendTo($("ul li").last());

               //2.2 改
               //把li下面所有的span标签替换为<a>标签
               // $("li span").replaceWith("<a href='#'>啦啦</a>");

               //2.3 删
               //清空ul中所有li的内容
               // $("ul").empty();

//移除ul中所有的li
// $("ul").remove();

           })
       </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>

狼少不在低调

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq03课堂所有知识

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <script src="js/jquery-3.3.1.js"></script> <script type="text/j...
复制链接

扫一扫