jQuery

官方網站

引用

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.min.js"></script>

介紹

使用 $ 代表 jQuery，提供簡單方便的使用方法

$ 也是一個變數，在某些複雜的專案下，可能被其他功能先使用，導致 $ 已非 jQuery

抓取 DOM

html

<input type="text" id="account">

<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
<div class="item">Item 4</div>
<div class="item">Item 5</div>

js

let account = $('#account');
let items = $('.item');

console.log(account.val());
console.log(items.html());

html() 等同 innerHTML

val() 等同 value

無論是一個或是多個，都是統一使用 $(selector) 來抓取建立 jQuery 物件並自動整理成 Array

DOM each

將抓取到的 dom 做迴圈(iterate)一個一個讀取

items.each(function(index, item) {})

與 Array 的 forEach(function(item, index){}) 不同，參數剛好是顛倒的

js

items.each((index, item) => {
    console.log(item, index);
    console.log($(item).html());
})

item 原生 dom

$(item) 將原生 dom 封裝為 jQuery 物件

取得特定 DOM

items.eq(0).html() 取得第一個 jQuery 物件

取得原生 DOM

items[0] 取得第一個原生 dom

事件綁定

items.on('click', function(e) {})

on 等同 addEventListener

自動將 items 內的 jQuery 物件都進行綁定

class 控制

附加

account.addClass('active')

移除

account.removeClass('active')

切換

account.toggleClass('active')

檢查存在

account.hasClass('active')

屬性控制

html

<input type="checkbox" id="agree">

js

let agree = $('#agree')

agree.prop('checked', true)
console.log(agree.prop('checked'))
agree.prop('checked', false)

沒有第二個參數表示 getter 取值