JS基礎4—jQuery

jQuery常用內容

jQuery 介紹
- jQuery 獲取方式
- - 基本選擇器 (最常用)
  - 層級選擇器 (基于元素間關系)
  - 過濾選擇器 (基于特定條件)
- jQuery事件綁定
- jQuery 方法調用
- - jQuery遍歷
  - jQuery 獲取與設置
  - jQuery 添加與刪除
  - jQuery CSS 類
  - jQuery - AJAX
總結

jQuery 介紹

jQuery 是一個輕量級、快速且功能豐富的 JavaScript 庫。它的核心目標是讓開發者能夠更容易地在網站上使用 JavaScript 進行開發。簡單來說，jQuery 是 JavaScript 的一個工具包。它提供了一套更簡單、更一致的語法和函數，讓你用更少的代碼完成原本需要寫很多行原生 JavaScript 才能實現的任務，尤其是在處理以下方面時特別方便：

操作 HTML 元素 (DOM 操作)：輕松地查找、選擇、修改、添加、刪除 HTML 元素。
處理事件：更簡潔地為元素添加點擊、鼠標懸停、鍵盤按下等事件監聽器。
實現動畫和特效：內置了淡入淡出、滑動、自定義動畫等功能。
簡化 AJAX：極大地簡化了與服務器進行異步通信（發送和接收數據而不刷新整個頁面）的過程。
跨瀏覽器兼容性：這是 jQuery 早期最重要的價值之一！它封裝了大量的代碼來處理不同瀏覽器（尤其是舊版 IE）之間的 JavaScript 實現差異。開發者只需要使用 jQuery 的方法，jQuery 內部會確保這些方法在各種主流瀏覽器上都能正常工作，省去了開發者自己處理兼容性問題的麻煩。

jQuery 語法是通過選取 HTML 元素，并對選取的元素執行某些操作。
基礎語法： $(selector).action()
美元符號定義 jQuery，選擇符（selector）“查詢"和"查找” HTML 元素，jQuery 的 action() 執行對元素的操作

jQuery 獲取方式

jQuery 選擇器允許您對 HTML 元素組或單個元素進行操作，jQuery 選擇器基于元素的 id、類、類型、屬性、屬性值等"查找"（或選擇）HTML 元素。它基于已經存在的 CSS 選擇器，除此之外，它還有一些自定義的選擇器。

jQuery 中所有選擇器都以美元符號開頭：$()，以下是 jQuery 選擇器的主要類型和使用方式。

基本選擇器 (最常用)

元素選擇器 ('tagName')：
- 選擇所有指定標簽的元素。
- 示例：$('p') - 選擇頁面中所有 <p> 元素，$('div') - 選擇所有 <div> 元素。
ID 選擇器 ('#id')：
- 選擇具有指定 id 屬性的單個元素（頁面中 id 應是唯一的）。
- 示例：$('#myHeader') - 選擇 id="myHeader" 的元素。
類選擇器 ('.className')：
- 選擇所有具有指定 class 屬性的元素。
- 示例：$('.important') - 選擇所有 class="important" 的元素，$('p.highlight') - 選擇所有 class="highlight" 的 <p> 元素。
通配符選擇器 ('*')：
- 選擇頁面中的所有元素。
- 示例：$('*') - 選擇整個文檔中的所有元素（謹慎使用，性能開銷大）。
并集選擇器 ('selector1, selector2, selectorN')：
- 選擇所有匹配任意一個選擇器的元素（取并集）。
- 示例：$('h1, h2, h3') - 選擇所有 <h1>, <h2>, <h3> 元素，$('div.main, p.intro') - 選擇所有 class="main" 的 <div> 和所有 class="intro" 的 <p> 元素。

層級選擇器 (基于元素間關系)

后代選擇器 ('ancestor descendant')：
- 選擇指定祖先元素內部的所有匹配后代元素（無論嵌套多深）。
- 示例：$('div p') - 選擇所有在 <div> 元素內部的 <p> 元素（包括嵌套在子元素里的）。
子元素選擇器 ('parent > child')：
- 選擇指定父元素下的直接子元素（僅第一層）。
- 示例：$('ul > li') - 選擇所有作為 <ul> 直接子元素的 <li> 元素（不會選擇嵌套在 <li> 里的 <ul><li>）。
相鄰兄弟選擇器 ('prev + next')：
- 選擇緊接在 prev 元素之后的下一個同輩 next 元素。
- 示例：$('h1 + p') - 選擇緊跟在 <h1> 后面的第一個 <p> 元素。
一般兄弟選擇器 ('prev ~ siblings')：
- 選擇 prev 元素之后的所有同輩 siblings 元素（直到遇到下一個 prev）。
- 示例：$('h2 ~ p') - 選擇所有在 <h2> 元素后面且與它同級的 <p> 元素（只要在同一個父元素下，且在 h2 之后）。

過濾選擇器 (基于特定條件)

通常以 : 開頭，附加在基本選擇器后面，用于進一步篩選結果集。可以組合使用。

基本過濾：
- :first - 選擇匹配元素集合中的第一個元素。$('p:first')
- :last - 選擇匹配元素集合中的最后一個元素。$('p:last')
- :even - 選擇索引值為偶數的元素（索引從 0 開始）。$('tr:even')
- :odd - 選擇索引值為奇數的元素（索引從 0 開始）。$('tr:odd')
- :eq(index) - 選擇索引等于 index 的元素。$('li:eq(2)') (選擇第三個 <li>)
- :gt(index) - 選擇索引大于 index 的元素。$('li:gt(2)')
- :lt(index) - 選擇索引小于 index 的元素。$('li:lt(2)')
- :not(selector) - 選擇不匹配給定選擇器的元素。$('input:not(:checked)') (選擇所有未選中的 input)
- :header - 選擇所有標題元素（h1-h6）。$(':header')
內容過濾：
- :contains(text) - 選擇包含指定文本的元素（文本匹配是大小寫敏感的）。$('p:contains("Hello")')
- :empty - 選擇沒有子元素（包括文本節點）的元素。$('td:empty')
- :has(selector) - 選擇至少包含一個匹配給定選擇器的后代的元素。$('div:has(p)') (選擇包含 <p> 的 <div>)
- :parent - 選擇至少擁有一個子元素（文本節點也算）的元素（與 :empty 相反）。$('td:parent')
可見性過濾：
- :visible - 選擇所有可見的元素（占據頁面空間）。
- :hidden - 選擇所有隱藏的元素（display: none, type="hidden" 的 input, 寬高為 0 等）。
屬性過濾 ([attribute], [attribute=value] 等)：
- [attr] - 選擇擁有指定屬性的元素。$('[href]') (選擇所有帶有 href 屬性的元素)
- [attr=value] - 選擇屬性值等于 value 的元素。$('[type="button"]')
- [attr!=value] - 選擇屬性值不等于 value 的元素。
- [attr^=value] - 選擇屬性值以 value 開頭的元素。$('[href^="https"]')
- [attr$=value] - 選擇屬性值以 value 結尾的元素。$('[src$=".png"]')
- [attr*=value] - 選擇屬性值包含子字符串 value 的元素。$('[title*="flower"]')
- [attr~=value] - 選擇屬性值包含由空格分隔的單詞 value 的元素。
- [attr|=value] - 選擇屬性值等于 value 或以 value 開頭后跟連字符 - 的元素。
子元素過濾 (相對于父元素)：
- :first-child - 選擇其父元素的第一個子元素。$('li:first-child')
- :last-child - 選擇其父元素的最后一個子元素。$('li:last-child')
- :nth-child(index/even/odd/equation) - 選擇其父元素下的第 n 個子元素。$('li:nth-child(2)'), $('tr:nth-child(even)'), $('li:nth-child(3n)')
- :only-child - 選擇是其父元素唯一子元素的元素。
表單過濾 (專門用于表單元素)：
- :input - 選擇所有 input, textarea, select 和 button 元素。
- :text - 選擇所有 type=“text” 的 input 元素。
- :password - 選擇所有 type=“password” 的 input 元素。
- :radio - 選擇所有 type=“radio” 的 input 元素。
- :checkbox - 選擇所有 type=“checkbox” 的 input 元素。
- :submit - 選擇所有 type=“submit” 的 input 和 button 元素。
- :reset - 選擇所有 type=“reset” 的 input 和 button 元素。
- :button - 選擇所有 type=“button” 的 input 和 button 元素。
- :image - 選擇所有 type=“image” 的 input 元素。
- :file - 選擇所有 type=“file” 的 input 元素。
- :enabled - 選擇所有啟用的表單元素。
- :disabled - 選擇所有禁用的表單元素。
- :selected - 選擇所有被選中的 option 元素（僅用于 <select> 內）。
- :checked - 選擇所有被選中的 checkbox 或 radio 元素。

jQuery事件綁定

頁面對不同訪問者的響應叫做事件,事件處理程序指的是當 HTML 中發生某些事件時所調用的方法。

$(function(){ ... }) 是 jQuery 的文檔就緒事件，用于確保代碼在 DOM（文檔對象模型）完全加載并解析后執行，

// 完整寫法
$(document).ready(function() {// DOM 就緒后執行的代碼
});// 簡寫
$(function() {// DOM 就緒后執行的代碼console.log("jQuery: DOM 已就緒！");
});

.click() 方法是當按鈕點擊事件被觸發時會調用一個函數
該函數在用戶點擊 HTML 元素時執行

在這里插入圖片描述

.on() 括號內包括 (綁定事件的類型，事件觸發函數)
其中綁定事件的類型為字符串類型，且可以綁定多個事件
注意 .on() 無法綁 “hover”（不是JS原生的是jQuery封裝的），即.on()只能綁JS原生的屬性

在這里插入圖片描述

特殊：給未來元素綁定事件 .on()
括號內包含 (事件類型，未來元素，觸發函數)
需要在HTML中找未來元素的父級元素或祖先元素
后來生成的元素，不能直接綁事件，只能通過已有的元素綁事件

在這里插入圖片描述

jQuery 方法調用

jQuery遍歷

parent() 方法返回被選元素的直接父元素，該方法只會向上一級對 DOM 樹進行遍歷。
children() 方法返回被選元素的所有直接子元素，該方法只會向下一級對 DOM 樹進行遍歷。
同胞擁有相同的父元素，siblings()、next()、nextAll()、prev()、prevAll() 等。

例：

在這里插入圖片描述

打印效果：

在這里插入圖片描述

jQuery 獲取與設置

獲得內容 - text()、html() 以及 val()：
text() 設置或返回所選元素的文本內容
html() 設置或返回所選元素的內容（包括 HTML 標簽）
val() 設置或返回表單字段的值
獲取屬性 - attr()：
jQuery attr() 方法用于獲取、設置/改變屬性值
attr() 方法也允許您同時設置多個屬性。

獲取:

$("#btn1").click(function(){alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){alert("HTML: " + $("#test").html());
});
$("#btn1").click(function(){alert("值為: " + $("#test").val());
});
$("button").click(function(){alert($("#runoob").attr("href"));
});

設置：

$("#btn1").click(function(){$("#test1").text("Hello world!");
});
$("#btn2").click(function(){$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){$("#test3").val("RUNOOB");
});
$("button").click(function(){$("#runoob").attr("href","http://www.runoob.com/jquery");
});

jQuery 添加與刪除

添加新的 HTML 內容：
append() 在被選元素的結尾插入內容
prepend() 在被選元素的開頭插入內容
after() 在被選元素之后插入內容
before() 在被選元素之前插入內容
刪除元素和內容：
remove() 移除所選元素本身及其所有子元素（整個元素從 DOM 中刪除）
empty() 只清空內部內容，元素本身仍保留在 DOM 中

jQuery CSS 類

jQuery css() 方法：css() 方法設置或返回被選元素的一個或多個樣式屬性。

在這里插入圖片描述

jQuery - AJAX

AJAX = 異步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
簡短地說，在不重載整個網頁的情況下，AJAX 通過后臺加載數據，并在網頁上進行顯示。
通過 jQuery AJAX 方法，能夠使用 HTTP Get 和 HTTP Post 從遠程服務器上請求文本、HTML、XML 或 JSON - 同時您能夠把這些外部數據直接載入網頁的被選元素中。

$.ajax() 執行異步 AJAX 請求
$.get() 使用 AJAX 的 HTTP GET 請求從服務器加載數據
$.post() 使用 AJAX 的 HTTP POST 請求從服務器加載數據