jQuery选择器

最新推荐文章于 2024-05-17 13:52:13 发布

煎蛋zai冒泡

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量166

点赞数

文章标签： jquery javascript 前端

本文链接：https://blog.csdn.net/weixin_68266487/article/details/127275774

版权

1：属性选择器

属性选择器是制定DOM元素对应属性的一种选择器

属性名称选择器： $("A[属性名]")

属性选择器 ： $("A[属性名='值']")

复合属性选择器: $("A[属性名='值'][]...")

2:过滤选择器

：first $("li:first") 获取第一个元素

：last $("li:last") 获取最后一个元素

：eq(index) $("li:eq(2)") 选择索引号为2的元素，索引号index从0开始

：odd $("li:odd") 选择索引号为奇数的元素

：even $("li:even") 选择索引号为偶数的元素

代码示例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>过滤选择器</title>
		<script src="js/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
				//var a1=$("ul>li:even") //偶数变色
				// var a1=$("ul>li:last") //最后一个
				// a1.css("color","red")
				$("ul>li:first").siblings().css("color","red")
			
			})
		</script>
	</head>
	<body>
		<ul>
			<li>苹果</li>
			<li>橘子</li>
			<li>香蕉</li>
			<li>香梨</li>
			<li>提子</li>
		</ul>
		
	</body>
</html>

3：表单过滤选择器

可用元素选择器 :enabled 获得可用的元素

不可用元素选择器 :disabled 不获得可用的元素

选中选择器 :checked 获得单选，复选框

选中选择器 :selected 获得下拉框选中的元素

淘宝精品案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
			}

			a {
				text-decoration: none;
			}

			ul li {
				list-style: none;
			}

			#count {
				width: 300px;
				height: 260px;
				border: 1px pink solid;
				margin: 10px auto;
				overflow: hidden; //超出范围隐藏
			}

			#left {
				width: 80px;
				float: left;
			}

			#right {
				width: 200px;
				float: right;
			}

			#left ul li a {
				display: inline-block;
				width: 80px;
				text-align: center;
				line-height: 28px;
				font-family: "楷体";
				font-size: 16px;
				font-weight: bold;
				color: black;
				background-color: bisque;
				height: 28px;
				border: 1px aquamarine solid;
			}

			#left ul li a:hover {
				background-color: azure;
			}
		</style>
		<script src="js/jquery.min.js"></script>
		<script>
			$(function() {
				//当鼠标划入某一个菜单项的时候，显示对应的图片
				$("#left>ul li").mouseover(function() {
					//拿到鼠标划入左菜单项的索引
					var index = $(this).index()
					//根据索引，让右侧li的图片显示，其他隐藏
					$("#right>ul li:eq(" + index + ")").show().siblings().hide()
				});
			});
		</script>
	</head>
	<body>
		<div id="count">
			<div id="left">
				<ul>
					<li><a href="#">连衣裙</a></li>
					<li><a href="#">毛衣</a></li>
					<li><a href="#">男棉服</a></li>
					<li><a href="#">呢大衣</a></li>
					<li><a href="#">牛仔裤</a></li>
					<li><a href="#">女靴</a></li>
					<li><a href="#">铅笔裤</a></li>
					<li><a href="#">雪地靴</a></li>
					<li><a href="#">羽绒服</a></li>
				</ul>
			</div>
			<div id="right">
				<ul>
					<li><img src="img/连衣裙.jpg"></li>
					<li><img src="img/毛衣.jpg"></li>
					<li><img src="img/男棉服.jpg"></li>
					<li><img src="img/呢大衣.jpg"></li>
					<li><img src="img/牛仔裤.jpg"></li>
					<li><img src="img/女靴.jpg"></li>
					<li><img src="img/铅笔裤.jpg"></li>
					<li><img src="img/雪地靴.jpg"></li>
					<li><img src="img/羽绒服.jpg"></li>


				</ul>
			</div>
		</div>
	</body>
</html>