JQuery基本选择器

最新推荐文章于 2023-04-23 17:34:04 发布

好吃的都给你呀

最新推荐文章于 2023-04-23 17:34:04 发布

阅读量121

点赞数

分类专栏： #前端思维框架文章标签： JQuery

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_39565202/article/details/103389048

版权

#前端思维框架专栏收录该内容

18 篇文章 0 订阅

订阅专栏

jQuery和CSS一样，也有选择器概念，即选择性获取某些标签对象。

JQuery基本选择器

JQuery基本选择器有：

ID选择器 $('#标签id属性值')

元素选择器 $('#标签名')

类选择器 $('.标签class属性值')

ID选择器

作用：根据标签的id属性值，选择html页面的某个标签，获取jQuery对象。
语法：$('#标签id属性值')

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery.js" ></script>
		<script>
			onload=function(){
				//js方式获取标签对象
				var i1 = document.getElementById("btn");
				alert(i1.value);
				
				//JQuery方式获取标签对象
				var i2 = $("#btn");
				alert(i2.val());
			}
		</script>
	</head>
	<body>
		<input type="button" id="btn" name="iput" value="输入的值" />
	</body>
</html>

标签选择器

作用：根据标签名，选择html页面上的某个或某些对应的标签。获取到的是jQuery对象，也可能是数组。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery.js" ></script>
		<script>
			onload=function(){
				//此处获取的一个JQery数组对象
				var ll = $("li");
				for(var i=0;i<ll.length;i++){
					//进行传统for循环遍历的时候，因为需要根据下标来遍历，所以这里是转化成了js对象
					alert(ll[i].innerText);
				}
			}
		</script>
	</head>
	<body>
		<ul>
			<li>语文</li>
			<li>数学</li>
			<li>英语</li>
		</ul>
	</body>
</html>

class选择器

作用：根据标签的class属性的值，选择html页面上的某个或某些对应的标签。获取到的是jQuery对象，也可能是数组。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../js/jquery.js" ></script>
		<script>
			onload=function(){
				var ii = $(".course");
				for(var i=0;i<ii.length;i++){
					alert(ii[i].value);
				}
				
			}
		</script>
	</head>
	<body>
		<input type="button" class="course" value="音乐" />
		<input type="button" class="course" value="美术" />
		<input type="button" class="course" value="体育" />
	</body>
</html>