专栏首页静晴轩jQuery VS JavaScript原生API

jQuery VS JavaScript原生API

如今技术日新月异,各类框架库也是层次不穷。即便当年漫山红遍的JQuery(让开发者write less, do more,So Perfect!!)如今也有被替代的大势。但JS原生API写法依旧;并且有时候只不过小写一个Demo,或者产品中只有少量的前端效果或DOM操作,就去花时间&空间引入jQuery,或者React?不免有取宰牛之刀以杀鸡之嫌。

在jQuery的温柔乡里,是否还能记得原生她javascript原生?如果仅为使用个选择器($)或者类似的东西,是否真的有必要加载jQuery?故此了解下JS常用原生写法还是蛮有必要的。

[update-2015-12-07]有看到抛弃jQuery,拥抱原生JavaScript一文中提到,jQuery 代表着传统的以 DOM 为中心的开发模式,但现在复杂页面开发流行的是以 React 为代表的以数据/状态为中心的开发模式; React、Angular、Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少。

Talk is cheap. Show me the code.直接看代码;以下是jQuery和JavaScript实现相同操作的等价代码:

选择元素

// jQuery  
var els = $('.el');  

//==========================================================//
// 原生方法  
var els = document.querySelectorAll('.el');  

// 函数法  
var $ = function (el) {  
  return document.querySelectorAll(el);  
}  
var els = $('.el');

创建元素

// jQuery  
var newEl = $('<div/>');  

//==========================================================//
// 原生方法  
var newEl = document.createElement('div');

添加/移除/切换类

// jQuery  
$('.el').addClass('class');  
$('.el').removeClass('class');  
$('.el').toggleClass('class');  

//==========================================================//
// 原生方法  
document.querySelector('.el').classList.add('class');  
document.querySelector('.el').classList.remove('class');
document.querySelector('.el').classList.toggle('class');

判断是否包含类

// jQuery
$('.el').hasClass('className');
$('.el').has('.className'); //也可以用来 判断是否包含某个元素

//==========================================================//
// 原生方法(1)
_hasClass(document.querySelector('.el'), className);
function _hasClass( elements,cName ){
    return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") );
};

// 原生方法(2)
if(el.classList.contains("someClass")){}

添加事件监听器

// jQuery  
$('.el').on('event', function() {
});  

//==========================================================//  
// 原生方法  
[].forEach.call(document.querySelectorAll('.el'), function (el) {  
  el.addEventListener('event', function() {
  }, false);
});

原生-DOM绑定事件-优化1参考HERE

//DOM绑定事件-之自执行
var BindEvent = (function () {
  if ('addEventListener' in document) {
    return function (dom, event, handle, ex) {
      dom.addEventListener(event, handle, ex || false);
    }
  } else if ('attachEvent' in document) {
    return function (dom, event, handle) {
      dom.attachEvent('on' + event, handle);
    }
  } else {
    return function (dom, event, handle) {
      dom['on' + event] = handle;
    }
  }
})();

原生-DOM绑定事件-优化2

//DOM绑定事件-之惰性加载(调用方去触发BindEvent之时才去做初始化)//
var BindEvent = function (dom, event, handle, ex) {
  if ('addEventListener' in document) {
    BindEvent = function (dom, event, handle, ex) {
      dom.addEventListener(event, handle, ex || false);
    }
  } else if ('attachEvent' in document) {
trueBindEvent = function (dom, event, handle) {
      dom.attachEvent('on' + event, handle);
    }
  } else {
    BindEvent = function (dom, event, handle) {
      dom['on' + event] = handle;
    }
  }
  BindEvent(dom, event, handle, ex);
};

设置/获取属性

// jQuery  
$('.el').filter(':first').attr('key', 'value');  
$('.el').filter(':first').attr('key');  

//==========================================================//
// 原生方法  
document.querySelector('.el').setAttribute('key', 'value');  
document.querySelector('.el').getAttribute('key');

附加内容(Append)

// jQuery  
$('.el').append($('<div/>'));  

//==========================================================//
// 原生方法  
document.querySelector('.el').appendChild(document.createElement('div'));

克隆元素

// jQuery  
var clonedEl = $('.el').clone();  

//==========================================================//
// 原生方法  
var clonedEl = document.querySelector('.el').cloneNode(true);

移除元素

// jQuery  
$('.el').remove();  

//==========================================================//
// 原生方法  
remove('.el');  
function remove(el) {  
  var toRemove = document.querySelector(el);  
  toRemove.parentNode.removeChild(toRemove);  
}

获取父元素

// jQuery  
$('.el').parent();  

//==========================================================//
// 原生方法  
document.querySelector('.el').parentNode;

上一个/下一个元素

// jQuery  
$('.el').prev();  
$('.el').next();  

//==========================================================//
// 原生方法  
document.querySelector('.el').previousElementSibling;  
document.querySelector('.el').nextElementSibling;

修改CSS属性

总是通过Javascript修改和检索CSS属性,这样会比使用jQuery CSS函数更加简单快速,并且没有任何不必要的代码。

 //----设置CSS属性----

/* jQuery */
  $(el).css({
    background: "#FF0000",
"box-shadow": "1px 1px 5px 5px red",
    width: "100px",
    height: "100px",
    display: "block"
  });

//==========================================================//
/* 原生 */
var el = document.querySelector(".main-content");
el.style.background = "#FF0000";
el.style.width = "100px";
el.style.height = "100px";
el.style.display = "block";
el.style.boxShadow = "1px 1px 5px 5px red";

XHR或AJAX

// jQuery  
$.get('url', function (data) {  

});  
$.post('url', {data: data}, function (data) {  

});  

//==========================================================//
// 原生方法  
// get  
var xhr = new XMLHttpRequest();  

xhr.open('GET', url);  
xhr.onreadystatechange = function (data) {  
}  
xhr.send();  

// post  
var xhr = new XMLHttpRequest()  

xhr.open('POST', url);  
xhr.onreadystatechange = function (data) {  

}  
xhr.send({data: data});

参考文章:http://www.iteye.com/news/28503 英文原文:http://blog.romanliutikov.com/post/63383858003/how-to-forget-about-jquery-and-start-using-native

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Rake让Jekyll写博更优雅

    于想拥有个人站点品牌的人来讲,现如今是一个很好的时期。至少 Hexo、Jekyll、Leanote、WordPress 、FarBox Octopress、gh...

    晚晴幽草轩轩主
  • JavaScript字符串间的比较

    字符串在JavaScript中几乎无处不在,在你处理用户的输入数据的时候,在读取或设置DOM对象的属性时,在操作cookie时,当然还有更 多…。@雪斌在Jav...

    晚晴幽草轩轩主
  • Javascript数组操作

    使用JS也算有段时日,然对于数组的使用,总局限于很初级水平,且每每使用总要查下API,或者写个小Demo测试下才算放心,一来二去,浪费不少时间;思虑下,堪能如此...

    晚晴幽草轩轩主
  • vue+Element-ui实现分页效果

    当我们向后台请求大量数据的时候,并要在页面展示出来,请求的数据可能上百条数据或者更多的时候,并不想在一个页面展示,这就需要使用分页功能来去完成了。

    小周sri的码农
  • 你可能不需要 jQuery!使用原生 JavaScript 进行开发

      很多的 JavaScript 开发人员,包括我在内,都很喜欢 jQuery。因为它的简单,因为它有很多丰富的插件可供使用,和其它优秀的工具一样,jQuery...

    跟着阿笨一起玩NET
  • 「译」利用 JavaScript 复制文本到剪贴板

    一个小小的诀窍。实现主题的复制代码功能时,思路刚好和这篇文章差不多,不过这篇文章的代码要更加合理。

    Chor
  • 在 WIN2012 R2 安装 MSSQL 2005 数据库

    微软的 MSSQL 都已经推出到 2017了,由于项目的需要不得不在 WIN2012R2 的服务器上继续沿用其原来购买的 MSSQL2005那问题就来了.因为在...

    谭广健
  • “一带一路”引领出境游新趋势 沿线旅游热度上涨 | 每周文旅资讯精选(8.5-8.11)

    ? ? “一带一路”引领出境游新趋势 沿线旅游热度上涨 近日,马蜂窝旅游网与中国旅游研究院共同成立的“自由行大数据联合实验室”发布了《“一带一路”:中国出境自...

    腾讯文旅
  • 多元化奖学金系列:体验KubeCon + CloudNativeCon + Open Source Summit上海

    作为开源领域的新手,我经常感到害怕。一开始,我甚至不确定我是否应该做贡献,尽管我在我的祖国印度尼西亚参与了几个社区。这种感觉并不容易消散(之前我一直活跃在Doc...

    CNCF
  • 从Excel角度理解Power Pivot中的行上下文

    这种就代表绝对引用,我们把相对引用的公式下拉后,他会自动根据移动的情况来进行转换;而绝对引用给的公式在下拉后就不会进行变化。

    逍遥之

扫码关注云+社区

领取腾讯云代金券