放棄jQuery, 使用原生js

ixiaodai發表於2019-02-16
jQueryJS

隨著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();
$(`.xxx`).parent();

//原生js
ele.children;
ele.parentNode

上一個節點

//JQuery
$(`.xxx`).prev();

//原生js
var prev = ele.previousElementSibling || ele.previousSibling

下一個節點

//JQuery
$(`.xxx`).next();

//原生js
var next = ele.nextElementSibling || ele.nextSibling

上下節點

//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
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  //獲取

獲取內容/清空內容

//JQuery
var html = $(ele).html();
$(el).empty();

//原生js
var html = ele.innerHTML;
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;`

顯示隱藏

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

//原生js
el.style.display = ``;  
el.style.display = `none`;

元素的內高度[height + padding]/元素的外高度[height + padding + border]

//JQuery
$(ele).innerHeight();
$(ele).outerHeight();

//原生js
ele.clientHeight;
ele.offsetHeight;

元素的位置

//JQuery
$(ele).offset().left;  
$(ele).offset().top;

//原生js
ele.offsetLeft;  
ele.offsetTop;

相關文章