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 的很多功能。$()就是呼叫$這個函式

傳入引數為 [ 函式 ] 時：
- 表示頁面載入完成之後。相當於 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下
2020-07-24
JavaWebjQuery
【java web】我眼中的Jquery
2015-07-28
JavaWebjQuery
Java Web 檔案上傳
2021-06-09
JavaWeb
java Web知識點（2）
2017-04-07
JavaWeb
Java Web(5)-Servlet詳解(上)
2020-07-27
JavaWebServlet
JAVA Web 之 struts2檔案上傳下載演示(一)(轉)
2013-08-29
JavaWeb
Java Web之SpringMVC 上傳檔案
2017-12-13
JavaWebSpringMVC
24數媒Java上機2
2024-04-26
Java
java web開發之上機指導（2）
2018-08-03
JavaWeb
如何再IDEA 上使用java web開發
2016-11-15
IdeaJavaWeb
MongoDB+Struts2+JQuery.formValidator外掛的web應用示例
2014-03-11
MongoDBjQueryORMWeb
jQuery attributes（上）
2013-05-21
jQuery
（jQuery） jQuery中的事件與動畫（上）
2016-09-12
jQuery事件動畫
我需要在Web上完成一個圖片上傳的功能(+2)
2016-04-24
Web
Web前端JQuery面試題（一）
2020-11-05
Web前端jQuery面試題
Web前端開發（五）-- jQuery
2017-10-24
Web前端jQuery
Java Web之Struts2訪問Servlet API
2017-12-13
JavaWebServletAPI
jQuery UI Bootstrap：在jQuery UI上整合Bootstrap
2015-05-10
jQueryUIboot
jQuery心得2--jQuery案例剖析1
2013-03-18
jQuery
Django2 Web 實戰03-檔案上傳
2019-03-04
DjangoWeb
jQuery基礎2
2020-10-18
jQuery
Java Web(十二) commons-fileupload上傳下載
2017-03-01
JavaWeb
java web
2020-12-12
JavaWeb
Java Web系列：Java Web 專案基礎
2015-12-17
JavaWeb
java-web-j2ee學習建議路線
2015-11-05
JavaWeb
JAVA學習筆記—JAVA WEB（二）JAVA WEB核心（下）
2020-12-16
Java筆記Web
深入web workers （上）
2020-11-07
Web
web2
2018-07-24
Web
Flutter2 for Web，寫了個部落格站點，已上線
2021-03-18
FlutterWeb
jQuery獲取上一個元素
2017-11-26
jQuery
jQuery學習（2）ajax()使用
2018-01-17
jQuery
jQuery學習筆記（2）
2013-12-01
jQuery筆記
學習jQuery延時2
2015-06-29
jQuery
使用 jQuery UI 和 jQuery 外掛構建更好的 Web 應用程式
2012-06-14
jQueryUIWeb
JAVA上加密演算法的實現用例(2)
2016-12-29
Java加密演算法
jQuery心得3--jQuery入門知識串講2
2013-03-19
jQuery
Java程式（非web）slf4j整合Log4j2
2017-04-20
JavaWeb
jquery阿里雲oss 分片上傳
2021-11-03
jQuery阿里