jQuery初识和常用事件（一）
文章目錄
- 一、jQuery
- 二、入口函數
- 三、選擇器
- 選擇器小結 ★
- 全部選擇器參考 ☆
- 四、常用的 jQuery 事件方法
- 事件寫法
- 鼠標事件
- 元素事件
- 鍵盤事件
- 文檔/窗口事件
- 全部事件方法參考 ☆
- 五、效果事件
- 顯示與隱藏：hide，show，toggle
- 淡入和淡出：fadeIn()，fadeOut()，fadeToggle()，fadeTo()
- 滑動：slideDown()，slideUp()，slideToggle()
- 自定義動畫：animate()
- 停止動畫：stop()
- jQuery - 鏈(Chaining)：在相同的元素上運行多條 jQuery 命令
- 全部效果事件參考 ☆
- 雜學
一、jQuery
1.jQuery是一個JavaScript函數庫（框架）。
2.jQuery是一個輕量級的"寫的少，做的多"的JavaScript庫。
3.jQuery庫包含以下功能：
- HTML 元素選取
- HTML 元素操作
- CSS 操作
- HTML 事件函數
- JavaScript 特效和動畫
- HTML DOM 遍歷和修改
- AJAX
- Utilities
提示： 除此之外，Jquery還提供了大量的插件。
4.jQuery是目前最流行的js框架，而且提供了大量的擴展。
5.jQuery 擁有可操作 HTML 元素和屬性的強大方法，就是操作 DOM 的能力。
6. ‘$’ 是 jQuery 的簡稱，可以使用 $，也可以使用 jQuery
二、入口函數
jQuery 入口函數:
在 html 所有標簽(DOM)都加載之后，就會去執行。
JavaScript 入口函數:
等到所有內容，包括外部圖片之類的文件加載完后，才會執行。
三、選擇器
- jQuery 中所有選擇器都以美元符號開頭：$()
- jQuery 選擇器基于元素的 id、類、類型、屬性、屬性值等"查找"（或選擇）HTML 元素
- 元素選擇器：$(“p”)
- id選擇器：$("#test")
- 類選擇器：$(".test")
- 進階選擇：
$("*") 選取所有元素
$(this) 選取當前 HTML 元素
$(“p.intro”) 選取 class 為 intro 的 p 元素
$(“p:first”) 選取第一個 p 元素
$(“ul li:first”) 選取第一個 ul 元素的第一個 li 元素
$(“ul li:first-child”) 選取每個 ul 元素的第一個 li 元素
$("[href]") 選取帶有 href 屬性的元素
$(“a[target=’_blank’]”) 選取所有 target 屬性值等于 “_blank” 的 a 元素
$(“a[target!=’_blank’]”) 選取所有 target 屬性值不等于 “_blank” 的 a 元素
$(":button") 選取所有 type=“button” 的 input 元素 和 button 元素
$(“tr:even”) 選取偶數位置的 tr 元素
$(“tr:odd”) 選取奇數位置的 tr 元素
選擇器小結 ★
1.基本選擇器 $("#id") // ID選擇器 $("div") // 元素選擇器 $(".classname") // 類選擇器 $(".classname,.classname1,#id1") // 組合選擇器2.層次選擇器 $("#id>.classname ") // 子元素選擇器 $("#id .classname ") // 后代元素選擇器 $("#id + .classname ") // 緊鄰下一個元素選擇器 $("#id ~ .classname ") // 兄弟元素選擇器3.過濾選擇器(重點) $("li:first") // 第一個li $("li:last") // 最后一個li $("li:even") // 挑選下標為偶數的li $("li:odd") // 挑選下標為奇數的li $("li:eq(4)") // 下標等于 4 的li(第五個 li 元素) $("li:gt(2)") // 下標大于 2 的li $("li:lt(2)") // 下標小于 2 的li $("li:not(#runoob)") // 挑選除 id="runoob" 以外的所有li3.2內容過濾選擇器 $("div:contains('Runob')") // 包含 Runob文本的元素 $("td:empty") // 不包含子元素或者文本的空元素 $("div:has(selector)") // 含有選擇器所匹配的元素 $("td:parent") // 含有子元素或者文本的元素3.3可見性過濾選擇器 $("li:hidden") // 匹配所有不可見元素，或type為hidden的元素 $("li:visible") // 匹配所有可見元素3.4屬性過濾選擇器 $("div[id]") // 所有含有 id 屬性的 div 元素 $("div[id='123']") // id屬性值為123的div 元素 $("div[id!='123']") // id屬性值不等于123的div 元素 $("div[id^='qq']") // id屬性值以qq開頭的div 元素 $("div[id$='zz']") // id屬性值以zz結尾的div 元素 $("div[id*='bb']") // id屬性值包含bb的div 元素 $("input[id][name$='man']") //多屬性選過濾，同時滿足兩個屬性的條件的元素3.5狀態過濾選擇器 $("input:enabled") // 匹配可用的 input $("input:disabled") // 匹配不可用的 input $("input:checked") // 匹配選中的 input $("option:selected") // 匹配選中的 option4.表單選擇器 $(":input") //匹配所有 input, textarea, select 和 button 元素 $(":text") //所有的單行文本框，$(":text") 等價于$("[type=text]")，推薦使用$("input:text")效率更高，下同 $(":password") //所有密碼框 $(":radio") //所有單選按鈕 $(":checkbox") //所有復選框 $(":submit") //所有提交按鈕 $(":reset") //所有重置按鈕 $(":button") //所有button按鈕 $(":file") //所有文件域全部選擇器參考 ☆
菜鳥教程 - 選擇器
四、常用的 jQuery 事件方法
事件寫法
$('selector').func(arg1,arg2,...); // selector：某個元素 // func：事件函數 // arg1：參數，一般是事件函數的配置參數，和回調函數eg：jQuery使用事件 —— 點擊元素后隱藏該元素：
$("p").click(function(){$(this).hide(); });-
$(document).ready()，等價 $() —— html 所有標簽(DOM)都加載之后執行
-
獲取事件對象，里面包含各種有用的信息：
$(document).ready(function(){$(window).keypress(function(event){ //獲取事件對象，里面包含各種有用的信息。console.log(event);//console.log(event.which);}); });
鼠標事件
- click() —— 單機元素
- dblclick() —— 雙擊元素
- mouseenter() —— 當鼠標指針穿過元素時，會發生 mouseenter 事件。
- mouseleave() —— 當鼠標指針離開元素時，會發生 mouseleave 事件
- mousedown() —— 當鼠標指針移動到元素上方，并按下鼠標按鍵時，會發生 mousedown 事件
- mouseup() —— 當在元素上松開鼠標按鈕時，會發生 mouseup 事件
- hover() ——光標懸停事件
元素事件
- focus() —— 元素（表單）獲取焦點
- blur() —— 元素（表單）失去焦點
- change() —— 當元素的值改變時發生 change 事件（僅適用于表單字段）
- submit() —— 當提交表單時，會發生 submit 事件。該事件只適用于 form 元素。
鍵盤事件
-
keydown() —— 在鍵盤上按下某鍵時發生,一直按著則會不斷觸發（opera瀏覽器除外）, 它返回的是鍵盤代碼;
-
.keyup() —— 用戶松開某一個按鍵時觸發, 與keydown相對, 返回鍵盤代碼
-
.keypress() —— 在鍵盤上按下一個按鍵，并產生一個字符時發生, 返回ASCII碼。注意: shift、alt、ctrl等鍵按下并不會產生字符，所以監聽無效 ,換句話說, 只有按下能在屏幕上輸出字符的按鍵時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); });
拓： keypress事件獲取鍵入字符
文檔/窗口事件
- load() —— 當指定的元素已加載時，會發生 load 事件。該方法在 jQuery 版本 1.8 中已廢棄。
- resize() —— 當調整瀏覽器窗口大小時，發生 resize 事件。
- scroll() —— 當用戶滾動指定的元素時，會發生 scroll 事件。
- unload() —— Firefox 與 Chrome 會阻止彈窗，所以沒辦法看到效果。
當用戶離開頁面時，會發生 unload 事件。
當發生以下情況下，會觸發 unload 事件：
點擊某個離開頁面的鏈接
在地址欄中鍵入了新的 URL
使用前進或后退按鈕
關閉瀏覽器窗口
重新加載頁面
unload() 方法規定當 unload 事件發生時會發生什么。
unload() 方法只應用于 window 對象。
注意：unload 事件在不同瀏覽器中效果不一樣，請確保使用前在所有瀏覽器測試該方法。unload() 方法在 jQuery 版本 1.8 中被廢棄，在 3.0 版本被移除。
全部事件方法參考 ☆
菜鳥教程 - 事件方法
五、效果事件
-
顯示與隱藏：hide，show，toggle
$(selector).hide(speed,callback); 隱藏元素
$(selector).show (speed,callback); 顯示元素
$(selector).toggle(speed,callback); 切換元素的顯示/隱藏狀態
可選參數：
speed —— 執行時間（slow，fast，ms）
callback —— 回調函數
細節：
1.(selector)選中的元素的個數為n個，callback 函數不加括號時則callback函數會執行n次；當 callback 函數加上括號時，函數立即執行，只會調用一次
2.callback函數名后加括號，會立刻執行函數體，而不是等到顯示/隱藏完成后才執行；
3.callback既可以是函數名，也可以是匿名函數； -
淡入和淡出：fadeIn()，fadeOut()，fadeToggle()，fadeTo()
$(selector).fadeIn(speed,callback); 淡入已隱藏的元素
$(selector).fadeOut(speed,callback); 淡出可見元素
$(selector).fadeToggle(speed,callback); 切換淡入、淡出狀態
$(selector).fadeTo(speed,opacity,callback); 漸變為給定的不透明度
可選參數：
speed —— 執行時間（slow，fast，ms）
callback —— 回調函數
opacity —— 透明度（值介于 0 與 1 之間）
細節：
fadeTo() 沒有默認參數，必須加上 slow/fast/ms（時間，單位是毫秒） -
滑動：slideDown()，slideUp()，slideToggle()
$(selector).slideDown(speed,callback); 向下滑動（顯示）
$(selector).slideUp(speed,callback); 向上滑動（隱藏）
$(selector).slideToggle(speed,callback); 切換狀態
可選參數：
speed —— 執行時間（slow，fast，ms）
callback —— 回調函數 -
自定義動畫：animate()
animate 方法允許你創建自定義的動畫：
$(selector).animate({params},speed,easing,callback);
Alternate 語法(另一種傳參):
(selector).animate({styles},{options})必選參數：
$("button").click(function(){$("div").animate({left:'250px', // 新的左邊距height:'toggle', // 以高度為基準切換顯示狀態width:'+=150px' // 增寬150px});});$("button").click(function(){var div=$("div");div.animate({left:'100px'},"slow");div.animate({fontSize:'3em'},"slow");});
{params} —— 必選參數，用于形成具體的css樣式，可以是一個或多個樣式
可選參數：
easing —— 規定在動畫的不同點中元素的速度。默認值是 “swing”。可選：
“swing” - 在開頭/結尾移動慢，在中間移動快
“linear” - 勻速移動
speed，callback —— 同上
實例：細節：
1、position ：默認情況下，所有 HTML 元素都有一個靜態位置，且無法移動。如需對位置進行操作，要記得首先把元素的 CSS position 屬性設置為 relative、fixed 或 absolute！
2、 Camel 標記法：當使用 animate() 設置元素新位置樣式時（通過傳參），必須使用 Camel 標記法書寫所有的屬性名，比如，必須使用 paddingLeft 而不是 padding-left等等。此方法幾乎可以設置所有的樣式。
3、色彩動畫：色彩動畫并不包含在核心 jQuery 庫中。如果需要生成顏色動畫，您需要從 jquery.com 下載 顏色動畫 插件。
4、定義相對值：（該值相對于元素的當前值）。需要在值的前面加上 += 或 -=。比如讓元素變高10個像素：height:’+=10px’
5、使用預定義的值： “show”、“hide” 或 “toggle”，達到顯示、隱藏功能。slow，fast已經被預定為某個具體的值（xx毫秒），用這些預定義的值和直接用數值實際是一樣的。
6、隊列執行：同時使用多個animate()方法，jQuery會自動調用Queue隊列的接口把他們放在隊列中以此執行，Queue隊列的接口是是內部專門為動畫服務的。
原因：JavaScript編程幾乎總是伴隨著異步操作：setTImeout，css3Transition/Animation,ajax,dom的繪制，postmessage，web Database 等等，隊列允許一系列函數被異步地調用而不會阻塞程序，在異步中保持同步（進程鎖）。
7、深究動畫的隊列執行：- 通過多個 animate 方法形成動畫鏈，那么這個動畫鏈其實都是會加入到 queue 隊列里面。
- 在每一次 queue 方法中會把動畫數據寫到隊列中，然后取出隊列中的第一個序列通過 dequeue 方法執行。
- 開始執行之前寫一個進程鎖“inprogress”到 queue 里面，代表這個動畫還在執行中，防止同個序列的多個動畫重復執行，這個就是異步執行同步收集的處理方案。
- 此時動畫開始了，這里注意動畫是在異步執行的同步的代碼，繼續調用下一個 animate。
- 執行同樣的 animate 方法邏輯但是此時問題來了，動畫可能還在執行可是后續的 animate 還在繼續調用，所以這個時候后面的動畫代碼就需要等待了（進程鎖）。
- 隊列頭是有一把“inprogress”進程鎖的，那么這時候動畫只需要加入隊列，但是可以通過 inprogress 是否存在來判斷是否執行。
- 所有的 animate 方法在加入隊列都是按照以上的邏輯依次執行，動畫執行完畢了就會有一個結束通知，然后從 queue 取出第一個隊列繼續執行了，如此循環。
以上是整個動畫的調度一個流程，其實都是利用隊列異步的空閑然后執行同步的代碼，這樣在處理上是沒有浪費資源的，而且精確度也是最高的。
-
停止動畫：stop()
$(selector).stop(stopAll,goToEnd); —— 停止滑動、淡入淡出和自定義動畫
可選參數：
stopAll —— 是否應該清除動畫隊列。默認是 false，即僅停止活動的動畫，允許任何排入隊列的動畫向后執行。
goToEnd —— 是否立即完成當前動畫。默認是 false。
細節：被立即停止的動畫不會觸發回調，被立即完成的動畫會觸發回調。 -
jQuery - 鏈(Chaining)：在相同的元素上運行多條 jQuery 命令
優點：瀏覽器就不必多次查找相同的元素
$("#p1").css("color","red").slideUp(2000).slideDown(2000);
eg：p1標簽依次執行css樣式變化、向上隱藏、向下顯示
全部效果事件參考 ☆
菜鳥教程 - 效果事件
雜學
1.jQuery維護： 如果網站包含許多頁面，并且你希望你的 jQuery 函數易于維護，那么要把 jQuery 函數放到獨立的 .js 文件中，通過src導入即可。
2.事件： 頁面對不同訪問者的響應叫做事件，jQuery 是為事件處理特別設計的。
3.事件處理： 程序指的是當 HTML 中發生某些事件時所調用的方法。
4. jQuery 動態生成元素： 對于由 jQuery 動態生成的元素，不能直接綁定常用的事件，如 click等。
eg：
這樣雖然產生了類box，但仍然沒有點擊事件，解決方案：
$(".box ").live('click', function(){}); // 不建議 // 或者： $(".box ").on('click', function(){}); // 另外 click, blur, keyup, change等方法，都可以這樣解決。總結
以上是生活随笔為你收集整理的jQuery初识和常用事件（一）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Django中session和cooki
- 下一篇： jQuery对Ajax的封装应用（三）