jQuery目前已经成为最流行的JavaScript库,它可以让开发者“write less, do more(写得更少,做得更多)”,这也是它的核心理念。通过它,用户可以更方便地处理HTML documents、events,更轻松地实现动画效果、AJAX交互等。
尽管jQuery帮助开发者节省了大量的工作,但是并不是所有的产品都适合使用jQuery。jQuery 2.0.3版本有236KB,压缩版也有81KB,这意味着你的Web产品需要额外的加载时间和带宽,而在移动设备上则需要更多。
如果你的产品中只有少量的前端效果或DOM操作,那么完全可以抛弃臃肿的jQuery,转而使用JavaScript原生API来实现。
以下是jQuery和JavaScript实现相同操作的等价代码。
选择元素
- // jQuery
- var els = $('.el');
- // 原生方法
- var els = document.querySelectorAll('.el');
- // 函数法
- var $ = function (el) {
- return document.querySelectorAll(el);
- }
- var els = $('.el');
- // 或者使用regex-based micro-selector库,地址:http://jsperf.com/micro-selector-libraries
创建元素
- // jQuery
- var newEl = $('<div/>');
- // 原生方法
- var newEl = document.createElement('div');
添加事件监听器
- // jQuery
- $('.el').on('event', function() {
- });
- // 原生方法
- [].forEach.call(document.querySelectorAll('.el'), function (el) {
- el.addEventListener('event', function() {
- }, false);
- });
设置/获取属性
- // jQuery
- $('.el').filter(':first').attr('key', 'value');
- $('.el').filter(':first').attr('key');
- // 原生方法
- document.querySelector('.el').setAttribute('key', 'value');
- document.querySelector('.el').getAttribute('key');
添加/移除/切换类
- // 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');
附加内容(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;
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});
以上这些只是很少一部分,你可以在浏览器的控制台中找到更多东西,或者可以参考MDN的JS API reference或者WPD的DOM文档。
你也可以使用其他非常轻量级的库代替,比如http://microjs.com/列出的一些库,根据你的需求选择最合适的库,但首先要清楚,除非是不使用库无法实现某项功能,否则还是使用原生JavaScript。
相关推荐
该类以纯原生JS编写,无需引入任何第三方库。 调用方法:new MergeRow(['col1','col2','col3'],data).renderTbl('td001'); 详情说明请见 mergerow.js 中的注释说明。 mergerow.html为具体事例。
使用原生JS代码开发一个前端框架,框架名称SYSUI,纯原生js开发,不使用任何第三方库。SYSUI本身支持网站模板界面编辑开发,也支持配置后台系统界面,是个多用途的框架。 使用SYSUI开发一个后台管理系统界面,支持...
主要介绍了原生js实现Canvas实现拖拽式绘图,支持画笔、线条、箭头、三角形和圆形等等图形绘制功能,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
50款原生js案例(绝美整合),半年整理的库存,各种js插件库存,效果,绝对有您喜欢的效果!
织织网应实际使用开发的一个js年月选择器,采用原生js开发,兼容IE、FF(Firefox)、谷歌(Chrome),其他杂牌浏览器都是基于这三种内核的,就不一一测试了。 插件非常的简单,完全开源,可以做二次开发。 因为很...
原生JavaScript获取域名主机 function getHost(url) { var host = "null"; if(typeof url == "undefined"|| null == url) { url = [removed].href; } var regex = /^\w+\:\/\/([^\/]*).*/; var match = url....
本算法利用原生的javascript完成了径向树状图(完成了两组)
原生JS经典小项目-DOM练习
JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。...本人热爱使用原生js实现各种好看的前端页面,从而提高自己的前端开发水平。原生js实现精美放羊动画效果。
原生JS经典小项目-form表单校验
原生js select下拉选项框给文本框赋值代码 原生js select下拉选项框给文本框赋值代码 原生js select下拉选项框给文本框赋值代码 原生js select下拉选项框给文本框赋值代码
一些关于原生js小案例,如动画效果的实现,轮播图的做法,页面存储的属性等等
原生JS写的无限级树形菜单(包含文件:otree.js,otree.css,demo.html,demo1.html,imgs/ ),兼容IE6/7/8/9+、Chrome、Firefox、Opera、Safari等主流浏览器,以及360/搜狗等其他各浏览器。 可动态添加/删除节点,启用/...
原生JavaScript写的农历日历,分享给大家。
lCalendar纯原生js日期时间选择纯原生js日期时间选择;lCalendar纯原生js日期时间选择纯原生js日期时间选择
简单实用原生js实现带缩略图文字说明左右轮播切换相册插件下载。一款基于原生JavaScript实现图片相册幻灯轮播图特效插件,没有引入任何jQuery库,短短数行原生php中文网实现。
下面小编就为大家带来一篇原生js实现jquery函数animate()动画效果的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
基于原生js写的扫雷游戏,代码里面有详细注释,大家可以看看。
利用原生js实现了单机的五子棋游戏,能判断输赢,是否平局,是否已经有棋子等。
原生js实现简单的一款倒计时计时插件下载。基于原生JavaScript编写的一款通用倒计时计时插件,精确到毫秒,简单实用。