首页 / JQUERY / 放弃jQuery，使用原生js吧！

放弃jQuery，使用原生js吧！

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了放弃jQuery，使用原生js吧！，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6834字，纯文字阅读大概需要10分钟。

内容图文

转自：http://itakeo.com/blog/2015/07/28/nojq/

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

获取元素

JQuery

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

 

原生js

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

 

添加class

JQuery

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

原生js

el.classList.add(‘class_name‘);

删除class

JQuery

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

原生js

el.classList.remove(‘class_name‘);

切换class

JQuery

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

原生js

el.classList.toggle(‘class_name‘);

是否包含某个class

JQuery

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

 

原生js

el.classList.contains(‘class_name‘);

 

 

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

                //
                是否包含class    
                function
                 hasClass(o, n){  
    
                return
                new RegExp(‘\\b‘+n+‘\\b‘).test(o.className);  
};  
//添加class    function addClass(o, n){  
    if(!hasClass(o, n)) o.className+=‘ ‘+n;  
};  
//删除class    function delClass(o, n){  
    if(hasClass(o, n)){  
        o.className = o.className.replace(new RegExp(‘(?:^|\\s)‘+n+‘(?=\\s|$)‘), ‘‘).replace(/^\s*|\s*$/g, ‘‘);  
    };  
};

 

插入HTML

JQuery

                $(el).before(htmlString);  
$(parent).append(el);  
$(el).after(htmlString);

 

原生js

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

 

 

获取子节点

JQuery

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

 

原生js

ele.children;

 

上一个节点

JQuery

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

 

原生js

                var prev = ele.previousElementSibling || ele.previousSibling

 

下一个节点

JQuery

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

 

原生js

                var next = ele.nextElementSibling || ele.nextSibling

 

父节点

JQuery

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

 

原生js

ele.parentNode

 

上下节点

JQuery

$(ele).siblings();

 

原生js

                var siblings = Array.prototype.slice.call(el.parentNode.children);  
for (var i = siblings.length; i--;) {  
    if (siblings[i] === el) {  
        siblings.splice(i, 1);  
        break;  
    };  
};  
;[].forEach.call(el.parentNode.children, function(child){  
    if(child !== el);  
});

 

 

循环节点

JQuery

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

 

原生js

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

 

克隆节点

JQuery

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

 

原生js

ele.cloneNode(true)

 

创建节点

JQuery

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

 

原生js

  

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

 

删除节点

JQuery

$(ele).remove();

 

原生js

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

获取、设置、删除属性

JQuery

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

 

原生js

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

 

Data属性

JQuery

$("body").data("foo", 52);  //设置  
$("body").data("foo");  //获取  
$("body").removeData("foo");  //删除

 

原生js

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

 

 

获取内容

JQuery

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

 

原生js

                var html = ele.innerHTML;

 

 

清空元素内容

JQuery

$(el).empty();

 

  

原生js

el.innerHTML = ‘‘;

 

获取文本

JQuery

$(ele).text();

 

原生js

                var txt = ele.textContent || ele.innerText

 

设置css

JQuery

$(ele).css(‘height‘,‘300px‘);  
  
$(ele).css({  
    height:300  
});

 

原生js

ele.style.height = ‘300px‘;  
  
ele.style.cssText = ‘height:200px;color:red;left:100px;‘

 

 

获取css

JQuery

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

 

原生js

                function
                 getStyle(obj,attr){  
    
                if
                (obj.currentStyle){  
        
                return
                 obj.currentStyle[attr];  
    }
                else
                {  
        
                return getComputedStyle(obj,null)[attr];  
    };  
};

 

显示隐藏

JQuery

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

 

 

原生js

el.style.display = ‘‘;  
el.style.display = ‘none‘;

 

元素的高度（宽度同理）[height]

JQuery

$(ele).height();

 

原生js

                function
                 height(el){      
    
                var _height = el.clientHeight;      
    var style = el.currentStyle || getComputedStyle(el);        
    return _height - (parseInt(style.paddingTop) + parseInt(style.paddingBottom));      
};

 

  

元素的内高度（宽度同理）[height + padding]

JQuery

$(ele).innerHeight();

 

原生js

ele.clientHeight;

 

元素的外高度（宽度同理）[height + padding + border]

JQuery

$(ele).outerHeight();

 

原生js

ele.offsetWidth;

 

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

JQuery

$(ele).outerHeight(true);

 

原生js

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

 

元素的位置

JQuery

                $(ele).position().left;  
$(ele).position().top;  
  
$(ele).offset().left;  
$(ele).offset().top;

 

原生js

                ele.offsetLeft;  
ele.offsetTop;  
  

                function
                 getposi(obj){    
    
                var t = 0,l = 0;    
    while(obj){    
        t+=obj.offsetTop;    
        l+=obj.offsetLeft;    
        obj = obj.offsetParent;    
    };    
    return {top:t,left:l};    
};  
//getposi(ele).left  
//getposi(ele).top  
ele.getBoundingClientRect().top + window.pageYOffset;  
ele.getBoundingClientRect().bottom + window.pageYOffset;  
ele.getBoundingClientRect().left + window.pageYOffset;  
ele.getBoundingClientRect().right + window.pageXOffset;

 

 

Document Ready 事件

JQuery

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

 

原生js

document.addEventListener("DOMContentLoaded", function() {  
    // Code  
},false);

 

Document load 事件

JQuery

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

 

原生js

document.addEventListener("load", function() {  
    // Code  
},false);

 

添加事件

JQuery

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

 

原生js

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

绑定事件

JQuery

$(ele).on(‘click‘,function(){  
    //xxx  
});

 

原生js

document.addEventListener("click", function() {    
        //xxx    
},false);    
  
[].forEach.call(ele,function(o){  
    o.addEventListener("click", function() {    
            //xxx    
    },false);    
});

 

获取数据类型

JQuery

$.type(obj);

 

原生js

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

 

 

判断是否为数组

JQuery

$.isArray(arr);

 

原生js

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

 

去除字符串两端的空格

JQuery

$.trim(string);

 

 

原生js

                //
                去除两端空格  
String.prototype.trim = function() {  
    var reExtraSpace = /^\s*(.*?)\s+$/;  
    returnthis.replace(reExtraSpace, "$1")  
}  
/***扩展一下***///去除左边空格  
String.prototype.ltrim = function() {  
    returnthis.replace( /^(\s*|　*)/, "");  
}  
//去除右边空格  
String.prototype.rtrim = function() {  
    returnthis.replace( /(\s*|　*)$/, "");  
}  
//替换全部  
String.prototype.replaceAll = function(s1, s2) {  
    returnthis.replace(new RegExp(s1, "gm"), s2)  
}  
//去除所有空格，需要配合上面的替换全部  
String.prototype.trimAll = function() {  
    var reExtraSpace = /\s*(.*?)\s+/;  
    returnthis.replaceAll(reExtraSpace, "$1")  
}

 

Cookie

JQuery

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

 

原生js

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

Ajax

JQuery

                $.ajax({  
    type: ‘POST‘,  
    url: ‘/my/url‘,  
    data: data  
});

 

原生js

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

 

原文：http://www.cnblogs.com/qianduanjingying/p/5432969.html

内容总结

以上是互联网集市为您收集整理的放弃jQuery，使用原生js吧！全部内容，希望文章能够帮你解决放弃jQuery，使用原生js吧！所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/1234771.html

来源：【匿名】