单页应用中更优雅的操作dom

栏目: jQuery · 发布时间: 6年前

内容简介:以前的项目是jquery独行天下,但是随着单页应用的流行,很多公司放弃了jquery的使用,主要因为项目中dom操作较少,一般都是数据改变dom,但是假如项目中难免的操作一些dom的时候,我们可以完全用js的一些写法,完全没有必要小小的操作来引进一个那么庞大的jquery。 关于js替代jquery的一些函数我之前也有整理过,请看文章但是话说回来了,jquery用习惯了,$(),这种选择器已经深入人心。 虽然谷歌浏览器已经支持$$("body")的写法$$('a') 等价于 document.queryS

前言

以前的项目是jquery独行天下,但是随着单页应用的流行,很多公司放弃了jquery的使用,主要因为项目中dom操作较少,一般都是数据改变dom,但是假如项目中难免的操作一些dom的时候,我们可以完全用js的一些写法,完全没有必要小小的操作来引进一个那么庞大的jquery。 关于js替代jquery的一些函数我之前也有整理过,请看文章 jquery属性的相关js实现方法

但是话说回来了,jquery用习惯了,$(),这种选择器已经深入人心。 虽然谷歌浏览器已经支持$$("body")的写法

$$('a') 等价于 document.querySelectorAll(“a”)

$$ 目前用的人毕竟很少,后期维护等也不是很方便。

document.querySelectorAll自定义缩写

为啥我们不把 document.querySelectorAll,直接定义为$ 呢?

这样就可以像写jquey一样选择dom了?

因此我们如下写:

var $ = document.querySelectorAll;
$("body")

但是报错了!

VM343:2 Uncaught TypeError: Illegal invocation
    at <anonymous>:2:1

想了一下,原因如下:

querySelectorAll 所需的执行上下文必需是 document,而我们赋值到 $ 调用后上下文变成了全局 window。

因此,我们手动绑定一下:

var $ = document.querySelectorAll.bind(document);

这次对了

var $ = document.querySelectorAll.bind(document);
$("body")
NodeList [body.pace-done]

但是有个问题,$("body")方法返回的要么是单个 Node 节点,要么是 NodeList 而 NodeLis 是类数组的对象,但并不是真正的数组,所以拿到之后不能直接使用 map,forEach 等方法。

因此:

Array.prototype.map.call($('button'),function(element,index){
    element.onclick = function(){
    }
})

或者

[].slice.call($('button')


Array.from($('button')

类数组转为数组的方式转换一下!


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Ext JS学习指南

Ext JS学习指南

(美)布莱兹、(美)拉姆齐、(美)弗雷德里克 / 孔纯、肖景海、张祖良 / 人民邮电出版社 / 2009-10 / 39.00元

《Ext JS学习指南》系统化地介绍了Ext JS的基础知识,从框架的下载安装到各种常用小部件的实例介绍,从如何自定义小部件到Ext JS代码复用和扩展机制,《Ext JS学习指南》覆盖了Ext JS知识的所有主要方面。作为Web 2.0时代企业应用的一把开发利器,Ext JS为企业应用开发的表现层实现提供了优秀的解决方案。 如果你掌握了HTML,并且了解一般的CSS和JavaScript的......一起来看看 《Ext JS学习指南》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

SHA 加密
SHA 加密

SHA 加密工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具