基础选择器

最新推荐文章于 2025-08-21 23:22:44 发布

weixin_33719619

最新推荐文章于 2025-08-21 23:22:44 发布

阅读量96

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python java ViewUI

原文链接：https://my.oschina.net/u/3023191/blog/2249778

2019独角兽企业重金招聘Python工程师标准>>>

注意：本教程参考自网上流传的李兴华老师的jquery开发框架视频，但是苦于没有相应的配套笔记，由我本人做了相应的整理.

本次学习的内容

学习jquery提供的各种选择器的使用，掌握了jquery选择器就相当于掌握了jquery核心。

具体内容

在dom操作里面可以使用getElementById()与getElementsByTagName()两个函数进行元素的选择，但是这两个函数也仅仅只能够进行元素的选择。例如：如果说现在要写根据样式选择？或者说根据属性选择？不可能直接做到，需要进行大量的javascript编程才可以实现这样的功能，而这些操作在jquery里面可以轻松的实现

基础选择器

在之前使用过一个”$(id)”这样的操作来找到某一个html元素，但是这样的选择器在jquery里面还有许多，比如下面给出几个基础的选择器使用形式：

范例：根据ID选择元素

<html>
	<head>
		<title>jquery开发详解</title>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript">
			function show() {
				alert($("#msg").val());
			}
		</script>
	</head>
	<body>
		<input type="text" name="msg" id="msg">
		<input type="button" value="显示信息" onclick="show()">
	</body>
</html>

虽然此时可以实现根据id取出指定元素，但是会有一个限制出现，在实际的开发之中，很多的表达参数(name与id属性一致，也就是说如果参数名称是a,那么id也是a)名称上都会带有”.”，依靠“.”来实现简单java类对象属性的自动赋值操作。

范例：有”.”的参数

<html>
	<head>
		<title>jquery开发详解</title>
		<meta charset="UTF-8">
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript">
			function show() {
				alert($("#member\\.msg").val());
			}
		</script>
	</head>
	<body>
		<input type="text" name="member.msg" id="member.msg">
		<input type="button" value="显示信息" onclick="show()">
	</body>
</html>

范例：取得元素对象

定义一个mldn.css的文件，保存所需要的样式内容

.infocls {
	background: red;
	color: yellow;
	font-weight: bold;
	border: 3px #00ff00 solid;
}

<html>
	<head>
		<title>jquery开发详解</title>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/mldn.css">
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("span").attr("class","infocls"); //设置属性
			});
			
		</script>
	</head>
	<body>
		<div>www.mldn.cn -a</div>
		<div>
			<span>www.mldn.cn -b</span>
		</div>
		<span>www.mldn.cn -c</span>
	</body>
</html>

这种操作的形式就好像是直接利用了getElementsByTagName()的函数形式不关心所有的结构层次，只关心元素的名称信息。

根据样式选择元素

<html>
	<head>
		<title>jquery开发详解</title>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/mldn.css">
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$(".cls").attr("class","infocls"); //设置属性
			});
			
		</script>
	</head>
	<body>
		<div class="cls">www.mldn.cn -a</div>
		<div>
			<span>www.mldn.cn -b</span>
		</div>
		<span class="cls">www.mldn.cn -c</span>
		<input type="text" value="www.mldn.cn" class="cls">
	</body>
</html>

范例：选择所有元素

<html>
	<head>
		<title>jquery开发详解</title>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/mldn.css">
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("*").attr("class","infocls"); //设置属性
			});
			
		</script>
	</head>
	<body>
		<div class="cls">www.mldn.cn -a</div>
		<div>
			<span>www.mldn.cn -b</span>
		</div>
		<span class="cls">www.mldn.cn -c</span>
		<input type="text" value="www.mldn.cn" class="cls">
	</body>
</html>

范例：取得多个元素名称的对象

<html>
	<head>
		<title>jquery开发详解</title>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="css/mldn.css">
		<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$("input,div").attr("class","infocls"); //设置属性
			});
			
		</script>
	</head>
	<body>
		<div>www.mldn.cn -a</div>
		<div>
			<span>www.mldn.cn -b</span>
		</div>
		<span>www.mldn.cn -c</span>
		<input type="text" value="www.mldn.cn -d">
	</body>
</html>