摘要:注同时移除元素上的事件及数据。其他对象通过其属性名进行迭代。原始数组不受影响。检查对象是否为空不包含任何属性。返回一个数字,表示当前时间。两者性能差不多接受一个标准格式的字符串,并返回解析后的对象。
在我看来,jQuery确实已经过时了。本项目总结了绝大部分 jQuery API 替代的方法,类似项目You-Dont-Need-jQuery,并会再此基础上进行很多的补充。写这个项目主要想让自己和大家增进对javascript原生api的理解,也可以作为一个"原生jquery"的api文档随时查看。兼容ie9及以上浏览器,如不支持ie9会特别说明。
原文地址 https://github.com/fa-ge/jQuery-is-out-of-date
目录Regulation
DOM Manipulation
Query Selector
Ajax
Events
Utilities
Animation
Regulationfunction $(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("") // Native (Html string) el.insertAdjacentHTML("afterend", "") // Native (Element) el.insertAdjacentElement("afterend", newEl) // Native (Element) el.parentNode.insertBefore(newEl, el.nextSibling)append
在每个匹配元素里面的末尾处插入参数内容。
// jQuery $(el).append("") // Native (Html string) el.insertAdjacentHTML("beforeend", "") // 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("") // Native (Html string) el.insertAdjacentHTML("beforebegin", "") // Native (Element) el.insertAdjacentElement("beforebegin", newEl) // Native (Element) el.parentNode.insertBefore(newEl, el)children
获得匹配元素集合中每个元素的子元素,选择器选择性筛选。
// jQuery $(el).children() // Native el.childrenclone
创建一个匹配的元素集合的深度拷贝副本。
// 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.childNodescss
获取匹配元素集合中的第一个元素的样式属性的值设置每个匹配元素的一个或多个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 += cssTextempty
从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).heighthtml
获取集合中第一个匹配元素的HTML内容 设置每一个匹配元素的html内容。
// jQuery $(el).html() // Native el.innerHTML // jQuery $(el).html(htmlString) // Native el.innerHTML = htmlStringinnerHeight
为匹配的元素集合中获取第一个元素的当前计算高度值,包括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.nextElementSiblingnextAll
获得每个匹配元素集合中所有下面的同辈元素,选择性筛选的选择器。
// 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 || elouterHeight
获取元素集合中第一个元素的当前计算高度值,包括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) // trueouterWidth
与outerHeight类似。
parent取得匹配元素集合中,每个元素的父元素,可以提供一个可选的选择器。
// jQuery $(el).parent() // Native el.parentNodeparents
获得集合中每个匹配元素的祖先元素,可以提供一个可选的选择器作为参数。
// 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("") // Native (HTML string) el.insertAdjacentHTML("afterbegin", "") // 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("") // Native (HTML string) el.outerHTML = "" // 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 = 10siblings
获得匹配元素集合中每个元素的兄弟元素,可以提供一个可选的选择器。。
// jQuery $(el).siblings() // Nativeslice
根据指定的下标范围,过滤匹配的元素集合,并生成一个新的 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 = stringtoggleClass
在匹配的元素集合中的每个元素上添加或删除一个或多个样式类,取决于这个样式类是否存在或值切换属性。即:如果存在(不存在)就删除(添加)一个类。
// jQuery $(el).toggleClass(className) // Native el.classList.toggle(className)unwrap
将匹配元素集合的父级元素删除,保留自身(和兄弟元素,如果存在)在原来的位置。
// jQuery $(el).unwrap() // Native const parent = el.parentNode parent.outerHTML = parent.innerHTMLval
获取匹配的元素集合中第一个元素的当前值。设置匹配的元素集合中每个元素的值。
// jQuery $(el).val() // Native el.value // jQuery $(el).val(value) // Native el.value = valuewidth
与height类似
wrap在每个匹配的元素外层包上一个html元素。
// jQuery $(el).wrap("") // 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 = `Query Selector${el.outerHTML}`
常用的 class、id、属性 选择器都可以使用 document.querySelector 或 document.querySelectorAll 替代。区别是
document.querySelector 返回第一个匹配的 Element
document.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 => /^hd$/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 = /(?:^[objects(.*?)]$)/ return Object.prototype.toString.call(item) .replace(reTypeOf, "$1") .toLowerCase() }Animation
有哪块错误的或者不懂得可以在github上提个issue。如果哪块有更好的解法可以pr。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/86782.html
摘要:修复后得到合法的后在由布局引擎建立相应的对象。在标签放置于标签之后时,源码被所有浏览器泛指上常见的修复为正常形式,即。上一篇之模板的学习之路源码分析之部分下一篇之模板的学习之路主题布局配置 上篇我们将 body 标签主体部分进行了简单总览,下面看看最后的脚本部门。 页面结尾部分(Javascripts 脚本文件) 我们来看看代码最后的代码,摘取如下: ...
摘要:工作方式为使用将每一个依赖加载为一个标签。然后在被浏览器加载完毕后,便会自动继承之前配置的参数。可以单独定义键值队数据,作为配置文件来使用还可以定义依赖的关系压缩使用来进行压缩时,需要指定文件。在链接中有很好的示例,可以参看学习。 1、简介 官方对requirejs的描述:RequireJS is a JavaScript file and module loader. It is o...
摘要: Awesome JavaScript A collection of awesome browser-side JavaScript libraries, resources and shiny things. Awesome JavaScript Package Managers Loaders Testing Frameworks QA Tools MVC Framew...
摘要:处理日期日历和时间的不足之处将设定为可变类型,以及的非线程安全使其应用非常受限。最完整的日期时间,包含时区和相对或格林威治的时差。获取当前的日期中的用于表示当天日期。 简介 伴随 lambda表达式、streams 以及一系列小优化,Java 8 推出了全新的日期时间API。 Java处理日期、日历和时间的不足之处:将 java.util.Date 设定为可变类型,以及 SimpleD...
摘要:注每个内置对象都是原生对象,一个内置的构造函数是一个内置的对象,也是一个构造函数。从对象返回月份。以毫秒设置对象。删除数组的第一个元素,返回值是删除的元素。对象属性创建该正则对象的构造函数。对象当以非构造函数形式被调用时,等同于。 内置对象与原生对象 内置(Build-in)对象与原生(Naitve)对象的区别在于:前者总是在引擎初始化阶段就被创建好的对象,是后者的一个子集;而后者包括...
阅读 4122·2022-09-16 13:49
阅读 1398·2021-11-22 15:12
阅读 1519·2021-09-09 09:33
阅读 1039·2019-08-30 13:15
阅读 1720·2019-08-29 15:30
阅读 654·2019-08-27 10:52
阅读 2643·2019-08-26 17:41
阅读 1896·2019-08-26 12:11