jQuery03筛选&文档处理

jQuery筛选

1:过滤

        1.1.first():获取匹配的第一个元素

        1.2.last():获取匹配的最后一个元素

        1.3.eq(N):获取匹配的第N个或者-N个元素

        1.4.filter():筛选出预指定表达式匹配的元素集合

        1.5.has():筛选出包含特定特点的元素的集合

        1.6.not():筛选出不包含特定特点的元素

jQuery03筛选&文档处理_第1张图片

 

                --过滤出指定表达式匹配的元素
                获取ul中所有的li元素,然后找到第一个元素
                $("ul li").first().css("background","pink");
                找到最后一个元素
                $("ul li").last().css("background","yellow");
                找到指定的某一个元素,例如第3个
                $("ul  li").eq(2).css("background","pink");
                //.css为设置样式
        1.4.filter():筛选出预指定表达式匹配的元素集合
        在括号中只能放表达式哦!
代码展示:
                --过滤出指定表达式匹配的元素集合
                找到属性title为a的元素
                $("ul>li").filter("[title=a]").css("background","yellow");
                筛选出有title属性的元素集合
                $("ul>li").filter("[title]").css("background","pink");
        1.5.has():筛选出包含特定特点的元素的集合
代码展示:
                筛选出有标签的元素集合
                $("ul li").has("span").css("background","yellow");
        1.6.not():筛选出不包含特定特点的元素的集合
代码展示:
                筛选出没有title属性的元素集合
                $("ul li").not("[title]").css("background","yellow");

jQuery03筛选&文档处理_第2张图片

 

2:查找

        2.1children():子标签中找

        2.2find():后代标签中找

        2.3parent():父标签

        2.4prevAll():前面所有的兄弟标签

        2.5nextAll():后面所有的兄弟标签

        2.6siblings():前后所有的兄弟标签

      children():子标签中找        区别        find():后代标签中找

区别:后代标签包含子标签,但是后代标签不一定全是子标签

jQuery03筛选&文档处理_第3张图片
  
prevAll():前面所有的兄弟标签——nextAll():后面所有的兄弟标签——siblings():前后所有的兄弟标签

 

区别:就在于显示该标签的前后兄弟标签
二、文档处理

语法罗列:

1增

首先我们来区分内部插入和外部插入:

什么是内部插入呢?就是插入的标签作为被插入标签的子标签

什么是外部插入呢?就是插入的标签作为被插入标签的兄弟标签

        1.1内部插入

代码展示:
jQuery03筛选&文档处理_第4张图片
        1.2外部插入jQuery03筛选&文档处理_第5张图片

改删,移除lijQuery03筛选&文档处理_第6张图片

补充知识点位置 jQuery03筛选&文档处理_第7张图片

 

 

 

你可能感兴趣的:(jquery)