Java Web(2)-jQuery上_ZenDei技術網路在線

一、jQuery初體驗使用jQuery給一個按鈕綁定單擊事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src ...

一、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 的很多功能。$()就是調用$這個函數

傳入參數為 [ 函數 ] 時：
- 表示頁面載入完成之後。相當於 window.onload=function(){}
傳入參數為 [HTML 字元串 ] 時：
- 會對我們創建這個 html 標簽對象
傳入參數為 [ 選擇器字元串 ] 時：
- $(“#id 屬性值”); id 選擇器，根據 id 查詢標簽對象
- $(“標簽名”); 標簽名選擇器，根據指定的標簽名查詢標簽對象
- $(“.class 屬性值”); 類型選擇器，可以根據 class 屬性查詢標簽對象
傳入參數為 [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 對象中

Java Web(2)-jQuery上