jQuery选择器，隐式迭代，筛选方法，链式编程，样式操作

最新推荐文章于 2024-10-30 18:24:25 发布

夏大爷耶耶耶

最新推荐文章于 2024-10-30 18:24:25 发布

阅读量286

点赞数 1

分类专栏： jQuery 文章标签： jquery javascript html

本文链接：https://blog.csdn.net/xy_is_fhh/article/details/122044262

版权

jQuery 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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

$("选择器") //里面直接写CSS选择器即可，但是要加引号

jQuery选择器

基本选择器：

名称用法描述

ID选择器 $('#id') 获取指定ID的元素

全选选择器 $('*') 匹配所有元素

类选择器 $(".class") 获取同一类class的元素

标签选择器 $("div") 获取同一类标签的所有元素

并集选择器 $("div,p,li") 选取多个元素

交集选择器 $("li.current")交集元素

层级选择器：

子代选择器 $("ul>li") 使用>号，获取亲儿子层级的元素；注意，并不会获取孙子层级的元素

后代选择器 $("ul li") 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

筛选选择器

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

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

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

:odd $("li:odd") 获取到的li元素中，选择索引号为奇数的元素

:even $("li:even") 获取到的li元素中，选择索引号为偶数的元素

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="jquery-3.5.1.min.js"></script>
	</head>
	<body>
		<div>今天心情很不好</div>
		<div>今天心情很不好</div>
		<div>今天心情很不好</div>
		<div>今天心情很不好</div>
		<ul>
			<li>藏起来</li>
			<li>藏起来</li>
			<li>藏起来</li>
		</ul>
	</body>
	<script>
		$("li:first").css("color","red");
		$("li:last").css("color","yellow");
		$("li:eq(1)").css("color","orange");
	</script>
</html>