`
lishumingwm163.com
  • 浏览: 337690 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

原生js

    博客分类:
  • js
 
阅读更多

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实现相同操作的等价代码。

选择元素

Javascript代码
  1. // jQuery  
  2. var els = $('.el');  
  3.   
  4. // 原生方法  
  5. var els = document.querySelectorAll('.el');  
  6.   
  7. // 函数法  
  8. var $ = function (el) {  
  9.   return document.querySelectorAll(el);  
  10. }  
  11.   
  12. var els = $('.el');  
  13.   
  14. // 或者使用regex-based micro-selector库,地址:http://jsperf.com/micro-selector-libraries  



创建元素

Javascript代码
  1. // jQuery  
  2. var newEl = $('<div/>');  
  3.   
  4. // 原生方法  
  5. var newEl = document.createElement('div');  



添加事件监听器

Javascript代码
  1. // jQuery  
  2. $('.el').on('event'function() {  
  3.   
  4. });  
  5.   
  6. // 原生方法  
  7. [].forEach.call(document.querySelectorAll('.el'), function (el) {  
  8.   el.addEventListener('event'function() {  
  9.   
  10.   }, false);  
  11. });  



设置/获取属性

Javascript代码
  1. // jQuery  
  2. $('.el').filter(':first').attr('key''value');  
  3. $('.el').filter(':first').attr('key');  
  4.   
  5. // 原生方法  
  6. document.querySelector('.el').setAttribute('key''value');  
  7. document.querySelector('.el').getAttribute('key');  



添加/移除/切换类

Javascript代码
  1. // jQuery  
  2. $('.el').addClass('class');  
  3. $('.el').removeClass('class');  
  4. $('.el').toggleClass('class');  
  5.   
  6. // 原生方法  
  7. document.querySelector('.el').classList.add('class');  
  8. document.querySelector('.el').classList.remove('class');  
  9. document.querySelector('.el').classList.toggle('class');  



附加内容(Append)

Javascript代码
  1. // jQuery  
  2. $('.el').append($('<div/>'));  
  3.   
  4. // 原生方法  
  5. document.querySelector('.el').appendChild(document.createElement('div'));  



克隆元素

Javascript代码
  1. // jQuery  
  2. var clonedEl = $('.el').clone();  
  3.   
  4. // 原生方法  
  5. var clonedEl = document.querySelector('.el').cloneNode(true);  



移除元素

Javascript代码
  1. // jQuery  
  2. $('.el').remove();  
  3.   
  4. // 原生方法  
  5. remove('.el');  
  6.   
  7. function remove(el) {  
  8.   var toRemove = document.querySelector(el);  
  9.   
  10.   toRemove.parentNode.removeChild(toRemove);  
  11. }  



获取父元素

Javascript代码
  1. // jQuery  
  2. $('.el').parent();  
  3.   
  4. // 原生方法  
  5. document.querySelector('.el').parentNode;  



上一个/下一个元素

Javascript代码
  1. // jQuery  
  2. $('.el').prev();  
  3. $('.el').next();  
  4.   
  5. // 原生方法  
  6. document.querySelector('.el').previousElementSibling;  
  7. document.querySelector('.el').nextElementSibling;  



XHR或AJAX

Javascript代码
  1. // jQuery  
  2. $.get('url'function (data) {  
  3.   
  4. });  
  5. $.post('url', {data: data}, function (data) {  
  6.   
  7. });  
  8.   
  9. // 原生方法  
  10. // get  
  11. var xhr = new XMLHttpRequest();  
  12.   
  13. xhr.open('GET', url);  
  14. xhr.onreadystatechange = function (data) {  
  15.   
  16. }  
  17. xhr.send();  
  18.   
  19. // post  
  20. var xhr = new XMLHttpRequest()  
  21.   
  22. xhr.open('POST', url);  
  23. xhr.onreadystatechange = function (data) {  
  24.   
  25. }  
  26. xhr.send({data: data});  



以上这些只是很少一部分,你可以在浏览器的控制台中找到更多东西,或者可以参考MDN的JS API reference或者WPD的DOM文档

你也可以使用其他非常轻量级的库代替,比如http://microjs.com/列出的一些库,根据你的需求选择最合适的库,但首先要清楚,除非是不使用库无法实现某项功能,否则还是使用原生JavaScript。

分享到:
评论
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    50款原生js案例(绝美整合)

    这个“50款原生js案例(绝美整合)”集合了作者半年的辛勤整理,包含了各种JavaScript插件和效果,旨在帮助开发者们提升技能,找到灵感。下面我们将深入探讨这些标签所代表的知识点,并对每个部分进行详细的阐述。 ...

    原生js生成二维码(完美可用)

    总结,这款“原生js生成二维码(完美可用)”的工具对于开发人员来说是一个实用的资源,无论是快速原型开发还是生产环境部署,都能提供便捷的二维码生成功能。它的独立性、易用性和灵活性使其成为开发中的理想选择。...

    原生JS写的包含农历的日历

    下面将详细介绍如何用原生JS编写农历日历以及涉及的相关知识点。 首先,我们需要理解农历的基础知识。农历,又称阴历,是根据月亮的盈亏周期来制定的,一个月通常为29.53天。一年有12个月,但为了与回归年(阳历)...

    原生JS经典小项目-DOM练习

    在本项目"原生JS经典小项目-DOM练习"中,我们将深入探讨JavaScript与DOM(文档对象模型)的交互,这是Web开发中的核心技能。DOM是HTML和XML文档的编程接口,它允许我们通过JavaScript来查找、修改和操作页面元素。在...

    原生JS实现HTML- TABLE 自动行合并插件

    该类以纯原生JS编写,无需引入任何第三方库。 调用方法:new MergeRow(['col1','col2','col3'],data).renderTbl('td001'); 详情说明请见 mergerow.js 中的注释说明。 mergerow.html为具体事例。

    原生js写的弹窗效果(alert效果)

    总结起来,创建原生JS弹窗效果涉及HTML布局、CSS样式和JavaScript逻辑,同时需要考虑浏览器兼容性,确保在不同的环境下都能正常工作。通过这样的方式,开发者可以根据实际需求定制弹窗的样式和功能,提高用户体验。

    原生JavaScript飞机大战

    原生JS是指不依赖任何外部库或框架,直接使用JavaScript语言进行编程。这使得开发者能够更深入地理解JavaScript的核心机制,包括DOM操作、事件处理、定时器、对象和数组等基础知识。 在“飞机大战”游戏中,积分...

    原生JS前端框架SYSUI后台管理系统页面基本事例级文档详细配置说明+多种插件

    使用原生JS代码开发一个前端框架,框架名称SYSUI,纯原生js开发,不使用任何第三方库。SYSUI本身支持网站模板界面编辑开发,也支持配置后台系统界面,是个多用途的框架。 使用SYSUI开发一个后台管理系统界面,支持...

    简单原生js文字向上滚动消息框代码

    这个"简单原生js文字向上滚动消息框代码"提供了一种实现方式,它不依赖于任何JavaScript库如jQuery,而是完全基于原生JavaScript编写,这使得它在性能和加载速度上具有优势。 首先,`index.html`是网页的主文件,它...

    原生js实现扫雷小游戏

    【原生JS实现扫雷小游戏】是一篇关于利用JavaScript编程语言设计并实现经典电脑游戏“扫雷”的技术文章。在JavaScript的世界里,开发者可以利用HTML和CSS构建游戏界面,然后用JavaScript来处理游戏逻辑和交互。这篇...

    原生js实现无限目录树.zip

    在压缩包内的“原生js实现无限目录树”文件中,我们可以找到相关的代码实现和示例,进一步学习和理解如何用原生JavaScript实现这两种无限目录树加载方式。通过研究这些代码,开发者可以掌握构建高效、交互友好的目录...

    仿华为官网纯原生JS+Css编写,无jquery

    【标题】"仿华为官网纯原生JS+Css编写,无jquery"的项目是一个实践性的技术展示,旨在通过原生JavaScript和CSS实现华为官方网站的部分功能和界面效果,不依赖jQuery等流行的JavaScript库。这个项目的核心目标是提升...

    Three.JS+原生JS+jQuery实现3D机房

    总的来说,"Three.JS+原生JS+jQuery实现3D机房"项目展示了WebGL和JavaScript在构建交互式3D应用中的强大能力。开发者可以利用这些工具和技术,创造出各种具有实际业务功能的3D可视化场景。无论是对于展示数据中心的...

    网易严选【原生JS】.zip

    【原生JS】.zip 文件包含了关于使用原生JavaScript开发的网易严选相关技术细节,主要聚焦于JavaScript语言的核心概念和应用。JavaScript是一种广泛应用于Web开发的脚本语言,尤其在网页交互、动态内容更新以及前后端...

    原生JS制作爱心表白代码

    总的来说,原生JS制作爱心表白代码是一个有趣的练习,它涵盖了前端开发的核心技术,包括HTML结构、CSS样式和JavaScript交互。通过这个项目,开发者不仅可以学习到基本的前端知识,还能提升对动画效果和用户体验的...

    原生js操作dom实现上下左右移动.docx

    "原生js操作dom实现上下左右移动" 本文将详细讲解如何使用原生JavaScript操作DOM实现上下左右移动的功能。首先,我们需要了解什么是DOM,以及如何使用JavaScript来操作DOM。 DOM(Document Object Model,文档对象...

    原生js input表单城市选择器代码

    这里我们利用原生JS实现城市数据的管理,包括加载、搜索和显示。城市数据通常以JSON格式存储,包含省、市、区的信息。我们可以创建一个对象或者数组来保存这些数据,并提供一个函数用于按拼音或关键词进行搜索。搜索...

    原生JS动画框架,带图片旋转功能

    总之,原生JS动画框架,尤其是带有图片旋转功能的实现,是一个技术含量较高的项目,涉及到JavaScript基础、CSS3变换、浏览器兼容性和性能优化等多个方面。通过理解和应用这样的框架,开发者可以创建出更具互动性和...

    原生js省市三级联动

    在开发Web应用时,"原生js省市三级联动"是一个常见的功能需求,尤其在电商网站的用户收货地址填写页面中。这个功能主要是通过JavaScript实现省份、城市、区县(或街道)三个级别的下拉菜单联动,用户选择一个省份后...

    原生js代码轮播图.zip

    本资源"原生js代码轮播图.zip"提供了一个使用纯JavaScript实现的轮播图示例,对于学习和理解原生JS编程技巧,特别是DOM操作和事件处理,是非常有价值的。 首先,我们要了解轮播图的基本结构和功能。一个基本的轮播...

Global site tag (gtag.js) - Google Analytics