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标准的选择器

下载 (41.17 KB)

2013-5-27 17:08



  你需要使用原生的“style”方法,而且这里不能使用jQuery里的链式调用。console.log()输出的将会是backgroundColor方法返回的“salmon”。

  原生DOM节点有时候会比封装后的jQuery对象更好用。例如,如果你想修改一个图片的src属性,比较一下下面使用jQuery的做法和直接使用DOM节点的做法。

下载 (19.59 KB)

2013-5-27 17:08

  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对象。下面是一些基本操作两种方式的对比。

下载 (49.02 KB)

2013-5-27 17:08

  相对于jQuery提供大量丰富的方法,上面说的这几个现代浏览器里内置的功能显得很简单,但如果项目中的要求不高,这些替代方法能大大的减少你的应用依赖。

  最后要提醒的是,这些内置方法在不同的浏览器和不同的版本中支持程度不一样,下面是它们的支持程度参考表。

  附图1:各种浏览器对querySelector/querySelectorAll的兼容支持

下载 (63.35 KB)

2013-5-27 17:08



      附图1:各种浏览器对classlist的兼容支持

下载 (53.26 KB)

2013-5-27 17:08


参考资料:

现代浏览器内置的可等效替代jQuery的功能的更多相关文章

  1. 浏览器内置Console函数使用详解

    浏览器内置Console函数比较好用:Chrome 和 FireFox(Firebug插件) 利用此功能可以像直接在面板里面运行JS一样(写法不同而已) 一.显示信息的命令 Firebug内置一个co ...

  2. 浏览器内置的base64方法

    Base64是一种基于64个可打印字符来表示二进制数据的表示方法.在Base64中的可打印字符包括字母A-Z.a-z.数字0-9,这样共有62个字符,此外两个可打印符号在不同的系统中而不同(维基百科: ...

  3. HTML5 使用浏览器内置数据库之 indexedDB

    indexedDB是H5规范里的浏览器内置数据库,是nosql数据库的一种.因为另一种数据库Web SQL不再受W3C支持,所以还得学习下这个. 基本情况 兼容性:ie11及以上都支持, W3C是这么 ...

  4. WeixinJSBridge:微信浏览器内置JavaScript 对象

    微信公众平台开始支持前端网页,大家可能看到很多网页上都有分享到朋友圈,关注微信等按钮,点击它们都会弹出一个窗口让你分享和关注,这个是怎么实现的呢?今天就给大家讲解下如何在微信公众平台前端网页上添加分享 ...

  5. 几种主流浏览器内置http抓包工具软件使用方法

    对于学习网站的人或者相关编程人员,经常需要用到http抓包工具来跟踪网页,但主流抓包软件如httpwatch.httpanalyzerstdv都是收费的,破解版往往也不稳定.实际上现在很多浏览器都内置 ...

  6. 几种主流浏览器内置http抓包工具软件使用方

    对于学习网站的人或者相关编程人员,经常需要用到http抓包工具来跟踪网页,但主流抓包软件如httpwatch.httpanalyzerstdv都是收费的,破解版往往也不稳定.实际上现在很多浏览器都内置 ...

  7. Laravel 5.3 使用内置的 Auth 组件实现多用户认证功能

    https://blog.csdn.net/kevinbai_cn/article/details/54341779 概述 在开发中,我们经常会遇到多种类型的用户的认证问题,比如后台的管理员和前台的普 ...

  8. 微信浏览器内置JavaScript 对象:WeixinJSBridge

    微信公众平台开发 微信公众平台开发模式 企业微信公众平台 微信浏览器 分享到朋友圈 发送给好友 分享到腾讯微博 作者:方倍工作室 原文: http://www.cnblogs.com/txw1958/ ...

  9. JavaScript使用浏览器内置XML解析器解析DOM对象

    所有现代浏览器都内建了供读取和操作 XML 的 XML 解析器.解析器把 XML 转换为 XML DOM 对象 (可通过 JavaScript 操作的对象). 一.获取DOM对象 XMLHttpReq ...

随机推荐

  1. The method onClick(View) of type new View.OnClickListener(){} must override a superclass

    最近在做一个jWebSocket Android客户端的Demo时遇到如下错误: ok —————— 最近在做一个jWebSocket Android客户端的Demo时遇到如下错误: ".. ...

  2. javascript 原生方法监听DOM结构改变事件

    js原生方法监听DOM结构改变事件 document.addEventListener('DOMNodeInserted',function(){alert(1)},false);document.a ...

  3. .net Windows服务程序和安装程序制作图解 及 VS 2010创建、安装、调试 windows服务(windows service)

    .net Windows服务程序和安装程序制作 最近项目中用到window服务程序,以前没接触过,比较陌生,花了两天的时间学习了下,写了个简单的服务,但在制作安装程序的时候,参照网上很多资料,却都制作 ...

  4. Java —— 时区(夏令时)问题

    有没有遇到过这样的情况:数据库里的是时间是“1991-4-14”,但是Java取出来后就成了“1991-4-13”. 解决方法一: 先把时区设成GMT,把 根据夏时制自动调节时钟 的选项去掉. 再把时 ...

  5. [POJ3264]Balanced Lineup(RMQ, ST算法)

    题目链接:http://poj.org/problem?id=3264 典型RMQ,这道题被我鞭尸了三遍也是醉了…这回用新学的st算法. st算法本身是一个区间dp,利用的性质就是相邻两个区间的最值的 ...

  6. js中的json对象详细介绍

    JSON一种简单的数据格式,比xml更轻巧,在JavaScript中处理JSON数据不需要任何特殊的API或工具包,下面为大家详细介绍下js中的json对象, 1.JSON(JavaScript Ob ...

  7. plsql programming 19 触发器

    挂起语句, 是指数据库 Hang 到那不能动了, 触发的. 1. DML 触发器 这种类型的触发器对于开发人员都很常见, 其他类型的触发器主要是给DBA使用的. 配置触发器,我们需要回答以下问题: 触 ...

  8. POJ 2114 - Boatherds

    原题地址:http://poj.org/problem?id=2114 题目大意: 给定一棵点数为\(n~(n \le 10000)\)的无根树,路径上有权值,给出m组询问($m \le 100$), ...

  9. R语言iris数据集的层次聚类

    data=iris[,-5]dist.e=dist(data,method='euclidean')model1=hclust(dist.e,method='ward') #分3类result=cut ...

  10. HDU 1847 (博弈 找规律) Good Luck in CET-4 Everybody!

    为了提高题解质量还是简单证明一下:3的倍数是必败状态. 如果n % 3 = 1,那么拿走1个石子:如果n % 3 = 2,那么拿走两个石子,都将转移到3的倍数的状态.所以每个必胜状态都有一个后继是必败 ...