JQuery选择器（2）

QiuBO.

已于 2022-10-12 09:02:48 修改

阅读量181

点赞数

文章标签： jquery javascript 前端

于 2022-10-12 08:54:09 首次发布

本文链接：https://blog.csdn.net/m0_70648941/article/details/127275260

版权

1，属性选择器

属性名称选择器 $("A[属性名]") 包含指定属性的选择器

属性选择器 $("A[属性名=' 值']") 包含指定属性等于指定值的选择器

复合属性选择器 $("A[属性名=' 值']") 包含多个属性条件的选择器

2，过滤选择器

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

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

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

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

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

$(function(){
				var a1=$("ul>li:last")
				a1.css("color","red")
				var a2=$("ul>li:first").siblings().css("color","red")
				var a3=$("ul>li:even")
				a3.css("color","red")
				var a4=$("ul>li:odd")
				a4.css("color","red")
				var a5=$("ul>li:eq(2)")
				a5.css("color","red")
			})

parent() $("li").parent() 查找父级

childen(selector) $("ul").childen("li") 相当于$("ul>li"),最近一级（亲儿子）

find(selector) $("ul").find("li") 相当于$("ul li") 后代选择器

sibilings(selector) $(".first").siblings("li") 查找兄弟节点，不包括自己本身

nextAll（[expr]） $(".first").nextAll() 查找当前元素之后所有的同辈元素

prevtAll([expr] ) $(".last").prevAll() 查找当前元素之前所有的同辈元素

var a6=$("a[target=_blank]")
			a6.css("color","red")

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 lightpink 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>
					<li></li>
				</ul>
			</div>
		</div>
	</body>
</html>

QiuBO.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery选择器（2）

childen(selector) $("ul").childen("li") 相当于$("ul>li"),最近一级（亲儿子）find(selector) $("ul").find("li") 相当于$("ul li") 后代选择器。sibilings(selector) $(".first").siblings("li") 查找兄弟节点，不包括自己本身。：odd $("li:odd") 选择索引号为奇数的元素。
复制链接

扫一扫