jquery选择器之基本选择器

最新推荐文章于 2024-10-31 15:39:18 发布

kevin_love_it

最新推荐文章于 2024-10-31 15:39:18 发布

阅读量426

点赞数

CC 4.0 BY-SA版权

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

本文链接：https://blog.youkuaiyun.com/kevin_love_it/article/details/78546562

javaScript/jquery 专栏收录该内容

18 篇文章

订阅专栏

本文通过实例详细介绍了jQuery中四种基本选择器的使用方法：ID选择器、类选择器、元素选择器及分组选择器。并通过代码展示了如何利用这些选择器来定位页面中的元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基本选择器：ID选择器，类选择器，元素选择器，分组选择器

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title>jquery 选择器</title>
	<script src="../../Document/lib/jquery-3.2.1.min.js"></script>
</head>
<body>
	<h2>基本——ID选择器,元素选择器,类选择器,分组选择器/h2>
	<div style="width:100%;background-color:#dcdcdc">
		<div id="n1">
			<p id="n2">Hello</p>
			<p id="n3">
				CodePlayer
				<span id="n4">专注于编程开发技术分享</span>
				<span id="n5"></span>
			</p>
			<p class="cls01">hello world</p>
			<span id="foo[bar]">hello bar</span>

			<div class="cls02">div class="cls02"</div>
			<p class="myClass">p class="myClass"</p>
			<span class="cls03">span class="cls03"</span>
			<p class="notMyClass">p class="notMyClass"</p>
			<em>em</em>
		</div>
		<script type="text/javascript">
			// 1.ID选择器

			var $n2 = $("#n2");
			//alert( $n2.html() ); // Hello
			// 设置n2的html内容
			$n2.html( '<strong>Hello World</strong>' );

			var $n3 = $("#n3");
			//alert( $n3.html() );
			/*
			CodePlayer
			<span id="n4">专注于编程开发技术分享</span>
			<span id="n5"></span>
			*/

			// 包含特殊字符的id，使用双反斜杠\\转义
			//alert($("#foo\\[bar\\]").html());

			// 2.类选择器

			//alert($(".cls01").html());

			// 3.元素选择器

			// 清空所有span元素的html内容(将html内容设为"")
			//$("span").html( "" );

			// 将所有p元素的html内容改为"第<em>N</em>个p元素，id为this.id"
			// 这里的N表示该元素在所有匹配元素中的序号(1、2、3……)
			// this.id是该元素的id属性值
			// $("p").html(function(index, currentHtml){
			//     // 函数内的this指向当前迭代的p元素
			//     return "第<em>" + (index + 1) + "</em>个p元素，id为" + this.id;   
			// });

			// 4.分组选择器
			//alert($("p.myClass,em").html());
		</script>
	</div>
</body>
</html>