你不需要jQuery(四)
jQuery是个好东西。它诞生于IE6在互联网称霸的那个时代。jQuery的存在让我们的代码能很好的兼容各种平台。
然而,到如今,浏览器技术已经取得了巨大的进步。我们可以自由的使用所有最新众多ES5/ES6提供的原生API,配合革命性的HTML5 API,我们对DOM的操作变得从未如此的容易。WEB开发人员突然发现,没有jQuery其实也能轻松高效的完成项目开发。
不要误会,jQuery仍然是一个强大的工具包,大多时候我们还是要优先选择它。然而,对于一些简单的任务,一些小项目,一个简单的页面,或者移动版网站上,我们使用简单的纯js也许更有效率。下面的10个技巧希望能给大家一些启发。
1. 监听页面加载完成事件
写jQuery代码时,我们通常首先做的是把代码包裹在$(document).ready()
里,这样,当DOM加载完成,可以操作时,包裹的代码才会去执行。除了使用jQuery,我们还可以使用 DOMContentLoaded
事件代替,下面是用例:
/ Add an event listener of DOMContentLoaded to the whole document and call an anonymous function.
// You can then wrap your code in that function's brackets
// and it will execute once loading is complete. document.addEventListener('DOMContentLoaded', function () { // Our hawaiian greeting is displayed as soon as the page loads, console.log('Aloha'); });
2. 查找/选择页面元素
曾经,我们如果想捕捉一个/一批元素,只能通过 id, class 和 tag 名称,jQuery给我提供了革命性的更具灵活性的基于css的查找方法。随着浏览器的进步,我们现在可以使用两个新型的原生JavaScript API – querySelector
和querySelectorAll:
// We can use document.querySelector to get the first element that matches a certain criteria.
// It's only argument is a string containing one or more CSS selectors. var lochNess = document.querySelector(".monsters"); console.log("It's from Scotland - " + lochNess.textContent); // We can also get all elements of a certain type or class by using document.querySelectorAll.
// This returns a NodeList of all the elements that fit our criteria. var scary = document.querySelectorAll(".monsters"); console.log("Hide and seek champions: "); for (var i = 0; i < scary.length; i++) { console.log(scary[i].innerHTML); }
<ul> <li class="monsters">Nessy</li> <li class="monsters">Big foot</li> <li class="monsters">La chupacabra</li> </ul>
3. 添加和移除事件监听器
事件监听是WEB应用里非常常见的操作。在过去,IE里的事件监听和其它浏览器的监听方法是不统一/不兼容的。但如今,我们只需要使用addEventListener
就可以了:
var btn = document.querySelectorAll("button"),
list = document.querySelector("ul"); // We call the addEventListener method on our desired event target(in this case a button).
// This will start a listener that will wait until a click is generated on the element. btn[0].addEventListener("click", function () { // When this button is clicked we want to enable zooming of our list. // To do this we add an event listener to our list itself,
// so when the cursor hovers it, the enlarge function gets called. list.addEventListener("mouseover", enlarge);
}); // To disable the zooming we can simply use removeEventListener. btn[1].addEventListener("click", function () { // Removing event listeners doesn't work on anonymous functions, so always use a named one. list.removeEventListener("mouseover", enlarge);
}); // Let's create our enlarge function. var enlarge = function () { // Add class zoomed to the unordered list. list.classList.add("zoomed"); // When the cursor leaves the list return to normal size by removing the class. list.addEventListener("mouseout", function () { list.classList.remove("zoomed") }); }; // Now we want to be able to color the names by clicking them. // When a 'click' is registered on one of the list entries it should change its color to green.
// Thanks to event delegation we can actually add an event listener to the whole parent object.
// This way we don't have to add separate event listeners to each <li>. list.addEventListener("click", function (e) { // Make the coloring happen only to the clicked element by taking the target of the event. e.target.classList.add('green'); });
<button>Enable zoom</button> <button>Disable zoom</button> <br><br> Click on any of the names to color them green <ul> <li>Chewbacca</li> <li>Han Solo</li> <li>Luke</li> <li>Boba fett</li> </ul>
.green {
color: green;
} .zoomed {
cursor: pointer;
font-size: 23px;
}
addEventListener
的用法看起来跟jQuery里的事件监听用法非常相似。
4. 对类和属性的操作
以前,执行对于页面元素css类的各种操作(查找、增加、删除等),如果不用jQuery,那是一件非常麻烦的事情。这样的历史已经一去不复返了,这样要感谢classList 属性。而使用 setAttribute, 我们可对元素属性进行操作。
var btn = document.querySelectorAll("button"),
div = document.querySelector("#myDiv"); btn[0].addEventListener("click", function () { // Get any attribute easily.
console.log(div.id);
}); // Element.classList stores all classes of the element in the form of a DOMTokenList. 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"); });
<div id='myDiv' class="square"></div> <button>Display id</button> <button>Display classes</button>
<button>Color red</button>
<button>Toggle visibility</button>
.square {
width: 100px;
height: 100px;
margin-bottom: 20px;
border: 1px solid grey;
border-radius: 5px;
} .hidden {
visibility: hidden;
} .red {
background-color: red;
}
5. 获取或设置元素的内容
jQuery里有个非常方便的 text() 和 html() 方法,相对应的,在元素JavaScript里,我们可以使用 textContent 和 innerHTML 两个属性,这两个属性其实并不是新出现的:
var myText = document.querySelector("#myParagraph"),
btn = document.querySelectorAll("button"); // We can easily get the text content of a node and all its descendants. var myContent = myText.textContent; console.log("textContent: " + myContent); // When using textContent to alter the text of an element
// it deletes the old content and replaces it with new. btn[0].addEventListener('click', function () { myText.textContent = " Koalas are the best animals "; }); // If we want to grab all the HTML in a node (including the tags) we can use innerHTML. var myHtml = myText.innerHTML; console.log("innerHTML: " + myHtml); // To change the html simply supply new content.
// Of course we aren't limited to text only this time. btn[1].addEventListener('click', function () { myText.innerHTML = "<button> Penguins are the best animals </button>"; });
<p id="myParagraph"><strong> Which are the best animals? </strong></p> <button>Koalas</button> <br> <button>Penguins</button>
6. 循环数组
jQuery里提供了很多实验的方法,比如each()
和 map()
,而在新版的JavaScript api里,我们有了原生的 forEach 和 map ,需要注意的是,它们参数的用法有些不同,并且在回调函数里 this 的代表性也有些不同。
var ninjaTurtles = ["Donatello", "Leonardo", "Michelangelo", "Raphael"]; // ForEach automatically iterates through an array. ninjaTurtles.forEach(function (entry) {
console.log(entry);
}); // The map method calls a function on every element of an array and creates a new array with the results. var lovesPizza = ninjaTurtles.map(function (entry) { return entry.concat(" loves pizza!"); }); console.log(lovesPizza);
7. AJAX
新版的JavaScript API里提供了一个全新的可以实现ajax的API——fetch,这个api采用了全新的 Promise 架构,使用起来更方便,更灵活,详细用法请参考《你不需要jQuery(三):新AJAX方法fetch()》。
总结
如果你追求极简,不允许页面有半点臃肿,以更快的加载速度和更好的用户体验为目标,那么,你应该试试上面的技巧,不要因为一个很小的功能而滥用jQuery,浏览器在革新,JavaScript在进步,原生的API逐渐取代jQuery是潮流,WEB程序员应多关注这方面的知识技巧,不是吗?
你不需要jQuery(四)的更多相关文章
- 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式
本系列文章导航 从零开始学习jQuery (四) 使用jQuery操作元素的属性与样式 一.摘要 本篇文章讲解如何使用jQuery获取和操作元素的属性和CSS样式. 其中DOM属性和元素属性的区分值得 ...
- 一、Ajax 二、JSON数据格式 三、Ajax+Jquery 四、分页的实现
一.Ajax概述###<1>概述 ###<2>组成 以XMLHttpRequest为核心,发送Ajax请求和接收处理结果 以javascript为语言基础 以XML/JSON作 ...
- 实战Jquery(四)--标签页效果
这两天完毕了实战四五六的样例,实例四是标签页的实现方法,实例五是级联菜单下拉框,实例六是窗体效果,都是web层经常使用的效果.越到后面越发认为技术这东西,就是一种思路的展现,懂了要实现 ...
- 第33日 我疯了集成平台(六)-步履轻盈JQuery(四)
6一个月28日本,天阴下雨. " 微雨过,小荷翻,榴花开欲燃.玉盆纤手弄清泉,琼珠碎却圆." 古老的JavaScript,且乱且复杂.封装成库,青春焕发,这样人们 ...
- 恶补jquery(四)jquery中事件--冒泡
事件 当我们在打开一个页面的时候.浏览器会对页面进行解释运行,这实际上是通过运行事件来驱动的.在页面载入事件时,运行Load()事件,是这个事件实现浏览器解释运行代码的过程. 事件机制 事件中的冒泡现 ...
- jquery四种监听事件的区别
最近找工作被问到了jquery有哪些事件监听,都有什么区别,忽然有点想不起来了... 然后上网上查看了相关的资料,总结一下,方便大家查看,也方便自己复习! 1.bind()方法: bind(type, ...
- jQuery(四)、文档处理
1 内部插入 1.1 append(content | fn) 向每个匹配的元素内部追加内容. 参数: (1) content:要追加到目标中的内容. (2) function(index, html ...
- jQuery(四)--HTTP请求
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 从零开始学习jQuery(转)
本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...
随机推荐
- ORA-01790 错误处理
今天在练手的时候出现了一个ORA-01790 的错误,决定把他写下来保留起来. 先来创建两张测试用的简单的表. SQL> create table test01 (id number(3),na ...
- Spring(3.2.3) - Beans(8): 基于 Annotation 的配置
除了基于 XML 的配置外,Spring 也支持基于 Annotation 的配置.Spring 提供以下介个 Annotation 来标注 Spring Bean: @Component:标注一个普 ...
- 关于Tesseract3.01的使用方法
Tesseract就不多介绍勒,能找到的人都知道是干嘛的 下面记录一下C# vs2010下的使用方法(借鉴http://blog.csdn.net/bobo1013767522/article/det ...
- java开发:分享一下MemCached的使用
在项目开发中,有些不经常修改的数据,我们通常都会选择使用缓存.其中一种方式,就是memcached. windows系统中,我们需要下载并安装memcached. 地址如:D:\memcached\m ...
- javascript应用:页面解析list和map封装后的json数据
开发web项目时,经常会使用到的页面脚本语言javascript,使用它能让页面展示上的效果更多彩. 今天就来说一下,从数据库中获取到数据后在页面上的展示方式: 1.数据库取出数据放入list< ...
- CSS之拖拽库2
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or ...
- Spring事务配置的五种方式(转发)
Spring事务配置的五种方式(原博客地址是http://www.blogjava.net/robbie/archive/2009/04/05/264003.html)挺好的,收藏转发 前段时间对Sp ...
- Mysql slave 同步错误解决
涉及知识点 mysql 主从同步 ,参考: MySQL数据库设置主从同步 mysqlbin log查看, 参考:MySQL的binlog日志 解决slave报错, 参考: Backup stopped ...
- DTCMS自定义标签,获取所有栏目以及获得二级子栏目导航
取得二级栏目 DTcms.Web.UI\Label\category.cs中 get_category_child_list 返回当前所有子栏目 DTcms.Web.UI\Label\category ...
- StringBuilder的Append()方法会比+=效率高
StringBuilder strSql = new StringBuilder(); strSql.Append("select top 1 id from " + databa ...