内容简介:以前的项目是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')
类数组转为数组的方式转换一下!
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 从应用到操作系统查接口超时(上)
- 从应用到操作系统查接口超时(下)
- 隔空操作有哪些应用场景?(mixlab 人机交互技术)
- CAS原子操作以及其在Java中的应用
- Redis进阶应用:Redis+Lua脚本实现复合操作
- Git应用详解第二讲:Git删除、修改、撤销操作
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
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学习指南》 这本书的介绍吧!