Java Web(2)-jQuery上

山丘i發表於2020-07-23

一、jQuery初體驗

使用jQuery給一個按鈕繫結單擊事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>

    <script type="text/javascript">
        // window.onload = function () {
        //     var butObj = document.getElementById("butId");
        //     butObj.onclick = function () {
        //         alert("js 單機事件")
        //     }
        // }

        // 1. 表示頁面載入完成之後,類似於 window.onload = function () {
        $(function () {
            var $butObj = $("#butId");  // 2. 按照id查詢標籤物件
            $butObj.click(function () {  // 3. 繫結單擊事件
                alert("jQuery 單擊事件")
            });
        });

    </script>
</head>
<body>

<button id="butId"> hello </button>
</body>
</html>

注意:

  • 使用 jQuery 一定要引入 jQuery 庫
  • jQuery 中的$到底是什麼? 答案: 它是一個函式
  • 怎麼為按鈕新增點選響應函式的?
    • 使用 jQuery 查詢到標籤物件
    • 使用標籤物件.click(function(){});

二、jQuery 核心函式

$ 是 jQuery 的核心函式,能完成 jQuery 的很多功能。$()就是呼叫$這個函式

  1. 傳入引數為 [ 函式 ] 時:
    • 表示頁面載入完成之後。相當於 window.onload=function(){}
  2. 傳入引數為 [HTML 字串 ] 時:
    • 會對我們建立這個 html 標籤物件
  3. 傳入引數為 [ 選擇器字串 ] 時:
    • $(“#id 屬性值”); id 選擇器,根據 id 查詢標籤物件
    • $(“標籤名”); 標籤名選擇器,根據指定的標籤名查詢標籤物件
    • $(“.class 屬性值”); 型別選擇器,可以根據 class 屬性查詢標籤物件
  4. 傳入引數為 [DOM 物件 ] 時:
    • 會把這個 dom 物件轉換為 jQuery 物件

三、jQuery 物件和 dom 物件區分

1. 什麼是 jQuery 物件,什麼是 dom 物件

Dom物件

  • 通過 getElementById()查詢出來的標籤物件是 Dom 物件
  • 通過 getElementsByName()查詢出來的標籤物件是 Dom 物件
  • 通過 getElementsByTagName()查詢出來的標籤物件是 Dom 物件
  • 通過 createElement() 方法建立的物件,是 Dom 物件

DOM 物件 Alert 出來的效果是:[object HTML 標 籤 名 Element]

jQuery物件

通過 JQuery 提供的 API 建立的物件,是 JQuery 物件

通過 JQuery 包裝的 Dom 物件,也是 JQuery 物件

通過 JQuery 提供的 API 查詢到的物件,是 JQuery 物件

jQuery 物件 Alert 出來的效果是:[objectObject]

2. jQuery 物件的本質是什麼?

jQuery 物件是 dom 物件的陣列 +jQuery 提供的一系列功能函式

3. jQuery 物件和 Dom 物件使用區別

jQuery 物件不能使用 DOM 物件的屬性和方法

DOM 物件也不能使用 jQuery 物件的屬性和方法

4. Dom 物件和 jQuery 物件互轉

dom物件轉化為 jQuery 物件

  • 先有 DOM 物件
  • $(DOM 物件 ) 就可以轉換成為 jQuery 物件

jQuery 物件轉為 dom 物件

  • 先有 jQuery 物件
  • jQuery 物件[下標]取出相應的 DOM 物件

四、jQuery選擇器

1. 基本選擇器

  • ID 選擇器:根據 id 查詢標籤物件

  • .class 選擇器:根據 class 查詢標籤物件
  • element 選擇器:根據標籤名查詢標籤物件
  • * 選擇器:表示任意的,所有的元素
  • selector1,selector2 組合選擇器:合併選擇器 1,選擇器 2 的結果並返回

p.myClass

表示標籤名必須是 p 標籤,而且 class 型別還要是 myClass

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
        div, span, p {
            width: 140px;
            height: 140px;
            margin: 5px;
            background: #aaa;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Verdana;
        }

        div.mini {
            width: 55px;
            height: 55px;
            background-color: #aaa;
            font-size: 12px;
        }

        div.hide {
            display: none;
        }
    </style>
    <script type="text/javascript" src="script/jquery-1.7.2.js"></script>
    <script type="text/javascript">

        $(function () {
            //1.選擇 id 為 one 的元素 "background-color","#bbffaa"
            $("#btn1").click(function () {
                // css() 方法 可以設定和獲取樣式
                $("#one").css("background-color","#bbffaa");
            });


            //2.選擇 class 為 mini 的所有元素
            $("#btn2").click(function () {
                $(".mini").css("background-color","#bbffaa");
            });

            //3.選擇 元素名是 div 的所有元素
            $("#btn3").click(function () {
                $("div").css("background-color","#bbffaa");
            });

            //4.選擇所有的元素
            $("#btn4").click(function () {
                $("*").css("background-color","#bbffaa");
            });

            //5.選擇所有的 span 元素和id為two的元素
            $("#btn5").click(function () {
                $("span,#two").css("background-color","#bbffaa");
            });

        });

    </script>
</head>
<body>
<!-- 	<div>
		<h1>基本選擇器</h1>
	</div>	 -->
<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>
<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 class="one" id="span">^^span元素^^</span>
</body>
</html>


2. 層級選擇器

  • ancestor descendant 後代選擇器 :在給定的祖先元素下匹配所有的後代元素
  • parent>child 子元素選擇器:在給定的父元素下匹配所有的子元素
  • prev+next 相鄰元素選擇器:匹配所有緊接在 prev 元素後的 next 元素
  • prev~sibings 之後的兄弟元素選擇器:匹配 prev 元素之後的所有 siblings 元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<style type="text/css">
			div, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			div.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			div.hide {
			    display: none;
			}			
		</style>
		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				//1.選擇 body 內的所有 div 元素
				$("#btn1").click(function(){
					$("body div").css("background", "#bbffaa");
				});

				//2.在 body 內, 選擇div子元素  
				$("#btn2").click(function(){
					$("body > div").css("background", "#bbffaa");
				});

				//3.選擇 id 為 one 的下一個 div 元素 
				$("#btn3").click(function(){
					$("#one+div").css("background", "#bbffaa");
				});

				//4.選擇 id 為 two 的元素後面的所有 div 兄弟元素
				$("#btn4").click(function(){
					$("#two~div").css("background", "#bbffaa");
				});
			});
		</script>
	</head>
	<body>	

		<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" />
		<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="span">^^span元素^^</span>
	</body>
</html>


3. 過濾選擇器

基本過濾器:

  • :first 獲取第一個元素
  • :last 獲取最後個元素
  • :not(selector) 去除所有與給定選擇器匹配的元素
  • :even 匹配所有索引值為偶數的元素,從 0 開始計數
  • :odd 匹配所有索引值為奇數的元素,從 0 開始計數
  • :eq(index) 匹配一個給定索引值的元素
  • :gt(index) 匹配所有大於給定索引值的元素 ,$("li:gt(2)") //下標大於 2 的li
  • :lt(index) 匹配所有小於給定索引值的元素
  • :header 匹配如 h1,h2,h3 之類的標題元素 :
  • animated 匹配所有正在執行動畫效果的元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<style type="text/css">
			div, span, p {
			    width: 140px;
			    height: 140px;
			    margin: 5px;
			    background: #aaa;
			    border: #000 1px solid;
			    float: left;
			    font-size: 17px;
			    font-family: Verdana;
			}
			
			div.mini {
			    width: 55px;
			    height: 55px;
			    background-color: #aaa;
			    font-size: 12px;
			}
			
			div.hide {
			    display: none;
			}			
		</style>
		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(document).ready(function(){
				function anmateIt(){
					$("#mover").slideToggle("slow", anmateIt);
				}
				anmateIt();
			});
			
			$(document).ready(function(){
				//1.選擇第一個 div 元素  
				$("#btn1").click(function(){
					$("div:first").css("background", "#bbffaa");
				});

				//2.選擇最後一個 div 元素
				$("#btn2").click(function(){
					$("div:last").css("background", "#bbffaa");
				});

				//3.選擇class不為 one 的所有 div 元素
				$("#btn3").click(function(){
					$("div:not(.one)").css("background", "#bbffaa");
				});

				//4.選擇索引值為偶數的 div 元素
				$("#btn4").click(function(){
					$("div:even").css("background", "#bbffaa");
				});

				//5.選擇索引值為奇數的 div 元素
				$("#btn5").click(function(){
					$("div:odd").css("background", "#bbffaa");
				});

				//6.選擇索引值為大於 3 的 div 元素
				$("#btn6").click(function(){
					$("div:gt(3)").css("background", "#bbffaa");
				});

				//7.選擇索引值為等於 3 的 div 元素
				$("#btn7").click(function(){
					$("div:eq(3)").css("background", "#bbffaa");
				});

				//8.選擇索引值為小於 3 的 div 元素
				$("#btn8").click(function(){
					$("div:lt(3)").css("background", "#bbffaa");
				});

				//9.選擇所有的標題元素
				$("#btn9").click(function(){
					$(":header").css("background", "#bbffaa");
				});

				//10.選擇當前正在執行動畫的所有元素
				$("#btn10").click(function(){
					$(":animated").css("background", "#bbffaa");
				});
				//11.選擇沒有執行動畫的最後一個div
				$("#btn11").click(function(){
					$("div:not(:animated):last").css("background", "#bbffaa");
				});
			});
		</script>
	</head>
	<body>
		<input type="button" value="選擇第一個 div 元素" id="btn1" />
		<input type="button" value="選擇最後一個 div 元素" id="btn2" />
		<input type="button" value="選擇class不為 one 的所有 div 元素" id="btn3" />
		<input type="button" value="選擇索引值為偶數的 div 元素" id="btn4" />
		<input type="button" value="選擇索引值為奇數的 div 元素" id="btn5" />
		<input type="button" value="選擇索引值為大於 3 的 div 元素" id="btn6" />
		<input type="button" value="選擇索引值為等於 3 的 div 元素" id="btn7" />
		<input type="button" value="選擇索引值為小於 3 的 div 元素" id="btn8" />
		<input type="button" value="選擇所有的標題元素" id="btn9" />
		<input type="button" value="選擇當前正在執行動畫的所有元素" id="btn10" />		
		<input type="button" value="選擇沒有執行動畫的最後一個div" id="btn11" />


		<h3>基本選擇器.</h3>
		<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>
		<div id="mover">正在執行動畫的div元素.</div>
	</body>
</html>


內容過濾器:

  • :contains(text) 匹配包含給定文字的元素
  • :empty 匹配所有不包含子元素或者文字的空元素
  • :parent 匹配含有子元素或者文字的元素
  • :has(selector) 匹配含有選擇器所匹配的元素的元素

屬性過濾器:

  • [attribute] 匹配包含給定屬性的元素。
  • [attribute=value] 匹配給定的屬性是某個特定值的元素
  • [attribute!=value] 匹配所有不含有指定的屬性,或者屬性不等於特定值的元素。
  • [attribute^=value] 匹配給定的屬性是以某些值開始的元素
  • [attribute$=value] 匹配給定的屬性是以某些值結尾的元素
  • [attribute*=value] 匹配給定的屬性是以包含某些值的元素
  • [attrSel1][attrSel2][attrSelN] 複合屬性選擇器,需要同時滿足多個條件時使用

表單過濾器:

  • :input 匹配所有 input,textarea,select 和 button 元素
  • :text 匹配所有 文字輸入框
  • :password 匹配所有的密碼輸入框
  • :radio 匹配所有的單選框
  • :checkbox 匹配所有的核取方塊
  • :submit 匹配所有提交按鈕
  • :image 匹配所有 img 標籤
  • :reset 匹配所有重置按鈕
  • :button 匹配所有 inputtype=button<button>按鈕
  • :file 匹配所有 inputtype=file 檔案上傳
  • :hidden 匹配所有不可見元素 display:none 或 inputtype=hidden

表單物件屬性過濾器:

  • :enabled 匹配所有可用元素
  • :disabled 匹配所有不可用元素
  • :checked 匹配所有選中的單選,複選,和下拉選單中選中的 option 標籤物件
  • :selected 匹配所有選中的 option
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
		<script type="text/javascript">
			$(function(){				
				//1.對錶單內 可用input 賦值操作
				$("#btn1").click(function(){
					// val()可以操作表單項的value屬性值
					// 它可以設定和獲取
					$(":text:enabled").val("我是萬能的程式設計師");
				});
				//2.對錶單內 不可用input 賦值操作
				$("#btn2").click(function(){
					$(":text:disabled").val("管你可用不可用,反正我是萬能的程式設計師");
				});
				//3.獲取多選框選中的個數  使用size()方法獲取選取到的元素集合的元素個數
				$("#btn3").click(function(){
					alert( $(":checkbox:checked").length );
				});
				//4.獲取多選框,每個選中的value值
				$("#btn4").click(function(){
					// 獲取全部選中的核取方塊標籤物件
					var $checkboies = $(":checkbox:checked");
					// 老式遍歷
					// for (var i = 0; i < $checkboies.length; i++){
					// 	alert( $checkboies[i].value );
					// }

					// each方法是jQuery物件提供用來遍歷元素的方法
					// 在遍歷的function函式中,有一個this物件,這個this物件,就是當前遍歷到的dom物件
					$checkboies.each(function () {
						alert( this.value );
					});

				});
				//5.獲取下拉框選中的內容  
				$("#btn5").click(function(){
					// 獲取選中的option標籤物件
					var $options = $("select option:selected");
					// 遍歷,獲取option標籤中的文字內容
					$options.each(function () {
						// 在each遍歷的function函式中,有一個this物件。這個this物件是當前正在遍歷到的dom物件
						alert(this.innerHTML);
					});
				});
			})	
		</script>
	</head>
	<body>
		<h3>表單物件屬性過濾選擇器</h3>
		 <button id="btn1">對錶單內 可用input 賦值操作.</button>
  		 <button id="btn2">對錶單內 不可用input 賦值操作.</button><br /><br />
		 <button id="btn3">獲取多選框選中的個數.</button>
		 <button id="btn4">獲取多選框選中的內容.</button><br /><br />
         <button id="btn5">獲取下拉框選中的內容.</button><br /><br />
		 
		<form id="form1" action="#">			
			可用元素: <input name="add" value="可用文字框1"/><br>
			不可用元素: <input name="email" disabled="disabled" value="不可用文字框"/><br>
			可用元素: <input name="che" value="可用文字框2"/><br>
			不可用元素: <input name="name" disabled="disabled" value="不可用文字框"/><br>
			<br>
			
			多選框: <br>
			<input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
			<input type="checkbox" name="newsletter" value="test2" />test2
			<input type="checkbox" name="newsletter" value="test3" />test3
			<input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
			<input type="checkbox" name="newsletter" value="test5" />test5
			
			<br><br>
			下拉選單1: <br>
			<select name="test" multiple="multiple" style="height: 100px" id="sele1">
				<option>浙江</option>
				<option selected="selected">遼寧</option>
				<option>北京</option>
				<option selected="selected">天津</option>
				<option>廣州</option>
				<option>湖北</option>
			</select>
			
			<br><br>
			下拉選單2: <br>
			<select name="test2">
				<option>浙江</option>
				<option>遼寧</option>
				<option selected="selected">北京</option>
				<option>天津</option>
				<option>廣州</option>
				<option>湖北</option>
			</select>
		</form>		
	</body>
</html>


五、jQuery 元素篩選

  • eq() 獲取給定索引的元素 功能跟 :eq() 一樣
  • first() 獲取第一個元素 功能跟 :first 一樣
  • last() 獲取最後一個元素 功能跟 :last 一樣
  • filter(exp) 留下匹配的元素
  • is(exp) 判斷是否匹配給定的選擇器,只要有一個匹配就返回,true
  • has(exp) 返回包含有匹配選擇器的元素的元素 功能跟 :has 一樣
  • not(exp) 刪除匹配選擇器的元素 功能跟 :not 一樣
  • children(exp) 返回匹配給定選擇器的子元素 功能跟 parent>child 一樣
  • find(exp) 返回匹配給定選擇器的後代元素 功能跟 ancestordescendant 一樣
  • next() 返回當前元素的下一個兄弟元素 功能跟 prev+next 功能一樣
  • nextAll() 返回當前元素後面所有的兄弟元素 功能跟 prev~siblings 功能一樣
  • nextUntil() 返回當前元素到指定匹配的元素為止的後面元素
  • parent() 返回父元素
  • prev(exp) 返回當前元素的上一個兄弟元素
  • prevAll() 返回當前元素前面所有的兄弟元素
  • prevUnit(exp) 返回當前元素到指定匹配的元素為止的前面元素
  • siblings(exp) 返回所有兄弟元素
  • add() 把 add 匹配的選擇器的元素新增到當前 jquery 物件中

相關文章