Hilo Everybody wellcome to my channel!
今天Lion带大家来学习jQuery的筛选以及文档处理(jQuery03)
一、jQuery筛选
语法罗列:
1:过滤
.first():获取匹配的第一个元素
.last():获取匹配的最后一个元素
.eq(N):获取匹配的第N个或者-N个元素
.filter():筛选出预指定表达式匹配的元素集合
.has():筛选出包含特定特点的元素的集合
.not():筛选出不包含特定特点的元素的集合
前三个方法我们在jQuery01是讲筛选器时,大致提到了所以就不做重点讲了!直接看代码
代码展示:
--过滤出指定表达式匹配的元素
获取ul中所有的li元素,然后找到第一个元素
$("ul li").first().css("background","pink");
找到最后一个元素
$("ul li").last().css("background","yellow");
找到指定的某一个元素,例如第3个
$("ul li").eq(2).css("background","pink");
//.css为设置样式
.filter():筛选出预指定表达式匹配的元素集合
在括号中只能放表达式哦!
代码展示:
--过滤出指定表达式匹配的元素集合
找到属性title为a的元素
$("ul>li").filter("[title=a]").css("background","yellow");
筛选出有title属性的元素集合
$("ul>li").filter("[title]").css("background","pink");
.has():筛选出包含特定特点的元素的集合
代码展示:
筛选出有<span>标签的元素集合
$("ul li").has("span").css("background","yellow");
.not():筛选出不包含特定特点的元素的集合
代码展示:
筛选出没有title属性的元素集合
$("ul li").not("[title]").css("background","yellow");
语法罗列:
2:查找
children():子标签中找
find():后代标签中找
parent():父标签
prevAll():前面所有的兄弟标签
nextAll():后面所有的兄弟标签
siblings():前后所有的兄弟标签
children():子标签中找 区别 find():后代标签中找
区别:后代标签包含子标签,但是后代标签不一定全是子标签
代码展示:
// 查找ul的所有子标签,并且指定为li子标签
$("ul").children("li").css("background","red");
// 查找ul下面所有的span标签
$("ul").find("span").css("background","red");
parent():父标签
就是找到改标签的父标签简单吧!
代码展示:
// 查找b标签的父元素标签
$("b").parent().css("background","yellow");
prevAll():前面所有的兄弟标签——nextAll():后面所有的兄弟标签——siblings():前后所有的兄弟标签
区别:就在于显示该标签的前后兄弟标签
代码展示:
查找第三个li标签前面所有的兄弟标签
$("ul li").eq(2).prevAll().css("background","yellow");
查找第三个li标签后面所有的兄弟标签,并且只能是li标签
$("ul li").eq(2).nextAll("li").css("background","yellow");
查找第三个li标签所有的兄弟标签
$("ul li").eq(2).siblings().css("background","yellow");
二、文档处理
语法罗列:
1增
首先我们来区分内部插入和外部插入:
什么是内部插入呢?就是插入的标签作为被插入标签的子标签
什么是外部插入呢?就是插入的标签作为被插入标签的兄弟标签
1.1内部插入
append():将内容添加到指定的元素后面(appendTo())
prepend():将内容添加到指定元素前面(prependTo())
代码展示:
--内部插入(前面和后面)
插入到最后面(给ul中最后一个li中插入一个a标签)
$("ul li").last().append("<a>hahaha</a>");
插入到最前面(给ul中第一个li中插入一个a标签)
$("<a>hahaha</a>").prependTo($("ul li").first());
1.2外部插入
after():在匹配元素之后插入内容
before():在匹配元素之前插入内容
代码展示:
--外部插入(之前和之后)
在属性title为b的li前面插入一个a标签
$("ul li").filter("[title][title=b]").before("<a>hahah</a>");
在属性title为b的li后面插入一个a标签
$("ul li").filter("[title][title=b]").after("<a>asda d</a>");
2删
empty():删除匹配的元素中所有的子节点(不包括元素)
remove():删除匹配的元素中所有的子节点(包括元素)
代码展示:
清空ul中所有li的内容
$("ul li").empty();
移除ul中所有的li
$("ul li").remove();
3改
replaceWith():将所有匹配的元素换成指定的内容
代码展示:
把li下面所有的span标签替换为<a>标签
$("li span").replaceWith("<a>123</a>");