$是jquery最具代表的符号,当然php也是,但是二者不能同日而语;不得不说jquery的选择器是大家赞不绝口的,在它1.x版本中对ie兼容性是最好的,这要归功于$选择器;

现在呢,html5的降临,移动端的巨大发展,让我们可以慢慢弃用这臃肿的工具,轻装上阵,打死你个龟孙儿

document.querySelector()和document.querySelectorAll(str)这对兄弟jquery2.x版本选择器的核心,我们可以简单的封装一个函数来代替jquery的$$

function $$(els){    var dom = document.querySelectorAll(els);    if(dom.length==1){        return dom[0]    }else {        return dom;    }}

document.querySelector("selector1,selector2,...") 返回要查询的首个元素
document.querySelectorAll("selector1,selector2,...") 返回查询的全部元素
可以使用元素的 id, 类, 类型, 属性, 属性值等

是时候放弃removeClass()和addClass()了

下面介绍的就是classList 返回元素的类名,作为 DOMTokenList 对象(官方解释),下面就举栗子来说明其作用吧

<p ></p><script type="text/javascript">    $$("#demo").classList.add("c1","c2")    //位p添加    $$("#demo").classList.remove("c1","c2")    //移除c1 c2类名,如果其中有一个是不存在的不会影响存在的类名的移除    $$("#demo").classList.item(0)    //第一个类名    $$("#demo").classList.toggle("c1")    //如果有c1这个类名就移除,如果没用就添加    $$("#demo").classList.contains("c1")    //判断是否有这个类名,true false</script>

下面是一些原生js替代jquery的某些方法的代码片段

//尾部追加DOM元素。$("#demo").append($(child));// jQuery写法$$("#demo").appendChild(child);//头部插入DOM元素$("#demo").prepend($(child));// jQuery写法$$("#demo").insertBefore(child, $$("#demo").childNodes[0])//删除元素$("#demo").remove();// jQuery写法$$("#demo").parentNode.removeChild($$("#demo"))

ps 对于很多移动端的所谓h5页面来说,主要的是动画效果,dom操作的复杂程度不高,我们就不必要去引用一个我们用的不多的jquery,虽然zepto也不是很大,其实原生的还不止这些,例如:element.getBoundingClientRect()

function getRect (element) {    var rect = element.getBoundingClientRect();    var top = document.documentElement.clientTop;    var left= document.documentElement.clientLeft;    return{        top    :   rect.top - top,        bottom :   rect.bottom - top,        left   :   rect.left - left,        right  :   rect.right - left,        width  :   rect.width,        height :   (rect.bottom - rect.top)    }}

不说这是干嘛地,自己查吧~~

原文链接:http://azq.space/blog/html5-d...

公众号

我们的主页

本文转载于猿2048:让你熟知jquery见鬼去吧