JQuery學習系列基礎教程
阿新 • • 發佈：2018-12-20
最近由於需要，學習了一下jquery的基礎知識，個人不太喜歡看純理論的課本，於是選擇的是網上的一個網站——菜鳥教程。這上面關於jquery的教程每一小節都是有例項操作的，而且不用在電腦上面配置相關的環境，它提供線上編寫測試的環境，感覺挺好用的.
jQuery是一個javaScript函式庫
jQuery是一個輕量級”寫的少，做的多“的JavaScript庫
- 1
- 2
- 3
- 4
- 5
- JQuery基本操作
- JQuery效果
- JQuery Html
- JQuery 遍歷
-
JQuery Ajax
1. JQuery基本操作
由於網上有很多關於jquery的下載軟體，同時很多公司的伺服器都存有jQuery，於是我們可以通過cdn引用它，我這邊採用的是百度的cdn :
<head>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
</head- 1
- 2
- 3
- 4
**a).jQuery語法** jQuery 語法是通過選取 HTML 元素，並對選取的元素執行某些操作。 基礎語法： $(selector).action() 美元符號定義 jQuery 選擇符（selector）"查詢"和"查詢" HTML 元素 jQuery 的 action() 執行對元素的操作 例項: $(this).hide() - 隱藏當前元素 $("p").hide() - 隱藏所有 <p> 元素 $("p .test").hide() - 隱藏所有 class="test" 的 <p> 元素 $("#test").hide() - 隱藏所有 id="test" 的元素 **b).Jquery選擇器（都是以$()開頭）** jquery選擇器允許您對html元素組或單個元素進行操作，基於元素的 id、類、型別、屬性、屬性值等"查詢"（或選擇）HTML 元素 元素選擇器： 1.在頁面中選取所有<p>元素$("p") 2.通過html元素的id屬性選取指定的元素 $("#id") 3.可以通過指定的 class 查詢元素。 **c).jquery為事件處理特別設計的** 頁面對不同訪問者的響應叫做事件，事件處理程式指的是當html中發生某些事件時所呼叫的方法。 例項：在元素上面移動滑鼠；選取單選按鈕；點選元素 **jquery事件方法語法：** 在jquery中，大多數DOM事件都有一個等效的jQuery方法 在頁面中指定一個點選事件： $("p").click(); 下一步是定義什麼時間觸發事件。您可以通過一個事件函式實現： $("p").click(function(){ //action goes here! }); **常用的jQuery事件方法** $(docunment).ready()方法允許我們在文件完全載入完後執行函式 click()當按鈕點選事件被觸發時會呼叫一個函式 dblclick()當雙擊元素時，會發生dblclicks事件 mouseenter()當滑鼠指標穿過元素時，會發生mouseenter事件 mouseleave()當滑鼠指標離開元素時，會發生mouseleave事件 mousedown()當滑鼠指標移動到元素上方，並按下滑鼠按鍵時，會發生 mousedown 事件。 mouseup()當在元素上鬆開滑鼠按鈕時，會發生 mouseup 事件。 hover()方法用於模擬游標懸停事件。 focus()當元素獲得焦點時，發生 focus 事件。當通過滑鼠點選選中元素或通過 tab 鍵定位到元素時，該元素就會獲得焦點。 blur()當元素失去焦點時，發生 blur 事件。blur() 方法觸發 blur 事件，或規定當發生 blur 事件時執行的函式： 最後兩個事件的示例程式碼：
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
<!DOCTYPE html>
<html>
<head>
<script 獲取更多資料,進入QQ群:543592003