基础选择器

时间 2019-11-13

标签基础选择器繁體版

原文原文链接

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

本次学习的内容

学习jquery提供的各类选择器的使用，掌握了jquery选择器就至关于掌握了jquery核心。javascript

具体内容

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

基础选择器

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

范例：根据ID选择元素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($("#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类对象属性的自动赋值操做。jquery

范例：有”.”的参数编程

<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的文件，保存所须要的样式内容dom

.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>

若是说前面的几个选择器还能够经过正常的dom支持来实现的话，那么根据样式的选择或者是根据元素名称的选择，那么就不可以直接获得支持了，都须要通过编程实现。

在使用基础选择器的过程之中，利用”,”能够分隔多个选择器，可是须要强烈注意一点的是：不要增长无谓的空格。