原生 Javascript 与 jQuery API 对照

April 20, 2017

选择器

通用选择

// jQuery
$('selector')

// Native
document.querySelector('selector')

document.querySelectorAll('selector')
// return NodeList

后代选择

// jQuery
$el.find('li')

// Native
el.querySelectorAll('li')

前后元素

// jQuery
$el.prev()

// Native
el.previousElementSibling

// next
$el.next()

// Native
el.nextElementSibling

父元素

// jQuery
$el.parent()

// Native
el.parentNode

closest 最接近的祖先元素

// jQuery
$el.closest(selector)

// Native
el.closest(selector)
// 原生方法不兼容 IE, chrome 浏览器仅 41 版本以上支持

获取值和属性操作

获取值

// jQuery
$('#my-input').val()

// Native
document.querySelector('#my-input').value

获取属性

// jQuery
$el.attr('foo')

// Native
el.getAttribute('foo')

设置属性

// jQuery
$el.attr('foo', 'bar')

// Native
el.setAttribute('foo', 'bar')

获取和设置 data 属性

// jQuery
$el.data('foo')
$el.data('foo', value)

// Native
el.dataset['foo']
el.dataset.foo
el.dataset['foo'] = value

class 操作

添加 class

// jQuery
$el.addClass(className)

// Native
el.classList.add(className)

移除 class

// jQuery
$el.removeClass(className)

// Native
el.classList.remove(className)

切换 class

// jQuery
$el.toggleClass(className)

// Native
el.classList.toggle(className)

判断拥有 class

// jQuery
$el.hasClass(className)

// Native
el.classList.contains(className)

操作 DOM

移除元素

// jQuery
$el.remove()

// Native
el.remove()

获取 text

// jQuery
$el.text()

// Native
el.textContent

设置 text

// jQuery
$el.text(string)

// Native
el.textContent = string

获取 HTML

// jQuery
$el.html()

// Native
el.innerHTML

设置 HTML

// jQuery
$el.html(htmlString)

// Native
el.innerHTML = htmlString

append 添加元素到末尾

// jQuery
$el.append("<div id='container'>hello</div>")

// Native (HTML string)
el.insertAdjacentHTML('beforeend', '<div id="container">Hello World</div>')

// Native (Element)
el.appendChild(newEl)

prepend 添加元素到开头

// jQuery
$el.prepend("<div id='container'>hello</div>")

// Native (HTML string)
el.insertAdjacentHTML('afterbegin', '<div id="container">Hello World</div>')

// Native (Element)
el.insertBefore(newEl, el.firstChild)

insertBefore 添加到指定元素前

// jQuery
$newEl.insertBefore(queryString);

// Native (HTML string)
el.insertAdjacentHTML('beforebegin ', '<div id="container">Hello World</div>')

// Native (Element)
const el = document.querySelector(selector)
el.parentNode.insertBefore(newEl, el)

insertAfter 添加到指定元素后

// jQuery
$newEl.insertAfter(queryString)

// Native (HTML string)
el.insertAdjacentHTML('afterend', '<div id="container">Hello World</div>')

// Native (Element)
const el = document.querySelector(selector)
el.parentNode.insertBefore(newEl, el.nextSibling)

移除子元素

// jQuery
$el.empty()

// Native
el.innerHTML = ''

事件

绑定事件

// jQuery
$el.on(eventName, eventHandler)

// Native
el.addEventListener(eventName, eventHandler)

解绑事件

// jQuery
$el.off(eventName, eventHandler)

// Native
el.removeEventListener(eventName, eventHandler)

触发事件

// jQuery
$el.trigger(eventName)

// Native
var event = new Event(eventName)
el.dispatchEvent(event)

工具

isArray 判断数组

// jQuery
$.isArray(range)

// Native
Array.isArray(range)

inArray 判断数组包含

// jQuery
$.inArray(item, array)

// Native
array.indexOf(item) > -1

// ES6
array.includes(item)

extend 扩展对象

// jQuery
$.extend({}, defaultOpts, opts)

// Native
Object.assign({}, defaultOpts, opts)

trim 去除字符串首尾空白

// jQuery
$.trim(string)

// Native
string.trim()

map 根据数组内容生成新数组

// jQuery
$.map(array, (value, index) => {
})

// Native
array.map((value, index) => {
})

each 遍历对象和数组

// jQuery
$.each(array, (index, value) => {
})

// Native
array.forEach((value, index) => {
})

等待 DOM 加载完执行操作

// jQuery
$(document).ready(function() {
})

// Native
window.onload = function() {
}

document.addEventListener("DOMContentLoaded", function(event) {
    console.log("DOM fully loaded and parsed")
})

API 分析

在 jQuery 官网上，核心函数 jQuery() 有 9 种用法

jQuery(selector [, context])
jQuery(element)
jQuery(elementArray)
jQuery(object)
jQuery(jQuery object)
jQuery()
jQuery(html [, ownerDocument])
jQuery(html, attributes)
jQuery(callback)

一个函数如此多的用法，通过参数类型进行判断，显然设计得不好。前 3 个 API 是可以使用的，主要是第一个。并不是提供的方法都要去用，取其精华，去其糟粕即可。