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。
相关推荐
这个“50款原生js案例(绝美整合)”集合了作者半年的辛勤整理,包含了各种JavaScript插件和效果,旨在帮助开发者们提升技能,找到灵感。下面我们将深入探讨这些标签所代表的知识点,并对每个部分进行详细的阐述。 ...
总结,这款“原生js生成二维码(完美可用)”的工具对于开发人员来说是一个实用的资源,无论是快速原型开发还是生产环境部署,都能提供便捷的二维码生成功能。它的独立性、易用性和灵活性使其成为开发中的理想选择。...
下面将详细介绍如何用原生JS编写农历日历以及涉及的相关知识点。 首先,我们需要理解农历的基础知识。农历,又称阴历,是根据月亮的盈亏周期来制定的,一个月通常为29.53天。一年有12个月,但为了与回归年(阳历)...
在本项目"原生JS经典小项目-DOM练习"中,我们将深入探讨JavaScript与DOM(文档对象模型)的交互,这是Web开发中的核心技能。DOM是HTML和XML文档的编程接口,它允许我们通过JavaScript来查找、修改和操作页面元素。在...
该类以纯原生JS编写,无需引入任何第三方库。 调用方法:new MergeRow(['col1','col2','col3'],data).renderTbl('td001'); 详情说明请见 mergerow.js 中的注释说明。 mergerow.html为具体事例。
总结起来,创建原生JS弹窗效果涉及HTML布局、CSS样式和JavaScript逻辑,同时需要考虑浏览器兼容性,确保在不同的环境下都能正常工作。通过这样的方式,开发者可以根据实际需求定制弹窗的样式和功能,提高用户体验。
原生JS是指不依赖任何外部库或框架,直接使用JavaScript语言进行编程。这使得开发者能够更深入地理解JavaScript的核心机制,包括DOM操作、事件处理、定时器、对象和数组等基础知识。 在“飞机大战”游戏中,积分...
使用原生JS代码开发一个前端框架,框架名称SYSUI,纯原生js开发,不使用任何第三方库。SYSUI本身支持网站模板界面编辑开发,也支持配置后台系统界面,是个多用途的框架。 使用SYSUI开发一个后台管理系统界面,支持...
这个"简单原生js文字向上滚动消息框代码"提供了一种实现方式,它不依赖于任何JavaScript库如jQuery,而是完全基于原生JavaScript编写,这使得它在性能和加载速度上具有优势。 首先,`index.html`是网页的主文件,它...
【原生JS实现扫雷小游戏】是一篇关于利用JavaScript编程语言设计并实现经典电脑游戏“扫雷”的技术文章。在JavaScript的世界里,开发者可以利用HTML和CSS构建游戏界面,然后用JavaScript来处理游戏逻辑和交互。这篇...
在压缩包内的“原生js实现无限目录树”文件中,我们可以找到相关的代码实现和示例,进一步学习和理解如何用原生JavaScript实现这两种无限目录树加载方式。通过研究这些代码,开发者可以掌握构建高效、交互友好的目录...
【标题】"仿华为官网纯原生JS+Css编写,无jquery"的项目是一个实践性的技术展示,旨在通过原生JavaScript和CSS实现华为官方网站的部分功能和界面效果,不依赖jQuery等流行的JavaScript库。这个项目的核心目标是提升...
总的来说,"Three.JS+原生JS+jQuery实现3D机房"项目展示了WebGL和JavaScript在构建交互式3D应用中的强大能力。开发者可以利用这些工具和技术,创造出各种具有实际业务功能的3D可视化场景。无论是对于展示数据中心的...
【原生JS】.zip 文件包含了关于使用原生JavaScript开发的网易严选相关技术细节,主要聚焦于JavaScript语言的核心概念和应用。JavaScript是一种广泛应用于Web开发的脚本语言,尤其在网页交互、动态内容更新以及前后端...
总的来说,原生JS制作爱心表白代码是一个有趣的练习,它涵盖了前端开发的核心技术,包括HTML结构、CSS样式和JavaScript交互。通过这个项目,开发者不仅可以学习到基本的前端知识,还能提升对动画效果和用户体验的...
"原生js操作dom实现上下左右移动" 本文将详细讲解如何使用原生JavaScript操作DOM实现上下左右移动的功能。首先,我们需要了解什么是DOM,以及如何使用JavaScript来操作DOM。 DOM(Document Object Model,文档对象...
这里我们利用原生JS实现城市数据的管理,包括加载、搜索和显示。城市数据通常以JSON格式存储,包含省、市、区的信息。我们可以创建一个对象或者数组来保存这些数据,并提供一个函数用于按拼音或关键词进行搜索。搜索...
总之,原生JS动画框架,尤其是带有图片旋转功能的实现,是一个技术含量较高的项目,涉及到JavaScript基础、CSS3变换、浏览器兼容性和性能优化等多个方面。通过理解和应用这样的框架,开发者可以创建出更具互动性和...
在开发Web应用时,"原生js省市三级联动"是一个常见的功能需求,尤其在电商网站的用户收货地址填写页面中。这个功能主要是通过JavaScript实现省份、城市、区县(或街道)三个级别的下拉菜单联动,用户选择一个省份后...
本资源"原生js代码轮播图.zip"提供了一个使用纯JavaScript实现的轮播图示例,对于学习和理解原生JS编程技巧,特别是DOM操作和事件处理,是非常有价值的。 首先,我们要了解轮播图的基本结构和功能。一个基本的轮播...