巅云智能建站平台搭建版(创业门户版)火爆上线,终身授权!新增:文章智能采集+全站真静态打包+城市分站+智能小程序+非法词过滤+H5自适应+智能链词等功能功能详情
帮助文档Help

浅谈JS和jQuery优劣

一佰互联网站制作(www.yinxi.net) 发布日期 2019-03-26 12:47:52 浏览数: 108

简介:现在各种类库满天飞,说jQuery有多快多快,可是对前端大牛来说,更定不会止步于jQuery,因而常常听到高级的前端工程师追求原生js,为何?答案是原生JS要更快,原因是JQuery这样的库必须要兼容各种浏览器和低版本和许 ...

现在各种类库满天飞,说jQuery有多快多快,可是对前端大牛来说,更定不会止步于jQuery,因而常常听到高级的前端工程师追求原生js,为何?答案是原生JS要更快,原因是JQuery这样的库必须要兼容各种浏览器和低版本和许多其他的东西,考虑通用性必然会导致性能的损耗。

当然,我不是提倡写代码纯用原生JS实现,请记住:“框架能够让我们走的更快,但只有了解原生的JS才能让我们走的更远”。

浅谈JS和jQuery优劣

下面直接用代码示例:流行的常用的JQuery功能用原生JS实现。

选择器

JQuery选择器的强大无需赘言,然而在大多数的情况下,我们可以使用相同的代码量用原生JS轻易实现。

1.获取页面所有的div

/* jQuery */
$("div")
/* native equivalent */
document.getElementsByTagName("div")

2.获取某类名相同的一群元素

/* jQuery */
$(".my-class")
/* native equivalent */
document.querySelectorAll(".my-class")
/* FASTER native equivalent */
document.getElementsByClassName("my-class")

3.更复杂的一些选择器

/* jQuery */
$(".my-class li:first-child")
/* native equivalent */
document.querySelectorAll(".my-class li:first-child")
/* jQuery */
$(".my-class").get(0)
/* native equivalent */
document.querySelector(".my-class")

DOM操作
JQuery频繁功能就是操作DOM元素,诸如插入或删除一个元素。当然,如果使用原生JS实现这些功能,代码量肯定是会有所增加的,不过我们也可以将这些功能封装成函数,下面是一些常用的DOM操作的原生JS实现。

1.插入HTML元素

/* jQuery */
$(document.body).append("<div id="myDiv"><img src="im.gif"/></div>");
/* CRAPPY native equivalent */
document.body.innerHTML += "<div id="myDiv"><img src="im.gif"/></div>";
/* MUCH BETTER native equivalent */
var frag = document.createDocumentFragment();
var myDiv = document.createElement("div");
myDiv.id = "myDiv";
var im = document.createElement("img");
im.src = "im.gif";
myDiv.appendChild(im);
frag.appendChild(myDiv);
document.body.appendChild(frag);

CSS操作

在JQuery中可以轻松实现对css的操作,增加属性、删除属性或是检测是否存在某个类。那么你是否觉得使用原生JS实现会很麻烦呢?其实不然,因为有classList。下面是一些关于JQuery css操作的JS原生实现。

// get reference to DOM element
var el = document.querySelector(".main-content");
//----Adding a class------
/* jQuery */
$(el).addClass("someClass");
/* native equivalent */
el.classList.add("someClass");
//----Removing a class-----
/* jQuery */
$(el).removeClass("someClass");
/* native equivalent */
el.classList.remove("someClass");
//----Does it have class---
/* jQuery */
if($(el).hasClass("someClass"))
/* native equivalent */
if(el.classList.contains("someClass"))

当我们简单地逐个设置Css的属性,而并非将它们全部传递给JQuery的Css函数时,性能明显会快很多。而且,真的不会添加什么额外的代码。

// get reference to a DOM element
var el = document.querySelector(".main-content");
//----Setting multiple CSS properties----
/* jQuery */
$(el).css({
background: "#FF0000",
"box-shadow": "1px 1px 5px 5px red",
width: "100px",
height: "100px",
display: "block"
});
/* native equivalent */
el.style.background = "#FF0000";
el.style.width = "100px";
el.style.height = "100px";
el.style.display = "block";
el.style.boxShadow = "1px 1px 5px 5px red";

show与hide
show()与hide()应该也是JQuery中十分常用的方法,原生JS实现同样轻松。

// get reference to a DOM element
var el = document.querySelector(".main-content");
//----show() or hide()----
/* jQuery */
$(el).show();
$(el).hide();
/* native equivalent */
el.style.display = "";
el.style.display = "none";

事件绑定

// get reference to a DOM element
var el = document.querySelector(".main-content");
//----Event Listener off----
/* jQuery */
$(el).off(eventName, eventHandler);
/* native equivalent */
el.removeEventListener(eventName, eventHandler);
//----Event Listener on----
/* jQuery */
$(el).on(eventName, eventHandler);
/* native equivalent */
el.addEventListener(eventName, eventHandler);

jQuery的确是个了不起的库,如果同样轻松的使用JS实现jQuery,尽量使用JS。即使优化有点吹毛求疵,由于html5游戏的迅速崛起,这点优化就显得格外的宝贵。

文/丁向明

做一个有博客的web前端自媒体人,专注web前端开发,关注用户体验,加我qq/微信交流:6135833

http://dingxiangming.com

本文仅代表作者个人观点,不代表巅云官方发声,对观点有疑义请先联系作者本人进行修改,若内容非法请联系平台管理员,邮箱2522407257@qq.com。更多相关资讯,请到巅云www.yinxi.net学习互联网营销技术请到巅云建站www.yx10011.com。
TAG标签: 浅谈JS和jQuery优劣  
一佰互联是全国知名建站品牌服务商,我们有九年网站建设、网站制作、网页设计、php开发和域名注册及虚拟主机服务经验,提供的自助建站服务更是全国有名。近年来还整合团队优势自主开发了可视化多用户”巅云建站系统“3.0平台版,拖拽排版网站制作设计,轻松实现pc站、手机微网站、小程序、APP一体化全网营销网站建设 ,已成功的为全国上百家网络公司提供自助建站平台搭建服务。

相关新闻more

10
10月
同样都是建设网站,为什么花费差距好几倍

近年来的企业发展趋势已经从线上融入到线上,采取两种模式共同发展的形式促进企业进步,于是网站就成为了企业们的一种刚需,争先恐后的加快网站的建设... >>详情

20
04月
HTML5标签大全

可以进行省略的标签不允许写结束标记的标签:area(定义图像映射中的区域)、base(为页面上的所有链接规定默认地址或默认目标)、br、co... >>详情

20
04月
使用Html5、CSS实现文字阴影效果

前两天有一个学html5前端小美女问我一个有关文字阴影的效果怎么去实现。她和我说文字阴影嘛,她也知道text-shadow,.但是却做不出想... >>详情

03
05月
用织梦dedecms做网站的六大SEO优化注

一个排名好的网站离不开好的cms,当然不同cms各有各的好处,因此我们在上线新网站的时候,要针对不同的情况因地制宜,选择不同的网站管理系统来... >>详情

高端网站建设

美工兼顾SEO,为企业电子商务营销助力!

电话:

023-85725751