jQuery? 回归JavaScript原生API
2015-12-13 19:31
561 查看
如今技术日新月异,各类框架库也是层次不穷。即便当年漫山红遍的JQuery(让开发者
原文首链:http://www.jeffjade.com/2015/11/25/2015-11-31-jQuery-vs-javaScript/
在jQuery的温柔乡里,是否还能记得原生她javascript原生?如果仅为使用个选择器($)或者类似的东西,是否真的有必要加载jQuery?故此了解下JS常用原生写法还是蛮有必要的。
[update-2015-12-07]有看到抛弃jQuery,拥抱原生JavaScript一文中提到,jQuery 代表着传统的以 DOM 为中心的开发模式,但现在复杂页面开发流行的是以 React 为代表的以数据/状态为中心的开发模式; React、Angular、Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少。
Talk is cheap. Show me the code.直接看代码;以下是jQuery和JavaScript实现相同操作的等价代码:
原生-DOM绑定事件-优化1参考HERE
原生-DOM绑定事件-优化2
参考文章:http://www.iteye.com/news/28503
英文原文:http://blog.romanliutikov.com/post/63383858003/how-to-forget-about-jquery-and-start-using-native
write less, do more,So Perfect!!)如今也有
被替代的大势。但JS原生API写法依旧;并且有时候只不过小写一个Demo,或者产品中只有少量的前端效果或DOM操作,就去花时间&空间引入jQuery,或者React?不免有取宰牛之刀以杀鸡之嫌。
原文首链:http://www.jeffjade.com/2015/11/25/2015-11-31-jQuery-vs-javaScript/
在jQuery的温柔乡里,是否还能记得原生她javascript原生?如果仅为使用个选择器($)或者类似的东西,是否真的有必要加载jQuery?故此了解下JS常用原生写法还是蛮有必要的。
[update-2015-12-07]有看到抛弃jQuery,拥抱原生JavaScript一文中提到,jQuery 代表着传统的以 DOM 为中心的开发模式,但现在复杂页面开发流行的是以 React 为代表的以数据/状态为中心的开发模式; React、Angular、Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少。
Talk is cheap. Show me the code.直接看代码;以下是jQuery和JavaScript实现相同操作的等价代码:
选择元素
// jQuery var els = $('.el'); //==========================================================// // 原生方法 var els = document.querySelectorAll('.el'); // 函数法 var $ = function (el) { return document.querySelectorAll(el); } var els = $('.el');
创建元素
// jQuery var newEl = $('<div/>'); //==========================================================// // 原生方法 var newEl = document.createElement('div');
添加/移除/切换类
// 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');
判断是否包含类
// jQuery $('.el').hasClass('className'); $('.el').has('.className'); //也可以用来 判断是否包含某个元素 //==========================================================// // 原生方法(1) _hasClass(document.querySelector('.el'), className); function _hasClass( elements,cName ){ return !!elements.className.match( new RegExp( "(\\s|^)" + cName + "(\\s|$)") ); }; // 原生方法(2) if(el.classList.contains("someClass")){}
添加事件监听器
// jQuery $('.el').on('event', function() { }); //==========================================================// // 原生方法 [].forEach.call(document.querySelectorAll('.el'), function (el) { el.addEventListener('event', function() { }, false); });
原生-DOM绑定事件-优化1参考HERE
//DOM绑定事件-之自执行 var BindEvent = (function () { if ('addEventListener' in document) { return function (dom, event, handle, ex) { dom.addEventListener(event, handle, ex || false); } } else if ('attachEvent' in document) { return function (dom, event, handle) { dom.attachEvent('on' + event, handle); } } else { return function (dom, event, handle) { dom['on' + event] = handle; } } })();
原生-DOM绑定事件-优化2
//DOM绑定事件-之惰性加载(调用方去触发BindEvent之时才去做初始化)// var BindEvent = function (dom, event, handle, ex) { if ('addEventListener' in document) { BindEvent = function (dom, event, handle, ex) { dom.addEventListener(event, handle, ex || false); } } else if ('attachEvent' in document) { BindEvent = function (dom, event, handle) { dom.attachEvent('on' + event, handle); } } else { BindEvent = function (dom, event, handle) { dom['on' + event] = handle; } } BindEvent(dom, event, handle, ex); };
设置/获取属性
// jQuery $('.el').filter(':first').attr('key', 'value'); $('.el').filter(':first').attr('key'); //==========================================================// // 原生方法 document.querySelector('.el').setAttribute('key', 'value'); document.querySelector('.el').getAttribute('key');
附加内容(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;
修改CSS属性
总是通过Javascript修改和检索CSS属性,这样会比使用jQuery CSS函数更加简单快速,并且没有任何不必要的代码。//----设置CSS属性---- /* jQuery */ $(el).css({ background: "#FF0000", "box-shadow": "1px 1px 5px 5px red", width: "100px", height: "100px", display: "block" }); //==========================================================// /* 原生 */ var el = document.querySelector(".main-content"); el.style.background = "#FF0000"; el.style.width = "100px"; el.style.height = "100px"; el.style.display = "block"; el.style.boxShadow = "1px 1px 5px 5px red";
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});
参考文章:http://www.iteye.com/news/28503
英文原文:http://blog.romanliutikov.com/post/63383858003/how-to-forget-about-jquery-and-start-using-native
相关文章推荐
- jquery特效(8)—倒计时
- 日期选择器:jquery datepicker的使用
- 使用jQuery播放/暂停 HTML5视频
- jquery特效(7)—弹出遮罩层且内容居中
- 表格排序——jQuery插件tablesorter的使用
- jQuery动画入门--顺序执行
- 大爱jQuery,10美女模特有用jQuery/CSS3插入(集成点免费下载)
- jquery 获取元素索引值index()方法
- jQuery操作cookie
- jquery中toggle() 方法
- JQuery中的AJAX
- JQuery中的动画效果
- jquery复选框 选中事件 及其判断是否被选中
- jQuery常用的查找Dom元素方法
- CSS设计表格(中)--jQuery实现删除指定行
- JQuery中的DOM操作
- JQuery基础
- JQuery 如何选择带有多个class的元素
- #学习笔记#(14)select隐藏右侧三角&鼠标移入展开-jQuery
- JQuery中$.ajax()方法参数详解