jQuery筛选

最新推荐文章于 2022-06-09 10:30:15 发布

朲曻

最新推荐文章于 2022-06-09 10:30:15 发布

阅读量87

点赞数

本文链接：https://blog.csdn.net/weixin_45526796/article/details/100902741

版权

<script src="jquery-3.4.1.js"></script>
//引入jQuery文件

****引入jQuery的文件要放在写script的js代码前面****

<script>
$(function(){
			// eq() 根据索引取出jq对象中对应的标签,返回jq对象
			// 参数是索引,从0开始
			$("ul>li").eq(1).css("color", "red")
			// 参数填负值,倒着数,最后一个为-1
			$("ul>li").eq(-1).css("color", "red")
			// 伪类选择器
			$("li:first").css('color',"blue")
			// first() 找到符合前面选择器的第一个jquery对象
			$("li").first().css("color", "yellow")
			
			// get()函数根据索引取标签,返回是原生js标签对象
			console.log($("li").get(0))
			console.log($("li")[0])
			// 原生js标签元素对象不能使用jq对象函数,可以转换一下
			$($("li").get(0)).css("color","cyan")
				// 过滤
			var $li = $("li")
			// filter() 过滤函数
			console.log($li.filter(".cls").hasClass("cls"))
			// filter() 自定义过滤条件
			// 过滤函数,返回 true表示该标签符合条件,最后会将所有符合条件的标签放入jq对象返回
			$li.filter(function(i, ele){
				// i 索引  ele 原生js标签对象
				console.log(i, ele)
				if (i % 2 == 0){
					
					return false
				}else{
					return true
				}
				// return i>0&&i<4
			}).css({
				color:"gray"
			})
			
			// map() 函数 返回jq对象,jq对象存储函数返回的结果
			// 适用于做数据处理
			var arr1 = $("li").map(function(i, ele){
				
				// 
				return $(ele).text()
			})
			console.log(arr1.get().join("===="))
			
			// has() 函数 返回包含span子标签元素的li标签,jq对象
			$("li").has("span").css("color", "orange")
			
			// not() 从前面选择器结果中,再进行一次筛选
			$("li").not(".cls").css("color", "skyblue")
			
			// children() 获取父级元素的子标签
			console.log($("ul").children())
			console.log($(".cls").children())
			
			// slice() 切割标签
			$("li").slice(1,3).css("color", "green")
			
			// find() 一般用于大范围查找 性能更高
			$("ul").find(".cls").css("font-size", "30px")
			
			// next()下一个兄弟节点  nextAll()下面所有的兄弟节点  nextUntil()直到符合条件
			console.log($(".cls").nextUntil("ul li:eq(-2)"))
			
			// prev(), prevAll(),prevUntil()
			
			// parent() 函数 获取父级标签
			console.log($(".cls").parent())
			// parents() 获取所有祖先标签
			console.log($(".cls").parents())
			
			// addBack() 结果中加上上一层选择器标签
			console.log($(".cls").nextAll().addBack())
})
</script>

<body>
<ul>
		<li class="cls">
			<span>
				span标签
				<a href="#">百度一下</a>
				
			</span>
		</li>
		<li><span>1</span></li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
	</ul>

</body>