基礎選擇器

時間 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支持來實現的話，那麼根據樣式的選擇或者是根據元素名稱的選擇，那麼就不可以直接獲得支持了，都須要通過編程實現。

在使用基礎選擇器的過程之中，利用」,」能夠分隔多個選擇器，可是須要強烈注意一點的是：不要增長無謂的空格。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。