放弃jQuery, 使用原生js

mumumu 发布于2019-08-23 14:27 / 2681人阅读

摘要：随着的逐渐淘汰，的兴起，以及侧重点放在了移动端，可能变的不在那么重要，原生一样很好用。下面介绍几个原生替换的方法。

随着IE6、7、8的逐渐淘汰，HTML5的兴起，以及侧重点放在了移动端，jQuery可能变的不在那么重要，原生一样很好用。下面介绍几个原生替换jq的方法。

获取元素

</>复制代码 
//jQuery
$(".xxx");  //class获取  
$("#xxx");  //id获取  
$(".xxx.ccc");  //同时包含xxx和ccc  
$(".xxx,.zzz"); //多选  
$(".xxx div"); //子类  
$(".xxx p:first"); //第一个P元素
//原生js
//querySelector基本上实现了jq选择器同样的功能，具体可以自己测试，另外querySelector返回的是第一个元素，querySelectorAll则返回所有选择的元素。  
document.querySelector(".xxx");  //class获取  
document.querySelector("#xxx");//id获取  
document.querySelector(".xxx.ccc");//同时包含xxx和ccc  
document.querySelector(".xxx,.ccc");//多选  
document.querySelector(".xxx div");//子类 
document.querySelector(".xxx p:first-child");//第一个P元素

添加class

</>复制代码 
//JQuery
$(".xxx").addClass("class_name");
//原生js
el.classList.add("class_name");

删除class

</>复制代码 
//JQuery
$(".xxx").removeClass("class_name");  
//原生js
el.classList.remove("class_name");

切换class

</>复制代码 
//JQuery
$(".xxx").toggleClass("class_name");
//原生js
el.classList.toggle("class_name");

是否包含某个class

</>复制代码 
//JQuery
$(".xxx").hasClass("class_name");
//原生js
el.classList.contains("class_name");

上面是HTML5提供的新的方法，如果你非要为了兼容所谓的IE，可以用下面的这些

</>复制代码 
//是否包含class    
function hasClass(o, n){  
    return new RegExp(""+n+"").test(o.className);  
};  
//添加class    
function addClass(o, n){  
    if(!hasClass(o, n)) o.className+=" "+n;  
};  
//删除class    
function delClass(o, n){  
    if(hasClass(o, n)){  
        o.className = o.className.replace(new RegExp("(?:^|s)"+n+"(?=s|$)"), "").replace(/^s*|s*$/g, "");  
    };  
};

插入HTML

</>复制代码 
//JQuery
$(el).before(htmlString);  
$(parent).append(el);  
$(el).after(htmlString);
//原生js
parent.appendChild(el);  
el.insertBefore(NewDom,ele);  
ele.insertAdjacentHTML("beforeend", "
内容
");//

具体insertAdjacentHTML的介绍，请移步到这篇文章（点击这里）

获取子节点/父节点

</>复制代码 
//JQuery
$(".xxx").children();
$(".xxx").parent();
//原生js
ele.children;
ele.parentNode

上一个节点

</>复制代码 
//JQuery
$(".xxx").prev();
//原生js
var prev = ele.previousElementSibling || ele.previousSibling

下一个节点

</>复制代码 
//JQuery
$(".xxx").next();
//原生js
var next = ele.nextElementSibling || ele.nextSibling

上下节点

</>复制代码 
//JQuery
$(ele).siblings();
//原生js
var siblings = Array.prototype.slice.call(el.parentNode.children);  
for (var i = siblings.length; i--;) {  
    if (siblings[i] === el) {  
        siblings.splice(i, 1);  
        break;  
    };  
};  
[].forEach.call(el.parentNode.children, function(child){  
    if(child !== el);  
});

创建节点

</>复制代码 
//JQuery
var ele = $("
");
//原生js
var ele = document.createElement("div");

删除节点

</>复制代码 
//JQuery
$(ele).remove();
//原生js
parent.removeChild(ele);

获取、设置、删除属性

</>复制代码 
//JQuery
$(ele).attr(name,value) //设置  
$(ele).attr(name) //获取  
$(ele).removeAttr(name) //删除
//原生js
ele.setAttribute(name,value);//设置  
ele.getAttribute(name);//获取  
ele.removeAttribute(name);//删除

Data属性

</>复制代码 
//JQuery
$("body").data("foo", 52);  //设置  
$("body").data("foo");  //获取  
$("body").removeData("foo");  //删除
//原生js
ele.dataset.foo = 52  //设置  
ele.dataset.foo  //获取

获取内容/清空内容

</>复制代码 
//JQuery
var html = $(ele).html();
$(el).empty();
//原生js
var html = ele.innerHTML;
el.innerHTML = "";

获取文本

</>复制代码 
//JQuery
$(ele).text();
//原生js
var txt = ele.textContent || ele.innerText

设置css

</>复制代码 
//JQuery
$(ele).css("height","300px");  
  
$(ele).css({  
    height:300  
});
//原生js
ele.style.height = "300px";  
ele.style.cssText = "height:200px;color:red;left:100px;"

显示隐藏

</>复制代码 
//JQuery
$(el).show();  
$(el).hide();
//原生js
el.style.display = "";  
el.style.display = "none";

元素的内高度[height + padding]/元素的外高度[height + padding + border]

</>复制代码 
//JQuery
$(ele).innerHeight();
$(ele).outerHeight();
//原生js
ele.clientHeight;
ele.offsetHeight;

元素的位置

</>复制代码 
//JQuery
$(ele).offset().left;  
$(ele).offset().top;
//原生js
ele.offsetLeft;  
ele.offsetTop;

GPU云服务器云服务器原生js和jquery 原生js 排序原生js js原生动画

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

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

你不需要 jQuery，但你需要一个 DOM 库

摘要：对于复杂的业务需求仍然需要一些操作。使用方式很简单，但是你需要创建一个独立文件，重新挂载需要的方法到命名空间上，这在编写插件时非常有用。正如前文所说，的操作在我看来依然是最好用的，所以，你不需要，但你需要一个库。 showImg(https://segmentfault.com/img/bVbuPEH?w=750&h=375); 写这篇文章的目的，一方面是介绍一下自己编写的模块化 DO...

HitenDev 2019-08-23 16:23 评论0 收藏0
2019 年了，为什么我还在用 jQuery？

摘要：无论是还是，对许多应用来说，这个大小都是完全可以接受的。但是为了不用，放弃向后兼容那我觉得还是用得了。自从年双十一正式上线，累计处理了亿错误事件，付费客户有金山软件百姓网等众多品牌企业。译者按：看来 jQuery 还是有一些用武之地的。原文: Why Im Still Using jQuery in 2019 译者: Fundebug 为了保证可读性，本文采用意译而非直译...

aikin 2019-08-23 17:56 评论0 收藏0
小谈网站建设的兼容性

摘要：本文的兼容性包含了更多的意思，一些和网站开发注意的实际问题。已经快出生十年了，它就是为了解决浏览器的兼容性而生的，对于桌面端开发我们还是建议采用这个版本。本文的兼容性包含了更多的意思，一些和网站开发注意的实际问题。对注重seo的网站帮助更多一些。关于浏览器现在的前端开发已经开始放弃兼容ie6,ie7,并且也在有条件的放弃ie8。像chrome这样的现代浏览器对新特性支持度都很棒，...

soasme 2019-05-29 17:52 评论0 收藏0
jQuery 3.0 beta 发布

摘要：回调函数将固定为异步执行。这些将被移除这些应该会保留需要注意的是，那些继续存在的回调函数不会有任何变化，只有的方法会受影响。创作不够，译文来凑。跟上篇一样是编译，不准备逐字翻。比如，我会把we译成jQuery官方团队，或者他们。初译版，待校正。这篇文章比较长，翻译难度也不小，如果有问题，欢迎提出，我尽量修改。正文开始。歪果仁也要双喜临门，于是 jQuery 官方团队选在 j...

LeanCloud 2019-08-22 10:59 评论0 收藏0