Java Web(2)-jQuery上-有解無憂

一、jQuery初體驗

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://www.cnblogs.com/mengd/p/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="https://www.cnblogs.com/mengd/p/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="https://www.cnblogs.com/mengd/p/選擇 id 為 one 的元素" id="btn1" />
<input type="button" value="https://www.cnblogs.com/mengd/p/選擇 class 為 mini 的所有元素" id="btn2" />
<input type="button" value="https://www.cnblogs.com/mengd/p/選擇 元素名是 div 的所有元素" id="btn3" />
<input type="button" value="https://www.cnblogs.com/mengd/p/選擇 所有的元素" id="btn4" />
<input type="button" value="https://www.cnblogs.com/mengd/p/選擇 所有的 span 元素和id為two的元素" id="btn5" />

<br>
<div  id="one">
    id 為 one,class 為 one 的div
    <div >class為mini</div>
</div>
<div  id="two" title="test">
    id為two,class為one,title為test的div
    <div  title="other">class為mini,title為other</div>
    <div  title="test">class為mini,title為test</div>
</div>
<div >
    <div >class為mini</div>
    <div >class為mini</div>
    <div >class為mini</div>
    <div ></div>
</div>
<div >
    <div >class為mini</div>
    <div >class為mini</div>
    <div >class為mini</div>
    <div  title="tesst">class為mini,title為tesst</div>
</div>
<div style="display:none;" >style的display為"none"的div</div>
<div >class為"hide"的div</div>
<div>
    包含input的type為"hidden"的div<input type="hidden" size="8">
</div>
<span  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="https://www.cnblogs.com/mengd/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="https://www.cnblogs.com/mengd/p/選擇 body 內的所有 div 元素" id="btn1" />
		<input type="button" value="https://www.cnblogs.com/mengd/p/在 body 內, 選擇div子元素" id="btn2" />
		<input type="button" value="https://www.cnblogs.com/mengd/p/選擇 id 為 one 的下一個 div 元素" id="btn3" />
		<input type="button" value="https://www.cnblogs.com/mengd/p/選擇 id 為 two 的元素后面的所有 div 兄弟元素" id="btn4" />
		<br><br>
		<div  id="one">
			id 為 one,class 為 one 的div
			<div >class為mini</div>
		</div>
		<div  id="two" title="test">
			id為two,class為one,title為test的div
			<div  title="other">class為mini,title為other</div>
			<div  title="test">class為mini,title為test</div>
		</div>
		<div >
			<div >class為mini</div>
			<div >class為mini</div>
			<div >class為mini</div>
			<div ></div>
		</div>
		<div >
			<div >class為mini</div>
			<div >class為mini</div>
			<div >class為mini</div>
			<div  title="tesst">class為mini,title為tesst</div>
		</div>
		<div style="display:none;" >style的display為"none"的div</div>
		<div >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="https://www.cnblogs.com/mengd/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="https://www.cnblogs.com/mengd/p/選擇第一個 div 元素" id="btn1" />
		<input type="button" value="https://www.cnblogs.com/mengd/p/選擇最后一個 div 元素" id="btn2" />
		<input type="button" value="https://www.cnblogs.com/mengd/p/選擇class不為 one 的所有 div 元素" id="btn3" />
		<input type="button" value="https://www.cnblogs.com/mengd/p/選擇索引值為偶數的 div 元素" id="btn4" />
		<input type="button" value="https://www.cnblogs.com/mengd/p/選擇索引值為奇數的 div 元素" id="btn5" />
		<input type="button" value="https://www.cnblogs.com/mengd/p/選擇索引值為大于 3 的 div 元素" id="btn6" />
		<input type="button" value="https://www.cnblogs.com/mengd/p/選擇索引值為等于 3 的 div 元素" id="btn7" />
		<input type="button" value="https://www.cnblogs.com/mengd/p/選擇索引值為小于 3 的 div 元素" id="btn8" />
		<input type="button" value="https://www.cnblogs.com/mengd/p/選擇所有的標題元素" id="btn9" />
		<input type="button" value="https://www.cnblogs.com/mengd/p/選擇當前正在執行影片的所有元素" id="btn10" />		
		<input type="button" value="https://www.cnblogs.com/mengd/p/選擇沒有執行影片的最后一個div" id="btn11" />


		<h3>基本選擇器.</h3>
		<br><br>
		<div  id="one">
			id 為 one,class 為 one 的div
			<div >class為mini</div>
		</div>
		<div  id="two" title="test">
			id為two,class為one,title為test的div
			<div  title="other">class為mini,title為other</div>
			<div  title="test">class為mini,title為test</div>
		</div>
		<div >
			<div >class為mini</div>
			<div >class為mini</div>
			<div >class為mini</div>
			<div ></div>
		</div>
		<div >
			<div >class為mini</div>
			<div >class為mini</div>
			<div >class為mini</div>
			<div  title="tesst">class為mini,title為tesst</div>
		</div>
		<div style="display:none;" >style的display為"none"的div</div>
		<div >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="https://www.cnblogs.com/mengd/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="https://www.cnblogs.com/mengd/p/可用文本框1"/><br>
			不可用元素: <input name="email" disabled="disabled" value="https://www.cnblogs.com/mengd/p/不可用文本框"/><br>
			可用元素: <input name="che" value="https://www.cnblogs.com/mengd/p/可用文本框2"/><br>
			不可用元素: <input name="name" disabled="disabled" value="https://www.cnblogs.com/mengd/p/不可用文本框"/><br>
			<br>
			
			多選框: <br>
			<input type="checkbox" name="newsletter" checked="checked" value="https://www.cnblogs.com/mengd/p/test1" />test1
			<input type="checkbox" name="newsletter" value="https://www.cnblogs.com/mengd/p/test2" />test2
			<input type="checkbox" name="newsletter" value="https://www.cnblogs.com/mengd/p/test3" />test3
			<input type="checkbox" name="newsletter" checked="checked" value="https://www.cnblogs.com/mengd/p/test4" />test4
			<input type="checkbox" name="newsletter" value="https://www.cnblogs.com/mengd/p/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 物件中

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/137111.html

標籤：Java

上一篇：三面拿杭州研究院50offer：面對這些問題，你都能做到嘛？？

下一篇：將音頻檔案轉二進制分包存盤到Redis（奇淫技巧操作）

Java Web(2)-jQuery上