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

rose 发布于2019-08-22 10:58 / 3477人阅读

摘要：原文地址已经准备好了，可能你还没有准备好拥抱它。那为啥不用呢。。浏览这些轻量的找一个服务于你特殊需求的，但是首先你必须确信一点原生的足够满足你实现你的需求

原文地址

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 = $("");

// 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($(""));

// 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足够满足你实现你的需求

云服务器私有云在万网买了域名然后呢登陆了腾讯云服务器然后呢原生js和jquery webrtc 原生的api

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91559.html

前端相关大杂烩

摘要：希望帮助更多的前端爱好者学习。前端开发者指南作者科迪林黎，由前端大师倾情赞助。翻译最佳实践译者张捷沪江前端开发工程师当你问起有关与时，老司机们首先就会告诉你其实是个没有网络请求功能的库。前端基础面试题(JS部分) 前端基础面试题(JS部分) 学习 React.js 比你想象的要简单原文地址：Learning React.js is easier than you think 原文作...

fuyi501 2019-08-22 13:46 评论0 收藏0
忘掉jQuery，使用JavaScript原生API

摘要：以下是和实现相同操作的等价代码选择元素函数法调用创建元素添加事件监听器设置获取属性添加移除切换类附加内容克隆元素移除元素获取父元素上一个下一个元素或这些只是很少的一部分，不能等到哪一天变成只会用了，以下是jQuery和JavaScript实现相同操作的等价代码选择元素 //jQuery var ele = $(.ele); //javascript var ele = docum...

lidashuang 2019-08-19 17:12 评论0 收藏0
[译] 深入理解 Promise 五部曲：4. 扩展问题

摘要：有一个和相关的更大的问题。最后，请负有责任感并且使用安全的扩展。深入理解五部曲异步问题深入理解五部曲转换问题深入理解五部曲可靠性问题深入理解五部曲扩展性问题深入理解五部曲乐高问题最后，安利下我的个人博客，欢迎访问原文地址：http://blog.getify.com/promis... 现在，我希望你已经看过深入理解Promise的前三篇文章了。并且假设你已经完全理解Promises...

Shimmer 2019-08-21 12:24 评论0 收藏0
前端开发工程师怎样能表现的不那么“新手没经验”、不那么“培训班出来的”

摘要：最近看到知乎上面很多讨伐培训班的问答文章，不禁想到了我和新手同事合作的一些经历其实你是培训班出来还是计算机科班毕业，没人在乎，关键是你表现出来的一些问题切切实实的对你的同事或合作伙伴造成了很大困扰，而且这些问题集中在某一部分人身上显露出来，最近看到知乎上面很多讨伐培训班的问答、文章，不禁想到了我和新手同事合作的一些经历；其实你是培训班出来还是计算机科班毕业，没人在乎，关键是你表...

sorra 2019-08-21 11:30 评论0 收藏0