jQuery 常用選擇器和和方法
學習總結
參考博文：
https://blog.csdn.net/h13783313210/article/details/79832318
一、JQuery 介紹
1. 什么是 jQuery
1）jQuery 是一個 JavaScript 函數庫；
2）jQuery 是輕量級的 JS 庫 ，它兼容 CSS3，還兼容各種瀏覽器（IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）；
3）jQuery 是免費、開源的；
4）jQuery 是一個兼容多瀏覽器的 Javascript 庫，核心理念是 write less，do more（寫得更少，做得更多）。
2. jQuery 版本介紹
1）jQuery1.x：經典版本，兼容 IE6，7，8。
2）jQuery2.0：改進版本，及后續版本將不再支持 IE6，7，8 瀏覽器。
3. jQuery 文件介紹
1）jQuery1.x.js：jQuery 源文件；學習 jQuery 或者 debug 的時候使用。
2）jQuery1.x.min.js：jQuery 壓縮之后的文件；正常項目中使用。
二、jQuery 對象
1. jQuery 和 DOM 的區別
- 通過 document.getElementById() 找到的元素和通過 $() 找不到元素不一樣：
1）通過 jQuery 方法獲取的頁面元素，都是 jQuery 對象。
2）Query 對象其實就是對 DOM 對象進行了包裝，增強了相關方法，讓開發者使用起來更加便利。
3）雖然 jQuery 對象包裝了 DOM 對象但是兩者不能混用，各位可以理解為 jQuery 對象與 DOM 對象是兩個不類型的對象，但是我們調用 jQuery 對象的方法，事實上底層代碼還是操作的是 DOM 對象。
2. jQuery 對象與 DOM 對象之間轉換
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="/static/jQuery-1.11/jquery-1.11.3.min.js"></script>
// 都是一個函數
<script> console.log($ === jQuery); window.onload = function () { let btn = document.getElementById("btn"); console.log(btn); // 通過 jQuery 獲取 屬性值 let $btn = $('#btn'); console.log($btn); // DOM 對象轉 jQuery console.log($(btn)); // jQuery 對象轉成 DOM 對象，這個很少用，直接獲取數組第一個值 console.log($btn.get(0)); // 以后盡量使用 jQuery 方法操作頁面元素，綁定事件等 } </script>
</head>
<body>
<button id="btn">按鈕</button>
</body>
</html>
3. 自執行函數（三種）
表示文檔結構已經加載完成（不包含圖片等非文字媒體文件），onload 則指示頁面包含圖片等文件在內的所有元素都加載完成。
<script> $(function(){ // do something }) </script>
<script> $(document).ready(function(){ //do something }) </script>
<script> $().ready(function(){ //do something }) </script>
三、jQuery 對象常用方法
1. 常用方法
- val()
作用：val() 方法返回或設置被選元素的 value 屬性。
| 方法名 | 作用 |
|---|---|
| $(selector).val() | 用於返回值：該方法返回第一個匹配元素的 value 屬性的值 |
| $(selector).val(value) | 用於設置值：該方法設置所有匹配元素的 value 屬性的值\ |
注意：val() 方法通常與 HTML 表單元素一起使用。
- text()
作用：text() 方法設置或返回被選元素的文本內容。
| 方法名 | 作用 |
|---|---|
| $(selector).text() | 用於返回內容：返回所有匹配元素的文本內容（會刪除 HTML 標記） |
| $(selector).text(content) | 用於設置內容：重寫所有匹配元素的內容 |
注意：text() 方法返回內容時會刪除 HTML 標簽
- html()
作用：html() 方法設置或返回被選元素的內容（innerHTML）。
| 方法名 | 作用 |
|---|---|
| $(selector).html() | 用於返回內容：返回第一個匹配元素的內容 |
| $(selector).html(content) | 用於設置內容：重寫所有匹配元素的內容 |
注意：html() 方法返回內容時不會刪除 HTML 標簽
- css()
作用：css() 方法設置或返回被選元素的一個或多個樣式屬性。
| 方法名 | 作用 |
|---|---|
| css(“propertyname”) | 返回指定的 CSS 屬性的值（無指定則返回第一個） |
| css(“propertyname”, “value”) | 設置指定的 CSS 屬性值（無指定則設置全部） |
- get() 非ajax用法
作用：get() 方法獲取由選擇器指定的 DOM 元素。
| 方法名 | 作用 |
|---|---|
| $(selector).get( index) | index 可選。規定要獲取哪個匹配的元素（通過 index 編號）。 |
- parent()
作用：parent() 方法返回被選元素的直接父元素。
| 方法名 | 作用 |
|---|---|
| $(selector).parent(filter) | filter 可選。規定縮小搜索父元素范圍的選擇器表達式。 |
- children()
作用：children() 方法返回被選元素的所有直接子元素。
| 方法名 | 作用 |
|---|---|
| $(selector).children(filter) | filter 可選。規定縮小搜索子元素范圍的選擇器表達式。 |
- parents()
作用：parents() 方法返回被選元素的所有祖先元素。
| 方法名 | 作用 |
|---|---|
| $(selector).parents(filter) | filter 可選。規定縮小搜索祖先元素范圍的選擇器表達式。 |
注意：如需返回多個祖先，請使用逗號分隔每個表達式。
- find()
作用：方法返回被選元素的后代元素。
| 方法名 | 作用 |
|---|---|
| $(selector).find(filter) | filter 必需。過濾搜索后代條件的選擇器表達式、元素或 jQuery 對象。 |
注意：如需返回多個后代，請使用逗號分隔每個表達式。
- eq()
作用：方法返回帶有被選元素的指定索引的元素（索引號從 0 開頭）。
| 方法名 | 作用 |
|---|---|
| $(selector).eq(index) | index 必需。規定元素的索引。可以是整數或負數。 |
注意：使用負數將從被選元素的結尾開始計算索引。
- siblings()
作用：方法返回被選元素的所有同級元素。同級元素是共享相同父元素的元素。
| 方法名 | 作用 |
|---|---|
| $(selector).siblings(filter) | filter 可選。規定縮小搜索同級元素范圍的選擇器表達式。 |
- index()
作用：方法返回指定元素相對於其他指定元素的 index 位置，這些元素可通過 jQuery 選擇器或 DOM 元素來指定。
| 方法名 | 作用 |
|---|---|
| $(selector).index() | 獲得第一個匹配元素相對於其同胞元素的 index 位置。 |
| $(selector).index(element) | 獲得元素相對於選擇器的 index 位置 element，規定要獲得 index 位置的元素。可以是 DOM 元素或 jQuery 選擇器。 |
注意：如果未找到元素，index() 將返回 -1。
- height()
作用：height() 方法設置或返回被選元素的高度。
| 方法名 | 作用 |
|---|---|
| $(selector).height() | 用於返回高度：返回第一個匹配元素的高度 |
| $(selector).height( value) | 用於設置高度：對於em, pt, etc要使用""，px為默認單位，直接寫數值 |
| $(selector).height(function (index,currentheight)) | value - 當設置高度時是必需的。規定元素的高度，單位為 px、em、pt 等。 function(index,currentheight) - 可選。規定返回被選元素新高度的函數。index - 返回集合中元素的 index 位置。currentheight - 返回被選元素的當前高度。 |
注意：如果未找到元素，index() 將返回 -1。
- trim()
作用：$.trim() 函數用於去除字符串兩端的空白字符。
| 方法名 | 作用 |
|---|---|
| $.trim( str ) | str 必選。String 類型，需要去除兩端空白字符的字符串。 |
注意：$.trim()函數會移除字符串開始和末尾處的所有換行符，空格(包括連續的空格)和制表符。如果這些空白字符在字符串中間時，它們將被保留，不會被移除。
2. jQuery 常用 DOM 節點操作方法（添加、刪除、復制節點）
- 添加節點
| 方法名 | 作用 |
|---|---|
| $(selector).append() | 指定元素內部添加，在被選元素的結尾插入內容 |
| $(selector).prepend() | 指定元素內部添加，在被選元素的開頭插入內容 |
| $(selector).after() | 指定元素外部添加，在被選元素之后插入內容 |
| $(selector).before() | 指定元素外部添加，在被選元素之前插入內容 |
- 刪除節點
| 方法名 | 元素所綁定的事件及數據是否也被移除 | 作用 |
|---|---|---|
| $(selector).empty() | 是 | 從被選元素中刪除子元素，刪除的是子節點，自身不變。empty()函數的返回值為jQuery類型，返回當前jQuery對象本身(以便於進行鏈式風格的編程)。 |
| $(selector).remove() | 是 | 刪除被選元素（及其子元素），這個方法不會把匹配的元素從jQuery對象中刪除，因而可以在將來再使用這些匹配的元素。但除了這個元素本身得以保留之外，其他的比如綁定的事件，附加的數據等都會被移除。remove()函數的返回值為jQuery類型，返回當前jQuery對象本身。 |
| $(selector).detach() | 否 | 刪除被選元素（及其子元素）,事件和附加數據保留。detach()函數的返回值為jQuery類型，返回當前jQuery對象本身。 |
- 復制節點
| 方法名 | 作用 |
|---|---|
| $(selector).clone() | 復制所匹配的元素 |
- 替換節點
| 方法名 | 作用 |
|---|---|
| $(selector).replaceWith() | 將所有匹配的元素用特定內容替換 |
| $(selector).replaceAll() | 作用相同,顛倒了主賓關系 |
3. jQuery 元素屬性操作的方法
3.1 操作 class 屬性
- addClass()
作用：addClass() 方法向被選元素添加一個或多個類名。
| 方法名 | 作用 |
|---|---|
| $(selector).addClass(classname) | classname - 必需。該方法不會移除已存在的 class 屬性，僅僅添加一個或多個類名到 class 屬性。 提示：如需添加多個類，請使用空格分隔類名。 |
| $(selector).addClass( classname,function(index,oldclass)) |
function() - 可選。規定返回一個或多個待添加類名的函數。 index - 返回集合中元素的 index 位置。currentclass - 返回被選元素的當前類名。 |
- removeClass()
作用：removeClass() 方法從被選元素移除一個或多個類。
| 方法名 | 作用 |
|---|---|
| $(selector).addClass(classname) | classname - 可選。規定要移除的一個或多個類名稱。如需移除若干個類，請使用空格分隔類名稱。 注意： 如果該參數為空，則將移除所有類名稱。 |
| $(selector).removeClass( classname,function(index,currentclass)) |
function() - 可選。規定返回一個或多個待添加類名的函數。 index - 返回集合中元素的 index 位置。currentclass - 返回被選元素的當前類名。 |
注意：如果沒有規定參數，則該方法將從被選元素中刪除所有類。
- hasClass()
作用：hasClass() 方法檢查被選元素是否包含指定的類名稱。
| 方法名 | 作用 |
|---|---|
| $(selector).hasClass(classname) | classname - 必需。規定需要在被選元素中查找的類。 |
注意：如果沒有規定參數，則該方法將從被選元素中刪除所有類。
- toggleClass()
作用：toggleClass() 方法對添加和移除被選元素的一個或多個類進行切換。該方法檢查每個元素中指定的類。如果不存在則添加類，如果已設置則刪除。這就是所謂的切換效果。然而，通過使用 “switch” 參數，您能夠規定只刪除或只添加類。
| 方法名 | 作用 |
|---|---|
| $(selector).toggleClass(classname, function(index,currentclass),switch) |
classname - 必需。規定添加或移除的一個或多個類名。如需規定若干個類，請使用空格分隔類名。 function() 可選。規定返回需要添加/刪除的一個或多個類名的函數。 index - 返回集合中元素的 index 位置。 currentclass - 返回被選元素的當前類名。 switch - 可選。布爾值，規定是否僅僅添加（true）或移除（false）類。 |
注意：如果沒有規定參數，則該方法將從被選元素中刪除所有類。
3.2 操作 value 屬性
- val()
作用：val() 方法返回或設置被選元素的 value 屬性。
| 方法名 | 作用 |
|---|---|
| $(selector).val() | 用於返回值：該方法返回第一個匹配元素的 value 屬性的值 |
| $(selector).val() | 用於設置值：該方法設置所有匹配元素的 value 屬性的值\ |
注意：val() 方法通常與 HTML 表單元素一起使用。
3.3 操作 css 屬性
- css()
作用：css() 方法設置或返回被選元素的一個或多個樣式屬性。
| 方法名 | 作用 |
|---|---|
| css(“propertyname”) | 返回指定的 CSS 屬性的值（無指定則返回第一個） |
| css(“propertyname”, “value”) | 設置指定的 CSS 屬性值（無指定則設置全部） |
3.4 操作 prop 屬性
- prop()
- 作用
1）prop() 方法設置或返回被選元素的屬性和值。
2）當該方法用於返回屬性值時，則返回第一個匹配元素的值。
3）當該方法用於設置屬性值時，則為匹配元素集合設置一個或多個屬性/值對。
| 方法名 | 作用 | 參數描述 |
|---|---|---|
| $(selector).prop(property) | 返回屬性的值 | property - 規定屬性的名稱 |
| $(selector).prop(property,value) | 設置屬性和值 | property - 規定屬性的值 |
| $(selector).prop(property, function(index,currentvalue)) |
使用函數設置屬性和值 | function(index,currentvalue) - 規定返回要設置的屬性值的函數； index - 檢索集合中元素的 index 位置； currentvalue - 檢索被選元素的當前屬性值 |
| $(selector).prop({property:value, property:value,…}) | 設置多個屬性和值 | property - 規定屬性的名稱 |
注意：prop() 方法應該用於檢索屬性值，例如（selected、checked）
3.5 操作 data 屬性
- data()
作用：data 方法，針對 data- 開頭的屬性的獲取，若值是 JSON 格式, 自動轉成 JS 對象。
| 方法名 | 作用 | 參數描述 |
|---|---|---|
| $(selector).data(name) | 從被選元素中返回附加的數據 | name - 可選，為data-后面的名稱。規定要取回的數據的名稱； 如果沒有規定名稱，則該方法將以對象的形式從元素中返回所有存儲的數據。 |
| $(selector).data(name,value) | 向被選元素附加數據 | name - 必需。規定要設置的數據的名稱； value - 必需。規定要設置的數據的值。 |
代碼演示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script> $(document).ready(function(){ testObj=new Object(); testObj.greetingMorn="Good Morning!"; testObj.greetingEve="Good Evening!"; $("#btn1").click(function(){ $("div").data(testObj); }); $("#btn2").click(function(){ alert($("div").data("greetingEve")); }); }); </script>
</head>
<body>
<button id="btn1">將數據附加到div元素</button><br>
<button id="btn2">獲取數據附加到div元素</button>
<div></div>
</body>
</html>
3.5 操作 attr 屬性
- attr()
作用：attr() 方法設置或返回被選元素的屬性和值。
| 方法名 | 作用 | 參數 |
|---|---|---|
| $(selector).attr(attribute) | name - 可選。返回第一個匹配元素的值 | attribute - 規定屬性的名稱 |
| $(selector).attr(attribute,value) | 為匹配元素設置一個或多個屬性/值對 | value - 規定屬性的值 |
| $(selector).attr(attribute,function( index,currentvalue)) | 可選。返回第一個匹配元素的值 | 規定要返回屬性值到集合的函數 index - 接受集合中元素的 index 位置 currentvalue - 接受被選元素的當前屬性值 |
| $(selector).attr({attribute: value,attribute: value,…} | 為匹配元素設置一個或多個屬性/值對 |
小結： 下面是每個屬性對應方法的選取
<script> $(function () { // css 方法針對 style 屬性 console.log($('#gender').css('color')); // val 方法針對 value 屬性 console.log($('#gender').val()); // addClass 方法、removeClass 方法，針對 class 屬性 $('#gender').addClass('other'); $('#gender').removeClass('other'); // prop 方法針對 checked 屬性 selected 屬性 console.log($('#gender').prop('checked')); $('#gender').prop('checked', false) // data 方法，針對 data- 開頭的屬性的獲取，若值是 JSON 格式, 自動轉成 JS 對象 console.log($('#gender').data('option')); // 其他情況使用 attr 方法 }); </script>
4. jQuery中each的三種遍歷方法
四、jQuery 選擇器
1. 基本選擇器
| 實例 | 選取 |
|---|---|
| $("*") | 所有元素 |
| $("#lastname") | id=“lastname” 的元素 |
| $(".intro") | 所有 class=“intro” 的元素 |
| $(“p”) | 所有 p 元素 |
| $(".intro.demo") | 所有 class=“intro” 且 class=“demo” 的元素 |
2. 屬性選擇器
| 實例 | 選取 |
|---|---|
| $("[href]") | 所有帶有 href 屬性的元素 |
| $("[href=’#’]") | 所有 href 屬性的值等於 “#” 的元素 |
| $("[href!=’#’]") | 所有 href 屬性的值不等於 “#” 的元素 |
| $ ("[href$=’.jpg’]") | 所有 href 屬性的值包含以 “.jpg” 結尾的元素 |
| $(“th,td,.intro”) | 所有帶有匹配選擇的元素 |
| $(":selected") | :selected 選擇器選取被選擇的 option 元素 |
| $(":checked") | :checked 選擇器選取被選擇的 checkbox/radio 元素 |
案例代碼：
<script> // 定義一個數組接受復選框里面的 value 值 var ids = []; $('input[name=ids]:checked').each(function () { // 把被選中的 checkbox 中的 value 值添加到數組中 ids.push(this.value); }); // 判斷 復選框是否有被選中的 if ($('input[name=ids]:checked').length > 0) { $.ajax({ url: "/Xxx", type: "POST", data_type: 'json', data: { // JSON.stringify(value[, replacer[, space]])，轉成 JSON 字符串，為空則請求失敗 // "ids": JSON.stringify(ids), "ids": ids, }, traditional: true,//這里設置為true success: function(data) { // 刪除被選中的復選框元素 $('input[name=ids]:checked').parent().parent().remove(); } }); } </script>
<tbody>
<#list consumptionItems as consumptionItem>
<tr>
<td><input type="checkbox" name="ids" value="${consumptionItem.id}"></td>
<td>${consumptionItem.name}</td>
<td>${consumptionItem.createDate}</td>
</tr>
</#list>
</tbody>
3. 層次選擇器
| 實例 | 選取 |
|---|---|
| $("#myid a") | 獲取所有子孫后代元素列表 |
| $("#myid>a") | 獲取一級子元素列表（不包含孫元素） |
| $("#myid+a") | 獲取緊接在之后的同輩元素列表，等價於$("#myid>a").next(“a”) |
| $("#myid~a") | 獲取之后的所有同輩元素列表，等價於$("#myid").nextAll(“a”) |
| $("#myid").siblings(“a”) | 獲取所有同輩元素列表，無論前后 |
| $("#myid").prev(“a”) | 獲取緊接在之后的同輩元素列表 |
| $("#myid").find(“a”) | 獲取后代元素中所有的a(包含子孫后代) |
案例代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery 層次選擇器</title>
<script type="text/javascript" src="/static/jQuery-1.11/jquery-1.11.3.min.js"> </script>
<style type="text/css"> .selected{background-color: gray;}</style>
<script> $(function () { // 問題 1：獲取所有 ul 下的所有 li 元素，並打印分析結果 console.log($('ul li')); // 輸出了 8 個 li，中間空格表示獲取所有子孫后代 li 元素 // 問題 2：獲取 id 為 myul 下的所有一級 li 子元素，並打印分析結果 console.log($('#myul > li')); // 輸出了 4 個 li，中間 > 表示獲取一級子元素 // 問題 3：獲取所有 label 元素后的 input 元素，並打印分析結果 console.log($('label ~ input')); // 輸出結果為（text1、text2、text3、text4） // 問題 4：獲取緊跟着 label 元素后的 input 元素，並打印分析結果 console.log($('label + input')); // 輸出結果為（text1、text3） }); </script>
</head>
<body>
<ul id="myul">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
</li>
</ul>
<label>LABEL1</label>
<input type="text" value="text1"/>
<input type="text" value="text2"/>
<br/>
<label>LABEL2</label>
<input type="text" value="text3"/>
<input type="text" value="text4"/>
<br/>
<label>
LABEL3
<input type="text" value="text5"/>
<input type="text" value="text6"/>
</label>
</body>
</html>
4. 過濾選擇器
| 實例 | 選取 |
|---|---|
| $(“p:first”) | 第一個 p 元素 |
| $(“p:last”) | 最后一個 p 元素 |
| $(“tr:even”) | 所有偶數 tr 元素 |
| $(“tr:odd”) | 所有奇數 tr 元素 |
| $(“ul li:eq(3)”) | 列表中的第四個元素（index 從 0 開始） |
| $(“ul li:gt(3)”) | 列出 index 大於 3 的元素 |
| $(“ul li:lt(3)”) | 列出 index 小於 3 的元素 |
| $(“input:not(:empty)”) | 所有不為空的 input 元素 |
| $(":header") | 所有標題元素 h1 - h6 |
| $(":contains(‘W3School’)") | 包含指定字符串的所有元素 |
| $(“p:hidden”) | 所有隱藏的 元素 |
5. 表單元素獲取
| 實例 | 選取 |
|---|---|
| $(":input") | 所有 元素 |
| $(":text") | 所有 type=“text” 的 元素 |
| $(":password") | 所有 type=“password” 的 元素 |
| $(":radio") | 所有 type=“radio” 的 元素 |
五、DOM節點
博客地址：DOM節點的使用（常用方法+代碼）
六、綜合小例題
例題一：JS實現列表移動（通過document操作select標簽）
例題二：用 JS（JavaScript ）實現增刪改查
例題三：用 JS（JavaScript ）實現多選框的全選、反選、多選
例題四：jQuery 實現全選、多選、反選
例題五：JS 實現下拉框回顯
例題六：JS 實現列表移動
例題七：JS 實現下拉框去重
總結
以上就是對 JavaScript 入門的總結了，代碼僅供參考，歡迎討論交流。
DOM節點的應用請看這篇博客：DOM節點的使用（常用方法+代碼）