jQuery基础选择器和层次选择器示例

最新推荐文章于 2024-01-31 00:15:00 发布

fltenwall

最新推荐文章于 2024-01-31 00:15:00 发布

阅读量397

点赞数 1

分类专栏：前端文章标签： jQuery 选择器基础选择器层次选择器

本文链接：https://blog.csdn.net/qq_32925031/article/details/89219354

版权

本文深入探讨jQuery的基础选择器和层次选择器的使用，通过实例解析如何高效地选取DOM元素。首先介绍了基础选择器，包括ID选择器、类选择器和标签选择器等，接着详细讲解了层次选择器，如后代选择器、子选择器、相邻兄弟选择器和后续兄弟选择器，帮助开发者更精确地定位页面元素。

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

一、基础选择器

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="jquery-3.3.1.js"></script>
	<script>
		$(function(){
    
			//ID选择器
			$("#btn1").click(function(){
    
				$("#par").css("background","pink");
			});

			//类选择器
			$("#btn2").click(function(){
    
				$(".par").css("background","lightblue");
			});

			//并集选择器
			$("#btn3").click(function(){
    
				$("#test1,#test2,.test").css("background","lightgreen");
			});

			//交集选择器
			$("#btn4").click(function(){
    
				$("p#part").css("background","purple");
			});

			//全局选择器 
			$("#btn5").click(function(){
    
				$("*").css("background",