jQuery選擇器和事件
阿新 • • 發佈：2018-09-29
uri 觸發 綁定 XML num ans params out decimal
jQuery選擇器
其實官網中已經有很完全和很好的解釋了--jQuery選擇器
以下是一些常用選擇器總結
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <title></title>
6 <!--引入jQuery-->
7 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
8</head>
9<body>
10 <p id="pId">one</p>
11 <p class="pClass">two</p>
12 <button>click me</button>
13</body>
14 <script>
15 // 確定文檔加載完全
16 $("document").ready(function () {
17 $("button").click(function () {
18 // 元素選擇器
19
20 // id選擇器
21 $("#pId").text("id=pId的元素被修改")
22 // 類選擇器
23 $(".pClass").text("class=pClass的元素被修改")
24 })
25 })
26 </script>
27</html>
jQuery事件
- 常用事件方法：參考--jQuery事件
例如：1$("button").click(function(){}); // 單擊事件
2$("button").dblclick(function (){}); // 雙擊事件
- 綁定事件和解綁事件
傳統使用：
1 $("document").ready(function () {
2 $("button").click(function (){
3 alert("clicked me")
4 }); // 當事件非常多、文檔很大、要書寫的代碼過於龐大時，這種方式非常消耗內存。所以選用jQuery提供的綁定和解除綁定的方式來做監聽事件
5 });使用綁定和解除綁定的方式來做監聽事件
1$("document").ready(function () {
2 $("button").bind("click", clickHandel); // 添加綁定，解除綁定就是unbind。
3 });
4 function clickHandel(e) {
5 alert("bind")
6 }在jQuery 1.7之後，可以用on/off代替bind/unbind
- 事件的目標和事件的冒泡
DOM事件三個階段
當一個DOM事件被觸發時，它不僅僅只是單純地在本身對象上觸發一次，而是會經歷三個不同的階段：- 捕獲階段：先由文檔的根節點document往事件觸發對象，從外向內捕獲事件對象；
- 目標階段：到達目標事件位置（事發地），觸發事件；
- 冒泡階段：再從目標事件位置往文檔的根節點方向回溯，從內向外冒泡事件對象。
產生現象
多個元素相應一個事件.例如網頁上有兩個元素,其中一個元素嵌套在另一個元素中,並且2著都綁定了click事件,同時body也綁定了click事件,當點擊裏層元素,也會觸發外層元素的點擊事件
阻止事件冒泡
(1). 事件對象：為函數添加一個參數,這個事件的獨有事件對象就創建了,當事件處理函數執行完畢,事件對象就被銷毀
(2). 停止事件冒泡：使用事件對象調用stopPropagation()函數
(3). 博文參考-- jQuery事件---阻止冒泡和默認行為
- 自定義事件
參考博文--JQuery 自定義事件
jQuery選擇器和事件