讓你熟知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 對象(官方解釋),下面就舉栗子來說明其作用吧

<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見鬼去吧