Introduction

正如jQuery所宣称的一样,Write Less, Do More。很多时候我们喜欢用它来解决问题。但增加一个库必然意味着更大的网络负担,意味着更高的页面初始载入时间。并且,现在与当初已经有了很大不同,jQuery是伴随着IE6出来的,当时,jQuery在跨浏览器开发上有不可替代的作用。但今天,伴随ES5的广泛被支持以及各个浏览器本身的完善,我们可以考虑适当的丢掉它,改善性能。

需要注意的是,并不是说jQuery是不可取的,在某些场合,用它是更合适的,需要我们自己判断。

Listening for Document Ready

我们经常用到$( document ).ready() 或者它的简写 $(),用来传入当所有dom准备完毕后,执行逻辑的相关回调。原生js可以这么写:

document.addEventListener('DOMContentLoaded', function () {
// dom 已经准备好被操作了
});

Selecting elements

我们常常依赖于jQuery的选择器,而现在,所有的浏览器基本都支持了querySelectorquerySelectorAll这里是MDN链接

var lochNess = document.querySelector(".monsters");
console.log("It's from Scotland - " + lochNess.textContent); var scary = document.querySelectorAll(".monsters");
for (var i = 0; i < scary.length; i++) {
console.log(scary[i].innerHTML);
}

Attaching and removing event listeners

侦听事件是web开发中再重要不过的一环。曾经IE独树一帜,与其它浏览器提供的API不一致,导致需要用jQuery来快速开发,现在,所有的浏览器都提供了addEventListener:

var btn = document.querySelectorAll("button"),

btn[0].addEventListener("click", function () {
list.addEventListener("mouseover", enlarge);
}); btn[1].addEventListener("click", function () {
list.removeEventListener("mouseover", enlarge);
});

Manipulating classes and attributes

曾经,不使用jQuery来处理class是一件很麻烦的事情,而现在,由于classList的存在(这里是MDB链接)我们可以快捷的解决这一类问题,另外,如果需要操作attribute,可以使用setAttribute(同样是MDN链接)

var btn = document.querySelectorAll("button"),
div = document.querySelector("#myDiv"); btn[0].addEventListener("click", function () {
//可以获取任意的属性
console.log(div.id);
}); // Element.classList存放了所有当前元素的class
var classes = div.classList; btn[1].addEventListener("click", function () {
console.log(classes);
}); btn[2].addEventListener("click", function () {
//可以添加,删除
classes.add("red");
}); btn[3].addEventListener("click", function () {
//也可以翻转
classes.toggle("hidden");
});

Getting and setting element content

jQuery提供了text() html()用以操作元素的内容,我们可以使用原生的textContent与innerHTML属性代替它们。

var myText = document.querySelector("#myParagraph"),
btn = document.querySelectorAll("button"); // 获取
var myContent = myText.textContent;
console.log("textContent: " + myContent); // 改变
btn[0].addEventListener('click', function () {
myText.textContent = " Koalas are the best animals ";
}); var myHtml = myText.innerHTML;
console.log("innerHTML: " + myHtml); btn[1].addEventListener('click', function () {
myText.innerHTML = "<button> Penguins are the best animals </button>";
});

Inserting and removing elements

原生的js可以这样添加与删除元素:

var lunch = document.querySelector("#lunch");

// 添加
var fries = document.createElement("div");
fries.innerHTML = '<li><h4> Fries </h4></li>';
lunch.appendChild(fries); // 特定位置添加 var beef = document.querySelector("#Beef"), topSlice = document.createElement("li"),
bottomSlice = document.createElement("li"); bottomSlice.innerHTML = topSlice.innerHTML = 'Cheese'; beef.parentNode.insertBefore(topSlice, beef);
beef.parentNode.insertBefore(bottomSlice, beef.nextSibling);
}; //删除
var pickles = document.querySelector("#pickles");
if (pickles) {
pickles.parentNode.removeChild(pickles);
}

Walking the DOM tree

原生的js也可以遍历DOM树

var snakes = document.querySelector('#snakes'),
birds = document.querySelector('#birds'); snakes.addEventListener('click', function (e) {
console.log("Children: ");
var children = e.target.children;
for (var i = 0; i < children.length; i++) {
console.log(children[i].textContent);
}
}); birds.addEventListener('click', function (e) {
// 获取最近的兄弟节点
var previous = e.target.previousElementSibling;
if (previous) {
console.log("Previous sibling: " + previous.textContent);
}
var next = e.target.nextElementSibling;
if (next) {
console.log("Next sibling: " + next.textContent);
} //所有的兄弟们
Array.prototype.filter.call(e.target.parentNode.children, function (child) {
if (child !== e.target) {
console.log(child.textContent);
}
}); });

Looping over arrays

jQuery提供的 each与map已经可以被ES5的forEach与map替代

var ninjaTurtles = ["Donatello", "Leonardo", "Michelangelo", "Raphael"];

ninjaTurtles.forEach(function (entry) {
console.log(entry);
}); var lovesPizza = ninjaTurtles.map(function (entry) {
return entry.concat(" loves pizza!");
});
console.log(lovesPizza);

Animations

jQuery的动画效果是非常强大的,在很多场合还是很难替代的,不过,由于CSS3,动画可以转到由CSS来实现。这部分就不给DEMO了。

AJAX

如果唯一使用jQuery的唯一理由,是它便捷的AJAX,那么,将jQuery替换成一个轻量的多的库吧!比如reqwest,这个库压缩后不到10kB。

总结

尽全力使脚本变的更小,可以使用户获得更高的加载速度,以及更好的用户体验。但也要谨慎的做取舍,没必要大量的造jQuery已经提供的轮子。

除了在编码方面带来性能优化,我们还可以借助工具达到同样的效果。可以看一看博主的webpack方面的文章

如何尽量避免引用jQuery的更多相关文章

  1. (转)在 vue-cli 脚手架中引用 jQuery、bootstrap 以及使用 sass、less 编写 css [vue-cli配置入门]

    写在前面: 本文是vue-手摸手教你使用vue-cli脚手架-详细步骤图文解析之后,又一篇关于vue-cli脚手架配置相关的文章,因为有些文章步骤不够清晰,当时我引入JQuery.bootstrap的 ...

  2. 解决sea.js引用jQuery提示$ is not a function的问题

    在使用sea.js的如下写法引用jQuery文件时, //main.jsdefine(function(require,exports,module){ var $ = require('jquery ...

  3. 转 mvc项目中,解决引用jquery文件后智能提示失效的办法

    mvc项目中,解决用Url.Content方法引用jquery文件后智能提示失效的办法   这个标题不知道要怎么写才好, 但是希望文章的内容对大家有帮助. 场景如下: 我们在用开发开发程序的时候,经常 ...

  4. discuzx3.1中引用 Jquery报错的解决办法

    我们可以引用jQuery给JQ赋予一个变量var jq = jQuery.noConflict(); 修改成为:<script type="text/javascript"& ...

  5. 引用jquery框架后出错

    问题描述:当引用了jquery框架后,页面的js不能正常工作. 后面我的解决办法:是因为在引用 jquery的框架时的代码为 <script type="text/javascript ...

  6. webpack 引用 jquery + bootstrap 报错解决

    webpack 引用 jquery + bootstrap , error : jQuery is not defind 在webpack.dev.conf.js plugins[] 加入 new w ...

  7. react 或 vue 中引用 jQuery 插件

    前言 今天与遇到一个令人抓狂的事情, 因为项目中有个交互太过于复杂而且冷门, 没有人封装类似react-swiper那种的移植过来的插件 只有现成的jQuery插件. 而时间并不宽裕,自己重写成rea ...

  8. vue 中引用jquery

    1.安装jquery npm install jquery --save-dev 2.打开配置文件webpack.base.conf.js 加入'jquery': path.resolve(__dir ...

  9. 如何在 vue 项目里正确地引用 jquery 和 jquery-ui的插件

    copy内容的网址: https://segmentfault.com/a/1190000007020623 使用vue-cli构建的vue项目,webpack的配置文件是分散在很多地方的,而我们需要 ...

随机推荐

  1. 「USACO16OPEN」「LuoguP3147」262144(区间dp

    P3147 [USACO16OPEN]262144 题目描述 Bessie likes downloading games to play on her cell phone, even though ...

  2. July Cook-Off 2017

    Chang and Bitwise OR 分析:因为按位或最后肯定小于等于加,所以把所有数按位或即可 #include "iostream" #include "cstd ...

  3. 从exgcd到exCRT

    从最基础的开始. 1.gcd 这个不用说了吧--\(gcd(a,b) = gcd(b,a\%b)\),这个很显然. 2.exgcd 这玩意可以用来求形如\(ax+by = gcd(a,b)\)的不定方 ...

  4. myeclipse_JUnit导包问题

    第一种方式: MyEclipse创建JUnit单元测试时,在需要测试的代码段前键入“@Test”时,按ctrl和1一般会自动提示JUnit需要导包,但有时会无法提示这个建议,如图所示.该经验教你如何解 ...

  5. 2014年将会受欢迎的IT技能--你有多少哪?

    据国外媒体报道,据Global Knowledge等十几家研究机构发布的2014年IT技能和薪金调查报告显示,2014年最受欢迎的十大IT技能如下: 1.编程与应用开发 据美国劳工统计局称,开发者和程 ...

  6. 查看Spring源码的方法

    来自为知笔记(Wiz)

  7. vscode实现列编辑

    ctrl + shift + 左键选择要编辑的列 好用,再也不用使用\n替换了

  8. Lotus and Characters (stronger)

    题意: 有n类物品,第i种物品权值为$val(i)$,有$cnt(i)$个,现在你可以选出一些物品排成一个序列(假设有m个), 记第i个物品种类为$x_i$,最大化$\sum_{i=1}^m{i * ...

  9. sql server 2008 R2 升级与安装遇到的问题

    因工作需要,遂把以前的2008升级到r2,升级失败,具体原因忘了,卸载2008,清了注册表删了文件,结果安装的时候失败了,如下图: 下一步-有错误日志和错误的序列号,错误日志在C:\Program F ...

  10. 参考手册(html css)

    HTML CSS DOM XML DOM   XML DOM Document JavaScript JavaScript RegExp JSP