一些可以替代 jQuery 的浏览器内置功能

标签: jquery 浏览器 功能 | 发表时间:2013-05-27 18:06 | 作者:
出处:http://www.iteye.com
jQuery的体积在不断的增大。新功能要不断增加,这是必然结果。虽然从版本1.8.3开始的瘦身效果明显,但不可否认的是,对于移动手机端的网页开发,它仍然是不可接受的。当然,jQuery不是铁板一块,你可以对它进行定制,只打包进你想要的组件,但其中的一些用来兼容老式浏览器的代码你无法去除。

就我的个人习惯来说,不管开发什么项目,即使是一个很简单的demo,我做的第一件事就是引入jQuery,这样做主要是想使用它提供的DOM选择器功能。对于一些像IE6/IE7这样的老式浏览器,这种做法是显而易见的,但是, 如今现代浏览器里已经内置了完整的DOM选择器功能,能让你使用原生的浏览器提供的方法来实现jQuery的功能。

document.queryselector

这里说的现代浏览器是指Firefox、Chrome、Opera、Safari等现代浏览器,如果是IE,你需要至少是IE8或以上。你可以简单的将document.querySelector()函数映射为$,它能返回在DOM中找到的第一个匹配选择条件的元素。任何的CSS选择符都可以作为它的参数。

注意:IE 8只支持 CSS2.1标准的选择器

<div class="container">
  <ul>
    <li id="pink">Pink</li>
    <li id="salmon">Salmon</li>

    <li id="blue">Blue</li>
    <li id="green">Green</li>
    <li id="red">Red</li>
  </ul>  

</div>

<script>

  // 创建全局的 '$' 变量
  window.$ = function(selector) {
    return document.querySelector(selector);
  };

  (function() {
    // 通过id查找item1,将它的背景颜色修改为浅红
    var item = $("#salmon").style.backgroundColor="salmon";
    console.log(item);
  }());  
</script>


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

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

// jQuery方式
$("#picture").attr("src", "http://placekitten.com/200/200");

//使用将querySelector映射为$的原生js方式
$("#picture").src = "http://placekitten.com/200/200";


DOM对象能让你直接访问图片的src属性,相反,所有的jQuery对象都需要你通过attr函数来操作。

document.querySelector方法只返回一个元素。如果你的选择目标是一堆元素,它只会返回符合条件的第一个节点。要想返回所有节点,你需要使用document.querySelectorAll方法。

document.queryselectorall

一个很巧妙的做法是将querySelector映射为$,而将querySelectorAll函数映射为$$。但它返回的是一个节点列表,不如jQuery里返回的Array格式好用,我们可以使用Array.prototype.slice.call(nodeList)方法加工一下,让它更方便。

<div class="container">
  <ul>
    <li id="pink">Pink</li>
    <li id="salmon">Salmon</li>
    <li id="blue">Blue</li>
    <li id="green">Green</li>
    <li id="red">Red</li>
  </ul>  
</div>
<script>
  window.$ = function(selector) {
    return document.querySelector(selector);
  };
  window.$$ = function(selector) {
    var items = {},
    results = [],
    length = 0,
    i = 0;
    // 注意,IE8不支持这种做法
    results = Array.prototype.slice.call(document.querySelectorAll(selector));

    length = results.length;
    // add the results to the items object
    for ( ; i < length; ) {
      items[i] = results[i];
      i++;
    }
    // 添加一些额外的属性,让它更像一个Array
    items.length = length;
    items.splice = [].splice();
    // 添加 'each' 方法
    items.each = function(callback) {
      var i = 0;
      for ( ; i < length; ) {
        callback.call(items[i]);
        i++;
      }
    }
    return items;
  };

  (function() {
    // 查找green项,修改字体大小
    $("#green").style.fontSize = "2em";
    // 通过id查找,修改背景色
    $$("li").each(function() {
      this.style.backgroundColor = this.id;
    });
  }());
</script>

注意,IE8是不支持将一个nodeList转换为Array的。

classList

使用jQuery对CSS类操作十分方便,幸运的是,现代浏览器里也内置了一下方法能够很方便的操作它们,主要用到了classList对象。下面是一些基本操作两种方式的对比。

  window.$ = function(selector) {
    return document.querySelector(selector);
  };
  //----增加CSS类------
  /* jQuery */
  $(".main-content").addClass("someClass");
  /* 等效内置方法 */
  $(".main-content").classList.add("someClass");
  //----删除一个CSS类-----
  /* jQuery */
  $(".main-content").removeClass("someClass");
  /* 等效内置方法 */
  $(".main-content").classList.remove("someClass");
  //----判断是否存在一个CSS类---
  /* jQuery */
  if($(".main-content").hasClass("someClass"))
  /* 等效内置方法 */
  if($(".main-content").classList.contains("someClass"))

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

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

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



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



参考资料:



感谢 WnouM 投递这篇资讯

资讯来源: 外刊IT评论

已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [jquery 浏览器 功能] 推荐:

一些可以替代 jQuery 的浏览器内置功能

- - ITeye资讯频道
jQuery的体积在不断的增大. 新功能要不断增加,这是必然结果. 虽然从版本1.8.3开始的瘦身效果明显,但不可否认的是,对于移动手机端的网页开发,它仍然是不可接受的. 当然,jQuery不是铁板一块,你可以对它进行定制,只打包进你想要的组件,但其中的一些用来兼容老式浏览器的代码你无法去除. 就我的个人习惯来说,不管开发什么项目,即使是一个很简单的demo,我做的第一件事就是引入jQuery,这样做主要是想使用它提供的DOM选择器功能.

Computex 2011:Insyde 展示具 Chromium 浏览器功能的 BIOS

- jiaxins1 - Engadget 中国版
这次是个特例,虽然笔者杀到系微(Insyde)摊位,只是因为现场太多机密,所以厂商不给拍. 未来系微的 BIOS 将会有 Chromium 浏览器(同 Google Chrome 浏览器同一个开放原始码 Project ). 内置的 Android 版本将会上到 2.3. UEFI 全面 Ready(系微在2001年就开始投入 UEFI 的开发).

八款主流浏览器的“杀手级”功能

- 辉 - 月光博客
  本文将对比八种国内最常用的PC浏览器,找出它们各自的亮点以及“杀手级”功能,所有浏览器都是基于Windows平台. 和杀毒软件不一样,浏览器之间虽然也竞争激烈,却不存在兼容性的问题,因此以下8种浏览器皆可取其精华而用之.   目前大部分浏览器都已经内置翻译功能,许多浏览器本身就是调用谷歌翻译. 但存在的巨大差异是,谁也没有Chrome那样方便和迅捷,同时保持着高度简洁.

6种节省时间提升效率的浏览器功能

- - IE浏览器中文网站
不可否认,浏览器在现在的网络时代中越来越重要,未来可能扮演着更重要的角色. 工作、生活和娱乐都将无法没有浏览器的协助. 学会如何使用浏览器也成为了现 代人不可或缺的技能,更有效率的使用浏览器绝对可以帮助你节省更多的时间. 正所谓「时间就是金钱」,学习如何更技巧的使用浏览器对使用者而言可谓百利无害. 世界变迁迅速,如何节省你的时间并提升你的生产力非常重要,是时候学习一些技巧让做事的效率提升到极速了.

微软Edge浏览器内置VPN功能

- - donews
DoNews 5月2日消息(刘文轩)苹果在 macOS Monterey 与 iOS/iPadOS 15 开始推出名为“Private Relay”的 VPN 服务,与之相对的,作为 Windows 系统的开发商,微软也在自家的浏览器中推出类似服务,确保用户上网安全. 这项服务由微软与 Cloudflare 合作完成,名为“Microsoft Edge Secure Network”,宣称可确保经由Edge送出的数据通过加密通道传送,即使用户访问的是使用HTTP、较不安全的网站也是如此.

新增同步功能 海豚浏览器HD V7.0中文版全新上线

- Yu - cnBeta.COM
10月21日,百纳信息(MoboTap Inc.)公司推出全新的海豚浏览器HD V7.0中文版. 这一版本除了在以往功能的基础上进行优化外,还加入了许多抢眼元素,而其重磅推出的海豚同步功能更是让众多的海豚粉们觉得等待是值得的.

Highcharts:强大的jQuery图表制作功能

- 和谐海洋 - UED TEAM,用户体验设计,web前端开发
Highcharts是一个制作图表的Javascript类库,可以制作的图表有:直线图,曲线图、区域图、区域曲线图、柱状图、饼装图、散状图等等.  1、提示功能:鼠标移动到图表的某一点上有提示信息. 2、放大功能:选中图表部分放大,近距离观察图表. 3、对个人用户完全免费,这一点很重要的. 4、兼容性:兼容当今所有的浏览器,包括iPhone、IE和火狐等等.

从零开始学习 jQuery(十)jQueryUI常用功能实战

- zhai - 第三极 | 移动开发者
本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案,  即使你会使用jQuery也能在阅读中发现些许秘籍.. 使用jQueryUI完成制作网站的大部分常用功能.. 经过公司内部收集, 整理了一些经常使用javascript实现的功能.  实现这些功能的主角不是让人眼花缭乱的jQuery插件,  而是jQuery UI..

诺基亚AR浏览器Live View更新新版本:功能更多,画面更好

- Woooon - cnBeta.COM
在昨天的诺基亚世界大会有一个值得关注的消息可能被很多人忽视了,就是前不久开始公开测试的AR浏览器Live View进行了一次版本更新. 如果你喜欢AR类型的应用又拥有一部诺基亚的手机,这款测试中的应用还是很值得你试试的.

25MB的官方插件:Chrome浏览器接管查看微软Office文档功能

- - PingWest
大家都在 Chrome浏览器中查看过PDF文件,这是通过 Chrome内置的PDF查看器实现的,非常方便. 可是我们还经常会在网页上遇到.doc、.xls、.ppt等 微软Office文件,往往需要下载后用本地的Office软件查看,尤其是.ppt、.xls这样视觉效果比较复杂的文件. 如果你用过Chromebook的话,一定会倾心于该设备上的Chrome浏览器带来的流畅、高效的Office文件查看体验,跟PDF查看器是一样的效果.