一、筛选—过滤
- first():获取匹配的第一个元素
- last():获得匹配的最后一个元素
- eq(N):获取匹配的第N或-N个元素
- filter(selector):筛选出与指定表达式匹配的元素集合
- 过滤 has(selector):筛选出包含特定特点的素的集合
- not(selector):筛选出不包含特定特点的元素的集合
$(function(){
// (1).过滤:在jQuery对象数组中,过滤出一部分元素 :
// 1)、首先获取ul中所有的li子元素,即会产生一个li数组uls。然后:
/*空格选择器:在后代里面查
>在所有字标签里面查找
*/
var uls = $("ul>li");
// 2)、first():获取数组uls中的第一个元素,即第一个li标签.
//uls.first()/css({"background":pink});
// $("ul>li:first").css({"background":"pink"});
// 3)、last():获取数组uls中的最后一个元素,即最后一个li标签.
// uls.last().css({"background":"pink"});
// 4)、eq(index):从数组uls中找到下标为2的元素.
// uls.eq(2).css({"background":"pink"});
// 4.1)、从数组uls中找到倒数第2个元素.
// uls.eq(-2).css({"background":"pink"});
// 5)、filter(selector):匹配到类名为sa的元素。
// uls.filter(".sa").css({"background":"pink"});
// 5.1)、匹配到有属性title,并且值为a的元素.
// uls.filter("[title=a]").css({"background":"pink"});
// 5.2)、匹配到属性title的值不为a的元素
// uls.filter("[title!=a]").css({"background":"pink"});
// 5.3)、匹配到有title属性,且属性值不为a的元素.
// uls.filter("[title][title!=a]").css({"background":"pink"});
// 5.4)、从数组uls中过滤出有title属性的元素集合.
// uls.filter("[title]").css({"background":"pink"});
// 6)、has(selector):从数组uls中过滤出有<span>标签的元素集合.
// uls.has("span").css({"background":"pink"});
// 7)、从数组uls中过滤出没有title属性的元素集合.
// uls.not("[title]").css({"background":"pink"});
二、查找
- children():子标签中找
- find():后代标签中找
- parent():父标签
- prevAll():前面所有的兄弟标签查找
- nextAll():后面所有的兄弟标签
- siblings():前后所有的兄弟标签
$(function(){
// (2).查找:在jQuery对象数组中,查找出一部分元素:
// 1)、children():查找ul的所有子标签
$("ul").children().css({"background":"pink"});
// 1.1)、查找ul的所有li子标签
$("ul").children("li").css({"background":"pink"});
// 3)、find():查找ul下面所有的span标签
$("ul").find("span").css({"background":"pink"});
// 4)、parent():查找b标签的父元素标签
$("b").parent().css({"background":"pink"});
// 5)、prevAll():查找第三个(下标为2)li标签前面所有的兄弟标签
$("ul>li").eq(2).prevAll().css({"background":"pink"});
// 6)、nextAll():查找第三个(下标为2)li标签后面所有的兄弟标签
$("ul>li").eq(2).nextAll().css({"background":"pink"});
// 6.1)、查找第三个(下标为2)li标签后面所有的兄弟标签,并且只能是li标签
$("ul>li").eq(2).nextAll('li').css({"background":"pink"});
// 8)、siblings():查找第三个(下标为2)li标签前后所有的兄弟标签
$("ul>li").eq(2).siblings().css({"background":"pink"});
// 8.1)、查找第三个(下标为2)li标签前后所有的兄弟标签,并且只能是li标签
$("ul>li").eq(2).siblings("li").css({"background":"pink"});
})
三、文档处理
3.1内部插入
- append:将内容添加到指定的元素后面
后面 - appendTo:和append()语法颠倒
- prepend:将内容添加到指定元素前面
前面 - prependTo():和prepend语法颠倒
增加
<script type="text/javascript">
$(function(){
// (3).文档处理:
// 3.1、增加
// 1)、append():元素内部插入(之后)
// 1.1)、给ul中最后一个li子标签内部的后面再插入一个li标签。
$("ul>li").last().append("<li>这是一个新标签</li>");
$("ul>li").eq(-1).append("<li>这是一个新标签</li>");
$("ul").children("li").eq(-1).append("<li>这是一个新标签</li>");
$("ul").children("li").last().append("<li>这是一个新标签</li>");
// 1.2)、往ul的每个li子标签内部的末尾追加一个li标签。
// $("ul>li").append("<li>这是一个新标签</li>");
$("ul").children('li').append("<li>这是一个新标签</li>");
$("<li>这是一个新标签</li>").appendTo($("ul").children('li'));
// 1.3)、往ul的最后一个子标签后面追加一个li标签。
$("ul").children().last().append("<li>这是一个新标签</li>");
// 2)、prepend():元素内部插入(之前)
// 2.1)、给ul中第一个li子标签内部的前面再插入一个li标签
$("ul").children("li").first().prepend("<li>这是一个新标签</li>");
})
</script>
3.2外部插入
- after():在匹配元素之后插入内容
- before():在匹配元素之前插入内容
$(function(){
// (3).文档处理:
// 3)、after():元素外部插入(之后):
// 3.1)、在属性titile为b的元素后面添加一个li
$("[title=b]").after("<li>这是一个新标签</li>");
// 4)、before():元素外部插入(之前):
// 4.1)、在属性title为b的元素前面添加一个li
$("[title=b]").before("<li>这是一个新标签</li>");
})
3.3删
<script type="text/javascript">
$(function(){
// 3.3、删除:empty()和remove()
// 1.1)、删除ul中所有的子节点.
$("ul").children().empty(); //不会删除所匹配的标签
$("ul").children().remove();//会删除所匹配的标签
// 1.2)、删除ul中所有的li子节点里面所有的子节点.
$("ul li").children().empty();
$("ul li").children().remove();
// 1.3)、删除ul中所有的li节点里面所有的子节点.
$("ul li").empty(); //不会删除所匹配的标签
$("ul li").remove();//会删除所匹配的标签
})
</script>
3.4改
$(function(){
//
// 3.2、replaceWith()和replaceAll():改(替换)
// 1)、把所有li标签下面的所有的span标签替换为文本框标签
$("li span").replaceWith("<input type='text' />")
})