现代浏览器内置的可等效替代jQuery的功能
jQuery的体积在不断的增大。新功能要不断增加,这是必然结果。虽然从版本1.8.3开始的瘦身效果明显,但不可否认的是,对于移动手机端的网 页开发,它仍然是不可接受的。当然,jQuery不是铁板一块,你可以对它进行定制,只打包进你想要的组件,但其中的一些用来兼容老式浏览器的代码你无法 去除。
就我的个人习惯来说,不管开发什么项目,即使是一个很简单的demo,我做的第一件事就是引入jQuery,这样做主要是想使用它提 供的DOM选择器功能。对于一些像IE6/IE7这样的老式浏览器,这种做法是显而易见的,但是,如今现代浏览器里已经内置了完整的DOM选择器功能,能 让你使用原生的浏览器提供的方法来实现jQuery的功能。
document.queryselector
这里说的现代浏览器是指火狐、谷歌、Opera、Safri等新生代浏览器,如果是IE,你需要至少是IE8或以上。你可以简单的将document.querySelector()函数映射为$,它能返回在DOM中找到的第一个匹配选择条件的元素。任何的CSS选择符都可以作为它的参数。
注意:IE 8只支持 CSS2.1标准的选择器
你需要使用原生的“style”方法,而且这里不能使用jQuery里的链式调用。console.log()输出的将会是backgroundColor方法返回的“salmon”。
原生DOM节点有时候会比封装后的jQuery对象更好用。例如,如果你想修改一个图片的src属性,比较一下下面使用jQuery的做法和直接使用DOM节点的做法。
DOM对象能让你直接访问图片的src属性,相反,所有的jQuery对象都需要你通过attr函数来操作。
document.querySelector方法只返回一个元素。如果你的选择目标是一堆元素,它只会返回符合条件的第一个节点。要想返回所有节点,你需要使用document.querySelectorAll方法。
document.queryselectorall
一 个很巧妙的做法是将querySelector映射为$,而将querySelectorAll函数映射为$$。但它返回的是一个节点列表,不如 jQuery里返回的Array格式好用,我们可以使用Array.prototype.slice.call(nodeList)方法加工一下,让它更方便。
注意,IE8是不支持将一个nodeList转换为Array的。
classList
使用jQuery对CSS类操作十分方便,幸运的是,现代浏览器里也内置了一下方法能够很方便的操作它们,主要用到了classList对象。下面是一些基本操作两种方式的对比。
相对于jQuery提供大量丰富的方法,上面说的这几个现代浏览器里内置的功能显得很简单,但如果项目中的要求不高,这些替代方法能大大的减少你的应用依赖。
最后要提醒的是,这些内置方法在不同的浏览器和不同的版本中支持程度不一样,下面是它们的支持程度参考表。
附图1:各种浏览器对querySelector/querySelectorAll的兼容支持
附图1:各种浏览器对classlist的兼容支持
参考资料:
现代浏览器内置的可等效替代jQuery的功能的更多相关文章
- 浏览器内置Console函数使用详解
浏览器内置Console函数比较好用:Chrome 和 FireFox(Firebug插件) 利用此功能可以像直接在面板里面运行JS一样(写法不同而已) 一.显示信息的命令 Firebug内置一个co ...
- 浏览器内置的base64方法
Base64是一种基于64个可打印字符来表示二进制数据的表示方法.在Base64中的可打印字符包括字母A-Z.a-z.数字0-9,这样共有62个字符,此外两个可打印符号在不同的系统中而不同(维基百科: ...
- HTML5 使用浏览器内置数据库之 indexedDB
indexedDB是H5规范里的浏览器内置数据库,是nosql数据库的一种.因为另一种数据库Web SQL不再受W3C支持,所以还得学习下这个. 基本情况 兼容性:ie11及以上都支持, W3C是这么 ...
- WeixinJSBridge:微信浏览器内置JavaScript 对象
微信公众平台开始支持前端网页,大家可能看到很多网页上都有分享到朋友圈,关注微信等按钮,点击它们都会弹出一个窗口让你分享和关注,这个是怎么实现的呢?今天就给大家讲解下如何在微信公众平台前端网页上添加分享 ...
- 几种主流浏览器内置http抓包工具软件使用方法
对于学习网站的人或者相关编程人员,经常需要用到http抓包工具来跟踪网页,但主流抓包软件如httpwatch.httpanalyzerstdv都是收费的,破解版往往也不稳定.实际上现在很多浏览器都内置 ...
- 几种主流浏览器内置http抓包工具软件使用方
对于学习网站的人或者相关编程人员,经常需要用到http抓包工具来跟踪网页,但主流抓包软件如httpwatch.httpanalyzerstdv都是收费的,破解版往往也不稳定.实际上现在很多浏览器都内置 ...
- Laravel 5.3 使用内置的 Auth 组件实现多用户认证功能
https://blog.csdn.net/kevinbai_cn/article/details/54341779 概述 在开发中,我们经常会遇到多种类型的用户的认证问题,比如后台的管理员和前台的普 ...
- 微信浏览器内置JavaScript 对象:WeixinJSBridge
微信公众平台开发 微信公众平台开发模式 企业微信公众平台 微信浏览器 分享到朋友圈 发送给好友 分享到腾讯微博 作者:方倍工作室 原文: http://www.cnblogs.com/txw1958/ ...
- JavaScript使用浏览器内置XML解析器解析DOM对象
所有现代浏览器都内建了供读取和操作 XML 的 XML 解析器.解析器把 XML 转换为 XML DOM 对象 (可通过 JavaScript 操作的对象). 一.获取DOM对象 XMLHttpReq ...
随机推荐
- make clean vs make clobber
make is pretty smart, and picks up what has changed from the last build, so if you run repo sync and ...
- poj-2236 Wireless Network &&poj-1611 The Suspects && poj-2524 Ubiquitous Religions (基础并查集)
http://poj.org/problem?id=2236 由于发生了地震,有关组织组把一圈电脑一个无线网,但是由于余震的破坏,所有的电脑都被损坏,随着电脑一个个被修好,无线网也逐步恢复工作,但是由 ...
- SASS -- 基本认识
SASS 是一种 CSS 的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得 CSS 的开发,变得简单和可维护. SASS 提供四个编译风格的选项: * nested:嵌套缩进的 css ...
- Debian字符模式下修改显示分辨率
Debian字符模式下修改显示分辨率 一.准备工具 a) Git apt-get install git 二.获取屏幕修改辅助软件 a) 创建临时文件 mkdir /tmp/screenModify ...
- Qt之国际化(系统文本-QMessageBox按钮、QLineEdit右键菜单等)
简介 使用Qt的时候,经常会遇到英文问题,例如:QMessageBox中的按钮.QLineEdit.QSpinBox.QScrollBar中的右键菜单等.通常情况下,我们软件都不会是纯英文的,那么如何 ...
- HDU 2516 (Fabonacci Nim) 取石子游戏
这道题的结论就是,石子的个数为斐波那契数列某一项的时候,先手必败:否则,先手必胜. 结论很简单,但是证明却不是特别容易.找了好几篇博客,发现不一样的也就两篇,但是这两篇给的证明感觉证得不清不楚的,没看 ...
- 使用MFC中的AfxBeginThread创建多线程
创建一个基于对话框的工程,工程名为CreateThreadRect 在CreateThreadRect.cpp中增加一个ThreadProc函数,代码如下 工作者线程的函数必须是全局函数或静态 ...
- PopupWindow+ListView
1. 获取打到数据 for (int i = 0; i < iocOutMakeMaterialSubmit.data.size(); i++) { dataListPopupWindow.ad ...
- iso中第三方框架SDWebImage的使用步骤
一.SDWebImage的使用 1.依赖的框架 * ImageIO.framework * MapKit.framework 2.UIImageView下载图片需要的头文件:UIImageView+W ...
- 自己构建MVC中的M
/** * @ description Model MVC中M 数据模型 * @ Object * @ public * @ create method IE不支持 */ if(typeof Obje ...