jquery第一季（概述，基本選擇器與層次選擇器）

jquery第一季概述：

什麼是jquery:

jquery是一個js框架

這個框架可以幫我快速方便的操作html的css樣式，修改html內容，查找html元素

爲什麼要學習jquery：

>jquery可以兼容大部分瀏覽

>jquery代碼比較簡潔

>jquery應用非常廣泛

注意:

jquery2.0版本之後不再兼容ie6,7,8

學習之前先問一下：

what why where how

如何使用jquery

1.需要導入jquery-3.1.1.js文件到項目

2.需要在要使用jquery-3.1.1.js的頁面中引入該js文件

<script src =""></script>

如何獲取一個jquery對象

var $a =$("#one"); 獲取id爲one的所有元素

$a.val() ; 獲取a的value值

$a.html(); 獲取a的innerHTML

jquery對象和js對象之間的轉換：

js--->jquery

var j =document.getElementById("one");

var $j = $(j);

jquery--->js

var $a =$("#one");

var a = $a.get(0);

在jquery中如何表示頁面已經加載完畢？

$(document).ready(function(){

alert("xxx");

})

該方法和window.onload方法之間的區別：

如果我在一個頁面寫了多個window.onload，那麼最後一個window.onload會把前面的覆蓋掉。

如果寫了多個$(document).ready，不會覆蓋，內部會有一個棧隊，會依次執行隊列裏面的每個$(document).ready

選擇器的分類：

基本選擇器：

層次選擇器：

基本過濾選擇器：

內容過濾選擇器：

可見元素過濾器

屬性選擇器：

子元素過濾選擇器

表單選擇器

表單對象屬性過濾選擇器

詳解：

基本選擇器：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>01-基本選擇器.html</title>
		<!--   引入jQuery -->
		<script src="../js/jquery-3.1.1.js"></script>
		<script src="./script/assist.js" type="text/javascript"></script>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script type="text/javascript">
		</script>
	</head>

	<body>
		<button id="reset">手動重置頁面元素</button>
		<input type="checkbox" id="isreset" checked="checked" /><label for="isreset">點擊下列按鈕時先自動重置頁面</label><br /><br />
		<h3>基本選擇器.</h3>

		<!-- 控制按鈕 -->
		<input type="button" value="選擇 id爲 one 的元素." id="btn1" />
		<input type="button" value="選擇 class 爲 mini 的所有元素." id="btn2" />
		<input type="button" value="選擇 元素名是 div 的所有元素." id="btn3" />
		<input type="button" value="選擇 所有的元素." id="btn4" />
		<input type="button" value="選擇 所有的span元素和id爲two的元素." id="btn5" />

		<br /><br />

		<!-- 測試的元素 -->
		<div class="one" id="one">
			id爲one,class爲one的div
			<div class="mini">class爲mini</div>
		</div>

		<div class="one" id="two" title="test">
			id爲two,class爲one,title爲test的div.
			<div class="mini" title="other">class爲mini,title爲other</div>
			<div class="mini" title="test">class爲mini,title爲test</div>
		</div>

		<div class="one">
			<div class="mini">class爲mini</div>
			<div class="mini">class爲mini</div>
			<div class="mini">class爲mini</div>
			<div class="mini"></div>
		</div>

		<div class="one">
			<div class="mini">class爲mini</div>
			<div class="mini">class爲mini</div>
			<div class="mini">class爲mini</div>
			<div class="mini" title="tesst">class爲mini,title爲tesst</div>
		</div>

		<div style="display:none;" class="none">style的display爲"none"的div</div>

		<div class="hide">class爲"hide"的div</div>

		<div>
			包含input的type爲"hidden"的div<input type="hidden" size="8" />
		</div>

		<span id="mover">正在執行動畫的span元素.</span>

	</body>

</html>

運行界面：

選擇器測試的完整代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>01-基本選擇器.html</title>
		<!--   引入jQuery -->
		<script src="../js/jquery-3.1.1.js"></script>
		<script src="./script/assist.js" type="text/javascript"></script>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<script type="text/javascript">
			$(function() {
				//				<input type="button" value="選擇 id爲 one 的元素." id="btn1" />
				$("#btn1").click(function() {
					$("#one").css("background-color", "red");
				});
				//		<input type="button" value="選擇 class 爲 mini 的所有元素." id="btn2" />
				$("#btn2").click(function() {
					$(".mini").css("background-color", "red");
				});
				//		<input type="button" value="選擇 元素名是 div 的所有元素." id="btn3" />
				$("#btn3").click(function() {
					$("div").css("background-color", "red");
				});
				//		<input type="button" value="選擇 所有的元素." id="btn4" />
				$("#btn4").click(function() {
					$("*").css("background-color", "red");
				});
				//		<input type="button" value="選擇 所有的span元素和id爲two的元素." id="btn5" />
				$("#btn5").click(function() {
					$("span,#two").css("background-color", "red");
				});
			});
		</script>
	</head>

	<body>
		<button id="reset">手動重置頁面元素</button>
		<input type="checkbox" id="isreset" checked="checked" /><label for="isreset">點擊下列按鈕時先自動重置頁面</label><br /><br />
		<h3>基本選擇器.</h3>

		<!-- 控制按鈕 -->
		<input type="button" value="選擇 id爲 one 的元素." id="btn1" />
		<input type="button" value="選擇 class 爲 mini 的所有元素." id="btn2" />
		<input type="button" value="選擇 元素名是 div 的所有元素." id="btn3" />
		<input type="button" value="選擇 所有的元素." id="btn4" />
		<input type="button" value="選擇 所有的span元素和id爲two的元素." id="btn5" />

		<br /><br />

		<!-- 測試的元素 -->
		<div class="one" id="one">
			id爲one,class爲one的div
			<div class="mini">class爲mini</div>
		</div>

		<div class="one" id="two" title="test">
			id爲two,class爲one,title爲test的div.
			<div class="mini" title="other">class爲mini,title爲other</div>
			<div class="mini" title="test">class爲mini,title爲test</div>
		</div>

		<div class="one">
			<div class="mini">class爲mini</div>
			<div class="mini">class爲mini</div>
			<div class="mini">class爲mini</div>
			<div class="mini"></div>
		</div>

		<div class="one">
			<div class="mini">class爲mini</div>
			<div class="mini">class爲mini</div>
			<div class="mini">class爲mini</div>
			<div class="mini" title="tesst">class爲mini,title爲tesst</div>
		</div>

		<div style="display:none;" class="none">style的display爲"none"的div</div>

		<div class="hide">class爲"hide"的div</div>

		<div>
			包含input的type爲"hidden"的div<input type="hidden" size="8" />
		</div>

		<span id="mover">正在執行動畫的span元素.</span>

	</body>

</html>

效果圖如下：

點擊 id爲one 的元素按鈕：效果如下

點擊（選擇class 爲mini的所有元素）按鈕，效果圖如下：

點擊（選擇元素名是div 的所有元素）按鈕，效果圖如下：

點擊（選擇所有元素）按鈕，效果圖如下：

點擊（選擇所有的span元素和id爲two的元素）按鈕，效果圖如下：

層次選擇器的源碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>02-層次選擇器.html</title>
		<!--   引入jQuery -->
		<script src="../js/jquery-3.1.1.js" type="text/javascript"></script>
		<script src="./script/assist.js" type="text/javascript"></script>
		<link rel="stylesheet" type="text/css" href="./css/style.css" />
		<script type="text/javascript">
		</script>
	</head>

	<body>
		<h3>層次選擇器.</h3>
		<button id="reset">手動重置頁面元素</button>
		<input type="checkbox" id="isreset" checked="checked" /><label for="isreset">點擊下列按鈕時先自動重置頁面</label><br /><br />

		<input type="button" value="選擇 body內的所有div元素." id="btn1" />
		<input type="button" value="在body內,選擇子元素是div的。" id="btn2" />
		<input type="button" value="選擇 id爲one 的下一個div元素." id="btn3" />
		<input type="button" value="選擇 id爲two的元素後面的所有div兄弟元素." id="btn4" />
		<input type="button" value="選擇 id爲two的元素的所有div兄弟元素." id="btn5" />
		<br />
		<br />

		<!-- 測試的元素 -->
		<div class="one" id="one">
			id爲one,class爲one的div
			<div class="mini">class爲mini</div>
		</div>

		<div class="one" id="two" title="test">
			id爲two,class爲one,title爲test的div.
			<div class="mini" title="other">class爲mini,title爲other</div>
			<div class="mini" title="test">class爲mini,title爲test</div>
		</div>

		<div class="one">
			<div class="mini">class爲mini</div>
			<div class="mini">class爲mini</div>
			<div class="mini">class爲mini</div>
			<div class="mini"></div>
		</div>

		<div class="one">
			<div class="mini">class爲mini</div>
			<div class="mini">class爲mini</div>
			<div class="mini">class爲mini</div>
			<div class="mini" title="tesst">class爲mini,title爲tesst</div>
		</div>

		<div style="display:none;" class="none">style的display爲"none"的div</div>

		<div class="hide">class爲"hide"的div</div>

		<div>
			包含input的type爲"hidden"的div<input type="hidden" size="8" />
		</div>

		<span id="mover">正在執行動畫的span元素.</span>

	</body>

</html>

如圖：

層次選擇器的jquery源碼和html源碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>02-層次選擇器.html</title>
		<!--   引入jQuery -->
		<script src="../js/jquery-3.1.1.js" type="text/javascript"></script>
		<script src="./script/assist.js" type="text/javascript"></script>
		<link rel="stylesheet" type="text/css" href="./css/style.css" />
		<script type="text/javascript">
			$(function() {
				//		<input type="button" value="選擇 body內的所有div元素." id="btn1" />
				$("#btn1").click(function() {
					$("body div").css("background-color", "red");
				});
				//		<input type="button" value="在body內,選擇子元素是div的。" id="btn2" />
				$("#btn2").click(function() {
					$("body>div").css("background-color", "red");
				});
				//		<input type="button" value="選擇 id爲one 的下一個div元素." id="btn3" />
				$("#btn3").click(function() {
					$("#one+div").css("background-color", "red");
				});
				//		<input type="button" value="選擇 id爲two的元素後面的所有div兄弟元素." id="btn4" />
				$("#btn4").click(function() {
					$("#two~div").css("background-color", "red");
				});
				//		<input type="button" value="選擇 id爲two的元素的所有div兄弟元素." id="btn5" />
				$("#btn5").click(function() {
					$("#two").siblings("div").css("background-color", "red ");
				});
			});
		</script>
	</head>

	<body>
		<h3>層次選擇器.</h3>
		<button id="reset">手動重置頁面元素</button>
		<input type="checkbox" id="isreset" checked="checked" /><label for="isreset">點擊下列按鈕時先自動重置頁面</label><br /><br />

		<input type="button" value="選擇 body內的所有div元素." id="btn1" />
		<input type="button" value="在body內,選擇子元素是div的。" id="btn2" />
		<input type="button" value="選擇 id爲one 的下一個div元素." id="btn3" />
		<input type="button" value="選擇 id爲two的元素後面的所有div兄弟元素." id="btn4" />
		<input type="button" value="選擇 id爲two的元素的所有div兄弟元素." id="btn5" />
		<br />
		<br />

		<!-- 測試的元素 -->
		<div class="one" id="one">
			id爲one,class爲one的div
			<div class="mini">class爲mini</div>
		</div>

		<div class="one" id="two" title="test">
			id爲two,class爲one,title爲test的div.
			<div class="mini" title="other">class爲mini,title爲other</div>
			<div class="mini" title="test">class爲mini,title爲test</div>
		</div>

		<div class="one">
			<div class="mini">class爲mini</div>
			<div class="mini">class爲mini</div>
			<div class="mini">class爲mini</div>
			<div class="mini"></div>
		</div>

		<div class="one">
			<div class="mini">class爲mini</div>
			<div class="mini">class爲mini</div>
			<div class="mini">class爲mini</div>
			<div class="mini" title="tesst">class爲mini,title爲tesst</div>
		</div>

		<div style="display:none;" class="none">style的display爲"none"的div</div>

		<div class="hide">class爲"hide"的div</div>

		<div>
			包含input的type爲"hidden"的div<input type="hidden" size="8" />
		</div>

		<span id="mover">正在執行動畫的span元素.</span>

	</body>

</html>

jquery第一季（概述，基本選擇器與層次選擇器）

如何使用 JS 判斷用戶是否處於活躍狀態

Mono 支持LoongArch架構

lightdb秒級增加列和刪除列（not null帶默認值）

lightdb數據庫超時相關控制參數

通過HPA+CronHPA組合應對業務複雜彈性伸縮場景

❤️‍🔥 Solon Cloud Event 新的事務特性與應用

lightdb mysql 8.0兼容之不可見主鍵

使用 JS 實現在瀏覽器控制檯打印圖片 console.image()

基於Ubuntu-22.04安裝K8s-v1.28.2實驗（四）使用域名訪問網站應用

jsp學習之第二季

高性能JSON 框架之fastJSON

HTML5 之 MathML

java_30道面試題

jquery第一季（概述，基本選擇器與層次選擇器）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結