JQuery_03 筛选与文档处理

1. 筛选

1.1 过滤

1. first():获取匹配的第一个元素
2. last():获得匹配的最后一个元素
3. eq(N):获取匹配的第N或-N个元素
4. filter(selector):筛选出与指定表达式匹配的元素集合
5. 过滤 has(selector):筛选出包含特定特点的素的集合
6. not(selector):筛选出不包含特定特点的元素的集合

$(function(){
// 			(1).过滤：在jQuery对象数组中，过滤出一部分元素 ：
// 				1)、首先获取ul中所有的li子元素，即会产生一个li数组uls。然后：
                        var uls = $("ul>li");
// 				2)、first()：获取数组uls中的第一个元素，即第一个li标签.
                     console.info(uls.first());
// 				3)、last()：获取数组uls中的最后一个元素，即最后一个li标签.
                   uls.last().css({"background":"pink"});
// 				4)、eq(index):从数组uls中找到下标为2的元素.
//					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"})
                  })

1.2 查找

1. children():子标签中找
2. find():后代标签中找
3. parent():父标签
4. prevAll():前面所有的兄弟标签查找
5. nextAll():后面所有的兄弟标签
6. 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"});
                 })

2.文档处理

2.1 增加

2.1.1 内部插入

1. append:将内容添加到指定的元素后面
   后面

2. appendTo:和append()语法颠倒

3. prepend:将内容添加到指定元素前面
   前面

4. 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>

2.1.2 外部插入

1. after():在匹配元素之后插入内容

2. 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>");
                 })

2.2 删

1. empty（）:删除匹配的元素集合中所有的子节点(不包含匹配的元素)
2. remove（）:删除匹配的元素集合中所有的子节点(包含匹配的元素删除ul中所有li用empty）
   案例4:演示文档处理-删除

<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>

2.3 改

• replaceWith0:将所有匹配的元素替换成指定的内容
  改
  案例5:演示文档处理-修改 把li下面所有的span标签替换为a标签

$(function(){
// 			
// 			3.2、replaceWith()和replaceAll()：改(替换)
// 				1)、把所有li标签下面的所有的span标签替换为文本框标签
                  $("li span").replaceWith("<input type='text' />")
         })