【无标题】JQuery 筛选和文档处理位置

陨落.190

已于 2022-03-20 16:00:30 修改

阅读量42

点赞数

文章标签： java

于 2022-03-20 15:47:10 首次发布

本文链接：https://blog.csdn.net/weixin_65795413/article/details/123614591

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <style type="text/css">
           #aa{
               width: 200px;
               height: 200px;
               background-color: aqua;
               position: absolute; /* 绝对定位*/
               top:50px;/* 顶部 */
               left:50px;/* 左边 */
           }
           #bb{
               width: 100px;
               height: 100px;
               background-color: pink;
               position: absolute; /* 绝对定位*/
               top:50px;/* 顶部 */
               left:50px;/* 左边 */
           }
       </style>
       
       <script type="text/javascript" src="js/jquery-3.3.1.js"></script>

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

               //1.1 过滤

               //--过滤出指定表达式匹配的元素
               // 获取ul中所有的li元素，然后找到第一个元素
// $("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");

               //--过滤出指定表达式匹配的元素集合
               // 找到属性title为a的元素
// $("ul、>li").filter("[title=a]").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("[title]").css("background","pink");

//1.2 查找

// 查找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");

/* 二、文档处理 */

               //2.1 增
               //--内部插入(前面和后面)
               // 插入到最后面(给ul中最后一个li中插入一个a标签)
               // $("ul>li").last().append("<a href=#>搭配</a>")
   // $("<a href=#>搭配</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>")

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

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

               //补充知识点:位置
//                // 1.区分大容器和父容器
//            var a=   $("#aa").offset();//大容器
//                console.info(a.top,a.left);
//
//            var b=   $("#aa").position();//父容器
//                console.info(b.top,b.left);
//
//                var a=   $("#bb").offset();//大容器
//                    console.info(a.top,a.left);
//
//                var b=   $("#bb").position();//父容器
//                    console.info(b.top,b.left);
               // 2.获取距离上面的滚动距离返回顶部功能
               //拿值
               $("#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>
   </body>
</html>

陨落.190

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【无标题】JQuery 筛选和文档处理位置

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #aa{ width: 200px; height: 200px; ...
复制链接

扫一扫