jQuery

最新推荐文章于 2024-09-30 10:36:33 发布

祈茒

最新推荐文章于 2024-09-30 10:36:33 发布

阅读量831

点赞数

分类专栏： jQuery 文章标签： java

本文链接：https://blog.csdn.net/T279zhengyiming/article/details/123621830

版权

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style type="text/css">
           #aa{
               width: 200px;
               height: 200px;
               background-color: aquamarine;
           }
           #bb{
               width: 100px;
               height: 100px;
               background-color: #7FFFD4;
           }
       </style>
       <script src="js/jquery-3.3.1.js" type="text/javascript" charset="utf-8"></script>
       <script type="text/javascript">
           $(function() {

               //获取ul中所有的li元素然后找到第一个元素
               $("ul>li:first").css("background", "pink");
               $("ul>li").first().css("background", "pink");

               //找到指定元素
               $("ul>li").eq(2).css("background", "pink");
               $("ul>li:eq(2)").css("background", "pink");

               //过滤出指定表达式匹配的元素组合
               //找到属性title为a的元素
               $("ul>li").filter("[title][title!=a]").css("background", "pink");
               //筛选出有title属性的元素集合
               $("ul>li").filter("[title]").css("background", "pink");
               //筛选出有<span>标签的元素集合
               $("ul>li").has("span").css("background", "pink");
               //筛选出没有title属性的元素集合
               $("ul>li").not("span").css("background", "pink");
               //查找ul中所有子标签，并且指定li标签
               $("ul").children("li").css("background", "pink");
               //查找ul下面所有的span标签
               $("ul span").css("background", "pink");
               $("ul").find("span").css("background", "pink");
               //查找b标签的父元素标签
               $("b").parent().css("background", "pink");
               //查找第三个li标签前面所有的兄弟标签
               $("ul>li").eq(2).prevAll().css("background", "pink");
               //查找第三个li标签后面的兄弟标签，并且只能是li标签
               $("ul>li").eq(2).nextAll("li").css("background","pink");
               //查找第三个li标签所有兄弟标签
               $("ul>li").eq(2).siblings().css("background","pink");
               //内部插入
               //插入到最后面（给ul中最后一个li插入一个a标签）
               $("ul>li:last").append("<a href='#'>大炮</a>")
               $("<a href='#'>大炮</a>").appendTo($("ul>li:last"))

               //外部插入(之前和之后)
               //在属性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>");

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

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

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

               //区分大容器和父容器
               var a=$("#aa").offset();//大容器
               console.info(a.top,a.left);
               var b=$("#aa").position();//小容器
               console.info(b.top,b.left);

               //返回顶部功能
               $("#btn").click(function(){
                   var a=$("html,body").scrollTop();
                   alert(a);

                   $("html,body").scrollTop(0);
               })

           })
       </script>

   </head>
   <body>
       <h2>补充知识点：位置</h2>
       <div id="aa">
           <div id="bb"></div>
       </div>
       <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>
       <button id="btn">获取顶部距离</button>