摘要：毫無疑問，是一款非常優秀的庫，它讓我們開發項目變得更加便捷容易。不過，當你準備在一個項目特別是移動項目中使用時，你真的該好好思考一下，你會用到的哪些功能，是否真的需要。

毫無疑問，JQuery是一款非常優秀的JavaScript庫，它讓我們開發項目變得更加便捷容易。

不過，當你準備在一個項目（特別是移動項目）中使用JQuery時，你真的該好好思考一下，你會用到JQuery的哪些功能，是否真的需要jQuery。因為隨著JavaScript的不斷改善進化，現在它內置的功能已經非常強大，在很大程度上，已經可以實現以前需要在JQuery中才能實現的技術（如果你的項目需要在IE8之前的瀏覽器中使用，建議還是使用JQuery，這樣可以省卻很多兼容性問題）。

下面將列出一些可以使用JavaScript來實現JQuery功能的代碼：

1、查找搜索選擇器

按ID查找：

$("#test")  =>  document.getElementById("test");

按class類名查找：

$(".test")  =>  document.getElementsByClassName("test")

按標簽名查找：

$("div")  =>  document.getElementsByTagName("div")

當然，你也可以統一查找：

$("#test")

document.querySelector("#test")
$("#test div")  =>  document.querySelectorAll("#test div")
$("#test").find("span")  => document.querySelectorAll("#test span");

獲取單個元素：

$("#test div").eq(0)[0]  =>  document.querySelectorAll("#test div")[0] 

獲取HTML、head、body：

$("html")  =>  document.documentElement
$("head")  =>  document.head
$("body")  =>  document.body

判斷節點是否存在

$("#test").length > 0  =>  document.getElementById("test") !== null

$("div").length > 0  => document.querySelectorAll("div").length > 0

遍歷節點：

$("div").each(function(i, elem) {})

function forEach(elems, callback) {
  if([].forEach) {
    [].forEach.call(elems, callback);
  } else {
    for(var i = 0; i < elems.length; i++) {
      callback(elems[i], i);
    }
  }
}

var div = document.querySelectorAll("div");
forEach(div, function(elem, i){

});

清空節點

$("#test").empty()  =>  document.getElementById("test").innerHTML = "";

節點比較

$("div").is($("#test"))  =>  document.querySelector("div") === document.getElementById("test")

2、獲取/設置內容（值）

獲取/設置元素內的內容

$("div").html()  =>  document.querySelecotr("div").innerHTML

$("div").text()  =>  var t = document.querySelector("div");
t.textContent  || t.innerText;

$("div").html("abc");  =>  document.querySelecotr("div").innerHTML = "abc";

$("div;).text("abc")  =>  document.querySelecotr("div").textContent = "abc"

獲取包含元素本身的內容

$("
").append($("#test").clone()).html() => document.getElementById("test").outerHTML

$("
").append($("#test").clone()).html("abc") => document.getElementById("test").outerHTML = "abc" 

獲取表單值

$("input").val()  =>  document.querySelector("input").value

$("input").val("abc") => document.querySelector("input").value = "abc"

3、class類名操作

類名新增

$("#test").addClass("a")

function addClass(elem, className) {
  if(elem.classList) {
    elem.classList.add(className);
  } eles {
    elem.className += " " + className;
  }
}
addClass(document.getElementById("test"), "a");

類名刪除

$("#test").removeClass("a");

function removeClass(elem, className) {
  if(elem.classList) {
    elem.classList.remove(className);
  } else {
    elem.className = elem.className.replace(new RegExp("(^|)" + className.split(" ").join("|") + "(|$)", "gi"), " ");
  }
}

removeClass(document.getElementById("test"), "a");

類名包含：

$("#test").hasClass("a")

function hasClass(elem, className) {
  if(elem.classList) {
    return elem.classList.contains(className);
  } else {
    return new RegExp("(^| )" + className + "( |$)", "gi").test(elem.className);
  }
}
hasClass(document.getElementById("test"), "a");

4、節點操作

創建節點

$("
")  =>  document.createElement("div")

復制節點：

$("div").clone()  =>  document.querySelector("div").cloneNode(true)

插入節點：

$("div").append("")

var span = document.createElement("span");
document.querySelector("div").appendChild(span);

在指定節點之前插入新的子節點

$("").insertBefore("#test"); 

var t = document.getElementById("test");
var span = document.createElement("span");
t.parentNode.insertBefore(span, t);

/*更簡單的*/
t.insertAdjacentHTML("beforeBegin", "");

在指定節點后插入新的子節點：

$("").insertAfter("#test")

function insertAfter(elem, newNode){
  if(elem.nextElementSibling) {
    elem.parentNode.insertBefore(newNode, elem.nextElementSibling);
  } else {
    elem.parentNode.appendChild(newNode);
  }
}

var t = document.getElementById("test");   
var span = document.createElement("span");   
insertAfter(t, span);

/*更簡單的*/
t.insertAdjacentHTML("afterEnd", "");

獲取父節點

$("#test").parent()  =>  document.getElementById("test").parentNode

刪除節點

$("#test").remove()  

var t = document.getElementById("test");
t.parentNode.removeChild(t);

獲取Element子節點

$("#test").children()

function children(elem) {
  if(elem.children) {
    return elem.children;
  } else {
    var children = [];     
    for (var i = el.children.length; i--;) {       
        if (el.children[i].nodeType != 8)      
          children.unshift(el.children[i]);    
    }
    return children;
  }
}

children(document.getElementById("test"));

獲取下一個兄弟節點：

$("#test").next()

function nextElementSibling(elem) {
  if(elem.nextElementSibling) {
    return elem.nextElementSibling;
  } else {
    do { 
       elem = elem.nextSibling; 
    } while ( elem && elem.nodeType !== 1 );   
    return elem;
  }
}

nextElementSibling(document.getElementById("test"));

獲取上一個兄弟節點：

$("#test").prev()     

function previousElementSibling(elem) {    
  if(elem.previousElementSibling) {    
    return elem.previousElementSibling;    
  } else {    
    do {     
      elem = elem.previousSibling;     
    } while ( elem && elem.nodeType !== 1 );       
    return elem;    
  }   
}     

previousElementSibling(document.getElementById("test")); 

5、屬性操作

獲取屬性

$("#test").attr("class")  =>  document.getElementById("test").getAttribute("class")

刪除屬性

$("#test").removeAttr("class")  => document.getElementById("test").removeAttribute("class")

設置屬性

$("#test").attr("class", "abc")  =>  document.getElementById("test").setAttribute("class", "abc");

6、CSS樣式操作

設置樣式

$("#test").css("height", "10px"); => document.getElementById("test").style.height = "10px";

獲取樣式

$("#test").css("height") 

var getStyle = function(dom, attr) {   
  return dom.currentStyle ? dom.currentStyle[attr] : getComputedStyle(dom, false)[attr];  
};

getStyle(document.getElementById("test"), "height");

獲取偽類的CSS樣式

window.getComputedStyle(el , ":after")[attrName];

注：IE是不支持獲取偽類的

7、字符串操作

去除空格

$.trim(" abc ")  

function trim(str){
  if(str.trim) {
    return str.trim();
  } else {
    return str.replace(/^s+|s+$/g, "");
  }
}

trim(" abc ");

8、JSON操作

JSON序列化

$.stringify({name: "TG"})  =>  JSON.stringify({name: "TG"})

JSON反序列化

$.parseJSON("{ "name": "TG" }")  =>  JSON.parse("{ "name": "TG" }")

原文鏈接：不要過度依賴JQuery(一)

如有錯誤，歡迎指正！如有更好建議，歡迎留言！