jQuery03

1.思维导图

jQuery03_第1张图片

2.过滤

2.1.

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

例如:

jQuery03_第2张图片

 

                // 找到最后一个元素
                // $("ul>li").last().css("background","pink");

                筛选出有title属性的元素集合
                // $("ul>li").filter("[title]").css("background","pink");
                // 筛选出有标签的元素集合
                // $("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.增加

jQuery03_第3张图片

 

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

效果:

jQuery03_第4张图片

 

你可能感兴趣的:(jquery,javascript)