jQuery选择器和筛选方法

最新推荐文章于 2022-04-28 15:54:38 发布

黄大仙No.1

最新推荐文章于 2022-04-28 15:54:38 发布

阅读量310

点赞数

分类专栏： jQuery 文章标签： css jquery html js html5

本文链接：https://blog.csdn.net/qq_44378358/article/details/108225313

版权

jQuery 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

1.1 基础选择器

原生S获取元素方式很多,很杂,而且兼容性情况不一致,因此 jQuery给我们做了封装,使获取元素统一标准

(选择器”)∥里面选择器直接写CSS选择器即可,但是要加引号

名称	用法	描述
ID选择器	s("#id")	获取指定D的元素
全选选择器	s(*)	匹配所有元素
类选择器	s(".class")	获取同一类
class的元素标签选择器	(“div”)	获取同一类标签的所有元素
并集选择器	$(“div,p,li”)	选取多个元素
交集选择器	$(“li.current”)	交集元素

1.2 层级选择器

名称	用法	描述
子代选择器	s(“ul>li”);	使用>号,获取亲儿子层级的元素;注意,并不会获取孙子层级的元素
后代选择器	s(“ul li”);	使用空格,代表后代选择器,获取u下的所有l元素,包括孙子等

案例:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<script src="js/jquery-3.5.1.min.js"></script>
	</head>
	<body>
		<div>我是div</div>
		<div class="nav">我是nav div</div>
		<p>我是p</p>
		<ol>
			<li>我是ol的</li>
			<li>我是ol的</li>
			<li>我是ol的</li>
			<li>我是ol的</li>
		</ol>
		<ul>
			<li>我是ul</li>
			<li>我是ul</li>
			<li>我是ul</li>
			<li>我是ul</li>
		</ul>
		<script>
			$(function () {
				$('.nav')
				$('ul li')
            })
		</script>
	</body>
</html>

1.3 筛选选择器

语法	用法	描述
:first	$(‘li:first’)	获取第一个li元素
:last	$(‘li:last’)	获取最后一个li元素
:eq(index)	$(‘li:eq(2)’)	获取到的元素中索引号为2的
:odd	$(‘li:odd’)	获取索引号为奇数的元素
:even	$(‘li:even’)	获取索引号为偶数的元素

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<script src="js/jquery-3.5.1.min.js"></script>
	</head>
	<body>
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
		<ol>
			<li>1+5</li>
			<li>2+5</li>
			<li>3+5</li>
			<li>4+5</li>
			<li>5+5</li>
		</ol>
		<script>
			$(function () {
                $('ul li:first').css('color','red');
                $('ul li:last').css('color','pink');
                $('ul li:eq(1)').css('color','skyblue');
                $('ol li:even').css('color','orange');
                $('ol li:odd').css('color','green');})
		</script>
	</body>
</html>

效果:
在这里插入图片描述

1.4 筛选方法

语法	用法	说明
parent()	$(“li”).parent();	查找父级
children(selector)	$(“ul”). children("")	相当于s(ul>1i”),最近一级(亲儿子)
find(selector)	$(“ul”). find(“li”);	相当于ul li后代选择器
siblings(selector)	$(". first").siblings(li");	查找兄弟节点,不包括自己本身
nextAll([expr])	$(". first"). nextAll()	查找当前元素之后所有的同辈元素
prevtAll([expr])	$(".last"). prevAll()	查找当前元素之前所有的同辈元素
hasclass(class)	$(‘div’). hasclass(“protected”)	检查当前的元素是否含有某个特定的类,如果有,则返回true
eq(index)	$(“li”).eq(2);	相当于$(li:eq(2)), index从0开始

案例:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<script src="js/jquery-3.5.1.min.js"></script>
	</head>
	<body>
		<div class="father">
			<div class="son">son</div>
		</div>
		<div class="nav">
			<p>p</p>
			<div>
				<p>pp</p>
			</div>
		</div>
		<script>
			$(function () {
				// father
				$('.son').parent().css('color','yellow');
				// one_son
				$('.nav').children('p').css('color','red');
				// all sons
				$('.nav').find('p').css('color','purple');
            })
		</script>
	</body>
</html>

效果:
在这里插入图片描述

案例2,jquery下拉菜单:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
		<script src="js/jquery-3.5.1.min.js"></script>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			ul {
				list-style: none;
			}
			li {
				list-style: none;
			}
			a {
				text-decoration: none;
			}
			.nav {
				display: flex;
				width: 30%;
				height: 80px;
				flex-direction: row;
			}
			.nav>li {
				flex: 1;
				display: flex;
				flex-direction: column;
			}
			.nav>li>ul {
				display: none;
				width: 100%;
				height: 240px;
				flex-direction: column;
			}
			.nav>li>ul>li {
				flex: 1;
				background-color: pink;
				border:1px solid red;
				text-align: center;
				line-height: 80px;
			}
			.nav>li>a{
				height: 100%;
				background-color: skyblue;
				text-decoration: transparent;
				text-align: center;
				line-height: 80px;
				border: 1px solid red;
			}
		</style>
	</head>
	<body>
		<ul class="nav">
			<li>
				<a href="">微博</a>
				<ul>
					<li>
						<a href="">私信</a>
					</li>
					<li>
						<a href="">评论</a>
					</li>
					<li>
						<a href="">@我</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="">微博</a>
				<ul>
					<li>
						<a href="">私信</a>
					</li>
					<li>
						<a href="">评论</a>
					</li>
					<li>
						<a href="">@我</a>
					</li>
				</ul>
			</li>
			<li>
				<a href="">微博</a>
				<ul>
					<li>
						<a href="">私信</a>
					</li>
					<li>
						<a href="">评论</a>
					</li>
					<li>
						<a href="">@我</a>
					</li>
				</ul>
			</li>
		</ul>
	</body>
	<script>
		$(function () {
		    // 鼠标经过
			$(".nav>li").mouseover(function () {
			    // $(this)     //当前元素
				$(this).children('ul').css('display', 'flex');
            })
            $(".nav>li").mouseleave(function () {
                // $(this)     //当前元素
                $(this).children('ul').hide();
            })
        })
	</script>
</html>