jQuery學習筆記整理[那就算半隻教程吧(◕ܫ◕)]（一）

文章目錄

1.基礎語法

Query 語法是通過選取 HTML 元素，並對選取的元素執行某些操作。

基礎語法： $(selector).action()

美元符號定義 jQuery
選擇符（selector）"查詢"和"查找" HTML 元素
jQuery 的 action() 執行對元素的操作

實例:

$(this).hide() - 隱藏當前元素

$("p").hide() - 隱藏所有 <p> 元素

$("p.test").hide() - 隱藏所有 class="test" 的 <p> 元素

$("#test").hide() - 隱藏 id="test" 的元素

2.入口函數

$(document).ready(function(){
 
   // 開始寫 jQuery 代碼...
 
});

這是爲了防止文檔在完全加載（就緒）之前運行 jQuery 代碼，即在 DOM 加載完成後纔可以對 DOM 進行操作。

如果在文檔沒有完全加載之前就運行函數，操作可能失敗。下面是兩個具體的例子：

試圖隱藏一個不存在的元素
獲得未完全加載的圖像的大小

簡潔寫法（與以上寫法效果相同）:

$(function(){
 
   // 開始寫 jQuery 代碼...
 
});

jQuery 入口函數與 JavaScript 入口函數的區別：

jQuery 的入口函數是在 html 所有標籤(DOM)都加載之後，就會去執行。
JavaScript 的 window.onload 事件是等到所有內容，包括外部圖片之類的文件加載完後，纔會執行。

3.jQuery選擇器

元素選擇器

jQuery 元素選擇器基於元素名選取元素。

在頁面中選取所有 < p> 元素:$(“p”)

用戶點擊按鈕後，所有 < p> 元素都隱藏：

<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>

<body>
<h2>這是一個標題</h2>
<p>這是一個段落。</p>
<p>這是另一個段落。</p>
<button>點我</button>
</body>

id 選擇器

jQuery #id 選擇器通過 HTML 元素的 id 屬性選取指定的元素。

頁面中元素的 id 應該是唯一的，所以您要在頁面中選取唯一的元素需要通過 #id 選擇器。

通過 id 選取元素語法如下：$（"#test"）

當用戶點擊按鈕後，有 id=“test” 屬性的元素將被隱藏：
實例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
	<script >
		$(document).ready(function(){
			$('button').click(function(){
				$('#test').hide()
			});
		});
	</script>
</head>
<body>
	<h2>這是一個標題</h2>
	<p>這是一個段落</p>
	<p id="test">這是另一個段落</p>
	<button>click me</button>
</body>
</html>

class 選擇器

jQuery 類選擇器可以通過指定的 class 查找元素。

語法如下：
$(".test")

實例

用戶點擊按鈕後所有帶有 class=“test” 屬性的元素都隱藏：
實例

$(document).ready(function(){
  $("button").click(function(){
    $(".test").hide();
  });
});

<h2>這是一個標題</h2>
<p>這是一個段落</p>
<p id="test">這是另外一個段落</p>
<button>點我</button>

$(":button") 爲 jQuery 中表單選擇器（貌似與過濾選擇器同級），旨在選擇所有的按鈕，所以會找到 < input type=“button”>、< button> 元素；
而 $(“button”) 則爲基本選擇器，旨在選擇爲 < button> 的標籤。

:即爲 jQuery 的過濾選擇器，語法類似於 css 中的僞類選擇器；
其過濾選擇器大概可以分爲基本過濾（p:first 之類）、內容過濾（:empty）、子元素過濾(:first-child)和屬性過濾[href] 選擇器。

其他實例

$("#id", ".class")  複合選擇器
$(div p span)       層級選擇器  div下的p元素中的span元素
$(div>p)            父子選擇器  div下的所有p元素
$(div+p)            相鄰元素選擇器  div後面的p元素(僅一個p)
$(div~p)            兄弟選擇器   div後面的所有p元素(同級別)
$(.p:last)          類選擇器 加 過濾選擇器  第一個和最後一個（first 或者 last）
$("#mytable td:odd")      層級選擇 加 過濾選擇器 奇偶（odd 或者 even）
$("div p:eq(2)")    索引選擇器 div下的第三個p元素（索引是從0開始）
$("a[href='www.baidu.com']")  屬性選擇器
$("p:contains(test)")        內容過濾選擇器，包含text內容的p元素
$(":emtyp")        內容過濾選擇器，所有空標籤（不包含子標籤和內容的標籤）parent 相反
$(":hidden")       所有隱藏元素 visible 
$("input:enabled") 選取所有啓用的表單元素
$(":disabled")     所有不可用的元素
$("input:checked") 獲取所有選中的複選框單選按鈕等
$("select option:selected") 獲取選中的選項元素

4.獨立文件中使用jQuery

如果網站包含許多頁面，希望 jQuery 函數易於維護，那麼把的jQuery 函數放到獨立的 .js 文件中。

<head>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script src="my_jquery_functions.js"></script>
</head>

5.事件

事件是什麼

頁面對不同訪問者的響應叫做事件。

事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。

在元素上移動鼠標。
選取單選按鈕
點擊元素
常見DOM元素

語法

$("p").click(function(){
    // 動作觸發後執行的代碼!!
});

常見的jQuery事件方法

dblclick()

當雙擊元素時，會發生 dblclick 事件。
dblclick() 方法觸發 dblclick 事件，或規定當發生 dblclick 事件時運行的函數

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
	<script >
		$(document).ready(function(){
			$("p").dblclick(function(){
				$(this).hide();
			});

		});
	</script>
</head>
<body>
	<p>雙擊我就消失了</p>
	<p >雙擊我也消失了</p>
	
</body>
</html>

點一點就不見了

mouseenter()

當鼠標指針穿過元素時，會發生 mouseenter 事件。
mouseenter() 方法觸發 mouseenter 事件，或規定當發生 mouseenter 事件時運行的函數

<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
	<script >
		$(document).ready(function(){
			$("p").mouseenter(function(){
				alert("鼠標移到我上面了！")
			});

		});
	</script>
</head>
<body>
	<p>111111</p>
	<p >1111111</p>
	
</body>

mouseleave()

當鼠標指針離開元素時，會發生 mouseleave 事件。
mouseleave() 方法觸發 mouseleave 事件，或規定當發生 mouseleave 事件時運行的函數：

$(document).ready(function(){
			$("p").mouseleave(function(){
				alert("鼠標走掉了")
			});

mousedown()

當鼠標指針移動到元素上方，並按下鼠標按鍵時，會發生 mousedown 事件。
mousedown() 方法觸發 mousedown 事件，或規定當發生 mousedown 事件時運行的函數

$(document).ready(function(){
			$("p").mousedown(function(){
				alert("鼠標按到我了！")
			});
			});

mouseup()

當在元素上鬆開鼠標按鈕時，會發生 mouseup 事件。
mouseup() 方法觸發 mouseup 事件，或規定當發生 mouseup 事件時運行的函數

$(document).ready(function(){
			$("p").mouseup(function(){
				alert("我被鼠標鬆開了！")
			});

		});

hover()

hover()方法用於模擬光標懸停事件。

當鼠標移動到元素上時，會觸發指定的第一個函數(mouseenter);當鼠標移出這個元素時，會觸發指定的第二個函數(mouseleave)。

<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
	<script >
		$(document).ready(function(){
			$('p').hover(
				function(){
					alert("進來了");

				},
				function(){
					alert("你走了，再見見");
				}
				)
		});
	</script>
</head>
<body>
	<p>這是要進入的區域</p>	
</body>

focus()

當元素獲得焦點時，發生 focus 事件。

當通過鼠標點擊選中元素或通過 tab 鍵定位到元素時，該元素就會獲得焦點。

focus() 方法觸發 focus 事件，或規定當發生 focus 事件時運行的函數

blur()

當元素失去焦點時，發生 blur 事件。

blur() 方法觸發 blur 事件，或規定當發生 blur 事件時運行的函數

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>
	<script >
		$(document).ready(function(){
			$('input').focus(function(){
				$(this).css("background-color","#cccccc");
			});
			$("input").blur(function(){
				$(this).css("background-color","#ffffff")
			});
		})
	</script>
</head>
<body>
	NAME:<input type="text" name="fullname"><br>
	EMAIL:<input type="text" name="email">
</body>
</html>

鼠標點擊輸入框內聚焦，失去焦點還原

keypress,keydown,keyup的區別:

1.keydown：在鍵盤上按下某鍵時發生,一直按着則會不斷觸發（opera瀏覽器除外）, 它返回的是鍵盤代碼;

2.keypress：在鍵盤上按下一個按鍵，併產生一個字符時發生, 返回ASCII碼。注意: shift、alt、ctrl等鍵按下並不會產生字符，所以監聽無效 ,換句話說, 只有按下能在屏幕上輸出字符的按鍵時keypress事件纔會觸發。若一直按着某按鍵則會不斷觸發。

3.keyup：用戶鬆開某一個按鍵時觸發, 與keydown相對, 返回鍵盤代碼.

案例1:獲取按鍵代碼或字符的ASCII碼

$(window).keydown( function(event){
   // 通過event.which可以拿到按鍵代碼.  如果是keypress事件中,則拿到ASCII碼.
} );

案例2:傳遞數據給事件處理函數

jQueryObject.keypress( [[ data ,] handler ] );

data: 通過event.data傳遞給事件處理函數的任意數據;
handler: 指定的事件處理函數;

舉例:

// 只允許按下的字母鍵生效, 65~90是所有大寫字母的鍵盤代碼範圍.

var validKeys = { start: 65, end: 90  };
$("#keys").keypress( validKeys, function(event){
    var keys = event.data;  //拿到validKeys對象.
    return event.which >= keys.start && event.which <= keys.end;
} );

1. 獲取事件對象

$(document).ready(function(){
$(window).keypress(function(event){
//獲取事件對象，裏面包含各種有用的信息。
console.log(event);
//console.log(event.which);
});
});

2. keypress事件獲取鍵入字符

$(window).keypress(function(event){
//event.which是獲取ASCII碼，前面的函數是將ASCII碼轉換成字符，空格鍵和Enter鍵輸出均爲空白。
console.log(String.fromCharCode(event.which));
//從event對象中key屬性獲取字符，但是Enter鍵的key值爲"Enter"，空白鍵還是空白" "。
console.log(event.key);
});

jQuery學習筆記整理[那就算半隻教程吧(◕ܫ◕)]（一）

文章目錄

1.基礎語法

2.入口函數

3.jQuery選擇器

元素選擇器

id 選擇器

class 選擇器

其他實例

4.獨立文件中使用jQuery

5.事件

事件是什麼

語法

常見的jQuery事件方法

AI模型 Llama 3體驗筆記

【面試準備】又一次失敗的面試經歷，題目離譜～資深軟件測試工程師

dotnet 8 版本與銀河麒麟V10和UOS系統的 glibc 兼容性

web前端開發筆記整理（五）

LIUNX自測基礎命令測驗題目+考覈點（三）

Js_Data對象，定時器,腳本化css

jQuery實現tab欄切換（附上代碼）

web前端開發筆記整理（四）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結