让你熟知jquery见鬼去吧

2019年8月31日 233次阅读 来源: 阿基米德

$是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…

民众号

《让你熟知jquery见鬼去吧》

我们的主页

    原文作者：阿基米德
    原文地址: https://segmentfault.com/a/1190000007520503
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞