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 檔案上傳
2021-06-09
JavaWeb
Java Web(5)-Servlet詳解(上)
2020-07-27
JavaWebServlet
jQuery基礎2
2020-10-18
jQuery
java web開發之上機指導（2）
2018-08-03
JavaWeb
Web前端JQuery面試題（一）
2020-11-05
Web前端jQuery面試題
24數媒Java上機2
2024-04-26
Java
各種線上jquery引用
2019-05-11
jQuery
Django2 Web 實戰03-檔案上傳
2019-03-04
DjangoWeb
java web
2020-12-12
JavaWeb
JAVA學習筆記—JAVA WEB（二）JAVA WEB核心（下）
2020-12-16
Java筆記Web
JQuery線上引用地址整理
2021-09-09
jQuery
jquery阿里雲oss 分片上傳
2021-11-03
jQuery阿里
04_jQuery的2把利器
2018-07-24
jQuery
JQuery Plugin 2 - Passing Options into Your Plugin
2020-04-07
jQueryPlugin
jQuery 基礎樣式篇（2）
2021-09-09
jQuery
web2
2018-07-24
Web
從零開始學Web之jQuery（一）jQuery的概念，頁面載入事件
2018-07-04
WebjQuery事件
web前端javascript+jquery知識點總結
2020-02-17
Web前端JavaScriptjQuery
Flutter2 for Web，寫了個部落格站點，已上線
2021-03-18
FlutterWeb
web專案技術必備-------jQuery快速入門
2020-10-11
WebjQuery
深入web workers （上）
2020-11-07
Web
[java web]Idea+maven+spring4+hibernate5+struts2整合過程
2018-06-09
JavaWebIdeaMavenSpring
Java Web UI框架
2018-08-06
JavaWebUI框架
Java Web-JSP
2020-10-14
JavaWebJS
Java Web 拾遺
2024-09-25
JavaWeb
基於Python+Django+Jquery架構的Web開發
2018-06-30
PythonDjangojQuery架構Web
jQuery Validate驗證上傳檔案大小
2019-01-14
jQuery
(轉載)jquery分片上傳影片到php
2023-05-03
jQueryPHP
jquery圖片直接貼上上傳的失敗嘗試
2024-06-26
jQuery
JQuery基礎28_選擇器2
2024-06-18
jQuery
JS引擎(2)：Java平臺上JavaScript引擎—Rhino/Nashorn概述
2023-04-09
JSJavaScript
攻防世界-web2
2020-10-23
Web
Java學習-18 簡潔高效的jQuery
2020-11-29
JavajQuery
web基礎學習筆記(二十)之jquery動畫操作
2020-10-01
Web筆記jQuery動畫
IDEA建立Java WEB工程
2020-10-18
IdeaJavaWeb
JAVA Web07——Ajax
2020-10-23
JavaWeb
java web 中文亂碼
2020-04-04
JavaWeb