jQuery03:筛选&文档处理

最新推荐文章于 2022-03-20 21:49:13 发布

原创最新推荐文章于 2022-03-20 21:49:13 发布 · 175 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery

jQuery 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了jQuery中如何对对象数组进行过滤、查找等操作，包括选取第一个和最后一个元素、按条件筛选、查找子元素和父元素等。同时，讲解了文档处理的增加、修改和删除内容的方法，如内部和外部插入、替换元素、清空及移除元素等。通过实例展示了jQuery在DOM操作上的强大功能。

一、在jQuery对象数组中，筛选出一部分元素

$(function() {

//1.1 过滤

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

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

               // 找到指定的某一个元素，例如第3个
               //$("ul>li:eq(2)").css("background","pink");
               //$("ul>li").eq(-1).css("background","pink");//倒数

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

//找到属性title不为a的元素
//$("ul>li").filter("[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>li").css("background","pink");
               //$("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(0).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 = $("body,html").scrollTop();
                   alert (a);*/
                   //赋值
                   $("body,html").scrollTop(0);
               })

})

知识归纳：

过滤：

        1.1.first():获取匹配的第一个元素
        1.2.last():获取匹配的最后一个元素
        1.3.eq(N):获取匹配的第N个或者-N个元素
        1.4.filter():筛选出预指定表达式匹配的元素集合
        1.5.has():筛选出包含特定特点的元素的集合
        1.6.not():筛选出不包含特定特点的元素的集合

文档处理：

①增：

外部插入
1.2.1after():在匹配元素之后插入内容
1.2.2before():在匹配元素之前插入内容

内部插入
1.1.1append():将内容添加到指定的元素后面（appendTo()）
1.1.2prepend():将内容添加到指定元素前面（prependTo()）

②删：

empty()：清空内容

remove()：移除

③：改

replaceWith():将所有匹配的元素换成指定的内容