Events (事件監聽、ready、自定義事件)
Array 陣列相關 (each, map, inArray, isArray)
Utils 功能型 (Date(), ParseJSON, trim())
AJAX (JSON, POST, Request)
通用選擇器
JQ 選擇器才可使用 JQ方法，勿混用
JQ 可一次多選多個子元素並作處理
JS 使用doqsAll 需要迴圈去套用樣式、設置監聽或事件代理處理
// JS
document.querySelector('.')
document.querySelectorAll('.')
$('.test')
DOM選擇器
JQ限定 找首 $(el).first()
// 找父
$(el).parent();
el.parentNode
// JQ 找子，只找下一層
$(el).children()
// 回傳 NodeList 可先 Array.From() 轉成陣列
el.children
// 找子/後代
$(el).find('li');
el.querySelectorAll('li');
// JQ 限定
$(el).first()
// 找兄弟
$(el).siblings();
Array.prototype.filter.call(el.parentNode.children, function(child){
return child !== el;
// 找上、下個兄弟節點
$(el).prev();
$(el).next();
el.nextElementSibling
el.previousElementSibling
取得 HTML, 屬性, Style, Text
HTML, 屬性, Style, Text
// 設定 DOM 內容
$(el).html(string)
el.innerHTML = string
// 取得 HTML
$(el).html()
el.innerHTML
// 取得 Outer HTML (包含自己)
$('<div>').append($(el).clone()).html();
el.outerHTML
// 取得屬性
$(el).attr('color');
el.getAttribute('color');
// 設定屬性
$(el).attr('tabindex', 3);
el.setAttribute('tabindex', 3);
// 取得Style 用-而非駝峰
$(el).css('background-color')
getComputedStyle(el)['background-color'];
// 設定Style
$(el).css('border-width', '20px');
// 最好使用Class
el.style.borderWidth = '20px';
// 取得文字
$(el).text();
el.textContent
// 設定文字
$(el).text(string);
el.textContent = string;
CSS Class操作
IE9- 無法使用ClassList，相容寫法整理在下
// JS
el.classList.add('show')
el.classList.remove('show')
el.classList.toggle('show')
el.classList.contains('show')
$(el).addClass('show')
$(el).removeClass('show')
$(el).toggleClass('show')
$(el).hasClass('show')
// JS Add Class (IE8 寫法)
if(el.classList) {
el.classList.add(className)
} else {
el.className += ' ' + className
// Has Class (IE8 寫法)
$(el).hasClass(className);
if (el.classList) {
el.classList.contains(className);
} else {
new RegExp('(^| )' + className + '( |$)', 'gi').test(el.className)
// Remove Class (IE8 寫法)
if (el.classList) {
el.classList.remove(className);
} else {
el.className = el.className.replace(new RegExp('(^|\\b)' + className.split(' ').join('|') + '(\\b|$)', 'gi'), ' ');
// Toggle Class (IE9+ 寫法)
if (el.classList) {
el.classList.toggle(className);
} else {
var classes = el.className.split(' ');
var existingIndex = classes.indexOf(className);
if (existingIndex >= 0)
classes.splice(existingIndex, 1);
classes.push(className);
el.className = classes.join(' ');
CSS 位置、大小 (取得/設定)
scrollTop [元素頂端和ViewPort最頂端之間的距離]
getBoundingClientRect() [Viewport 的 相對位置]
getComputedStyle() [計算運算後的元素各Style]
上面幾個有空會寫一篇文整理一波
// 取得位置
$(el).position();
{left: el.offsetLeft, top: el.offsetTop}
// Viewport 的 相對位置
var offset = el.offset();
top: offset.top - document.body.scrollTop,
left: offset.left - document.body.scrollLeft
// JS
el.getBoundingClientRect()
// Outer Height
$(el).outerHeight();
el.offsetHeight
// Outer Height + Margin
$(el).outerHeight(true);
function outerHeight(el) {
var height = el.offsetHeight;
var style = getComputedStyle(el);
height += parseInt(style.marginTop) + parseInt(style.marginBottom);
return height;
outerHeight(el);
// Outer Width
$(el).outerWidth()
el.offsetWidth
// Outer Width + Margin 可與 上面的合併用帶入參數判斷
$(el).outerWidth(true);
function outerWidth(el) {
var width = el.offsetWidth;
var style = getComputedStyle(el);
width += parseInt(style.marginLeft) + parseInt(style.marginRight);
return width;
outerWidth(el);
// Offset
$(el).offset();
var rect = el.getBoundingClientRect();
top: rect.top + document.body.scrollTop,
left: rect.left + document.body.scrollLeft
// Offset Parent
$(el).offsetParent();
el.offsetParent || el
Effect (show/fade/fadeIn)
show / fade
fadeIn 原生寫法不是很懂
動畫可用 animate.css + js 去給 Class 實現
$(el).show()
$(el).hide()
el.style.display = ''
el.style.display = 'none'
$(el).fadeIn()
function fadeIn(el) {
el.style.opacity = 0
var last = +new Date()
var tick = function() {
el.style.opacity = +el.style.opacity + (new Date() - last) / 400
last = +new Date()
if (+el.style.opacity < 1) {
(window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
tick()
fadeIn(el)
DOM 操作 (刪除/改變/複製)
cloneNode 參數 true:深拷貝(含子) false:淺拷貝 (僅複製自身)
複製後 還是要做插入的動作
使用 clone 要注意是否會造成 一樣的ID 切記!!
// 刪除子元素
$(el).remove();
// JS Old
el.parentNode.removeChild(el);
// JS IE 不支援
el.remove()
// 用 OO 取代自身
$(el).replaceWith(string);
el.outerHTML = string;
// 複製節點
$(el).clone();
el.cloneNode(true);
// 清空父元素之下
$(el).empty()
el.innerHTML = ''
DOM 操作 (判斷)
判斷節點是否符合
判斷節點是否符合選擇器
判斷子是否存在
判斷子是否為其子元素
// 判斷節點是否符合
$(el).is($(otherEl));
el === otherEl
if (e.target.classList.contains('')) { }
if (e.target.tagName.toLowerCase() === 'a') {}
// 判斷節點是否符合選擇器
$(el).is('.my-class');
var matches = function(el, selector) {
return (el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector);
matches(el, '.my-class');
// 判斷子是否存在
$(el).find(selector).length;
el.querySelector(selector) !== null
// 判斷子是否為其子元素
$.contains(el, child);
if((el !== child) && el.contains(child))
DOM 操作 (建立/插入/順序)
insertAdjacentHTML DOM插入萬金油
JS creatElement('p')
JS prepend / append (同JQ寫法，但IE不支援)
prepend / append 若元素存在，會進行移動
JS appendChild / insertBefore (IE支援版)
// JS 建立元素
document.creatElement('p')
// 插入前
$(parent).prepend(el);
// JS OLD
parent.insertBefore(el, parent.firstChild);
// JS IE不支援
el.prepend()
// 插入父元素下
$(parent).append(el);
// JS OLD
parent.appendChild(el);
// JS IE不支援
el.append()
// 插入其前、後
$(el).after(htmlString)
$(el).before(htmlString)
insertAdjacentHTML (DOM插入萬金油)
動作有四種(設定position參數)
beforebegin: 加在 elem 之前
afterbegin: 加在 elem 裡面，首個子元素之前
beforeend: 加在 elem 裡面，末個子元素之後
afterend: 加在 elem 之後
el.insertAdjacentHTML( position , htmlString)
DOM 操作 (迴圈執行)
// 迴圈執行
$(selector).each(function(i, el){ });
const elements = document.querySelectorAll(selector);
Array.prototype.forEach.call(elements, function(el, i){ });
// 符合的元素才執行
$(selector).filter(filterFn)
Array.prototype.filter.call(document.querySelectorAll(selector), filterFn)
Events
on off 事件監聽 掛載 & 移除
自定義事件 沒用過 (求放過...)
關鍵字搜尋 Trigger Custom / Trigger Native
// on off 事件監聽
$(el).on('click', Func)
el.addEventListener('click', Func)
$(el).off('click', Func)
el.removeEventListener('click', Func)
// Ready
$(document).ready(function(){ })
// 作者 ready
function ready(fn) {
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
} else {
document.addEventListener('DOMContentLoaded', fn)
// 個人寫法
;(function () {
document.addEventListener('DOMContentLoaded', () => {})
Array 陣列相關
forEach / filter / map
$.grep 等同 ES6 Filter
inArray 找 Array 內的內容
isArray 判斷是否為陣列
LearnMore 可以看看我撰寫的其他篇陣列整理
// 判斷是否為陣列
$.isArray(arr)
Array.isArray(arr)
$.each(arr, function(i, item){ })
arr.forEach(function(item, i){ })
$.map(arr, function(value, index){ })
arr.map(function(value, index){ })
// 找項目
$.inArray(item, arr)
// indexOf 回傳-1表找不到
arr.indexOf(item)
Utils 功能型
時間 Now
Parse JSON
trim 字串去除前後的空白
P.S. 其他看不是很懂 待補.....
Bind, Deep Extend, Extend, Parse Html, Type
// 時間 Now
$.now()
Date.now()
// Parse JSON
$.parseJSON(string)
JSON.parse(string)
// Trim
$.trim(string)
string.trim()
原生 JS 用 XMLHttpRequest 支援度最高
推薦使用 axios
// JS XHR 範例
getData('https://jsonplaceholder.typicode.com/users')
function getData(url) {
const xhr = new XMLHttpRequest()
xhr.open('GET', url, true)
// onreadystatechange & onload 則一即可
xhr.onload = function () {
if (xhr.status === 200) {
console.log(this.responseText)
xhr.onreadystatechange = function () {
if (this.readyState === 4 && this.status === 200) {
console.table(JSON.parse(this.responseText))
} else if (this.status === 404) {
console.log('Not Found')
xhr.onerror = function () {
console.log('Request Error...')
xhr.send()
// JSON
$.getJSON('/my/url', function(data) { })
// JS 使用 XHR
// POST
$.ajax({
type: 'POST',
url: '/my/url',
data: data
// JS XHR
const request = new XMLHttpRequest()
request.open('POST', '/my/url', true)
request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded charset=UTF-8')
request.send(data)
// Request
$.ajax({
type: 'GET',
url: '/my/url',
success: function(resp) { },
error: function() { }
// JS 使用 XHR
YOU MIGHT NOT NEED JQUERY
jQuery Cheat Sheet
