[译] 咋才能忘掉jQuery然后用原生的js apis 呢

ByteOrbitX
• 阅读 2870

原文地址

javascript已经准备好了,可能你还没有准备好拥抱它。
那为啥不用jquery呢。。因为它慢啊。而且体积还不小,你的网站可能真的不是特别需要,

Select elements

// jQuery
var els = $('.el');

// Native
var els = document.querySelectorAll('.el');

// Shorthand
var $ = function (el) {
  return document.querySelectorAll(el);
}

var els = $('.el');

// Or use regex-based micro-selector lib
// http://jsperf.com/micro-selector-libraries

Create elements

// jQuery
var newEl = $('<div/>');

// Native
var newEl = document.createElement('div');
Add event listener
// jQuery
$('.el').on('event', function() {

});

// Native
[].forEach.call(document.querySelectorAll('.el'), function (el) {
  el.addEventListener('event', function() {

  }, false);
});

Set/get attribute

// jQuery
$('.el').filter(':first').attr('key', 'value');
$('.el').filter(':first').attr('key');

// Native
document.querySelector('.el').setAttribute('key', 'value');
document.querySelector('.el').getAttribute('key');

Add/remove/toggle class

// jQuery
$('.el').addClass('class');
$('.el').removeClass('class');
$('.el').toggleClass('class');

// Native
document.querySelector('.el').classList.add('class');
document.querySelector('.el').classList.remove('class');
document.querySelector('.el').classList.toggle('class');
Append
// jQuery
$('.el').append($('<div/>'));

// Native
document.querySelector('.el').appendChild(document.createElement('div'));

Clone

// jQuery
var clonedEl = $('.el').clone();

// Native
var clonedEl = document.querySelector('.el').cloneNode(true);

Remove

// jQuery
$('.el').remove();

// Native
remove('.el');

function remove(el) {
  var toRemove = document.querySelector(el);

  toRemove.parentNode.removeChild(toRemove);
}

Parent

// jQuery
$('.el').parent();

// Native
document.querySelector('.el').parentNode;

Prev/next element

// jQuery
$('.el').prev();
$('.el').next();

// Native
document.querySelector('.el').previousElementSibling;
document.querySelector('.el').nextElementSibling;

XHR aka AJAX

// jQuery
$.get('url', function (data) {

});
$.post('url', {data: data}, function (data) {

});

// Native

// get
var xhr = new XMLHttpRequest();

xhr.open('GET', url);
xhr.onreadystatechange = function (data) {

}
xhr.send();

// post
var xhr = new XMLHttpRequest()

xhr.open('POST', url);
xhr.onreadystatechange = function (data) {

}
xhr.send({data: data});

这还只是一小部分呐,你没事可以console.log 一下然后通过浏览器看看有哪些原生的用法,或者瞅瞅
MDN’s JS API reference或者WPD’s DOM docs.
你仍然可以用libs。浏览这些轻量的ultra-lightweight找一个服务于你特殊需求的lib,但是首先你必须确信一点原生的js足够满足你实现你的需求

点赞
收藏
评论区
推荐文章
blmius blmius
4年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
待兔 待兔
1年前
手写Java HashMap源码
HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程HashMap的使用教程22
Easter79 Easter79
4年前
Springmvc异步上传文件
<scriptsrc"js/jquery.js"type"text/javascript"</script<scriptsrc"js/jquery.ext.js"type"text/javascript"</script<scriptsrc"js/jquery.form.js"type"text/javascript"
Stella981 Stella981
4年前
JQValidate使用说明
JQueryValidate使用总结:一、导入js库<scriptsrc"../js/jquery.js"type"text/javascript"</script<scriptsrc"../js/jquery.validate.js"type"text/javascript"</script二、默认校验规则
Stella981 Stella981
4年前
Html5添加三联切换仿3D效果旋转木马jQuery插件教程
一、使用方法<script type"text/javascript" src"js/jquery.min.js"</script<script type"text/javascript" src"js/gallery.js"</script   二、Html结构<div id"wrapper"<div id"mai
Wesley13 Wesley13
4年前
html元素摇摆
<scripttype"text/javascript"src"jquery1.9.0.min.js"</script<scripttype"text/javascript"jQuery.fn.shakefunction(intShakes/\Amountofshakes\/,intDistance/\S
Stella981 Stella981
4年前
Android So动态加载 优雅实现与原理分析
背景:漫品Android客户端集成适配转换功能(基于目标识别(So库35M)和人脸识别库(5M)),导致apk体积50M左右,为优化客户端体验,决定实现So文件动态加载.!(https://oscimg.oschina.net/oscnet/00d1ff90e4b34869664fef59e3ec3fdd20b.png)点击上方“蓝字”关注我
Stella981 Stella981
4年前
Dubbo爆出严重漏洞!可导致网站被控制、数据泄露!附解决方案
http://dy.163.com/v2/article/detail/F5FPIFRU0511Q1AF.html  !(http://dingyue.ws.126.net/2020/0216/125ec4c4p00q5rcrs0019d200ig009qg00ig009q.png)  来源:华为云  原文地址:https://w
Wesley13 Wesley13
4年前
35岁是技术人的天花板吗?
35岁是技术人的天花板吗?我非常不认同“35岁现象”,人类没有那么脆弱,人类的智力不会说是35岁之后就停止发展,更不是说35岁之后就没有机会了。马云35岁还在教书,任正非35岁还在工厂上班。为什么技术人员到35岁就应该退役了呢?所以35岁根本就不是一个问题,我今年已经37岁了,我发现我才刚刚找到自己的节奏,刚刚上路。