让你熟知jquery见鬼去吧

pekonchan 发布于2019-08-20 12:22 / 1858人阅读

摘要：写法头部插入元素写法删除元素写法对于很多移动端的所谓页面来说，主要的是动画效果，操作的复杂程度不高，我们就不必要去引用一个我们用的不多的，虽然也不是很大，其实原生的还不止这些，例如不说这是干嘛地，自己查吧原文链接公众号我们的主页

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

下面是一些原生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...

公众号

我们的主页

GPU云服务器云服务器熟知去吧 jquery插件源码jquery jQuery$

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80950.html

解决页面滚动时吸顶操作不能及时响应bug

摘要：这个界限就是该元素顶部距离窗口顶部的距离等于该元素设置的值比如以下像素分割线当我的顶部距离窗口顶部为值时，我就会像一样在距离窗口值处的时代发送分效果图当页面滚动到距离黄色区块顶部时，黄色区块就会在窗口顶部处，页面再往下滚动距离也不会变。 position: sticky; fixed 吸顶页面滚动结束后页面才渲染需求经常会有这样的需求，当页面滚动到某一个位置fixedTopV...

gaomysion 2019-08-30 13:18 评论0 收藏0
解决页面滚动时吸顶操作不能及时响应bug

摘要：这个界限就是该元素顶部距离窗口顶部的距离等于该元素设置的值比如以下像素分割线当我的顶部距离窗口顶部为值时，我就会像一样在距离窗口值处的时代发送分效果图当页面滚动到距离黄色区块顶部时，黄色区块就会在窗口顶部处，页面再往下滚动距离也不会变。 position: sticky; fixed 吸顶页面滚动结束后页面才渲染需求经常会有这样的需求，当页面滚动到某一个位置fixedTopV...

wapeyang 2019-08-20 13:29 评论0 收藏0