選擇器?
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";?
更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的jQuery函数的等价原生函数代码示例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。