前端发展很快,现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少。本项目总结了大部分 jQuery API 替代的方法,暂时只支持 IE10+ 以上浏览器。
目录
- Translations
- Query Selector
- CSS & Style
- DOM Manipulation
- Ajax
- Events
- Utilities
- Alternatives
- Browser Support
Translations
- 한국어
- 简体中文
- Bahasa Melayu
- Bahasa Indonesia
- Português(PT-BR)
- Tiếng Việt Nam
- Español
- Русский
- Кыргызча
- Türkçe
- Italiano
- Français
- 日本語
Query Selector
常用的 class、id、属性 选择器都可以使用 document.querySelector
或 document.querySelectorAll
替代。区别是
-
document.querySelector
返回第一个匹配的 Element -
document.querySelectorAll
返回所有匹配的 Element 组成的 NodeList。它可以通过[].slice.call()
把它转成 Array - 如果匹配不到任何 Element,jQuery 返回空数组
[]
,但document.querySelector
返回null
,注意空指针异常。当找不到时,也可以使用||
设置默认的值,如document.querySelectorAll(selector) || []
注意:
document.querySelector
和document.querySelectorAll
性能很差。如果想提高性能,尽量使用document.getElementById
、document.getElementsByClassName
或document.getElementsByTagName
。
-
1.0 Query by selector
// jQuery
$('selector'); // Native
document.querySelectorAll('selector'); -
1.1 Query by class
// jQuery
$('.css'); // Native
document.querySelectorAll('.css'); // or
document.getElementsByClassName('css'); -
1.2 Query by id
// jQuery
$('#id'); // Native
document.querySelector('#id'); // or
document.getElementById('id'); -
1.3 Query by attribute
// jQuery
$('a[target=_blank]'); // Native
document.querySelectorAll('a[target=_blank]'); -
1.4 Find sth.
-
Find nodes
// jQuery
$el.find('li'); // Native
el.querySelectorAll('li'); -
Find body
// jQuery
$('body'); // Native
document.body; -
Find Attribute
// jQuery
$el.attr('foo'); // Native
e.getAttribute('foo'); -
Find data attribute
// jQuery
$el.data('foo'); // Native
// using getAttribute
el.getAttribute('data-foo');
// you can also use `dataset` if only need to support IE 11+
el.dataset['foo'];
-
-
1.5 Sibling/Previous/Next Elements
-
Sibling elements
// jQuery
$el.siblings(); // Native
[].filter.call(el.parentNode.children, function(child) {
return child !== el;
}); -
Previous elements
// jQuery
$el.prev(); // Native
el.previousElementSibling; -
Next elements
// next
$el.next();
el.nextElementSibling;
-
-
1.6 Closest
Closest 获得匹配选择器的第一个祖先元素,从当前元素开始沿 DOM 树向上。
// jQuery
$el.closest(queryString); // Native
function closest(el, selector) {
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector; while (el) {
if (matchesSelector.call(el, selector)) {
return el;
} else {
el = el.parentElement;
}
}
return null;
} -
1.7 Parents Until
获取当前每一个匹配元素集的祖先,不包括匹配元素的本身。
// jQuery
$el.parentsUntil(selector, filter); // Native
function parentsUntil(el, selector, filter) {
const result = [];
const matchesSelector = el.matches || el.webkitMatchesSelector || el.mozMatchesSelector || el.msMatchesSelector; // match start from parent
el = el.parentElement;
while (el && !matchesSelector.call(el, selector)) {
if (!filter) {
result.push(el);
} else {
if (matchesSelector.call(el, filter)) {
result.push(el);
}
}
el = el.parentElement;
}
return result;
} -
1.8 Form
-
Input/Textarea
// jQuery
$('#my-input').val(); // Native
document.querySelector('#my-input').value; -
Get index of e.currentTarget between
.radio
// jQuery
$(e.currentTarget).index('.radio'); // Native
[].indexOf.call(document.querySelectorAll('.radio'), e.currentTarget);
-
-
1.9 Iframe Contents
jQuery 对象的 iframe
contents()
返回的是 iframe 内的document
-
Iframe contents
// jQuery
$iframe.contents(); // Native
iframe.contentDocument; -
Iframe Query
// jQuery
$iframe.contents().find('.css'); // Native
iframe.contentDocument.querySelectorAll('.css');
-
CSS & Style
-
2.1 CSS
-
Get style
// jQuery
$el.css("color"); // Native
// 注意:此处为了解决当 style 值为 auto 时,返回 auto 的问题
const win = el.ownerDocument.defaultView;
// null 的意思是不返回伪类元素
win.getComputedStyle(el, null).color; -
Set style
// jQuery
$el.css({ color: "#ff0011" }); // Native
el.style.color = '#ff0011'; -
Get/Set Styles
注意,如果想一次设置多个 style,可以参考 oui-dom-utils 中 setStyles 方法
-
Add class
// jQuery
$el.addClass(className); // Native
el.classList.add(className); -
Remove class
// jQuery
$el.removeClass(className); // Native
el.classList.remove(className); -
has class
// jQuery
$el.hasClass(className); // Native
el.classList.contains(className); -
Toggle class
// jQuery
$el.toggleClass(className); // Native
el.classList.toggle(className);
-
-
2.2 Width & Height
Width 与 Height 获取方法相同,下面以 Height 为例:
-
Window height
// jQuery
$(window).height(); // Native
// 不含 scrollbar,与 jQuery 行为一致
window.document.documentElement.clientHeight;
// 含 scrollbar
window.innerHeight; -
Document height
// jQuery
$(document).height(); // Native
document.documentElement.scrollHeight; -
Element height
// jQuery
$el.height(); // Native
// 与 jQuery 一致(一直为 content 区域的高度)
function getHeight(el) {
const styles = this.getComputedStyle(el);
const height = el.offsetHeight;
const borderTopWidth = parseFloat(styles.borderTopWidth);
const borderBottomWidth = parseFloat(styles.borderBottomWidth);
const paddingTop = parseFloat(styles.paddingTop);
const paddingBottom = parseFloat(styles.paddingBottom);
return height - borderBottomWidth - borderTopWidth - paddingTop - paddingBottom;
}
// 精确到整数(border-box 时为 height 值,content-box 时为 height + padding + border 值)
el.clientHeight;
// 精确到小数(border-box 时为 height 值,content-box 时为 height + padding + border 值)
el.getBoundingClientRect().height; -
Iframe height
$iframe .contents() 方法返回 iframe 的 contentDocument
// jQuery
$('iframe').contents().height(); // Native
iframe.contentDocument.documentElement.scrollHeight;
-
-
2.3 Position & Offset
-
Position
// jQuery
$el.position(); // Native
{ left: el.offsetLeft, top: el.offsetTop } -
Offset
// jQuery
$el.offset(); // Native
function getOffset (el) {
const box = el.getBoundingClientRect(); return {
top: box.top + window.pageYOffset - document.documentElement.clientTop,
left: box.left + window.pageXOffset - document.documentElement.clientLeft
}
}
-
-
2.4 Scroll Top
// jQuery
$(window).scrollTop(); // Native
(document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
DOM Manipulation
-
3.1 Remove
// jQuery
$el.remove(); // Native
el.parentNode.removeChild(el); -
3.2 Text
-
Get text
// jQuery
$el.text(); // Native
el.textContent; -
Set text
// jQuery
$el.text(string); // Native
el.textContent = string;
-
-
3.3 HTML
-
Get HTML
// jQuery
$el.html(); // Native
el.innerHTML; -
Set HTML
// jQuery
$el.html(htmlString); // Native
el.innerHTML = htmlString;
-
-
3.4 Append
Append 插入到子节点的末尾
// jQuery
$el.append("<div id='container'>hello</div>"); // Native
let newEl = document.createElement('div');
newEl.setAttribute('id', 'container');
newEl.innerHTML = 'hello';
el.appendChild(newEl); -
3.5 Prepend
// jQuery
$el.prepend("<div id='container'>hello</div>"); // Native
let newEl = document.createElement('div');
newEl.setAttribute('id', 'container');
newEl.innerHTML = 'hello';
el.insertBefore(newEl, el.firstChild); -
3.6 insertBefore
在选中元素前插入新节点
// jQuery
$newEl.insertBefore(queryString); // Native
const target = document.querySelector(queryString);
target.parentNode.insertBefore(newEl, target); -
3.7 insertAfter
在选中元素后插入新节点
// jQuery
$newEl.insertAfter(queryString); // Native
const target = document.querySelector(queryString);
target.parentNode.insertBefore(newEl, target.nextSibling);
Ajax
用 fetch 和 fetch-jsonp 替代
Events
完整地替代命名空间和事件代理,链接到 https://github.com/oneuijs/oui-dom-events
-
5.1 Bind an event with on
// jQuery
$el.on(eventName, eventHandler); // Native
el.addEventListener(eventName, eventHandler); -
5.2 Unbind an event with off
// jQuery
$el.off(eventName, eventHandler); // Native
el.removeEventListener(eventName, eventHandler); -
5.3 Trigger
// jQuery
$(el).trigger('custom-event', {key1: 'data'}); // Native
if (window.CustomEvent) {
const event = new CustomEvent('custom-event', {detail: {key1: 'data'}});
} else {
const event = document.createEvent('CustomEvent');
event.initCustomEvent('custom-event', true, true, {key1: 'data'});
} el.dispatchEvent(event);
Utilities
-
6.1 isArray
// jQuery
$.isArray(range); // Native
Array.isArray(range); -
6.2 Trim
// jQuery
$.trim(string); // Native
string.trim(); -
6.3 Object Assign
继承,使用 object.assign polyfill https://github.com/ljharb/object.assign
// jQuery
$.extend({}, defaultOpts, opts); // Native
Object.assign({}, defaultOpts, opts); -
6.4 Contains
// jQuery
$.contains(el, child); // Native
el !== child && el.contains(child);
You Don't Need jQuery的更多相关文章
-
Angular杂谈系列1-如何在Angular2中使用jQuery及其插件
jQuery,让我们对dom的操作更加便捷.由于其易用性和可扩展性,jQuer也迅速风靡全球,各种插件也是目不暇接. 我相信很多人并不能直接远离jQuery去做前端,因为它太好用了,我们以前做的东西大 ...
-
jQuery UI resizable使用注意事项、实时等比例拉伸及你不知道的技巧
这篇文章总结的是我在使用resizable插件的过程中,遇到的问题及变通应用的奇思妙想. 一.resizable使用注意事项 以下是我在jsfiddle上写的测试demo:http://jsfiddl ...
-
Jquery的点击事件,三句代码完成全选事件
先来看一下Js和Jquery的点击事件 举两个简单的例子 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&q ...
-
jQuery实践-网页版2048小游戏
▓▓▓▓▓▓ 大致介绍 看了一个实现网页版2048小游戏的视频,觉得能做出自己以前喜欢玩的小游戏很有意思便自己动手试了试,真正的验证了这句话-不要以为你以为的就是你以为的,看视频时觉得看懂了,会写了, ...
-
jquery和Js的区别和基础操作
jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...
-
jQuery之ajax实现篇
jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...
-
利用snowfall.jquery.js实现爱心满屏飞
小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...
-
jQuery的61种选择器
The Write Less , Do More ! jQuery选择器 1. #id : 根据给定的ID匹配一个元素 <p id="myId">这是第一个p标签< ...
-
jquery.uploadify文件上传组件
1.jquery.uploadify简介 在ASP.NET中上传的控件有很多,比如.NET自带的FileUpload,以及SWFUpload,Uploadify等等,尤其后面两个控件的用户体验比较好, ...
-
浅谈 jQuery 核心架构设计
jQuery对于大家而言并不陌生,因此关于它是什么以及它的作用,在这里我就不多言了,而本篇文章的目的是想通过对源码简单的分析来讨论 jQuery 的核心架构设计,以及jQuery 是如何利用javas ...
随机推荐
-
Js/Jquery获取iframe中的元素
转载: Js/Jquery获取iframe中的元素 - - ITeye技术网站http://java-my-life.iteye.com/blog/1275205 在web开发中,经常会用到ifram ...
-
萌新笔记——C++里创建 Trie字典树(中文词典)(一)(插入、遍历)
萌新做词典第一篇,做得不好,还请指正,谢谢大佬! 写了一个词典,用到了Trie字典树. 写这个词典的目的,一个是为了压缩一些数据,另一个是为了尝试搜索提示,就像在谷歌搜索的时候,打出某个关键字,会提示 ...
-
javascript深入理解闭包
一.变量的作用域 要理解闭包,首先必须理解Javascript特殊的变量作用域. 变量的作用域无非就是两种:全局变量和局部变量. Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量 ...
-
WEB漏洞 XSS(一)
1.xss的形成原理 xss 中文名是“跨站脚本攻击”,英文名“Cross Site Scripting”.xss也是一种注入攻击,当web应用对用户输入过滤不严格,攻击者写入恶意的脚本代码(HTML ...
-
uboot 网络驱动模型
原文:https://blog.csdn.net/zhouxinlin2009/article/details/45390065 UBOOT的PHYCHIP配置 PHYCHIP的配置位于 includ ...
-
20155335俞昆《java程序设计》第6周总结
20155335 <Java程序设计>第6周学习总结 ## 教材学习内容总结 首先,我们需要了解输入和输出的关系,我想,这不同于c语言中的输入和输出,我们首先明白,Java中以串流 ...
-
MVC渲染文章内容的html标签转义
文章详情页一般从数据库中取出文章内容,文章内容一般含有 等html标签,MVC中如果直接从模型输出文章内容,会把html标签转义变成<>等,这时候是要把转义后的标签变成html标签, ...
-
Python的urllib和urllib2模块
Python的urllib和urllib2模块都做与请求URL相关的操作,但他们提供不同的功能.他们两个最显着的差异如下: urllib2可以接受一个Request对象,并以此可以来设置一个URL的h ...
-
Java Control Statements
Java Control Statements Java For Loop public class ForExample1 { public static void main(String[] ar ...
-
[BZOJ1444]有趣的游戏(AC自动机+矩阵乘法)
n个等长字符串,机器会随机输出一个字符串(每个字母出现的概率为p[i]),问每个字符串第一个出现的概率是多少. 显然建出AC自动机,套路地f[i][j]表示i时刻位于节点j的概率. 构建转移矩阵,当i ...