什么不用jQuery?因为它让你的网站体积变得臃肿。你的网站并不真的需要jQuery,不需要它带来的额外体积、带宽和加载时间。

用原生JavaScript简单实现jQuery提供的功能和方法

查找、选择页面元素

// jQuery 实现
var els = $('.el'); // 原生JavaScript实现
var els = document.querySelectorAll('.el'); // 简写
var $ = function (el) {
return document.querySelectorAll(el);
} var els = $('.el');

  创建元素

// jQuery 实现
var newEl = $('<div/>'); // 原生JavaScript实现
var newEl = document.createElement('div');

  事件、监听器操作

// jQuery 实现
$('.el').on('event', function() { }); // 原生JavaScript实现
[].forEach.call(document.querySelectorAll('.el'), function (el) {
el.addEventListener('event', function() { }, false);
});

  设置、修改和获取属性值

// jQuery 实现
$('.el').filter(':first').attr('key', 'value');
$('.el').filter(':first').attr('key'); // 原生JavaScript实现
document.querySelector('.el').setAttribute('key', 'value');
document.querySelector('.el').getAttribute('key');

  增加/修改/删除/反转 类操作

// jQuery 实现
$('.el').addClass('class');
$('.el').removeClass('class');
$('.el').toggleClass('class'); // 原生JavaScript实现
document.querySelector('.el').classList.add('class');
document.querySelector('.el').classList.remove('class');
document.querySelector('.el').classList.toggle('class');

  追加元素 Append

// jQuery 实现
$('.el').append($('<div/>')); // 原生JavaScript实现
document.querySelector('.el').appendChild(document.createElement('div'));

  复制、克隆元素

// jQuery 实现
var clonedEl = $('.el').clone(); // 原生JavaScript实现
var clonedEl = document.querySelector('.el').cloneNode(true);

  删除元素

// jQuery 实现
$('.el').remove(); // 原生JavaScript实现
remove('.el'); function remove(el) {
var toRemove = document.querySelector(el); toRemove.parentNode.removeChild(toRemove);
}

  父元素操作

// jQuery 实现
$('.el').parent(); // 原生JavaScript实现
document.querySelector('.el').parentNode;

  前一个/下一个/临近同辈元素

/ jQuery 实现
$('.el').prev();
$('.el').next(); // 原生JavaScript实现
document.querySelector('.el').previousElementSibling;
document.querySelector('.el').nextElementSibling;

  

XHR aka AJAX

新版的JavaScript API里提供了一个全新的可以实现ajax的API——fetch,这个api采用了全新的 Promise 架构,使用起来更方便,更灵活,详细用法请参考《你不需要jQuery(三):新AJAX方法fetch()》。

下面是传统的实现方式:

// jQuery 实现
$.get('url', function (data) { });
$.post('url', {data: data}, function (data) { }); // 原生JavaScript实现 // 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});

  不可否认,jQuery有时候是开发项目时必不可少的,但不同的项目,不同的场景,项目的技术架构,都需要做不同的考量,经过冷静的思考,我们就会发现,很多时候,我并不需要jQuery,使用原生JavaScript技术反而项目变得更精简、效率更高。

你不需要jQuery(五)的更多相关文章

  1. 从零开始学习jQuery (五) 事件与事件对象

    本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...

  2. jQuery五屏轮播手风琴切换代码

    jQuery五屏轮播手风琴切换代码 在线演示本地下载

  3. jQuery(五): Deferred

    jQuery(五): Deferred 有啥用 通常来说,js请求数据,无论是异步还是同步,都不会立即获取到结果,通常而言,我们一般是是使用回调函数再执行,而 deferred就是解决jQuery的回 ...

  4. jQuery(五)、筛选

    1 过滤 1.eq(index | -index) 获取第N个元素,index为元素索引,-index值基于最后一个元素的位置(从 1 开始) 2.first() 获取第一个元素 3.last() 获 ...

  5. 从零开始学习jQuery(转)

    本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...

  6. Jquery系列教程

    最近想重新温习下Jquery,发现园子里有个很棒的系列教材,所以Mark下来. 转载自:http://www.cnblogs.com/zhangziqiu/tag/jQuery%E6%95%99%E7 ...

  7. 从零开始学习jQuery

    转自:http://www.cnblogs.com/zhangziqiu/archive/2009/04/30/jQuery-Learn-1.html 本系列文章导航 从零开始学习jQuery (一) ...

  8. 【转】jQuery教程

    “jQuery风暴” 推荐及配套代码下载 ziqiu.zhang 2011-03-24 00:28 阅读:15339 评论:100   从零开始学习jQuery(剧场版) 你必须知道的javascri ...

  9. vue-cli引入jquery方法

    方法一: 一,在package.json里加入, dependencies:{ ”jquery“:”^2.3.4“ } 二,在webpack.base.conf.js里加入 const webpack ...

随机推荐

  1. JS中的原型继承和多重继承

    概念:1原型继承是创建新类型对象----子类型,子类型基于父类型,子类型拥有父类型所有的属性和方法(从父类型继承得到),然后修改其中的部分内容或者添加新的内容.继承最好在子类型模型可以被视为父类型对象 ...

  2. PSP个人软件开发工具需求分析文档

    第一部分:前景与范围 1.业务需求 1.1 背景 在目前的软件项目开发过程中,进度计划总是非常不准确,经常出现延期,而且大多数都无法给出一个相对比较准确的延迟时间.即使使用用例包.用例的方式组织需求, ...

  3. iOS - 字典(NSDictionary)

    1. 字典类型的常用处理 //---------------不可变字典 //1.字典的创建 NSArray *array1 = [NSArray arrayWithObjects:@"zha ...

  4. 谈谈css中的before和after

    css中的伪元素before和after,其实有很多小的妙用. 一.基础用法 w3c中的基础用法:用来给元素的内容前面(对应:before)或者后面(对应:after)插入新内容. <p> ...

  5. [译]JavaScript检测浏览器前缀

    原文地址: Detect Vendor Prefix with JavaScript 不管浏览器私有前缀的现状如何,我们还是要与之为伴,并且有时候还需要利用它来做一些事情.这些前缀可以用于CSS(比如 ...

  6. 在Java中弹出位于其他类的由WindowsBuilder创建的JFrameApplicationWIndow

    我们一般在使用Java弹出窗体的时候,一般是使用Jdialog这个所谓的"对话框类".但是,如果你不是初学者或研究员,而会在使用Java进行swing项目的开发,那么你很可能用到一 ...

  7. android源码-安卓源码-Android源码下载-安卓游戏源码

    android源码   高仿精仿金山手机卫士应用源码V1.2 高仿精仿金山手机卫士应用源码,该应用的级别实现了金山卫士的级别功能了,可以说跟现实中我们使用的金山卫士应用的功能几乎差不 人气:9286  ...

  8. PHP 魔术方法 __isset __unset (三)

    慢慢长寻夜,明月高空挂 __isset()  - 在对类中属性或者非类中属性使用isset()方法的时候如果没有或者非公有属性,则自动执行__isset()的方法 __unset() - 在对类中属性 ...

  9. Check Big/Little Endian

    Little endian:Low memory address stores low byte value.(eg.  short int 0x2211   0xbfd05c0e->0x11 ...

  10. dtcms,header显示头像和用户名,QQ互联老不通过的解决方法

    http://bbs.dtsoft.net/forum.php?mod=viewthread&tid=1742&extra=page%3D1