Jquery的选择器

最新推荐文章于 2024-02-24 22:51:16 发布

奋斗着，享受着

最新推荐文章于 2024-02-24 22:51:16 发布

阅读量187

点赞数

分类专栏： web知识重点归纳文章标签： jquery css javascript

本文链接：https://blog.csdn.net/vgfvgf/article/details/129375916

版权

web知识重点归纳专栏收录该内容

3 篇文章 1 订阅

订阅专栏

这篇文章介绍了jQuery的选择器使用，包括基本选择器如ID、类和通配符，以及兄弟节点、父级和子级标签的选择器。此外，还展示了如何通过属性和CSS3选择器来操作DOM元素的样式，以及jQuery的动画基础。

摘要由CSDN通过智能技术生成

jQuery提供了强大的选择器，完美的兼容了css的选择器，所以jQuery上手就很快了。

选择器：

1:基本选择器：

               // id选择器（指定id）
               $("#id名").css("样式");
               // 类选择器（指定类）
               $(".类名").css({样式});
               // 通配符选择（所有）
               $("*").css("样式")
               // 逗号选择器（多种选择，逗号隔开）
               $(".类名, #id名").css("样式");
               // 子代选择器
               $(".父类>子代").css("样式")
               // 后代选择器
               $(".父类子代").css("样式")

// 选择下一个兄弟节点
               $(".类名+兄弟标签").css("样式")
               // 选择之后的所有兄弟节点
               $(".类名~兄弟标签").css("样式")

// 第一个
               $(".类名:first").css("样式");
               $(".类名").first().css("样式");
               // 最后一个
               $(".类名:last").css("样式");
               $(".类名").last().css("样式")
               // 第n个元素
               $(".类名:eq(n)").css("样式")
               $(".类名").eq(n).css("样式");
               // 大于（index = n 之后的标签）
               $(".类名:gt(n)").css("样式")
               // 小于（index= n 之前的标签）
               $(".类名:lt(n)").css("样式")
  // 奇数行
               $(".类名:odd").css("样式")；

// 偶数行
               $(".类名:even").css("样式"）；
               // 判断是否存在某个class
               console.log($(".类名").hasClass("类名"))

2：兄弟节点选择器

// 后面的兄弟节点
               $(".类名").nextAll("标签名").css("样式");
               // 下一个兄弟节点
               $(".类名").next("标签名").css("样式");
               // 前面一个兄弟节点
               $(".类名").prev().css("样式");
               // 前面的所有兄弟节点
               $(".类名").prevAll("标签名").css("样式")
               // 所有的兄弟节点
               $(".类名").siblings("标签名").css("样式");

                // 通过属性选择器,添加类样式
               $("input[type$=tel]").addClass("类名");
               // 选择具有子元素（包括文本子元素）的标签

3：父子级标签选择器
               $(".类名:parent").css("样式");
               // 选择包装集的父级
               $(".类名").parent().css("样式");
               $(".类名").parent("标签名").css("样式");
               $(".类名").parents("标签名").css("样式");
               // 选择子级标签
               $(".类名").children().css("样式");
               $(".类名").children("标签名").css("样式");

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>选择器</title>
		<style type="text/css">
			.show {
				width: 400px;
				height: 200px;
				border: 1px solid red;
				background-color: aquamarine;
			}

			.box {
				background-color: royalblue;
			}
		</style>
		<!-- 注意：script标签不允许自结束 -->
		<script src="jquery-1.8.3.js"></script>
		<script type="text/javascript">
			/**
			 * jQuery的选择器非常强大
			 * 它完美的兼容css选择器，
			 * 1、基本选择器（css）
			 * 逗号选择器,
			 * 子代选择器
			 * 后代选择器
			 * id
			 * class
			 * 通配符选择器*
			 * 2、过滤选择器
			 * 3、属性选择器（css）
			 * 4、css3提供的选择器
			 */
			$(function() {
				// id选择器
				$("#msg").css("color", "red");
				// 类选择器
				$(".item").css({
					"width": "200px",
					"height": "30px",
					"border": "1px solid red",
					"color": "pink"
				});
				// 通配符选择
				$("*").css("border", "1px solid yellow");
				// 逗号选择器
				$(".item, #msg").css("border", "1px solid gray");
				// 子代选择器
				$(".list>li").css("border", "1px solid red")
				// 后代选择器
				$(".list li").css("border", "1px solid red")
				// 选择下一个兄弟节点
				$(".active+li").css("border", "1px solid red")
				// 选择之后的所有兄弟节点
				$(".active~li").css("border", "1px solid red")
				// 第一个
				$(".item:first").css("color", "red");
				$(".item").first().css("color", "red");
				// 最后一个
				$(".item:last").css("color", "red");
				$(".item").last().css("color", "red")
				// 第n个元素
				$(".item:eq(1)").css("color", "red")
				$(".item").eq(2).css("color", "red");
				// 大于
				$(".item:gt(2)").css("color", "red")
				// 小于
				$(".item:lt(5)").css("color", "red")
				// 奇数行
				$(".item:odd").css("background", "red")
					.css("width", "500px")
					.css("height", "30px");
				// 偶数行
				$(".item:even").css("background", "darkcyan")
					.css("width", "500px")
					.css("height", "30px");
				// 判断是否存在某个class
				console.log($(".show").hasClass("box"))
				$(".show").hover(function() {
					// 将js对象转换为jQuery，$(DOM对象)
					if ($(this).hasClass("box")) {
						$(this).removeClass("box")
					} else {
						$(this).addClass("box");
					}
					// 这样也可以
					$(this).toggleClass("box");
				});
				// 通过属性选择器,添加类样式
				$("input[type$=tel]").addClass("box");
				// 选择具有子元素（包括文本子元素）的标签
				$(".item:parent").css("border", "1px solid red");
				// 选择包装集的父级
				$(".active").parent().css("border", "1px solid red");
				$(".active").parent("div").css("border", "1px solid red");
				$(".active").parents("ul").css("border", "1px solid red");
				// 选择子级标签
				$(".list").children().css("border", "1px solid red");
				$(".list").children("ul").css("border", "1px solid red");
				/**
				 * find会在选择的包装集上继续向后代选择需要对象
				 * 面试题：请说明jQuery中find和filter的区别？
				 */
				$(".list").find("li").css("border", "1px solid red");
				// 在选中的包装集上进行二次刷选
				$("li").filter(".first").css("border", "1px solid red");
				/**
				 * 如下的选择器都是选择兄弟节点
				 */
				$(".first~li").css("border", "1px solid red");
				// 后面的兄弟节点
				$(".first").nextAll("li").css("border", "1px solid red");
				// 下一个兄弟节点
				$(".first").next("div").css("border", "1px solid red");
				// 前面一个兄弟节点
				20.5 jQuery动画
				系统的动画方法
				jQuery提供了强大的动画API的支持， 包括十种三类动画效果。
				$(".active").prev().css("border", "1px solid red");
				// 前面的所有兄弟节点
				$(".active").prevAll("li").css("border", "1px solid red")
				// 所有的兄弟节点
				$(".active").siblings("li").css("border", "1px solid red");
			});
		</script>
	</head>
	<body>
		<div id="msg">这个是一个div</div>
		<ul class="list">
			<li class="first">
				<ul>
					<li>这个是孙子列表1</li>
					<li>这个是孙子列表2</li>
					<li>这个是孙子列表3</li>
					<li>这个是孙子列表4</li>
					<li>这个是孙子列表5</li>
				</ul>
			</li>
			<li class="item">这个是一个列表</li>
			<li class="item">这个是一个列表</li>
			<li class="item active">这个是一个列表</li>
			<li class="item">这个是一个列表</li>
			<li class="item"></li>
			<div id="msg">这个是一个div</div>
			<ul>
				<li class="item"></li>
				<li class="item">这个是一个列表</li>
				<li class="item">这个是一个列表</li>
			</ul>
		</ul>
		<div class="show box">
		</div>
		<input type="tel" name="" id="" value="" />
	</body>
</html>