jQuery學習01
阿新 • • 發佈：2020-11-16
jQuery學習
目錄1.什麼是jQuery?
jQuery是一個輕量級的JavaScript函式庫
特徵：”寫的少，做的多“
2.jQuery功能
- HTML元素選取
- HTML元素操作
- CSS操作
- HTML事件函式
- JavaScript特效和動畫
- HTML DOM遍歷和修改
- AJAX
- Utilities
- 還有大量外掛
3.為什麼使用jQuery?
jQuery是目前最流行的JS框架，而且提供了大量的擴充套件
4.如何使用？
1.jQuery安裝
可以在本地下載後引入jquery，也可以採用cdn的方式，比如說：
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
在控制檯上可以使用$.fn.jquery命令查詢你使用jquery版本
2.jQuery語法
基礎語法：
$(selector).action()
$符號代表jQuery，
selector是選擇符，實際值為要查詢或者查詢的HTML元素，比如”h1“,"p"，再補充一個this,
action()表示對元素進行的操作，比如說hide()隱藏,show()顯示
$("h1").hide("fast");
這句話的意思是隱藏標籤為
的元素，引數為“fast”,快速隱藏，補充：有的操作是可以新增引數的，具體使用什麼引數請檢視文件。
3.jQuery選擇器
-
元素選擇器
-
id選擇器
-
.class選擇器
測試程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>.class選擇器</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script> <script> $(document).ready(function (){ // $("button").click(function (){ // $("p").hide(); // }) $("#demo").click(function (){ $("#demo").hide(); }) $("button").click(function (){ $(".test").hide(); }) }) </script> </head> <body> <h1>我是一個標題</h1> <p>這是一個段落</p> <p id="demo">id為demo的段落</p> <p class="test">class為test的段落</p> <button>按鈕</button> </body> </html>更多例項：
元素 元素$("*") 選取所有元素 線上例項 $(this) 選取當前 HTML 元素 線上例項 $("p.intro") 選取 class 為 intro 的 元素
線上例項 $("p:first") 選取第一個 元素
線上例項 $("ul li:first") 選取第一個 - 元素的第一個
- 元素
線上例項 $("ul li:first-child") 選取每個 - 元素的第一個
- 元素
線上例項 $("[href]") 選取帶有 href 屬性的元素 線上例項 $("a[target='_blank']") 選取所有 target 屬性值等於 "_blank" 的 元素 線上例項 $("a[target!='_blank']") 選取所有 target 屬性值不等於 "_blank" 的 元素 線上例項 $(":button") 選取所有 type="button" 的 元素 和 線上例項 $("tr:even") 選取偶數位置的 線上例項 $("tr:odd") 選取奇數位置的 線上例項
4.jQuery事件
在元素在移動滑鼠
選取單選按鈕
點選元素
常見的DOM事件
| 滑鼠事件 | 鍵盤事件 | 表單事件 | 文件/視窗事件 |
|---|---|---|---|
| click | keypress（鍵按下） | submit | load |
| dblclick（雙擊） | keydown（鍵按下的過程） | change | resize（瀏覽器視窗調整大小） |
| mouseenter（滑鼠進入） | keyup（鍵被鬆開） | focus（獲得焦點） | scroll（滾動） |
| mouseleave（滑鼠離開） | blur（失去焦點） | unload（離開頁面） | |
| hover（滑鼠懸停再被選元素上時） | ready（當DOM準備就緒時，指定一個函式來執行） | ||
| holdReady 暫停或恢復ready()事件的執行 |
5.jQuery效果
hide() 隱藏
show()顯示
toggle()相當於切換顯示隱藏和顯示
fadeIn()淡入
fadeOut()淡出
fadeToggle()相當於切換顯示淡入和淡出
fadeTo("slow","0.7")設定透明度，值在0~1之間
可以帶有引數：“slow”,"fast"以及毫秒單位的數值
6.jQuery HTML
捕獲內容和設定內容：
text()設定或返回所選元素的文字內容
html()設定或返回所選元素的內容（包括HTML標記）
val()設定或返回表單欄位的值
attr()獲取屬性
新增元素內容：
append()在文字後面新增
prepend()在文字開頭前面追加
移除元素：
remove()刪除備選元素以及子元素，可以新增引數進行刪除過濾
empty()刪除子元素
css操作
addClass()向備選新增一個或者多個類
removeClass()從備選元素中刪除一個或者多個類
toggleClass()對被選元素進行新增/刪除的切換操作
css()設定和返回樣式屬性，也可以設定多個css屬性
尺寸：
- width()設定或者返回元素的寬度
- height()設定或者返回元素的高度
- innerWidth()返回元素的寬度，包括內邊距
- innerHeight()返回元素的高度，包括內邊距
- outerWidth()返回元素的高度，包括內邊距和邊框
- outerHeight()返回元素的高度，包括內邊距和邊框