jQuery 速查表
可搜尋、可列印的 jQuery 參考手冊——選擇器、DOM 操作、事件、特效、走訪、AJAX 以及表單輔助方法。免費。
選擇器
14$('#id')
依 id 選取元素
$('.class')
選取具某類別的所有元素
$('div')
選取某標籤名的所有元素
$('*')
選取頁面中每個元素
$('[name="email"]')
依屬性值選取
$('a[href^="https"]')
屬性開頭比對選擇器
$('ul li:first')
第一個符合的元素
$('ul li:last')
最後一個符合的元素
$('tr:eq(2)')
從 0 起算指定索引的元素
$('li:not(.done)')
排除符合某選擇器的元素
$(':checked')
所有已勾選的核取方塊/選項按鈕
$('div:visible')
僅目前可見的元素
$('ul li')
後代組合子
$('ul > li')
直接子代組合子
Document ready 與 DOM
10$(function () { /* ... */ });
DOM 就緒後執行程式碼
$(document).ready(fn)
明確的 document-ready 處理器
$(window).on('load', fn)
所有資源載入後執行
$(this)
包裹目前語境元素
$(el)
以 jQuery 包裹原始 DOM 節點
$('<div class="box"></div>')
從 HTML 建立新元素
$('#box')[0]
取得底層 DOM 節點
$('#box').get(0)
透過 .get() 取得 DOM 節點
$('.item').length
計算符合的元素數
$('#box').is(':visible')
對集合測試選擇器
DOM 操作
12$('#box').html('<b>Hi</b>')
設定內部 HTML
$('#box').text('Hello')
設定文字內容 (已跳脫)
$('#name').val('Ada')
設定表單欄位值
$('#list').append('<li>x</li>')
在結尾插入內容
$('#list').prepend('<li>x</li>')
在開頭插入內容
$('#box').before('<hr>')
在元素前插入內容
$('#box').after('<hr>')
在元素後插入內容
$('#box').remove()
從 DOM 移除元素
$('#box').empty()
移除所有子節點
$('#box').clone()
建立元素的副本
$('#box').wrap('<div>')
以新 HTML 包裹元素
$('#box').replaceWith('<p>')
完全取代元素
屬性與 CSS
13$('#img').attr('src')
取得屬性值
$('#img').attr('alt', 'Logo')
設定屬性值
$('#cb').prop('checked')
取得 DOM 屬性 (checked/disabled)
$('#cb').prop('checked', true)
設定 DOM 屬性
$('#img').removeAttr('title')
移除屬性
$('.box').addClass('active')
新增 CSS 類別
$('.box').removeClass('active')
移除 CSS 類別
$('.box').toggleClass('open')
切換 CSS 類別開/關
$('.box').hasClass('active')
測試類別是否存在
$('#box').css('color', 'red')
設定單一 CSS 屬性
$('#box').css({top: 0, left: 0})
設定多個 CSS 屬性
$('#box').width()
取得計算後的寬度 (像素)
$('#box').height()
取得計算後的高度 (像素)
事件
12$('#btn').on('click', fn)
附加事件處理器
$('#btn').off('click')
卸除事件處理器
$('#btn').click(fn)
簡寫的 click 處理器
$('#form').submit(fn)
處理表單送出
$('#sel').change(fn)
處理值變更
$('#in').keyup(fn)
處理欄位的 key-up
$('#list').on('click', '.item', fn)
為動態子元素委派事件
$('#btn').trigger('click')
以程式觸發事件
$('#btn').one('click', fn)
處理器最多執行一次
e.preventDefault()
阻止瀏覽器預設行為
e.stopPropagation()
阻止事件冒泡
e.target
觸發事件的元素
效果與動畫
12$('#box').show()
顯示隱藏的元素
$('#box').hide()
隱藏元素
$('#box').toggle()
切換可見性
$('#box').fadeIn(300)
淡入元素
$('#box').fadeOut(300)
淡出元素
$('#box').fadeTo(300, 0.5)
淡化至指定不透明度
$('#box').slideUp()
向上收合元素 (collapse)
$('#box').slideDown()
向下展開元素 (expand)
$('#box').slideToggle()
切換滑動動畫
$('#box').animate({left: 100})
對 CSS 屬性製作動畫
$('#box').stop()
停止目前動畫
$('#box').delay(500).fadeIn()
延遲下一個排隊的效果
走訪
12$('#box').find('.item')
尋找符合選擇器的後代
$('#box').parent()
取得直接父層
$('#box').parents('.row')
取得符合選擇器的所有祖先
$('#box').closest('.row')
最近符合的祖先 (或自身)
$('#box').children()
取得直接子代
$('#box').siblings()
取得兄弟元素
$('#box').next()
取得下一個兄弟
$('#box').prev()
取得上一個兄弟
$('.item').each(fn)
走訪每個符合的元素
$('.item').filter('.on')
以選擇器縮減集合
$('.item').first()
將集合縮減為第一個元素
$('.item').eq(1)
將集合縮減為單一索引
AJAX
11$.ajax({url: '/api', method: 'GET'})
完全可控的 AJAX 請求
$.get('/api', fn)
簡寫的 HTTP GET 請求
$.post('/api', data, fn)
簡寫的 HTTP POST 請求
$.getJSON('/api.json', fn)
預期回傳 JSON 的 GET 請求
$('#box').load('/part.html')
將 HTML 載入元素
$.ajax({dataType: 'json'})
設定預期的回應類型
$.ajax({data: {q: 'x'}})
送出請求參數
.done(function (res) {})
成功時執行回呼
.fail(function (err) {})
失敗時執行回呼
.always(function () {})
完成後執行回呼
$.ajaxSetup({headers: {}})
為所有請求設定預設值
表單
10$('#form').serialize()
將表單資料編碼為查詢字串
$('#form').serializeArray()
將表單資料編碼為陣列
$('#name').val()
讀取欄位值
$('#name').val('Ada')
寫入欄位值
$(':input')
選取所有表單輸入元素
$('#cb').is(':checked')
測試核取方塊是否已勾選
$('#sel option:selected')
取得選定的選項
$('#in').focus()
將焦點移到欄位
$('#form').on('submit', fn)
處理表單 submit 事件
$('#in').prop('disabled', true)
停用表單控制項
工具函式
11$.each(arr, fn)
走訪陣列或物件
$.map(arr, fn)
從每個項目建立新陣列
$.grep(arr, fn)
依條件函式篩選陣列
$.extend({}, a, b)
將物件合併到目標
$.trim(' hi ')
修剪前後空白
$.inArray(2, arr)
在陣列中尋找項目索引
$.isArray(x)
測試值是否為陣列
$.isFunction(x)
測試值是否為函式
$.parseJSON(str)
將 JSON 字串解析為物件
$.now()
目前時間戳 (毫秒)
$.type(x)
取得值的內部型別
沒有條目符合「:q」。
需要協助？
使用此工具時遇到問題？請告訴我們的團隊。