jQuery03_juq-033-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_68211831/article/details/123584688

本文详细解读了如何使用JavaScript进行高效元素过滤、定位与操作，包括思维导图的应用、特定表达式匹配、筛选元素、查找子标签，以及CSS样式操作。深入讲解了定位元素位置的方法，并展示了如何利用DOM操作来实现动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.思维导图

2.过滤

2.1.

                --过滤出指定表达式匹配的元素
               // 获取ul中所有的li元素，然后找到第一个元素
               // $("ul>li").first().css("background","pink");

例如：

// 找到最后一个元素
// $("ul>li").last().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");

3.查找

查找ul的所有子标签,并且指定为li子标签
// $("ul>li").css("background","pink");

父元素标签：.parent()

所有的兄弟标签：.prevAll()

4.增加

5.补充知识点:位置
               //1父容器和大容器的区别:
               //            var a = $("#bb").offset();//大容器
               //            console.info(a.top,a.left);
               //            var b = $("#bb").position();//父容器
               //            console.info(b.top,b.left);

//6. 获取顶部距离=返回顶部
               //拿值
//                $("#btn").click(function() {
//                    // var a = $("body,html").scrollTop();
//                    //赋值
//                    $("body,html").scrollTo(0);
//                })

效果：