jQuery3 筛选&文档处理

目录

1.筛选（过滤&查找）

2.文档处理

 

---

 

1.筛选（过滤&查找）

过滤
    查看官方API文档
    first()：获取匹配的第一个元素
    last()：获得匹配的最后一个元素
    eq(N)：获取匹配的第N或-N个元素
    filter(selector)：筛选出与指定表达式匹配的元素集合
    has(selector)：筛选出包含特定特点的元素的集合
    not(selector)：筛选出不包含特定特点的元素的集合

<script type="text/javascript">
			// 过滤
			// 	first()：获取匹配的第一个元素

			// 	last()：获得匹配的最后一个元素
			
			// 	eq(N)：获取匹配的第N或-N个元素
			
			// 	filter(selector)：筛选出与指定表达式匹配的元素集合
			
			// 	has(selector)：筛选出包含特定特点的元素的集合
			
			// 	not(selector)：筛选出不包含特定特点的元素的集合
			
			// 	案例1：演示过滤所有的方法
			// 		从元素数组中找到第一个元素
			// $('ul>li').first().css("background", "red");
			// console.log($("ul>li").first())
			// 		从元素数组中找到最后一个元素
			// $('ul:eq(0)>li').last().css("background", "red");
			// 		从元素数组中找到指定的某一个元素
			// $('ul:eq(0)>li').eq(2).css("background","red")
			// 		从元素数组中找到属性title为a的元素
			// $('ul:eq(0)>li').filter("[title=a]").css("background","red")
			// 		从元素数组中筛选出有title属性的元素集合
			// $('ul:eq(0)>li').filter("[title]").css("background","yellow")
			// 		从元素数组中筛选出有<span>标签的元素集合
			// $('ul:eq(0)>li').has("span").css("background","red");
			// 		从元素数组中筛选出没有title属性的元素集合
			 // $('ul:eq(0)>li').not("[title]").css("background","red");
		</script>

查找
    查看官方API文档
    children()：子标签中找
    find()：后代标签中找
    parent()：父标签
    prevAll()：前面所有的兄弟标签
    nextAll()：后面所有的兄弟标签
    siblings()：前后所有的兄弟标签

		<script type="text/javascript">
			// 查找
			// 	查看官方API文档
			// 	children()：子标签中找
			// 	find()：后代标签中找
			// 	parent()：父标签
			// 	prevAll()：前面所有的兄弟标签
			// 	nextAll()：后面所有的兄弟标签
			// 	siblings()：前后所有的兄弟标签
			// 	案例2：演示查找所有的方法
			// 		查找ul的所有子标签,并且指定为li子标签
			// $('ul').children("li").css("background","yellow")
			// 		查找ul下面所有的span标签
			// $('ul').find('span').css("background","yellow")
			// 		查找b标签的父元素标签
			// $('ul').find("b").parent().css("background","red")
			// 		查找第三个li标签前面所有的兄弟标签
			// $('ul>li').eq(2).prevAll().css("background","yellow")
			// 		查找第三个li标签后面所有的兄弟标签,并且只能是li标签
			// $('ul>li').eq(2).nextAll().css("background","yellow")
			// 		查找第三个li标签所有的兄弟标签
			// $("ul>li:eq(2)").siblings().css("background","pink")
			
		</script>

2.文档处理

    增
        内部插入
            append()：将内容添加到指定的元素后面
            appendTo()：和append()颠倒
            prepend()：将内容添加到指定元素前面
            prependTo():和prepend()颠倒
         
        外部插入
            after()：在匹配元素之后插入内容
            before()：在匹配元素之前插入内容
    
    删
        empty()：删除匹配的元素集合中所有的子节点（不包含匹配的元素）
        remove()：删除匹配的元素集合中所有的子节点（包含匹配的元素）
       
    改
        replaceWith()：将所有匹配的元素替换成指定的内容

<script type="text/javascript">
			// 文档处理
			// 	查看官方API文档
			// 	增
			// 		内部插入
			// 			append()：将内容添加到指定的元素后面
			// 			appendTo()：和append()颠倒
			// 			prepend()：将内容添加到指定元素前面
			// 			prependTo():和prepend()颠倒
			// 			后面
			// 			前面
			// 		外部插入
			// 			after()：在匹配元素之后插入内容
			// 			before()：在匹配元素之前插入内容
			// 		案例3：演示文档处理-增加
			// 			插入到最后面(给ul中最后一个li中插入一个a)
					// $("ul:last>li:last").append($('<a href="#">你好！世界</a>'));
					
					
			// 			插入到最后面(给ul中最后一个li中插入一个a),使用appendTo()
						// $('<a href="#">你好！世界</a>').appendTo($("ul:last>li:last"))
						
			// 			插入到最前面(给ul中第一个li中插入一个a)
						// $("ul:last>li:first").prepend($("<a href='#'>百福一下</a>"))
			
			// 			插入到最前面(给ul中第一个li中插入一个a),使用prependTo
							// $("<a href='#'>百福一下</a>").prependTo($("ul:last>li:first"))
							
			// 			在属性title为b前面添加一个li
						// $('ul>li').filter("[title=b]").before($("<li>牛逼</li>"))
			
			// 			在属性title为b后面添加一个li
			// $('ul>li').filter("[title=b]").after($("<li>牛逼</li>"))
			
			// 	删
			// 		empty()：删除匹配的元素集合中所有的文本内容（不包含匹配的元素）
				
			// 		remove()：删除匹配的元素集合中所有的子节点（包含匹配的元素）
			// 		案例4：演示文档处理-删除
			// 			清空ul中所有li的内容，使用empty()
					// $(".oBox>ul>li").empty()
			// 			移除ul中所有的li，使用remove()
			// $(".oBox>ul>li").remove()
			// 	改
			// 		replaceWith()：将所有匹配的元素替换成指定的内容
			// 		案例5：演示文档处理-修改
			// 			把li下面所有的span标签替换为<a>标签
			$('.oBox>ul>li').find("span").replaceWith("<a href='#'>jdjdjdjdjdjdj</a>")
			
		</script>