ชีตสรุป jQuery
เอกสารอ้างอิง jQuery ที่ค้นหาและพิมพ์ได้——selector, การจัดการ DOM, event, เอฟเฟกต์, การ traverse, AJAX และตัวช่วยฟอร์ม ฟรี
Selector
14$('#id')
เลือก element ด้วย id
$('.class')
เลือกทุก element ที่มี class
$('div')
เลือกทุก element ตามชื่อ tag
$('*')
เลือกทุก element ในหน้า
$('[name="email"]')
เลือกด้วยค่า attribute
$('a[href^="https"]')
selector attribute แบบขึ้นต้นด้วย
$('ul li:first')
element แรกที่ match
$('ul li:last')
element สุดท้ายที่ match
$('tr:eq(2)')
element ที่ index เริ่มจากศูนย์
$('li:not(.done)')
ยกเว้น element ที่ match selector
$(':checked')
checkbox/radio ที่ถูกเลือกทั้งหมด
$('div:visible')
เฉพาะ element ที่มองเห็นอยู่
$('ul li')
Descendant combinator
$('ul > li')
Direct child combinator
Document ready และ DOM
10$(function () { /* ... */ });
รันโค้ดเมื่อ DOM พร้อม
$(document).ready(fn)
handler document-ready แบบระบุชัดเจน
$(window).on('load', fn)
รันหลังโหลด asset ทั้งหมดเสร็จ
$(this)
ห่อ element ของ context ปัจจุบัน
$(el)
ห่อ DOM node ดิบด้วย jQuery
$('<div class="box"></div>')
สร้าง element ใหม่จาก HTML
$('#box')[0]
ดึง DOM node ที่อยู่เบื้องหลัง
$('#box').get(0)
ดึง DOM node ผ่าน .get()
$('.item').length
นับ element ที่ match
$('#box').is(':visible')
ทดสอบ selector กับชุด
การจัดการ DOM
12$('#box').html('<b>Hi</b>')
ตั้งค่า inner HTML
$('#box').text('Hello')
ตั้งค่าเนื้อหา text (escape)
$('#name').val('Ada')
ตั้งค่าของ field ในฟอร์ม
$('#list').append('<li>x</li>')
แทรกเนื้อหาที่ท้าย
$('#list').prepend('<li>x</li>')
แทรกเนื้อหาที่ต้น
$('#box').before('<hr>')
แทรกเนื้อหาก่อน element
$('#box').after('<hr>')
แทรกเนื้อหาหลัง element
$('#box').remove()
ลบ element ออกจาก DOM
$('#box').empty()
ลบ child node ทั้งหมด
$('#box').clone()
สร้างสำเนาของ element
$('#box').wrap('<div>')
ห่อ element ด้วย HTML ใหม่
$('#box').replaceWith('<p>')
แทนที่ element ทั้งหมด
Attribute และ CSS
13$('#img').attr('src')
ดึงค่า attribute
$('#img').attr('alt', 'Logo')
ตั้งค่า attribute
$('#cb').prop('checked')
ดึง property ของ DOM (checked/disabled)
$('#cb').prop('checked', true)
ตั้งค่า property ของ DOM
$('#img').removeAttr('title')
ลบ attribute
$('.box').addClass('active')
เพิ่ม class CSS
$('.box').removeClass('active')
ลบ class CSS
$('.box').toggleClass('open')
สลับ class CSS เปิด/ปิด
$('.box').hasClass('active')
ทดสอบว่ามี class หรือไม่
$('#box').css('color', 'red')
ตั้งค่า property CSS หนึ่งตัว
$('#box').css({top: 0, left: 0})
ตั้งค่า property CSS หลายตัว
$('#box').width()
ดึงความกว้างที่คำนวณเป็นพิกเซล
$('#box').height()
ดึงความสูงที่คำนวณเป็นพิกเซล
Event
12$('#btn').on('click', fn)
ผูก event handler
$('#btn').off('click')
ถอด event handler
$('#btn').click(fn)
handler click แบบย่อ
$('#form').submit(fn)
จัดการการ submit ฟอร์ม
$('#sel').change(fn)
จัดการการเปลี่ยนค่า
$('#in').keyup(fn)
จัดการ key-up ใน field
$('#list').on('click', '.item', fn)
event แบบ delegate สำหรับ child ไดนามิก
$('#btn').trigger('click')
ยิง event ด้วยโปรแกรม
$('#btn').one('click', fn)
รัน handler ได้มากสุดครั้งเดียว
e.preventDefault()
หยุดการกระทำเริ่มต้นของเบราว์เซอร์
e.stopPropagation()
หยุด event ไม่ให้ bubble
e.target
element ที่ทำให้เกิด event
เอฟเฟกต์และแอนิเมชัน
12$('#box').show()
แสดง element ที่ซ่อนอยู่
$('#box').hide()
ซ่อน element
$('#box').toggle()
สลับการมองเห็น
$('#box').fadeIn(300)
ค่อยๆ แสดง element
$('#box').fadeOut(300)
ค่อยๆ ซ่อน element
$('#box').fadeTo(300, 0.5)
ค่อยๆ ปรับเป็นความทึบที่กำหนด
$('#box').slideUp()
เลื่อน element ขึ้น (ยุบ)
$('#box').slideDown()
เลื่อน element ลง (ขยาย)
$('#box').slideToggle()
สลับแอนิเมชันการเลื่อน
$('#box').animate({left: 100})
แอนิเมต property CSS
$('#box').stop()
หยุดแอนิเมชันปัจจุบัน
$('#box').delay(500).fadeIn()
หน่วงเอฟเฟกต์ถัดไปในคิว
การ traverse
12$('#box').find('.item')
หา descendant ที่ match selector
$('#box').parent()
ดึง parent โดยตรง
$('#box').parents('.row')
ดึง ancestor ทั้งหมดที่ match selector
$('#box').closest('.row')
ancestor ที่ใกล้สุดที่ match (หรือตัวเอง)
$('#box').children()
ดึง child โดยตรง
$('#box').siblings()
ดึง element ที่เป็น sibling
$('#box').next()
ดึง sibling ถัดไป
$('#box').prev()
ดึง sibling ก่อนหน้า
$('.item').each(fn)
วนซ้ำแต่ละ element ที่ match
$('.item').filter('.on')
ลดชุดด้วย selector
$('.item').first()
ลดชุดเหลือ element แรก
$('.item').eq(1)
ลดชุดเหลือ index เดียว
AJAX
11$.ajax({url: '/api', method: 'GET'})
request AJAX แบบควบคุมเต็มที่
$.get('/api', fn)
request HTTP GET แบบย่อ
$.post('/api', data, fn)
request HTTP POST แบบย่อ
$.getJSON('/api.json', fn)
request GET ที่คาดหวัง JSON
$('#box').load('/part.html')
โหลด HTML เข้า element
$.ajax({dataType: 'json'})
ตั้งชนิด response ที่คาดหวัง
$.ajax({data: {q: 'x'}})
ส่งพารามิเตอร์ของ request
.done(function (res) {})
รัน callback เมื่อสำเร็จ
.fail(function (err) {})
รัน callback เมื่อล้มเหลว
.always(function () {})
รัน callback หลังเสร็จสิ้น
$.ajaxSetup({headers: {}})
ตั้งค่าเริ่มต้นสำหรับทุก request
ฟอร์ม
10$('#form').serialize()
เข้ารหัสข้อมูลฟอร์มเป็น query string
$('#form').serializeArray()
เข้ารหัสข้อมูลฟอร์มเป็น array
$('#name').val()
อ่านค่าของ field
$('#name').val('Ada')
เขียนค่าของ field
$(':input')
เลือก element input ของฟอร์มทั้งหมด
$('#cb').is(':checked')
ทดสอบว่า checkbox ถูกเลือกหรือไม่
$('#sel option:selected')
ดึง option ที่ถูกเลือก
$('#in').focus()
ย้ายโฟกัสไปยัง field
$('#form').on('submit', fn)
จัดการ event submit ของฟอร์ม
$('#in').prop('disabled', true)
ปิดการใช้งาน control ของฟอร์ม
ยูทิลิตี
11$.each(arr, fn)
วนซ้ำบน array หรือ object
$.map(arr, fn)
สร้าง array ใหม่จากแต่ละรายการ
$.grep(arr, fn)
กรอง array ด้วย predicate
$.extend({}, a, b)
รวม object เข้า target
$.trim(' hi ')
ตัดช่องว่างหน้า/ท้าย
$.inArray(2, arr)
หา index ของรายการใน array
$.isArray(x)
ทดสอบว่าค่าเป็น array หรือไม่
$.isFunction(x)
ทดสอบว่าค่าเป็นฟังก์ชันหรือไม่
$.parseJSON(str)
แปลง string JSON เป็น object
$.now()
timestamp ปัจจุบันเป็นมิลลิวินาที
$.type(x)
ดึงชนิดภายในของค่า
ไม่มีรายการที่ตรงกับ “:q”
ต้องการความช่วยเหลือ?
พบปัญหากับเครื่องมือนี้หรือไม่? แจ้งทีมงานของเรา