[转]抛弃jQuery，使用原生JavaScript
Document Ready 事件
在jQuery中，document.ready可以让代码在整个文档加载完毕之后执行：
$(document).ready(function() {
// Code
});
JavaScript同样拥有一个DOM内容加载事件的侦听器:
document.addEventListener("DOMContentLoaded", function() {
// Code
}, false);
选择器API
jQuery中的选择器语法丰富灵活：
var element = $("div");
现在js中的querySelector完全可以替代它，document.querySelector只获取第一个元素，document.querySelectorAll可以获取全部元素。
var element = document.querySelector("div");
或者选择所有div的某些内部容器：
var elements = document.querySelectorAll(".container div");
也可以针对特定元素进行查询来找到它的子元素：
var navigation = document.querySelector("nav");
var links = navigation.querySelectorAll("a");
很简单，容易理解且现在不需要太多的代码。更进一步，我们甚至可以自己建一个小型的JavaScript库来进行简单的DOM查询。以下是Andrew Lunny已经想出来的一些东西：
// This gives us simple dollar function and event binding
var $ = document.querySelectorAll.bind(document);
Element.prototype.on = Element.prototype.addEventListener;
// This is how you use it
$(".element")[0].on("touchstart", handleTouch, false);
遍历DOM
用纯JavaScript来遍历DOM比起用jQuery来说有一些困难。但也不是太困难。下面是一些简单的例子：
// Getting the parent node
var parent = document.querySelector("div").parentNode;
// Getting the next node
var next = document.querySelector("div").nextSibling;
// Getting the previous node
var next = document.querySelector("div").previousSibling;
// Getting the first child element
var child = document.querySelector("div").children[0];
// Getting the last child
var last = document.querySelector("div").lastElementChild;
添加和删除样式名（class name)
使用jQuery，添加、删除和检查一个元素是否有确定的类是很简单的事。用纯JavaScript会有一些复杂，但也不是太复杂。给元素一个叫做“foo”的类且替换目前所有的类：
// Select an element
var element = document.querySelector(".some-class");
// Give class "foo" to the element
element.className = "foo";
在不替换目前类的前提下增加类：
element.className += " foo";
从html元素中移除”no-js”类且用”js”来替代：
<html class="no-js">
<head>
<script>
document.documentElement.className = "js";
</script>
这相当简单，对不对？下一步，只移除某些类稍微有点复杂。我一直在单独部分使用这个叫做util.js的小助手函数。它有两个参数：元素和你想移除的类：
// removeClass, takes two params: element and classname
function removeClass(el, cls) {
var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
el.className = el.className.replace(reg, " ").replace(/(^\s*)|(\s*$)/g,"");
}
然后，在主应用程序部分，我一直像这样使用：
removeClass(element, "foo");
如果针对某些类你同样想检查一个元素，那么就像jQuery的hasClass一样。你可能需要把这些代码加入到你的utils工具中：
// hasClass, takes two params: element and classname
function hasClass(el, cls) {
return el.className && new RegExp("(\\s|^)" + cls + "(\\s|$)").test(el.className);
}
然后可以这样使用：
// Check if an element has class "foo"
if (hasClass(element, "foo")) {
// Show an alert message if it does
alert("Element has the class!");
}
HTML5 的 classList API 简介
如果你只需要支持像IE10+,Chrome,FireFox,Opera和Safari这样较现代的浏览器，那么你可以开始使用HTML5的classList功能，它让增加和删除类变得更简单。
这是我在我们最新的开发者文档中最终做的事，随着功能的开发，这更像是UI的加强，且如果这不是现在的，其实际上并不是能打破经验的一些东西。
通过下面简单的”if”语句，你可以检测出浏览器是否支持这个功能：
if ("classList" in document.documentElement) {
// classList is supported, now do something with it
}
用classList来添加、删除、转换类：
// Adding a class
element.classList.add("bar");
// Removing a class
element.classList.remove("foo");
// Checking if has a class
element.classList.contains("foo");
// Toggle a class
element.classList.toggle("active");
使用classList的另一个好处是它比使用原始的类名属性表现得更好。如果你有像这样的元素：
<div id="test" class="one two three"></div>
你想操作哪一个：
var element = document.querySelector("#test");
addClass(element, "two");
removeClass(element, "four");
这些被类名属性读和写的方法将触发浏览器重绘。但这并不是我们是否应该用相应的classList方法的情况：
var element = document.querySelector("#test");
element.classList.add("two");
element.classList.remove("four");
用classList之后，最基本的类名属性仅在必要的时候进行更改。添加一个已经存在的类和移除一个不存在的类时，根本没有牵涉到类名属性，这意味着我们刚刚避免了两次重绘。
事件监听器
添加和移除一个元素的事件监听器在纯JavaScript和jQuery中都一样比较简单。当你必须要添加多个事件监听器时，事情就变得有点复杂了，但我会详细解释给你的。最简单的一个例子，当你单击一个元素时弹出一个警告信息，如下代码所述：
element.addEventListener("click", function() {
alert("You clicked");
}, false);
为了让页面的所有元素都实现这个功能，我们必须依次重复每个元素且给他们添加事件监听器：
// Select all links
var links = document.querySelectorAll("a");
// For each link element
[].forEach.call(links, function(el) {
// Add event listener
el.addEventListener("click", function(event) {
event.preventDefault();
alert("You clicked");
}, false);
});
JavaScript有关事件监听器一个最伟大的功能就是“addEventListener” 能携带一个作为第二个参数的对象，这将会让它自动的寻找一个叫做“handleEvent”的方法然后调用它。
var object = {
init: function() {
button.addEventListener("click", this, false);
button.addEventListener("touchstart", this, false);
},
handleEvent: function(e) {
switch(e.type) {
case "click":
this.action();
break;
case "touchstart":
this.action();
break;
}
},
action: function() {
alert("Clicked or touched!");
}
};
// Init
object.init();
操作DOM
用纯JavaScript来操作DOM刚开始听起来就像一个可怕的想法，但比使用jQuery其实它并没有复杂多少。下面，我们会有一个例子，选择DOM的元素，克隆它，用JavaScript来操作克隆的样式，然后用被操纵的东西来替代原始的元素。
// Select an element
var element = document.querySelector(".class");
// Clone it
var clone = element.cloneNode(true);
// Do some manipulation off the DOM
clone.style.background = "#000";
// Replaces the original element with the new cloned one
element.parentNode.replaceChild(clone, element);
在DOM中，如果除了附加在中新创建div，你不想替代任何东西，那么你可以这样做：
document.body.appendChild(clone);
如果你觉得你想了解更多不同的DOM方法，我建议你可以拜读一下 Peter-Paul Koch的DOM Core tables。
进一步深入
在这儿我想再多分享两个我最近发现的先进技术。这些都是我们在创建Adtile的时候需要的功能，因此你也会觉得它们很有用。
在JS中决定响应图片的最大宽度
这是我最爱的之一，且如果你需要用JavaScript操作流体图片时这非常有用。由于浏览器默认返回当前被调整过大小的图片，我们必须要想一些其它的办法。幸运的是，现代浏览器目前已有解决的方案了：
var maxWidth = img.naturalWidth;
这将会给我们提供最大宽度100%像素的图片，且IE9,Chrome,Firefox,Safari和Opera都支持这个方法。我们也可以保留这个特性然后通过加载图片到内存中添加老浏览器的支持：
// Get image's max-width:100%; in pixels
function getMaxWidth(img) {
var maxWidth;
// Check if naturalWidth is supported
if (img.naturalWidth !== undefined) {
maxWidth = img.naturalWidth;
// Not supported, use in-memory solution as fallback
} else {
var image = new Image();
image.src = img.src;
maxWidth = image.width;
}
// Return the max-width
return maxWidth;
}
你应该注意到在检查宽度前，图片必须完全被加载。这是我们一直使用的用于确定它们有尺寸的方法：
function hasDimensions(img) {
return !!((img.complete && typeof img.naturalWidth !== "undefined") || img.width);
}
判断一个元素是否在视图窗口中
通过使用getBoundingClientRect方法，你可以获取页面中任何元素的位置。以下是一个简单的函数来表明它有多简单和多强大。这个函数有一个参数，那就是你想要检查的元素。当元素为可见时，函数将返回true：
// Determine if an element is in the visible viewport
function isInViewport(element) {
var rect = element.getBoundingClientRect();
var html = document.documentElement;
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || html.clientHeight) &&
rect.right <= (window.innerWidth || html.clientWidth)
);
}
上面的函数可以在给窗体添加一个”滚动”事件监听器，然后调用isInViewport()方法时使用。
结论
在你的下个项目中是否使用jQuery很大程度上取决于你所建的项目。如果你的项目需要大量的前端代码，那么你应该使用jQuery。然而，当你构建一个JavaScript插件或库时，你应该只考虑纯JavaScript。使用纯JavaScript意味着更少的请求和更少的数据加载。这同样意味着你不必强迫开发人员在他们的项目中加jQuery。
[转]抛弃jQuery，使用原生JavaScript的更多相关文章
- 抛弃jQuery 深入原生的JavaScript
虽然我已经做网站建设工作10多年了,但我从最近3年才开始更多地学习如何更好的将纯JavaScript用于工作中,而不总是将jQuery考虑在第一位.现在我每天学习很多东西.这个过程让我觉得Adtile ...
- jquery及原生javascript对jsonp解决跨域问题实例详解
jquery方式 前端: $.ajax({ url: 'http://m.xxx.tv/goLottery', data: { data: data }, type: 'GET', dataType: ...
- JQuery和原生JavaScript实现网页定位导航特效
慕课网的一个小课程,练习了一遍,不足之处,欢迎指正(照片在本地,大家可以着重看代码哈): <!DOCTYPE html> <html lang="en"> ...
- 抛弃jQuery，拥抱原生JavaScript
前端发展很快,现代浏览器原生 API 已经足够好用.我们并不需要为了操作 DOM.Event 等再学习一下 jQuery 的 API.同时由于 React.Angular.Vue 等框架的流行,直接操 ...
- 你可能不需要 jQuery！使用原生 JavaScript 进行开发
很多的 JavaScript 开发人员,包括我在内,都很喜欢 jQuery.因为它的简单,因为它有很多丰富的插件可供使用,和其它优秀的工具一样,jQuery 让我们开发人员能够更轻松的开发网站和 We ...
- 表单美化-原生javascript和jQuery单选按钮（兼容IE6）
最近很多人问怎么美化表单的元素,大家都知道表单元素在各个浏览器中的表现不一,反正也是特别的丑,那么问题就来了,我们能自己设计表单元素的外观么?答案是可以的,现在我们就来试试吧.我们用两种方式来实现这一 ...
- 原生 JavaScript 代码和Jquery实现对比
下面就带大家一起看看在 IE 浏览器环境中如果使用原生 JavaScript 代码实现 jQuery 中的功能.如果你打算自己开发一个小的基础框架,可以好好参考一下这些代码的实现. 本文转载:http ...
- 四种常见的提示弹出框（success，warning，error，loading）原生JavaScript和jQuery分别实现
原文:四种常见的提示弹出框(success,warning,error,loading)原生JavaScript和jQuery分别实现 虽然说现在官方的自带插件已经有很多了,但是有时候往往不能满足我们 ...
- 原生javascript与jquery 的比较
JavaScript的优点和缺点: 优点: 性能:由于JavaScript运行在客户端,节省了web服务器的请求时间和带宽 轻量级的脚本语言,比较容易学习 运行在用户机器上,运行结果和处理相对比较快. ...
- 常见的dom操作----原生JavaScript与jQuery
1.创建元素 文本节点 JavaScript: document.createElement(),只接收一个参数,创建后需要手动将其添加到文档树中,例如: var newDiv = document. ...
随机推荐
- POJ 1862 Stripies 【优先队列】
题意:科学家发现一种奇怪的东西,他们有重量weight,如果他们碰在一起,总重变成2*sqrt(m1*m2).要求出最终的重量的最小值. 思路:每次选取质量m最大的两个stripy进行碰撞结合,能够得 ...
- 支持删除的并查集 hdu2473
题解: 代码: #include<bits/stdc++.h> using namespace std; #define ll long long ; int fa[maxn],id,vi ...
- Storm通信机制（了解）
Worker间的通信:经常需要通过网络跨节点进行,Storm使用ZeroMQ或Netty(0.9以后默认使用)作为进程间通信的消息框架. Worker进程内部通信:不同worker的thread通信使 ...
- BZOJ1821 [JSOI2010]Group 部落划分 Group Kruskal
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1821 题意概括 平面上有n个点,现在把他们划分成k个部分,求不同部分之间最近距离的最大值. 两个部 ...
- Linux系统之常用文件搜索命令
(一)常用文件搜索命令 (1)which命令 (2)find命令 (3)locate (4)updatedb (5)grep (6)man (7)whatis (一)常用文件搜索命令 (1)which ...
- Python常用模块--base64
作用:对一些保密性不强的信息进行加密,变为人类不能直接理解的字符串,但是可以反向解密,是一种‘防君子,不防小人’的措施. 例如:在一些项目中,接口的报文是通过base64加密传输的,所以在进行接口自动 ...
- 关于文档模式、DCOTYPE声明及严格模式
1.文档模式 文档模式的概念是由IE5.5引入,通过使用文档类型(DOCTYPE)切换实现的.不同的文档模式主要影响CSS内容的呈现,尤其是浏览器对盒模型的解析,但在某些情况下也会影响到JavaScr ...
- POJ.3537.Crosses and Crosses(博弈论 Multi-SG)
题目链接 \(Description\) 有一个一行n列的棋盘,每个人每次往上放一个棋子,将三个棋子连在一起的人赢.问是否有必胜策略. \(Solution\) 首先一个人若在\(i\)处放棋子,那么 ...
- python计算文件夹大小——os.walk
下面提供一种利用os.walk()快捷的计算指定文件夹大小的方法 话不多说,直接上代码 简略版: import os def get_file_size(file_path, size=0): for ...
- System类与Runtime类
PS: Java程序在不同操作系统上运行时,可能需要取得平台相关的属性,或者调用平台命令来完成特定功能.java提供了System类与Runtime类来与程序的运行平台进行交互. System类: 1 ...