忘掉jQuery，使用JavaScript原生API

lidashuang 发布于2019-08-19 17:12 / 528人阅读

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

以下是jQuery和JavaScript实现相同操作的等价代码

选择元素

//jQuery
var ele = $(".ele");

//javascript
var ele = document.querySelectAll(".ele");

//函数法
var $ = function(ele){
    return document.querySelectAll(ele);
}

var ele = $(".ele"); //调用

创建元素

//jquery
var newEle = $("xxx");

//javascript
var newEle = document.createElement("xxx
");

添加事件监听器

//jQuery
$(".ele").on("event",function(){
    
});

//javascript
[].forEach.call(document.querySelectAll(".ele"),function(ele){
    ele.addEventListener("event",function(){
    },false);
})

设置/获取属性

//jQuery
$(".ele").attr("key","value");
$(".ele").attr("key");

//javascript
document.querySelector(".ele").setAttribute("key","value");
document.querySelector(".ele").getAttribute("key");

添加/移除/切换类

//jQuery
$(".ele").addClass("class");
$(".ele").removeClass("class");
$(".ele").toggleClass("class");

//javascript
document.querySelector(".ele").classList.add("class");
document.querySelector(".ele").classList.remove("class");
document.querySelector(".ele").classList.toggle("class");

附加内容（Append）

//jquery
$(".ele").append("xxx");

//javascript
document.querySelector(".ele").appendChild(document.createElement("xxx
"));

克隆元素

//jQuery
var cloneEle = $(".ele").clone();

//javascript
var cloneEle = document.querySelector(".ele").cloneNode(true);

移除元素

//jQuery
$(".ele").remove();

//javascript
remove(".ele");

function remove(ele){
    var toRemove = document.querySelector(ele);
    toRemove.parentNode.removeChile(toRemove);
}

获取父元素

//jQuery
$(".ele").parent();

//javascript
document.querySelector(".ele").parentNode;

上一个/下一个元素

//jQuery
$(".ele").prev();
$(".ele").next();

//javascript
document.querySelector(".ele").previousElementsibling;
document.querySelector(".ele").nextElementSibling;

XHR或AJAX

//jQuery
$.get("url",function(data){
    
})
$.post("url",{data: data},function(){
    
})

//javascript
//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});

这些只是很少的一部分，不能等到哪一天变成只会用jQuery了， O(∩_∩)O~

GPU云服务器云服务器原生js和jquery 原生javascript javascript原生原生javascript事件

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

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

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

摘要：原文地址已经准备好了，可能你还没有准备好拥抱它。那为啥不用呢。。浏览这些轻量的找一个服务于你特殊需求的，但是首先你必须确信一点原生的足够满足你实现你的需求原文地址 javascript已经准备好了，可能你还没有准备好拥抱它。那为啥不用jquery呢。。因为它慢啊。而且体积还不小，你的网站可能真的不是特别需要， Select elements // jQuery var els = $...

rose 2019-08-22 10:58 评论0 收藏0
如何忘却jQuery，开始使用JavaScript原生API

摘要：就在这里随时等候你的召唤，但是也许你还没有准备好如何使用他。但是我想讨论的是如果仅为使用个选择器或者类似的东西，是否真的有必要加载。假设咱不是为了简化，每个人用是因为它支持，动画处理和选择器函数。 JavaScript就在这里随时等候你的召唤，但是也许你还没有准备好如何使用他。为什么不用jQuery呢？因为他很慢并且你的网站真的不需要这些多余的负担。我不是来这里争辩原生API和函数...

Rindia 2019-08-19 14:25 评论0 收藏0
体验js之美第八课-面向对象创建和继承终结篇

摘要：概述到这里我们讲说面向对象的系列部分的最后一个课程，面向对象必须掌握两个东西一个是对象的创建一个是继承。只需要记住一句话，属性放在构造函数里面，方法放在原型上。概述到这里我们讲说js面向对象的系列部分的最后一个课程，面向对象必须掌握两个东西一个是对象的创建一个是继承。这节课我们重点说说这两个问题最后我们说下在ES6里面面向对象怎么玩。 1对象的创建我们第一节课已经就会用了，单体模...

jzzlee 2019-08-20 16:09 评论0 收藏0
抛弃jQuery，拥抱原生JavaScript

摘要：数据来源百度统计下面是国际上占有率，已经跌出前，比较多，还好支持他们并不难。前端发展很快，现代浏览器原生 API 已经足够好用。我们并不需要为了操作 DOM、Event 等再学习一下 jQuery 的 API。同时由于 React、Angular、Vue 等框架的流行，直接操作 DOM 不再是好的模式，jQuery 使用场景大大减少。因此我们项目组在双十一后抽了一周时间，把所有代码中...

testbird 2019-08-19 17:07 评论0 收藏0