使用JavaScript原生API替换Jquery
来源:互联网 发布:python实现朴素贝叶斯 编辑:程序博客网 时间:2024/04/29 10:25
Query目前已经成为最流行的JavaScript库,它可以让开发者“write less, do more(写得更少,做得更多)”,这也是它的核心理念。通过它,用户可以更方便地处理HTML documents、events,更轻松地实现动画效果、AJAX交互等。
尽管jQuery帮助开发者节省了大量的工作,但是并不是所有的产品都适合使用jQuery。jQuery 2.0.3版本有236KB,压缩版也有81KB,这意味着你的Web产品需要额外的加载时间和带宽,而在移动设备上则需要更多。
如果你的产品中只有少量的前端效果或DOM操作,那么完全可以抛弃臃肿的jQuery,转而使用JavaScript原生API来实现。
以下是jQuery和JavaScript实现相同操作的等价代码。
选择元素
创建元素
添加事件监听器
设置/获取属性
添加/移除/切换类
附加内容(Append)
克隆元素
移除元素
获取父元素
上一个/下一个元素
XHR或AJAX
以上这些只是很少一部分,你可以在浏览器的控制台中找到更多东西,或者可以参考MDN的JS API reference或者WPD的DOM文档。
你也可以使用其他非常轻量级的库代替,比如http://microjs.com/列出的一些库,根据你的需求选择最合适的库,但首先要清楚,除非是不使用库无法实现某项功能,否则还是使用原生JavaScript。
英文原文:How to forget about jQuery and start using native JavaScript APIs
尽管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。
英文原文:How to forget about jQuery and start using native JavaScript APIs
0 0
- 使用JavaScript原生API替换Jquery
- 使用原生js替换jQuery
- 如何忘却jQuery,开始使用JavaScript原生API
- 如何忘却jQuery,开始使用JavaScript原生API
- 如何忘却jQuery,开始使用JavaScript原生API
- 如何忘却jQuery,开始使用JavaScript原生API
- 如何忘却jQuery,开始使用JavaScript原生API
- 如何忘却jQuery,开始使用JavaScript原生API
- jQuery与JavaScript原生API举例
- 【JavaScript&JQuery】原生API实现li标签随机排列
- jQuery与JavaScript 原生DOM API()用哪个好?
- 你可能不需要 jQuery!使用原生 JavaScript 进行开发
- 使用原生的JavaScript代替jQuery的操作DOM
- 使用原生JavaScript实现jQuery的css选择器
- springmvc使用原生API
- 抛弃jQuery,拥抱原生JavaScript
- 抛弃jQuery,拥抱原生JavaScript
- 盘点JavaScript里好用的原生API
- iPhone开发入门系列1(iOS8+Swift版)天天打靶APP学习01-02
- Qt编程:删除非空文件夹
- 对于多个未知的的条件的sql语句的写法
- Java 重载、重写、多态
- 洛谷1056 排座椅
- 使用JavaScript原生API替换Jquery
- Java RandomAccessFile用法
- 详细介绍Linux shell脚本基础学习(八)
- 百度地图转型020,当虚拟照进现实
- LeetCode(96) Unique Binary Search Trees
- VC++自定义消息处理函数2
- 设计模式
- SAPUI5 table formatter
- 华为OJ刷题(一)计算字符串最后一个单词的长度