WEB笔记

iTakeo

放弃jQuery,使用原生js吧!

随着IE6、7、8的逐渐淘汰,HTML5的兴起,以及侧重点放在了移动端,jQuery可能变的不在那么重要,原生一样很好用。下面介绍几个原生替换jq的方法。

获取元素

JQuery

  1. $(‘.xxx’);  //class获取  
  2. $(‘#xxx’);  //id获取  
  3. $(‘.xxx.ccc’);  //同时包含xxx和ccc  
  4. $(‘.xxx,.zzz’); //多选  
  5. $(‘.xxx div’); //子类  
  6. $(‘.xxx p:first’); //第一个P元素  

原生js

  1. //querySelector基本上实现了jq选择器同样的功能,具体可以自己测试,另外querySelector返回的是第一个元素,querySelectorAll则返回所有选择的元素。  
  2. document.querySelector(‘.xxx’);  //class获取  
  3. document.querySelector(‘#xxx’);//id获取  
  4. document.querySelector(‘.xxx.ccc’);//同时包含xxx和ccc  
  5. document.querySelector(‘.xxx,.ccc’);//多选  
  6. document.querySelector(‘.xxx div’);//子类  
  7. document.querySelector(‘.xxx p:first-child’);//第一个P元素  


添加class

JQuery

  1. $(‘.xxx’).addClass(‘class_name’);  

原生js

  1. el.classList.add(‘class_name’);  

删除class

JQuery

  1. $(‘.xxx’).removeClass(‘class_name’);  

原生js

  1. el.classList.remove(‘class_name’);  

切换class

JQuery

  1. $(‘.xxx’).toggleClass(‘class_name’);  

原生js

  1. el.classList.toggle(‘class_name’);  

是否包含某个class

JQuery

  1. $(‘.xxx’).hasClass(‘class_name’);  

原生js

  1. el.classList.contains(‘class_name’);  

上面是HTML5提供的新的方法,如果你非要为了兼容所谓的IE,可以用下面的这些

  1. //是否包含class    
  2. function hasClass(o, n){  
  3.     return new RegExp(‘\\b’+n+’\\b’).test(o.className);  
  4. };  
  5. //添加class    
  6. function addClass(o, n){  
  7.     if(!hasClass(o, n)) o.className+=’ ‘+n;  
  8. };  
  9. //删除class    
  10. function delClass(o, n){  
  11.     if(hasClass(o, n)){  
  12.         o.className = o.className.replace(new RegExp(‘(?:^|\\s)’+n+'(?=\\s|$)’), ).replace(/^\s*|\s*$/g, );  
  13.     };  
  14. };  

插入HTML

JQuery

  1. $(el).before(htmlString);  
  2. $(parent).append(el);  
  3. $(el).after(htmlString);  

原生js

  1. parent.appendChild(el);  
  2. el.insertBefore(NewDom,ele);  
  1. ele.insertAdjacentHTML(“beforeend”, ‘<li>内容</li>’);    
  2. //具体insertAdjacentHTML的介绍,请移步到 这篇文章(点击这里)  

获取子节点

JQuery

  1. $(‘.xxx’).children();  

原生js

  1. ele.children;  

上一个节点

JQuery

  1. $(‘.xxx’).prev();  

原生js

  1. var prev = ele.previousElementSibling || ele.previousSibling   

下一个节点

JQuery

  1. $(‘.xxx’).next();  

原生js

  1. var next = ele.nextElementSibling || ele.nextSibling   

父节点

JQuery

  1. $(‘.xxx’).parent();  

原生js

  1. ele.parentNode  

上下节点

JQuery

  1. $(ele).siblings();  

原生js

  1. var siblings = Array.prototype.slice.call(el.parentNode.children);  
  2. for (var i = siblings.length; i–;) {  
  3.     if (siblings[i] === el) {  
  4.         siblings.splice(i, 1);  
  5.         break;  
  6.     };  
  7. };  
  1. ;[].forEach.call(el.parentNode.children, function(child){  
  2.     if(child !== el);  
  3. });  

循环节点

JQuery

  1. $(selector).each(function(i, el){  
  2.     //xxx  
  3. });  

原生js

  1. [].forEach.call(ele,function(el,i){  
  2.     //xxx  
  3. });  

克隆节点

JQuery

  1. $(‘.xxx’).clone(true);  

原生js

  1. ele.cloneNode(true)  

创建节点

JQuery

  1. var ele = $(‘<div></div>’);  

原生js

  1. var ele = document.createElement(‘div’);  

删除节点

JQuery

  1. $(ele).remove();  

原生js

  1. //父节点开始删除  
  2. parent.removeChild(ele);  

获取、设置、删除属性

JQuery

  1. $(ele).attr(name,value) //设置  
  2. $(ele).attr(name) //获取  
  3. $(ele).removeAttr(name) //删除  

原生js

  1. ele.setAttribute(name,value);//设置  
  2. ele.getAttribute(name);//获取  
  3. ele.removeAttribute(name);//删除  

Data属性

JQuery

  1. $(“body”).data(“foo”, 52);  //设置  
  2. $(“body”).data(“foo”);  //获取  
  3. $(“body”).removeData(“foo”);  //删除  

原生js

  1. ele.dataset.foo = 52  //设置  
  2. ele.dataset.foo  //获取  
  3.   
  4. //也可通过attribute方法来设置获取和删除  
  5. ele.setAttribute(‘data-foo’, 52);//设置  
  6. ele.getAttribute(‘data-foo’); //获取  
  7. ele.removeAttribute(‘data-foo’);//删除  

获取内容

JQuery

  1. var html = $(ele).html();  

原生js

  1. var html = ele.innerHTML;  

清空元素内容

JQuery

  1. $(el).empty();  

原生js

  1. el.innerHTML = ;  

获取文本

JQuery

  1. $(ele).text();  

原生js

  1. var txt = ele.textContent || ele.innerText  

设置css

JQuery

  1. $(ele).css(‘height’,’300px’);  
  2.   
  3. $(ele).css({  
  4.     height:300  
  5. });  

原生js

  1. ele.style.height = ‘300px';  
  2.   
  3. ele.style.cssText = ‘height:200px;color:red;left:100px;’  

获取css

JQuery

  1. $(obj).css(‘marginLeft’);  

原生js

  1. function getStyle(obj,attr){  
  2.     if(obj.currentStyle){  
  3.         return obj.currentStyle[attr];  
  4.     }else{  
  5.         return getComputedStyle(obj,null)[attr];  
  6.     };  
  7. };  

显示隐藏

JQuery

  1. $(el).show();  
  2. $(el).hide();  

原生js

  1. el.style.display = ;  
  2. el.style.display = ‘none';  

元素的高度(宽度同理)[height]

JQuery

  1. $(ele).height();  

原生js

  1. function height(el){      
  2.     var _height = el.clientHeight;      
  3.     var style = el.currentStyle || getComputedStyle(el);        
  4.     return _height – (parseInt(style.paddingTop) + parseInt(style.paddingBottom));      
  5. };   

元素的内高度(宽度同理)[height + padding]

JQuery

  1. $(ele).innerHeight();  

原生js

  1. ele.clientHeight;  

元素的外高度(宽度同理)[height + padding + border]

JQuery

  1. $(ele).outerHeight();  

原生js

  1. ele.offsetWidth;  

元素的外高度(宽度同理)[height + padding + border + margin]

JQuery

  1. $(ele).outerHeight(true);  

原生js

  1. function outerHeight(el){    
  2.     var style = el.currentStyle || getComputedStyle(el);    
  3.     var height = el.offsetHeight + parseInt(style.marginTop) + parseInt(style.marginBottom);    
  4.     return height;    
  5. };  

元素的位置

JQuery

  1. $(ele).position().left;  
  2. $(ele).position().top;  
  3.   
  4. $(ele).offset().left;  
  5. $(ele).offset().top;  

原生js

  1. ele.offsetLeft;  
  2. ele.offsetTop;  
  3.   
  4. function getposi(obj){    
  5.     var t = 0,l = 0;    
  6.     while(obj){    
  7.         t+=obj.offsetTop;    
  8.         l+=obj.offsetLeft;    
  9.         obj = obj.offsetParent;    
  10.     };    
  11.     return {top:t,left:l};    
  12. };  
  13. //getposi(ele).left  
  14. //getposi(ele).top  
  1. ele.getBoundingClientRect().top + window.pageYOffset;  
  2. ele.getBoundingClientRect().bottom + window.pageYOffset;  
  3. ele.getBoundingClientRect().left + window.pageYOffset;  
  4. ele.getBoundingClientRect().right + window.pageXOffset;  

Document Ready 事件

JQuery

  1. $(document).ready(function() {  
  2.     // Code  
  3. });  

原生js

  1. document.addEventListener(“DOMContentLoaded”function() {  
  2.     // Code  
  3. },false);  

Document load 事件

JQuery

  1. $(window).load(function() {  
  2.     // Code  
  3. });  

原生js

  1. document.addEventListener(“load”function() {  
  2.     // Code  
  3. },false);  

添加事件

JQuery

  1. $(document).click(function(){  
  2.     //xxx  
  3. });  

原生js

  1. document.onclick = function(){  
  2.         //XXX  
  3. };  

绑定事件

JQuery

  1. $(ele).on(‘click’,function(){  
  2.     //xxx  
  3. });  

原生js

  1. document.addEventListener(“click”function() {    
  2.         //xxx    
  3. },false);    
  4.   
  5. [].forEach.call(ele,function(o){  
  6.     o.addEventListener(“click”function() {    
  7.             //xxx    
  8.     },false);    
  9. });  

获取数据类型

JQuery

  1. $.type(obj);  

原生js

  1. function type(obj){  
  2.     return Object.prototype.toString.call(obj).replace(/^\[object (.+)\]$/, “$1″).toLowerCase();  
  3. };  

判断是否为数组

JQuery

  1. $.isArray(arr);  

原生js

  1. function isArray (v){  
  2.     return Object.prototype.toString.call(v) === ‘[object Array]';     
  3. };  

去除字符串两端的空格

JQuery

  1. $.trim(string);  

原生js

  1. //去除两端空格  
  2. String.prototype.trim = function() {  
  3.     var reExtraSpace = /^\s*(.*?)\s+$/;  
  4.     return this.replace(reExtraSpace, “$1″)  
  5. }  
  6. /***扩展一下***/  
  7. //去除左边空格  
  8. String.prototype.ltrim = function() {  
  9.     return this.replace( /^(\s*| *)/, “”);  
  10. }  
  11. //去除右边空格  
  12. String.prototype.rtrim = function() {  
  13.     return this.replace( /(\s*| *)$/, “”);  
  14. }  
  15. //替换全部  
  16. String.prototype.replaceAll = function(s1, s2) {  
  17.     return this.replace(new RegExp(s1, “gm”), s2)  
  18. }  
  19. //去除所有空格,需要配合上面的替换全部  
  20. String.prototype.trimAll = function() {  
  21.     var reExtraSpace = /\s*(.*?)\s+/;  
  22.     return this.replaceAll(reExtraSpace, “$1″)  
  23. }  

Cookie

JQuery

  1. $.cookie(‘cookie’); // 读取 cookie  
  2. $.cookie(‘cookie’, ‘value’); // 存储 cookie  
  3. $.cookie(‘cookie’, ‘value’, { expires: 7 }); // 存储一个带7天期限的 cookie  
  4. $.cookie(‘cookie’, , { expires: -1 }); // 删除 cookie  

原生js

  1. 原生js对cookie的操作,请移步之前的文章,点击打开

Ajax

JQuery

  1. $.ajax({  
  2.     type: ‘POST’,  
  3.     url: ‘/my/url’,  
  4.     data: data  
  5. });  

原生js

  1. var request = new XMLHttpRequest();  
  2. request.open(‘POST’, ‘/my/url’, true);  
  3. request.send(data);  

原生js实现ajax,可参见之前的一篇ajax基本封装,点击打开

至于jq的animate动画完全可以使用css3的动画来完成。你要是跟我说IE兼容,就当我没说!!

2015年7月28日 4 / /
标签:  暂无标签

评论回复

  1. 回复 111111111

    好腻害

  2. 回复 水果

    谢谢分享

  3. 回复 匿名

    谢谢

  4. 回复 warryy

    马克

9 + 6 =

回到顶部