放弃jQuery，使用原生js吧！

2023-08-27 13:17:22

转自：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

 $('.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+$/;

    return this.replace(reExtraSpace, "$1")

}

/***扩展一下***/

//去除左边空格

String.prototype.ltrim = function() {

    return this.replace( /^(\s*|　*)/, "");

}

//去除右边空格

String.prototype.rtrim = function() {

    return this.replace( /(\s*|　*)$/, "");

}

//替换全部

String.prototype.replaceAll = function(s1, s2) {

    return this.replace(new RegExp(s1, "gm"), s2)

}

//去除所有空格，需要配合上面的替换全部

String.prototype.trimAll = function() {

    var reExtraSpace = /\s*(.*?)\s+/;

    return this.replaceAll(reExtraSpace, "$1")

}

JQuery

$.cookie('cookie'); // 读取 cookie

$.cookie('cookie', 'value'); // 存储 cookie

$.cookie('cookie', 'value', { expires: 7 }); // 存储一个带7天期限的 cookie

$.cookie('cookie', '', { expires: -1 }); // 删除 cookie

原生js

原生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);

码农公寓

相关文章