美文网首页让前端飞
让你熟知jquery见鬼去吧

让你熟知jquery见鬼去吧

作者: 清哥来liao | 来源:发表于2016-11-23 16:18 被阅读71次

让你熟知的$见鬼吧

$是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-dom-control/

公众号


BigCan

相关文章

  • 让你熟知jquery见鬼去吧

    让你熟知的$见鬼吧 $是jquery最具代表的符号,当然php也是,但是二者不能同日而语;不得不说jquery的选...

  • 希望被看见的生命力

    让完美的想法见鬼去吧

  • 让前任见鬼去吧!

    01 去年年底,朋友圈一夜之间驻守了大波《前任三》观影大军,一个个看完电影后犹如打了鸡血一般,纷纷晒出两张电影票并...

  • 让加班见鬼去吧

    快到年终了,各种考核验收一股脑全涌过来,所有事情堆到一块,足够让你手忙脚乱。往往是,正在做这个表格还没做好,领导又...

  • 让誓言见鬼去吧

    生活不止眼前的苟且,还有诗和远方的田野…… 许巍微哑的嗓音吟出这句歌词的时候,我的脑海里浮现的却是高晓松略显粗犷的...

  • 让烦恼见鬼去吧

    你的烦恼一半是对自己的不满一半是对别人的不满,可是你没看到整日里天灾水祸,车毁人亡…那么多生命还没搞清状况就匆...

  • 让压力见鬼去吧

    今天公布中考成绩。上午九点钟,这爷俩围在电脑前,不知道什么原因,教育局的网站一直无法登陆,也可能同一时间登陆的人...

  • 让运气见鬼去吧

    也估计只有我这种傻瓜才会有“自己人品不错,运气通常都会很好”这种想法。我也不知道哪来的信心,总觉得自己聪明过人,智...

  • 让焦虑见鬼去吧!

    一、 不知为啥,今天整个人突然陷入莫明的焦虑和沮丧中,感觉干什么都没劲,看什么都不顺眼,对自己更是十二分的不满,所...

  • 让疲惫见鬼去吧!

    我们都会感到疲惫,但是单纯用脑是不会让人感到倦怠的。很新奇的想法,不是么? 那我们的疲惫是由什么引起的呢?多半是由...

网友评论

    本文标题:让你熟知jquery见鬼去吧

    本文链接:https://www.haomeiwen.com/subject/qzjvpttx.html