選擇器
jQuery的核心之一就是能非常方便的取到DOM元素。我們只需輸入CSS選擇字串，便可以得到匹配的元素。但在大多數情況下，我們可以用簡單的原生程式碼達到同樣的效果。
.程式碼如下:
//----得到頁面的所有div---------
/* jQuery */
$("div")
/* 原生 */
document.getElementsByTagName("div")
//----得到所有指定class的元素---------
/* jQuery */
$(".my-class")
/* 原生 */
document.querySelectorAll(".my-class")
/* 更快的原生方法 */
document.getElementsByClassName("my-class")
//----通過CSS選擇得到元素----------
/* jQuery */
$(".my-class li:first-child")
/* 原生 */
document.querySelectorAll(".my-class li:first-child")
//----得到指定clsss的第一個元素----
/* jQuery */
$(".my-class").get(0)
/* 原生 */
document.querySelector(".my-class")
譯者注：其實這裡面是有些問題的，document.querySelectorAll和jQuery選擇器還是有區別的，前者返回的是一個NodeList，而後者返回的是一個類陣列物件。
DOM操作
jQuery還在DOM操作上頻繁使用，例如插入或者刪除元素。我們也可以使用原生方法來進行這些操作，你會發現這需要寫額外的程式碼，當然也可以寫自己的輔助函式來讓使用起來更容易。下面是一些將元素插入到頁面中的例子。
.程式碼如下:
//----插入元素----
/* jQuery */
$(document.body).append("<div id='myDiv'><img src='im.gif'/></div>");
/* 蹩腳的原生方法 */
document.body.innerHTML += "<div id='myDiv'><img src='im.gif'/></div>";
/* 更好的原生方法 */
var frag = document.createDocumentFragment();
var myDiv = document.createElement("div");
myDiv.id = "myDiv";
var im = document.createElement("img");
im.src = "im.gif";
myDiv.appendChild(im);
frag.appendChild(myDiv);
document.body.appendChild(frag);
//----前置元素----
// 除了最後一行
document.body.insertBefore(frag, document.body.firstChild);
CSS classes
在jQuery中，我們可以很容易對DOM元素新增、刪除、檢查它的CSS class。幸運的是，利用原生方法也可以簡單的辦到。
.程式碼如下:
// 得到DOM元素的引用
var el = document.querySelector(".main-content");
//----新增class------
/* jQuery */
$(el).addClass("someClass");
/* 原生方法 */
el.classList.add("someClass");
//----刪除class-----
/* jQuery */
$(el).removeClass("someClass");
/* 原生方法 */
el.classList.remove("someClass");
//----是否是該class---
/* jQuery */
if($(el).hasClass("someClass"))
/* 原生方法 */
if(el.classList.contains("someClass"))
修改CSS屬性
總是通過Javascript修改和檢索CSS屬性，這樣會比使用jQuery CSS函式更加簡單快速，並且沒有任何不必要的程式碼。
.程式碼如下:
// 得到DOM元素引用
var el = document.querySelector(".main-content");
//----設定CSS屬性----
/* jQuery */
$(el).css({
background: "#FF0000",
"box-shadow": "1px 1px 5px 5px red",
width: "100px",
height: "100px",
display: "block"
});
/* 原生 */
el.style.background = "#FF0000";
el.style.width = "100px";
el.style.height = "100px";
el.style.display = "block";
el.style.boxShadow = "1px 1px 5px 5px red";