你不需要jQuery(五)
什么不用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(五)的更多相关文章
- 从零开始学习jQuery (五) 事件与事件对象
本系列文章导航 从零开始学习jQuery (五) 事件与事件对象 一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解 ...
- jQuery五屏轮播手风琴切换代码
jQuery五屏轮播手风琴切换代码 在线演示本地下载
- jQuery(五): Deferred
jQuery(五): Deferred 有啥用 通常来说,js请求数据,无论是异步还是同步,都不会立即获取到结果,通常而言,我们一般是是使用回调函数再执行,而 deferred就是解决jQuery的回 ...
- jQuery(五)、筛选
1 过滤 1.eq(index | -index) 获取第N个元素,index为元素索引,-index值基于最后一个元素的位置(从 1 开始) 2.first() 获取第一个元素 3.last() 获 ...
- 从零开始学习jQuery(转)
本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...
- Jquery系列教程
最近想重新温习下Jquery,发现园子里有个很棒的系列教材,所以Mark下来. 转载自:http://www.cnblogs.com/zhangziqiu/tag/jQuery%E6%95%99%E7 ...
- 从零开始学习jQuery
转自:http://www.cnblogs.com/zhangziqiu/archive/2009/04/30/jQuery-Learn-1.html 本系列文章导航 从零开始学习jQuery (一) ...
- 【转】jQuery教程
“jQuery风暴” 推荐及配套代码下载 ziqiu.zhang 2011-03-24 00:28 阅读:15339 评论:100 从零开始学习jQuery(剧场版) 你必须知道的javascri ...
- vue-cli引入jquery方法
方法一: 一,在package.json里加入, dependencies:{ ”jquery“:”^2.3.4“ } 二,在webpack.base.conf.js里加入 const webpack ...
随机推荐
- EasyUI的datagrid获取所有正在编辑状态的行的行编号
今天项目需要用了下EasyUI的datagrid的行编辑功能,跟着API来,只要是将各种状态时的处理逻辑弄好,还是蛮不错的. 开发过程中,遇到了个问题,在编辑完成后我需要获取datagrid所有处于编 ...
- http协议的总结说明
关于http协议已经有很多大牛们的讨论,从他们的文章中获益匪浅,作为一个通信专业的学生,还是想从计算机网络的角度谈一下自己的认识.http协议全称超文本传输协议,是一种允许将超文本标记语言(HTML) ...
- Javascript之响应式相册
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- 169. Majority Element My Submissions Question
Total Accepted: 95925 Total Submissions: 239241 Difficulty: Easy Given an array of size n, find the ...
- mouseover,mouseout,mouseenter,mouseleave的区别
相信做前端开发的都听说过“冒泡型事件”吧,<JavaScript高级程序设计>第九章有详细的讲述,但是,在学习的时候一知半解,也没详细去理解,导致最近在工作中碰到了问题:有许多 li 标签 ...
- 返璞归真vc++之感言
本人自述,大专学历,感觉自己也属于好学型学生,历任班上学习委员3年有余,参与学校项目几多个,不知道不觉从11年毕业已有3个年头,3年来,不敢苟同自己的生活方式,奈何人生无奈..从刚开始的电子商务公司转 ...
- ubuntu windows 双系统 磁盘乱搞 grub 导致 error:no such partition grub rescue>
乱搞分区磁盘什么的导致开机和这位仁兄一样:http://zhidao.baidu.com/question/495602654256708364.html?ssid=0&from=100187 ...
- java学习笔记_GUI(4)
import javax.swing.*; import java.awt.event.*; import java.awt.*; class MyPanel_0 extends JPanel { p ...
- 对.Net WebSocket 和Socket的原理的思考
今早上班路上接到了一个朋友的微信信息,问我对WebSocket 是否熟悉,一楞,印象之中没有用过这个类....来到公司后,得空问了一下度娘,原来这是一个随着HTML5推出的一种新协议,意义在于能实现浏 ...
- Linux下面对于VIM编辑器的代码折叠使用与screen
VIM设置代码折叠 1. 折叠方式 可用选项 'foldmethod' 来设定折叠方式:set fdm=*****.有 6 种方法来选定折叠: manual 手工 ...