前端基礎之jQuery基礎

Xiao0101發表於2024-03-23
前端jQuery

一、jQuery與js程式碼

（1）jQuery基本語法

# 原來寫法
jQuery(選擇器).action()

# 簡寫
秉持著jQuery的宗旨，jQuery簡寫$
jQuery() === $()

（2）jQuery與js程式碼對比

eg：將p標籤內部的文字顏色改為紅色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap-grid.min.css"></script>

</head>
<body>
  <p id="p1">人生得意須盡歡!</p>
<p id="p2">大河之水天上來!</p>

<script>
    // 原生js
    let p1Ele = document.getElementById("p1");
    let p2Ele = document.getElementById("p2");

    p1Ele.style.color = 'red'
    p2Ele.style.color = 'green'

    // jQuery
    $('#d1').css('color','red').next().css('color','green')
</script>
</body>
</html>

二、jQuery選擇器

選擇器是jQuery的核心, 在jQuery中, 對事件處理, 遍歷 DOM和Ajax 操作都依賴於選擇器

（1）基本選擇器

基本選擇器是jQuery中最常用的選擇器, 也是最簡單的選擇器, 它透過id, class和標籤名來查詢DOM物件

種類 用法 描述 返回值
id $(“#myDiv”) 直接選擇html中的id=“myDiv” 單個元素組成的集合
Element $(“div”) element翻譯過來的意思就是元素, 所有element其實就是html已經定義的標籤元素, 比如div, p, a, input等 集合元素
class $(“.myClass”) 直接選擇html程式碼中class="myClass"的元素或元素組(因為在同一html中, class是可以存在多個同樣的值的) 集合元素
* $(“*”) 匹配所有的元素, 包括, 多用於結合上下文來搜尋 集合元素
selector1, selector2… selectorN $(“div, span, p.myClass”) 將每一個選擇器匹配到的元素合併後一起返回, 你可以指定任意多個選擇器, 並將匹配到的元素合併到集合中, p.myClass是表示匹配元素 p class=“myClass” 集合元素 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="script/jquery-3.6.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            // 1.改變id為one的元素的背景色為yellow
            $("#btn001").click(
                function () {
                    $("#one").css("background", "gray");
                }
            );
            // 2.改變class為mybtn的的所有元素的背景色為red
            $("#btn002").click(
                function () {
                    $(".mybtn").css("background", "red");
                }
            );
            // 3.改變元素名為div的的所有元素的背景色為black
            $("#btn003").click(
                function () {
                    $("div").css("background", "black");
                }
            );

            //4.改變所有元素的背景色為pink
            $("#btn004").click(
                function () {
                    $("*").css("background", "pink");
                }
            );
            //5.改變所有的<span>元素和id為two, class為mybtn 的元素的背景色為blue
            $("#btn005").click(
                function () {
                    $("span.c1, #two, .mybtn").css("background", "blue");
                }
            );

        });
    </script>
</head>
<body>
<button id="btn001">改變id為one的元素的背景色為gray</button>
<button id="btn002">改變class為mybtn的所有元素的背景色為red</button>
<button id="btn003">改變元素名為&lt;div&gt;的所有元素的背景色為black</button>
<button id="btn004">改變所有元素的背景色為pink</button>
<button id="btn005">改變所有的&lt;span&gt;元素和id為two, class為mytag 的元素的背景色為blue</button>
<hr/>
<div style="height: 200px; width: 300px; background-color: chartreuse" id="one">id=one</div>
<div style="height: 200px; width: 300px; background-color: pink" id="two" class="mybtn">id=two</div>
<div style="height: 200px; width: 300px; background-color: blueviolet" id="three" class="mybtn">id=three</div>
<div style="height: 200px; width: 300px; background-color: blue" id="four" class="mybtn">id=four</div>
<span style="background-color: chartreuse" class="c1">id=five</span>
<span style="background-color: chartreuse" class="c2">id=six</span>
</body>
</html>

（2）組合選擇器（層次選擇器）

如果想透過 DOM 元素之間的層次關係來獲取特定元素, 例如後代元素, 子元素, 相鄰元素, 兄弟元素等, 則需要使用組合選擇器。

種類 用法 描述 返回值
後代選擇器 $(“ancestor descendant”) 匹配ancestor裡的所有descendant(後代)元素 集合元素
兒子選擇器 $(“parent>child”) 匹配parent下的所有child(子)元素 集合元素
毗鄰選擇器 $(“prev+next”) 匹配緊接在prev後的next元素 集合元素
弟弟選擇器 $(“prev~siblings”) 匹配prev後的所有siblings元素 集合元素

注意:

js中的(“prev ~ div”)選擇器只能選擇"#prev"元素後面的同輩元素;

而jQuery中的 siblings 方法與位置無關, 只要是同輩節點就可以選取

// 選擇 class 為 "descendant" 的後代元素
$(".ancestor .descendant").css("font-size", "16px");

// 選擇 class 為 "child" 的直接子元素
$(".parent > .child").css("color", "red");

// 選擇 class 為 "sibling" 的相鄰兄弟元素
$(".first + .sibling").css("background-color", "yellow");

// 選擇 class 為 "sibling" 的所有相鄰兄弟元素
$(".first ~ .sibling").css("border", "1px solid black");

// 選擇所有 <span> 元素，這些 <span> 元素是 <div> 元素的後代
$('div span').css('color', 'blue');

// 選擇所有直接位於 <div> 元素下的 <span> 元素
$('div>span').css('font-weight', 'bold');

// 選擇緊接在 <div> 元素後面的第一個 <span> 元素
$('div+span').css('color', 'red');

// 選擇所有緊跟在 <div> 元素後面的 <span> 元素
$('div~span').css('font-weight', 'bold');

（3）分組與巢狀

① 分組

在 jQuery 中，你可以使用逗號 , 將多個選擇器組合在一起，以實現對多個元素進行操作。這樣的操作方式稱為分組操作。

// 選擇所有具有類名為 "box" 的 <div> 元素和所有 <p> 元素，並設定它們的字型顏色為紅色
$('.box, p').css('color', 'red');


// 選擇具有 id 為 "d1" 的元素、具有類名為 "c1" 的元素以及所有 <p> 元素，並設定它們的背景顏色為黃色
$('#d1,.c1,p').css('background-color', 'yellow');

② 巢狀

在 jQuery 中，你可以將選擇器巢狀在另一個選擇器內部，以實現更精確地定位元素。這種操作方式稱為巢狀操作。

// 選擇所有 <div> 元素並設定它們的背景顏色為灰色
$('div').css('background-color', 'gray');

// 選擇所有具有類名為 "c1" 的 <div> 元素
$('div.c1').css('color', 'red');

// 選擇具有 id 為 "d1" 的 <div> 元素並設定其文字內容
$('div#d1').text('Hello, World!');

// 選擇具有 id 為 "container" 的元素內部的所有 <p> 元素，並設定它們的背景顏色為藍色
$('#container p').css('background-color', 'blue');

（4）基本篩選器

選擇器 描 述 示 例 返回值
:first 匹配第一個元素 $(“div:first”) 單個元素
:last 匹配最後一個元素 $(“span:last”) 單個元素
:even 匹配索引是偶數的元素 索引從0開始 $(“li:even”) 集合元素
: odd 匹配索引是奇數的元素 索引從0開始 $(“li:odd”) 集合元素
:eq(index) 匹配索引等於index的元 素(索引從0開始) $(“input:eq(2)”) 單個元素
:gt(index) 匹配索引大於index的元 素(索引從0開始) $(“input:gt(1)”) 集合元素
:lt(index) 匹配索引小於index的元 素(索引從0開始) $(“input:lt(5)”) 集合元素
:not(selector) 選擇所有不匹配給定選擇器的元素。 $('div:not(.special)') 集合元素
:has(element) 選取包含指定元素的元素 $('div:has("p")') 集合元素

當使用 jQuery 時，基本篩選器是非常有用的工具，可以幫助你選擇文件中特定的元素。下面是一些常用的基本篩選器以及它們的詳細解釋和示例程式碼：

① :first

  • 描述：選擇匹配的第一個元素。
  • 示例：選擇第一個段落元素並新增類名 "first-para"。
$('p:first').addClass('first-para');

② :last

  • 描述：選擇匹配的最後一個元素。
  • 示例：選擇最後一個列表項並隱藏它。
$('li:last').hide();

③ :even

  • 描述：選擇所有偶數位置的元素（從 0 開始計數）。
  • 示例：選擇所有偶數行的表格行並新增背景色。
$('tr:even').css('background-color', 'lightgray');

④ :odd

  • 描述：選擇所有奇數位置的元素（從 0 開始計數）。
  • 示例：選擇所有奇數行的表格行並新增斜線樣式。
$('tr:odd').css('text-decoration', 'line-through');

⑤ :eq(index)

  • 描述：選擇索引值與指定值相匹配的元素（從 0 開始計數）。
  • 示例：選擇第三個段落元素並改變其文字顏色。
$('p:eq(2)').css('color', 'blue');

⑥ :gt(index)

  • 描述：選擇索引值大於指定值的元素（從 0 開始計數）。
  • 示例：選擇索引大於 2 的所有段落元素並隱藏它們。
$('p:gt(2)').hide();

⑦ :lt(index)

  • 描述：選擇索引值小於指定值的元素（從 0 開始計數）。
  • 示例：選擇索引小於 3 的所有列表項並改變它們的字型大小。
$('li:lt(3)').css('font-size', '1.2em');

⑧ :not(selector)

  • 描述：選擇所有不匹配給定選擇器的元素。
  • 示例：選擇除了類名為 "special" 的所有段落元素並新增邊框樣式。
$('p:not(.special)').css('border', '1px solid black');

⑨ :has(element)

  • 描述：選取包含指定元素的元素。
  • 示例：選擇包含 <p> 元素的 <div> 元素。
$('div:has("p")')

（5）屬性選擇器

屬性過濾選擇器的過濾規則是透過元素的屬性來獲取相應的元素

選擇器 描 述 示 例 返回值
[attr] 匹配擁有此屬性 的元素 $(“img[alt]“) 集合元素
[attr=value] 匹配屬性值為value 的元素 $(“a[title=test]“) 集合元素
[attr!=value] 匹配屬性值不等於 value的元素 $(“a[title!=test]“) 集合元素
[attr^=value] 匹配屬性值以value 開頭的元素 $(“img[alt^=welcome]“) 集合元素
[attr$=value] 匹配屬性值以value 結尾的元素 $(“img[alt$=last]“) 集合元素
[attr*=vlaue] 匹配屬性值中含有 value的元素 $(“div[title*=test]“) 集合元素
[attr1][attr2]… 透過多個屬性 進行匹配 $(“div[id][title*=test]“) 集合元素

① 屬性存在選擇器 [attribute]：

  • 選擇具有指定屬性的元素。
// 選擇所有具有 title 屬性的元素
$('[title]')

② 屬性值等於選擇器 [attribute=value]：

  • 選擇具有指定屬性值的元素。
// 選擇所有 class 屬性值為 "example" 的元素
$('[class="example"]')

③ 屬性值以指定字串開頭選擇器 [attribute^=value]：

  • 選擇屬性值以指定字串開頭的元素。
// 選擇所有 href 屬性值以 "https" 開頭的元素
$('[href^="https"]')

④ 屬性值包含指定字串選擇器 [attribute*=value]：

  • 選擇屬性值中包含指定字串的元素。
// 選擇所有 src 屬性值包含 "image" 的元素
$('[src*="image"]')

⑤ 屬性值以指定字串結尾選擇器 [attribute$=value]：

  • 選擇屬性值以指定字串結尾的元素。
// 選擇所有 href 屬性值以 ".com" 結尾的元素
$('[href$=".com"]')

⑥ 屬性值包含指定單詞選擇器 [attribute~=value]：

  • 選擇屬性值中包含指定單詞的元素。
// 選擇所有 class 屬性值包含 "example" 的元素
$('[class~="example"]')

⑦ 多屬性選擇器 [attribute1][attribute2]：

  • 選擇同時具有多個屬性的元素。
// 選擇所有同時具有 title 和 class 屬性的元素
$('[title][class]')

這些屬性選擇器可以幫助我們根據元素的屬性來精確選擇和操作元素。我們可以根據自己的需要結合使用這些選擇器，以便更好地操作 DOM 元素。

（6）表單篩選器

選擇器 描 述 示 例 返 回
:input 匹配所有input, textarea, select, button元素 $(“input”) 集合元素
:text 匹配所有文字框 $(“:text”) 集合元素
:password 匹配所有密碼框 $(“:password”) 集合元素
:radio 匹配所有單選框 $(“:radio”) 集合元素
:checkbox 匹配所有所有多選框 $(“:checkbox”) 集合元素
:submit 匹配所有提交按鈕 $(“:submit”) 集合元素
:image 匹配所有影像按鈕 $(“:image”) 集合元素
:button 匹配所有按鈕 $(“:button”) 集合元素
:checked 匹配所有被選中的核取方塊或單選按鈕元素 $(':checked')
:reset 匹配所有重置按鈕 $(“:reset”) 集合元素
:file 匹配所有上傳域 $(“:file”) 集合元素

在 jQuery 中，表單篩選器可以幫助您選擇表單元素，如輸入框、核取方塊、下拉選單等。以下是一些常用的表單篩選器及其詳細解釋：

① :input

  • 選擇所有的 <input>、<select>、<textarea> 和 <button> 元素。
// 選擇所有表單元素
$(':input')

② :text

  • 選擇所有型別為文字的 <input> 元素。
// 選擇所有文字輸入框
$(':text') == $('input[type="text"]')

③ :password

  • 選擇所有型別為密碼的 <input> 元素。
// 選擇所有密碼輸入框
$(':password') == $('input[type="password"]')

④ :radio

  • 選擇所有型別為單選按鈕的 <input> 元素。
// 選擇所有單選按鈕
$(':radio')

⑤ :checkbox

  • 選擇所有型別為核取方塊的 <input> 元素。
// 選擇所有核取方塊
$(':checkbox')

⑥ :submit

  • 選擇所有型別為提交按鈕的 <input> 元素。
// 選擇所有提交按鈕
$(':submit')

⑦ :image

  • 選擇所有型別為影像的 <input> 元素。
// 選擇所有影像按鈕
$(':image')

⑧ :button

  • 選擇所有型別為按鈕的 <button> 元素。
// 選擇所有按鈕元素
$(':button')

⑨ :checked

  • 選擇所有被選中的核取方塊或單選按鈕元素。
// 選擇所有被選中的核取方塊或單選按鈕
$(':checked')

⑩ :reset

  • 匹配所有重置按鈕
// 選擇所有重置按鈕元素
$(':reset')

⑪ :file

  • 匹配所有上傳域
// 選擇所有上傳區域
$(':file')

這些表單篩選器可以幫助您輕鬆地選擇和操作表單元素。根據您的需求，結合使用這些篩選器可以更方便地操作表單中的不同型別的元素。

（7）表單物件屬性過濾選擇器

選擇器 描 述 示 例 返回值
:checked 匹配所有被選中的元素 (含單選框，核取方塊) $(“input:checked”) 集合元素
:disabled 匹配所有不可用 的元素 $(“form :disabled”) 集合元素
:selected 匹配所有被選中的 選項元素 $(“select :selected”) 集合元素
:enabled 匹配所有可用元素 $(“form :enabled”) 集合元素

① checked屬性

  • 用於選擇被選中的核取方塊或單選按鈕。
// 選擇被選中的核取方塊
$('input[type="checkbox"]:checked')

// 選擇被選中的單選按鈕
$('input[type="radio"]:checked')

② disabled屬性

  • 用於選擇被禁用的表單元素。
// 選擇所有被禁用的輸入框
$("input:disabled")

③ selected屬性

  • 用於選擇下拉選單中被選中的選項。
// 選擇下拉選單中被選中的option元素
$('select option:selected')

④ :enabled屬性

  • 選取所有可用的表單元素。
  • 可用元素指的是沒有被禁用（disabled）的元素。
// 選擇所有可用的輸入框
$("input:enabled")

⑤ 特殊情況

$(':checked')  # 它會將checked和selected都拿到
ce.fn.init {0: input, 1: option, length: 2, prevObject: ce.fn.init}
$(':selected')  # 它不會，只拿selected
ce.fn.init {0: option, length: 1, prevObject: ce.fn.init}

$('input:checked')  # 自己加一個限制條件，只拿checked
ce.fn.init {0: input, length: 1, prevObject: ce.fn.init}

（8）篩選器方法

  • .eq(index)：選取指定索引位置的元素。
// 選取索引為2的列表項
$("li").eq(2)
  • .first()：選取第一個匹配的元素。
// 選取第一個div元素
$("div").first()
  • .last()：選取最後一個匹配的元素。
// 選取最後一個段落元素
$("p").last()
  • .not(selector)：從匹配的元素中去除指定的元素。
// 去除具有類名為selected的列表項
$("li").not(".selected")
  • .filter(selector)：根據指定的選擇器篩選元素。
// 篩選具有類名為highlight的div元素
$("div").filter(".highlight")
  • .has(selector)：篩選包含指定選擇器所匹配元素的元素。
// 篩選包含列表項的ul元素
$("ul").has("li")

拿到標籤下面的標籤

  • .next()：選擇當前元素的下一個同級元素。
// 拿到 id為 d1的標籤下一個標籤
$('#d1').next()
  • .nextAll()：選擇當前元素之後的所有同級元素。
// 拿到 id為 d1的標籤下的所有標籤
$('#d1').nextAll()
  • .nextUntil()：選擇當前元素到指定元素之間的所有同級元素。
    • 不包括最後一個
// 拿到 id為 d1的標籤下的直到結束條件的所有標籤
$('#d1').nextUntil()

// 拿到 id為 d1的標籤下的直到class為c1的標籤的所有標籤
$('#d1').nextUntil('.c1')

類上面，拿到標籤上面的標籤

  • .prev()：選擇元素之前緊鄰的同級元素。
// 選擇具有類名 "c1" 的元素前面緊鄰的同級元素
$('.c1').prev()

注意：

如果 $('.c1') 選擇的元素是第一個同級元素，那麼 .prev() 將不會選擇任何元素，因為沒有前面的同級元素。

  • prevAll()：選擇匹配元素之前的所有同級元素，而不僅僅是緊鄰的前一個元素。
// 選擇具有類名 "c3" 的元素之前的所有同級元素
$('.c3').prevAll()
  • .prevUntill()：選擇所有匹配元素之前的所有同級元素，直到遇到指定的選擇器、元素或 jQuery 物件為止。
// 選擇在具有 .selected 類的 <li> 元素之前的所有 <li> 元素，並將它們的文字顏色設定為紅色。
$("li.selected").prevUntil(".selected").css("color", "red");

取父標籤

  • .parent()：選擇當前元素的直接父元素。
// 選擇了 p 元素的父元素，並將其邊框樣式設定為紅色。
$("p").parent().css("border", "2px solid red");
  • .parents()：選擇當前元素的所有祖先元素。
// 選擇了 p 元素的所有祖先元素，並將它們的背景顏色設定為淺藍色。
$("p").parents().css("background-color", "lightblue");
  • .parentsUntil()：選擇當前元素到指定元素之間的所有祖先元素。
// 選擇了 p 元素的祖先元素，直到遇到類名為 grandparent 的祖先元素為止，然後將它們的邊框樣式設定為綠色。
$("p").parentsUntil(".grandparent").css("border", "2px solid green");
  • .children()：取到所有的子標籤
// 選擇了類名為 parent 的元素所有的子標籤，並將它們的文字顏色設定為紅色。
$(".parent").children().css("color", "red");

// 選擇了類名為 parent 的元素的直接子元素 p ，並將它們的文字顏色設定為藍色。
$(".parent").children("p").css("color", "blue");
  • .siblings()：同級別上下所有標籤
// 選擇了類名為 selected 的元素在同一層級的其他元素，並將它們的背景顏色設定為淺藍色。
$(".selected").siblings().css("background-color", "lightblue");
  • .find()：從某個區域內篩選出想要的標籤
// 選擇了類名為 parent 的元素下的所有 p> 元素，並將它們的文字顏色設定為綠色。
$(".parent").find("p").css("color", "green");
等價於
$('.parent p')
  • 等價關係
$('div span:first')
ce.fn.init {0: span, length: 1, prevObject: ce.fn.init}
$('div span').first()
ce.fn.init {0: span, length: 1, prevObject: ce.fn.init}

$('div span:last')
ce.fn.init {0: span, length: 1, prevObject: ce.fn.init}
$('div span').last()
ce.fn.init {0: span, length: 1, prevObject: ce.fn.init}

$('div span:not("#d3")')
ce.fn.init {0: span, 1: span, length: 2, prevObject: ce.fn.init}
$('div span').not("#d3")
ce.fn.init {0: span, 1: span, length: 2, prevObject: ce.fn.init}

相關文章