在我看来,jQuery确切已过期了。本项目总结了绝大部分 jQuery API 替代的要领,相似项目You-Dont-Need-jQuery,并会再此基础上举行许多的补充。写这个项目主要想让本身和人人增长对javascript原生api的明白,也能够作为一个”原生jquery”的api文档随时检察。兼容ie9及以上浏览器,如不支撑ie9会迥殊申明。
原文地点 https://github.com/fa-ge/jQuery-is-out-of-date
目次
Regulation
function $(selector) {
return document.querySelector(selector)
}
function $$(selector) {
return Array.prototype.slice.call(document.querySelectorAll(selector))
}
假如在jQuery示例下的$是jquery对象,在Native示例下的$是以上的完成。相当于完成了chrome掌握台上$,$$要领。
DOM Manipulation
许多人一向以为jQuery还没有过期的个中一个原因是在DOM操纵上非常轻易。接下来比较一下。
add
增加元素到婚配的元素鸠合。
// jQuery
$(selector).add($(newEl))
// Native
$$(selector).push(newEl)
addClass
为每一个婚配的元素增加指定的款式类名
// jQuery
$(el).addClass(className)
// Native (IE 10+ support)
el.classList.add(className)
after
在婚配元素鸠合中的每一个元素背面插进去参数所指定的内容,作为其兄弟节点。
// jQuery
$(el).after('<p></p>')
// Native (Html string)
el.insertAdjacentHTML('afterend', '<p></p>')
// Native (Element)
el.insertAdjacentElement('afterend', newEl)
// Native (Element)
el.parentNode.insertBefore(newEl, el.nextSibling)
append
在每一个婚配元素内里的末端处插进去参数内容。
// jQuery
$(el).append('<p></p>')
// Native (Html string)
el.insertAdjacentHTML('beforeend', '<p></p>')
// Native (Element)
el.insertAdjacentElement('beforeend', newEl)
// Native (Element)
el.appendChild(newEl)
appendTo
与append相反
attr
猎取婚配的元素鸠合中的第一个元素的属性的值。设置每一个婚配元素的一个或多个属性。
// jQuery
$(el).attr('foo')
// Native
el.getAttribute('foo')
// jQuery
$(el).attr('foo', 'bar')
// Native
el.setAttribute('foo', 'bar')
before
依据参数设定,在婚配元素的前面插进去内容(外部插进去)
// jQuery
$(el).before('<p></p>')
// Native (Html string)
el.insertAdjacentHTML('beforebegin', '<p></p>')
// Native (Element)
el.insertAdjacentElement('beforebegin', newEl)
// Native (Element)
el.parentNode.insertBefore(newEl, el)
children
获得婚配元素鸠合中每一个元素的子元素,挑选器挑选性挑选。
// jQuery
$(el).children()
// Native
el.children
clone
建立一个婚配的元素鸠合的深度拷贝副本。
// jQuery
$(el).clone()
// Native
el.cloneNode()
// For Deep clone , set param as `true`
closest
从元素本身最早,在DOM 树上逐级向上级元素婚配,并返回最早婚配的先人元素。以数组的情势返回与挑选器相婚配的一切元素,从当前元素最早,在 DOM 树中向上遍历。
// jQuery
$el.closest(selector)
// Native - Only latest, NO IE
el.closest(selector)
// Native
function closest(el, selector = false) {
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector
do {
if (matchesSelector.call(el, selector)) {
return el
}
} while ((el = el.parentElement) !== null)
return null
}
contents
获得婚配元素鸠合中每一个元素的子元素,包括笔墨和解释节点。
// jQuery
$(el).contents()
// Native
el.childNodes
css
猎取婚配元素鸠合中的第一个元素的款式属性的值设置每一个婚配元素的一个或多个CSS属性。
// jQuery
$(el).css('color')
// Native
// 注重:此处为了处理当 style 值为 auto 时,返回 auto 的题目
const win = el.ownerDocument.defaultView
// null 的意义是不返回伪类元素
win.getComputedStyle(el, null).color
// jQuery
$(el).css({ color: '#f01' })
// Native
el.style.color = '#f01'
// 一次性设置多个款式
// jQuery
$(el).css({ color: '#f01', 'background-color': '#000' })
// Native
const cssObj = {color: '#f01', backgroundColor: '#000'}
for (let key in cssObj) {
el.style[key] = cssObj[key]
}
// Native
const cssText = 'color: #f01; background-color: #000'
el.style.cssText += cssText
empty
从DOM中移除鸠合中婚配元素的一切子节点。
// jQuery
$(el).empty()
// Native
el.innerHTML = ''
filter
挑选元素鸠合中婚配表达式 或 经由过程传递函数测试的 那些元素鸠合。
// jQuery
$(selector).filter(filterFn)
// Native
$$(selector).filter(filterFn)
find
经由过程一个挑选器,jQuery对象,或元素过滤,获得当前婚配的元素鸠合中每一个元素的子女。
// jQuery
$(el).find(selector)
// Native
el.querySelectorAll(selector)
has
挑选婚配元素鸠合中的那些有相婚配的挑选器或DOM元素的子女元素。
// jQuery
$(selector).has('p')
// Native
$$(selector).filter(el => el.querySelector('p') !== null)
hasClass
肯定任何一个婚配元素是不是有被分派给定的(款式)类。
// jQuery
$(el).hasClass(className)
// Native (IE 10+ support)
el.classList.contains(className)
height
猎取婚配元素鸠合中的第一个元素的当前盘算高度值。设置每一个婚配元素的高度值。
// jQuery window
$(window).height()
// Native
window.innerHeight
// jQuery document
$(document).height()
// Native
const body = document.body
const html = document.documentElement
const height = Math.max(
body.offsetHeight,
body.scrollHeight,
html.clientHeight,
html.offsetHeight,
html.scrollHeight
)
// jQuery Element (it's `height` always equals to content height)
$(el).height()
// Native
function getHeight(el) {
const styles = window.getComputedStyle(el)
const height = el.clientHeight
const paddingTop = parseFloat(styles.paddingTop)
const paddingBottom = parseFloat(styles.paddingBottom)
return height - paddingTop - paddingBottom
}
// Native
// when `border-box`, it's `height` === (content height) + padding + border; when `content-box`, it's `height` === (content height)
getComputedStyle(el, null).height
html
猎取鸠合中第一个婚配元素的HTML内容 设置每一个婚配元素的html内容。
// jQuery
$(el).html()
// Native
el.innerHTML
// jQuery
$(el).html(htmlString)
// Native
el.innerHTML = htmlString
innerHeight
为婚配的元素鸠合中猎取第一个元素的当前盘算高度值,包括padding,然则不包括border。
// jQuery
$(el).innerHeight()
// Native
el.clientHeight()
innerWidth
为婚配的元素鸠合中猎取第一个元素的当前盘算宽度值,包括padding,然则不包括border。
// jQuery
$(el).innerWidth()
// Native
el.clientWidth()
insertAfter
与after相反
insertBefore
与before相反
is
推断当前婚配的元素鸠合中的元素,是不是为一个挑选器,DOM元素,或许jQuery对象,假如这些元素最少一个婚配给定的参数,那末返回true。
// jQuery
$(el).is(selector)
// Native
(el.matches || el.matchesSelector || el.msMatchesSelector || el.mozMatchesSelector || el.webkitMatchesSelector || el.oMatchesSelector).call(el, selector)
next
获得婚配的元素鸠合中每一个元素紧邻的背面平辈元素的元素鸠合。假如供应一个挑选器,那末只要紧跟着的兄弟元素满足挑选器时,才会返回此元素。
// jQuery
$(el).next()
// Native
el.nextElementSibling
nextAll
获得每一个婚配元素鸠合中一切下面的平辈元素,挑选性挑选的挑选器。
// jQuery
$(el).nextAll()
// Native
const nextAll = []
while((el = el.nextElementSibling) !== null) {
nextAll.push(el)
}
not
从婚配的元素鸠合中移除指定的元素。
// jQuery
$(selector).not(matches)
// Native
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector
$$(selector).filter(el => !matchesSelector.call(el, matches))
offset
在婚配的元素鸠合中,猎取的第一个元素的当前坐标,坐标相对于文档。 设置婚配的元素鸠合中每一个元素的坐标, 坐标相对于文档。
// jQuery
$(el).offset()
// Native
const elClientRect = el.getBoundingClientRect()
{
top: elClientRect.top + window.pageYOffset - document.documentElement.clientTop,
left: elClientRect.left + window.pageXOffset - document.documentElement.clientLeft
}
// jQuery
$(el).offset(10, 10)
// Native
const elClientRect = el.getBoundingClientRect()
const elTop = 10 - elClientRect.top - document.documentElement.clientTop
const elLeft = 10 - elClientRect.left - document.documentElement.clientLeft
el.style.cssText += `position: relative;top: ${elTop}px;left: ${elLeft}px;`
offsetParent
// jQuery
$(el).offsetParent()
// Native
el.offsetParent || el
outerHeight
猎取元素鸠合中第一个元素的当前盘算高度值,包括padding,border和挑选性的margin。返回一个整数(不包括“px”)示意的值 ,或假如在一个空鸠合上挪用该要领,则会返回 null。
// jQuery
$(el).outerHeight()
// Native
el.offsetHeight
// jQuery
$(el).outerHeight(true)
// Native
const win = el.ownerDocument.defaultView
const {marginTop, margintBottom} = win.getComputedStyle(el, null)
el.offsetHeight + parseFloat(marginTop) + parseFloat(margintBottom) === $(el).outerHeight(true) // true
outerWidth
与outerHeight相似。
parent
获得婚配元素鸠合中,每一个元素的父元素,能够供应一个可选的挑选器。
// jQuery
$(el).parent()
// Native
el.parentNode
parents
获得鸠合中每一个婚配元素的先人元素,能够供应一个可选的挑选器作为参数。
// jQuery
$(el).parents(selector)
// Native
function parents(el, selector = '*') {
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector
const parentsMatch = []
while ((el = el.parentElement) !== null) {
if (matchesSelector.call(el, selector)) {
parentsMatch.push(el)
}
}
return parentsMatch
}
parentsUntil
查找当前元素的一切的先辈元素,直到碰到挑选器, DOM 节点或 jQuery 对象婚配的元素为止,但不包括这些元素。
// jQuery
$(el).parentsUntil(selector)
// Native
function parentsUntil(el, selector = false) {
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector
const parentsMatch = []
while ((el = el.parentElement) !== null && !matchesSelector.call(el, selector)) {
parentsMatch.push(el)
}
return parentsMatch
}
position
猎取婚配元素中第一个元素的当前坐标,相对于offset parent的坐标。( offset parent指离该元素近来的而且被定位过的先人元素 )
// jQuery
$(el).position()
// Native
{ left: el.offsetLeft, top: el.offsetTop }
prepend
将参数内容插进去到每一个婚配元素的前面(元素内部)。
// jQuery
$(el).prepend('<p></p>')
// Native (HTML string)
el.insertAdjacentHTML('afterbegin', '<p></p>')
// Native (Element)
el.insertBefore(newEl, el.firstChild)
prependTo
与prepend相反
prev
获得一个包括婚配的元素鸠合中每一个元素紧邻的前一个平辈元素的元素鸠合。挑选性挑选的挑选器。
与next相似
prevAll
获得鸠合中每一个婚配元素的一切前面的兄弟元素,挑选性挑选的挑选器。
与nextAll相似
prevUntil
猎取每一个元素但不包括挑选器,DOM节点,或许jQuery对象婚配的元素的一切前面的兄弟元素。
与nextUntil相似
remove
将婚配元素鸠合从DOM中删除。(注:同时移除元素上的事宜及 jQuery 数据。)
// jQuery
$(el).remove()
// Native
el.parentNode.removeChild(el)
// Native
el.outerHTML = ''
removeAttr
为婚配的元素鸠合中的每一个元素中移除一个属性(attribute)。
// jQuery
$(el).removeAttr(attr)
// Native
el.removeAttribute(attr)
removeClass
移除鸠合中每一个婚配元素上一个,多个或悉数款式。
// jQuery
$(el).removeClass(className)
// Native (IE 10+ support)
el.classList.remove(className)
replaceAll
与replaceWith相反
replaceWith
用供应的内容替代鸠合中一切婚配的元素而且返回被删除元素的鸠合。
// jQuery
$(el).replaceWith('<p></p>')
// Native (HTML string)
el.outerHTML = '<p></p>'
// Native (Element)
el.parentNode.replaceChild(newEl, el)
scrollLeft
与scrollTop一样
scrollTop
猎取婚配的元素鸠合中第一个元素的当前垂直滚动条的位置或设置每一个婚配元素的垂直滚动条位置。设置每一个婚配元素的垂直滚动条位置
// jQuery
$(el).scrollTop()
// Native (el is window)
Math.max(document.documentElement.scrollTop, document.body.scrollTop)
or
window.pageYOffset
// Native (el is not window)
el.scrollTop
// jQuery
$(el).scrollTop(10)
// Native (el is window)
document.documentElement.scrollTop = 10
document.body.scrollTop = 10
// Native (el is not window)
el.scrollTop = 10
siblings
获得婚配元素鸠合中每一个元素的兄弟元素,能够供应一个可选的挑选器。。
// jQuery
$(el).siblings()
// Native
slice
依据指定的下标局限,过滤婚配的元素鸠合,并天生一个新的 jQuery 对象。
// jQuery
$(selector).slice(1, 6)
// Native
$$(selector).slice(1, 6)
text
获得婚配元素鸠合中每一个元素的兼并文本,包括他们的子女设置婚配元素鸠合中每一个元素的文本内容为指定的文本内容。
// jQuery
$(el).text()
// Native
el.textContent
// jQuery
$(el).text(string)
// Native
el.textContent = string
toggleClass
在婚配的元素鸠合中的每一个元素上增加或删除一个或多个款式类,取决于这个款式类是不是存在或值切换属性。即:假如存在(不存在)就删除(增加)一个类。
// jQuery
$(el).toggleClass(className)
// Native
el.classList.toggle(className)
unwrap
将婚配元素鸠合的父级元素删除,保存本身(和兄弟元素,假如存在)在本来的位置。
// jQuery
$(el).unwrap()
// Native
const parent = el.parentNode
parent.outerHTML = parent.innerHTML
val
猎取婚配的元素鸠合中第一个元素的当前值。设置婚配的元素鸠合中每一个元素的值。
// jQuery
$(el).val()
// Native
el.value
// jQuery
$(el).val(value)
// Native
el.value = value
width
与height相似
wrap
在每一个婚配的元素外层包上一个html元素。
// jQuery
$(el).wrap('<div class="wrapper"></div>')
// Native
const wrapper = document.createElement('div')
wrapper.className = 'wrapper'
el.parentNode.insertBefore(wrapper, el)
el.parentNode.removeChild(el)
wrapper.appendChild(el)
// Native
// 这类机能比较差 https://jsperf.com/outerhtml-appendchild
el.outerHTML = `<div class="wrapper">${el.outerHTML}</div>`
Query Selector
经常运用的 class、id、属性 挑选器都能够运用 document.querySelector
或 document.querySelectorAll
替代。区别是
document.querySelector
返回第一个婚配的 Elementdocument.querySelectorAll
返回一切婚配的 Element 构成的 NodeList。它能够经由过程[].slice.call()
把它转成 Array假如婚配不到任何 Element,jQuery 返回空数组
[]
,但document.querySelector
返回null
,注重空指针非常。
注重:
document.querySelector
和document.querySelectorAll
机能很差。假如想进步机能,只管运用document.getElementById
、document.getElementsByClassName
或document.getElementsByTagName
。
以下只完成和jquery有所区别的api
:contains
挑选一切包括指定文本的元素。
// jQuery
$('selector:contains("metchString")')
// Native
$$('selector').filter(el => el.textContent.indexOf('metchString') !== -1)
:emtpy
挑选一切没有子元素的元素(包括文本节点)。
// jQuery
$('selector:empty')
// Native
$$('selector').filter(el => el.innerHTML === '')
:even
挑选索引值为偶数的元素,从 0 最早计数。
// jQuery
$('selector:even')
// Native
$$('selector').filter((el, index) => (index & 1) === 0)
:focus
挑选当前猎取核心的元素。
// jQuery
$(':focus')
// Native
document.activeElement
:gt
挑选婚配鸠合中一切大于给定index(索引值)的元素。
// jQuery
$('selector:gt(2)')
// Native
$$('selector').filter((el, index) => index > 2)
:has
与has相似
:header
挑选一切题目元素,像h1, h2, h3 等.
// jQuery
$('selector:header')
// Native
$$('selector').filter(el => /^h\d$/i.test(el.nodeName))
:lt
挑选婚配鸠合中一切索引值小于给定index参数的元素。
// jQuery
$('selector:lt(2)')
// Native
$$('selector').filter((el, index) => index < 2)
:not
与not相似
:odd
挑选索引值为奇数元素,从 0 最早计数。
// jQuery
$('selector:odd')
// Native
$$('selector').filter((el, index) => (index & 1) === 1)
only-child
假如某个元素是其父元素的唯一子元素,那末它就会被选中。
// jQuery
$('selector:only-child')
// Native
$$('selector').filter(el => el.previousElementSibling === null && el.nextElementSibling === null)
// Native
$$('selector').filter(el => el.parentNode.children.length === 1)
:only-of-type
挑选器婚配属于其父元素的特定范例的唯一子元素的每一个元素。
// jQuery
$('selector:only-of-type')
// Native
$$('selector').filter(el => {
for(let child of el.parentNode.children) {
if (child !== el && child.nodeName === el.nodeName) {
return true
}
}
return false
})
:parent
挑选一切含有子元素或许文本的父级元素。
// jQuery
$('selector:parent')
// Native
$$('selector').filter(el => el.innerHTML !== '')
:selected
猎取 select 元素中一切被选中的元素。
// jQuery
$('select option:selected')
// Native (single)
$('select option')[$('select').selectedIndex]
// Native (multiple)
$$('select option').filter(el => el.selected)
Ajax
Events
Utilities
contains
搜检一个DOM元素是另一个DOM元素的子女。
// jQuery
$.contains(el, child)
// Native
el !== child && el.contains(child)
each
一个通用的迭代函数,它能够用来无缝迭代对象和数组。数组和相似数组的对象经由过程一个长度属性(如一个函数的参数对象)来迭代数字索引,从0到length – 1。其他对象经由过程其属性名举行迭代。
// jQuery
$.each(array, (index, value) => {})
// Native
array.forEach((value, index) => {})
extend
将两个或更多对象的内容兼并到第一个对象。
// jQuery
$.extend({}, {a: 1}, {b: 2}) // {a: 1, b: 2}
// ES6-way
Object.assign({}, {a: 1}, {b: 2}) // {a: 1, b: 2}
globalEval
在全局上下文下实行一些JavaScript代码。
// jQuery
$.globaleval(code)
// Native
function Globaleval(code) {
const script = document.createElement('script')
script.text = code
document.head.appendChild(script).parentNode.removeChild(script)
}
// Use eval, but context of eval is current, context of $.Globaleval is global.
eval(code)
grep
查找满足过滤函数的数组元素。原始数组不受影响。
// jQuery
$.grep([10,11,3,4], n => n > 9)
// Native
[10,11,3,4].filter(n => n > 9)
inArray
在数组中查找指定值并返回它的索引(假如没有找到,则返回-1)。
// jQuery
$.inArray(item, array)
// Native
array.indexOf(item) > -1
// ES6-way
array.includes(item)
isArray
肯定的参数是一个数组。
// jQuery
$.isArray(array)
// Native
Array.isArray(array)
isEmptyObject
搜检对象是不是为空(不包括任何属性)。
// jQuery
$.isEmptyObject(obj)
// Native
function isEmptyObject(obj) {
return Object.keys(obj).length === 0
}
isFunction
肯定参数是不是为一个Javascript 函数。
// jQuery
$.isFunction(item)
// Native
function isFunction(item) {
if (typeof item === 'function') {
return true
}
var type = Object.prototype.toString(item)
return type === '[object Function]' || type === '[object GeneratorFunction]'
}
isNumeric
肯定它的参数是不是是一个数字。
// jQuery
$.isNumeric(item)
// Native
function isNumeric(value) {
var type = typeof value
return (type === 'number' || type === 'string') && !isNaN(value - parseFloat(value))
}
isPlainObject
测试对象是不是是地道的对象(经由过程 “{}” 或许 “new Object” 建立的)
// jQuery
$.isPlainObject(obj)
// Native
function isPlainObject(obj) {
if (typeof (obj) !== 'object' || obj.nodeType || obj !== null && obj !== undefined && obj === obj.window) {
return false
}
if (obj.constructor &&
!Object.prototype.hasOwnProperty.call(obj.constructor.prototype, 'isPrototypeOf')) {
return false
}
return true
}
isWindow
肯定参数是不是为一个window对象。
// jQuery
$.isWindow(obj)
// Native
function isWindow(obj) {
return obj !== null && obj !== undefined && obj === obj.window
}
// jquery源码中是这么推断对象是不是为window的,我的明白是代码可能会跑到服务器上,由于服务器上是没有window对象的。所以这么推断
makeArray
转换一个相似数组的对象成为真正的JavaScript数组。
// jQuery
$.makeArray(arrayLike)
// Native
Array.prototype.slice.call(arrayLike)
// ES6-way
Array.from(arrayLike)
map
将一个数组中的一切元素转换到另一个数组中。
// jQuery
$.map(array, (value, index) => {
})
// Native
array.map((value, index) => {
})
merge
兼并两个数组内容到第一个数组。
// jQuery
$.merge(array1, array2)
// Native
// But concat function doesn't remove duplicate items.
function merge(...args) {
return [].concat(...args)
}
now
返回一个数字,示意当前时候。
// jQuery
$.now()
// Native
Date.now()
// Native
+new Date()
// Native
new Date().getTime()
parseHTML
将字符串剖析到一个DOM节点的数组中。
// jQuery
$.parseHTML(string)
// Native
function parseHTML(string) {
const context = document.implementation.createHTMLDocument()
// Set the base href for the created document so any parsed elements with URLs
// are based on the document's URL
const base = context.createElement('base')
base.href = document.location.href
context.head.appendChild(base)
context.body.innerHTML = string
return context.body.childNodes
}
// Native (IE 10+ support)
// 二者机能差不多 https://jsperf.com/parsehtml2
function parseHTML(string) {
const context = new DOMParser().parseFromString(string, "text/html")
return context.body.childNodes
}
parseJSON
接收一个规范花样的 JSON 字符串,并返回剖析后的 JavaScript 对象。
// jQuery
$.parseJSON(str)
// Native
JSON.parse(str)
parseXML
剖析一个字符串到一个XML文档。
// jQuery
jQuery.parseXML(xmlString)
// Native
new DOMParser().parseFromString(xmlString, 'application/xml')
proxy
接收一个函数,然后返回一个新函数,而且这个新函数始终保持了特定的上下文语境。
// jQuery
$.proxy(fn, context)
// Native
fn.bind(context)
trim
去掉字符串肇端和末端的空格。
// jQuery
$.trim(string)
// Native
string.trim()
type
肯定JavaScript 对象的范例[[Class]] 。
// jQuery
$.type(obj)
// Native
function type(item) {
const reTypeOf = /(?:^\[object\s(.*?)\]$)/
return Object.prototype.toString.call(item)
.replace(reTypeOf, '$1')
.toLowerCase()
}
Animation
有哪块毛病的或许不晓得能够在github上提个issue。假如哪块有更好的解法能够pr。