让你熟知jquery见鬼去吧

$是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 对象(官方解释)，下面就举栗子来说明其作用吧

<div id="demo"></div>
<script type="text/javascript">
    $$("#demo").classList.add("c1","c2")
    //位div添加class="c1 c2"
    $$("#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...

公众号

我们的主页