jQuery代碼具體的寫法和原生的Javascript寫法在執行常見操作時的區別如下：
1 定位元素
JS
document.getElementById("abc")
jQuery
$("#abc") 通過id定位
$(".abc") 通過class定位
$("div") 通過標簽定位
需要注意的是JS返回的結果是這個元素，jQuery返回的結果是一個JS的對象。以下例子中假設已經定位了元素abc。
2 改變元素的內容
JS
abc.innerHTML = "test"; //現在的項目中有用到
jQuery
abc.html("test");
3 顯示隱藏元素
JS
abc.style.display = "none"; //現在的項目中有用到
abc.style.display = "block";
jQuery
abc.hide();
abc.show();
abc.toggle(); //在顯示和隱藏之間切換、
4 獲得焦點
JS和jQuery是一樣的，都是abc.focus();
5 為表單賦值
JS
abc.value = "test";
jQuery
abc.val("test");
6 獲得表單的值
JS
alert(abc.value);
jQuery
alert(abc.val());
7 設置元素不可用
JS
abc.disabled = true;
jQuery
abc.attr("disabled", true);
8 修改元素樣式
JS
abc.style.fontSize=size;
jQuery
abc.css('font-size', 20);
JS
abc.className="test";
JQuery
abc.removeClass();
abc.addClass("test");
9 判斷復選框是否選中
jQuery
if(abc.attr("checked") == "checked")
注意：網上說的.attr("checked") == true實際上不能用，上面這個測試過能用
①.根據ID取元素
{
JS:取到的是一個DOM對象。
例：var div = document.getElementByID("one");
JQUERY:取到的是一個JQUERY對象。
例：var div = $("#one");——括號里面是根據某個東西來找，相當於一個選擇，如果我們要根據ID來找，在樣式表里的ID是用#來表示的，所以在這里我們直接帶入井號，整句的意思就是根據ID為one的來查找。
}
②.根據class取元素，在數組里面如果要取DOM對象使用索引的方式，如果要取JQUERY對象使用eq()
{
JS:取到的是一個數組
例：var div = document.ElementsByClassName("test");
JQUERY:
例：var div = $(".test");
}
③.根據name取元素
{
JS：返回的是一個數組
例：var bd = document.getElementsByName(uid);
JQUERY：的方式是用 方括號，屬性=一個值，不限制非要根據name來取值，JQUERY是根據屬性來取元素
例：$("[name='uid']");
}
④.根據標簽名取元素
{
JS：返回的也是一個數組
例：var div = document.getElementsByTagName("div");
JQUERY：和樣式表里面給所有div加樣式的方法一樣，在雙引號內直接寫標簽名
例：$("div");
}
附：JQUERY的其他取值方式
組合選取：var div = $("div span");——有很多組合方式
*******************************************************************
操作內容
①.非表單元素（如果是文本就用text方法，如果是html代碼就用html方法）
{
例：div.text();——無參數的情況下是取值
div.text("aaaa");——有參數的情況下是賦值
div.html();——無參數的情況下是取值
div.html("aaaa");——有參數的情況下是賦值
}
②.表單元素
{
JS：div.value;——取值；div.value = xxx;——賦值
JUQERY：div.val();——無參數是取值，有參數是賦值。
}
*******************************************************************
操作屬性
JS里面用來操作屬性的方法是
div.setAttribute("","");——設置屬性、修改屬性
div.removeAttribute("");——移除屬性，引號里面寫一個屬性名
div.getAttribute();——獲取屬性
JQUERY里面用來操作屬性的方法
添加屬性：div.attr("test","aa");——給這個attr方法加入參數，屬性名叫做test，屬性的值是aa
移除屬性：div.removeAttr("test");——移除test這條屬性
獲取屬性：div.attr("test");——在attr方法里面直接寫入一個屬性的名就可以了
*******************************************************************
操作樣式
JS里面操作樣式的關鍵字是style
例：div.style.backgroundColor = "red";——把這個div的背景色設置成為了紅色
JQUERY里面操作樣式的關鍵字是css
例：div.css("background-color","yellow");——把這個div的背景色變為黃色，在這里CSS里面所有的樣式和css樣式表里面的樣式是一模一樣的沒有任何變化
JS操作樣式的方法只能獲取內聯樣式，不能取內嵌的和外部的！！！！！
JQUERY操作樣式的方法可以是內聯的也可以是內嵌的
js和jquery的區別
1.入口函數不同
js：window.onload = function(){內部放js}
實質就是一個事件，擁有事件的三要素，事件源，事件，事件處理程序。等到所有內容，以及我們的外部圖片之類的文件加載完了之后，才會去執行。只能寫一個入口函數。
jQuery:$(function(){})或者$(document).ready(function(){})
是在 html所有標簽都加載之后，就回去執行。可以寫多個。
window.onload=function(){
//js代碼
}
等同於
$(window).load(function(){
//jquery代碼
});
2.創建DOM元素
利用DOM方法創建元素節點，通常要將document.createElement()、document.createTextNode()、appendChild()配合使用，十分麻煩。
而jQuery使用$就可以直接創建DOM元素
var oNewP = $("<p>使用jQuery創建的內容</p>");
以上代碼等同於javascript
var oNewP2 = document.createElement("p");
var oText = document.createTextNode("這是使用javascript方法創建的內容");
oNewP2.appendChild(oText);
例：使用jQuery創建DOM
<script type="text/javascript">
$(function(){
var oNewP = $("<p>使用jQuery創建的內容</p>");
oNewP.insertAfter("#display"); //insertAfter方法
})
</script>
<div id="display"></div>
3.獲取元素
jquery：
通過id獲取，jquery的語法更為簡練$("#id").event;
通過class獲取，$(.“css”).event()
通過屬性html標簽獲取，$(“p”).event()是選中所有的p標簽元素
通過屬性值獲取，$(“div[csdn]”).event()是選中div的屬性為csdn的元素
event是對選中的元素的操作。
$(“div.p1”)和 $(“div .p1”)的區別。
$(“div.p1”)是對所有div進行篩選，選出class="p1"的div。
$(“div .p1”)是選中div下面的class="p1"的元素，不是這個div
js：
document.getElementById("elementId");//返回一個元素，按元素的ID名稱來訪問
document.getElementsByName("elementName");返回一組元素，按元素的name名稱來訪問
document.getElementsByTagName("tagName");返回一組元素，按標簽來訪問
document.getElementsByClassName("classname");返回一組元素，按class來訪問
4.操作屬性節點
a.JavaScript使用
object.getAttribute(attribute) 獲取元素屬性
object.setAttrbute(attribute，value) 設置元素屬性
<body>
<ul>
<li id="first">哈哈</li>
</ul>
</body>
<script>
document.getElementById("first").getAttribute("id");
document.getElementById("first").setAttribute("name","nafirst");
document.getElementById("first").removeAttribute("name");
</script>
b.JQuery使用
.attr()傳入一個參數獲取，傳入兩個參數設置
.prop()
prop和attr一樣都可以對文本的屬性進行讀取和設置；
兩者的不同 在讀取checked，disabled，等屬性名=屬性值的屬性時
attr返回屬性值或者undefined，當讀取的checked屬性時不會根據是否選中而改變
prop返回true和false 當讀取的checked屬性時會根據是否選中而改變
也就是說attr要取到的屬性必須是在標簽上寫明的屬性，否則不能取到
<body>
<ul>
<li id="first">哈哈</li>
</ul>
</body>
<script src="js/jquery.js"></script>
<script>
$("#first").attr("id");
$("#first").attr("name","nafirst");
$("#first").removeAttr("name");
$("#first").prop("id");
$("#first").prop("name","nafirst");
$("#first").removeProp("name");
</script>
5.操作文本節點
a.JavaScript使用
innerHTML：取到或設置一個節點的HTML代碼,可以取到css，以文本的形式返回
innerText：取到或設置一個節點的HTML代碼，不能取到css
value:取到input[type='text']輸入的文本
<body>
<ul>
<li id="serven_times" ><span style="color: chartreuse">嘿嘿</span></li>
<li id="eight_times" ><span style="color: chartreuse">嘿嘿</span> </li>
</ul>
姓名：<input type="text" id="input">
</body>
<script>
document.getElementById("serven_times").innerHTML;
document.getElementById("serven_times").innerHTML = "<span style='color: #ff3a29'>呵呵</span>";
document.getElementById("eight_times").innerText;
document.getElementById("eight_times").innerText = "啦啦";
document.getElementById("input").value;
</script>
b.JQuery使用
.html()取到或設置節點中的html代碼
. text()取到或設置節點中的文本
.val()取到或設置input的value屬性值
<body>
<ul>
<li id="serven_times" ><span style="color: chartreuse">嘿嘿</span></li>
<li id="eight_times" ><span style="color: chartreuse">嘿嘿</span> </li>
</ul>
姓名：<input type="text" id="input">
</body>
<script src="/js/jquery.min.js"></script>
<script>
$("#serven_times").html();
$("#serven_times").html("<span style='color: #ff3a29'>呵呵</span>");
$("#eight_times").text();
$("#eight_times").text("啦啦");
$("#input").val();
$("#input").val("哈哈");
</script>
6.操作css樣式的時候
JavaScript:
1.使用setAttribute設置class和style
document.getElementById("first").setAttribute("style","color:red");
2.使用.className添加一個class選擇器
document.getElementById("third").className = "san";
3.使用.style.樣式直接修改單個樣式。注意樣式名必須使用駝峰命名法
document.getElementById("four_times").style.fontWeight = "900";
4.使用.style或.style.cssText添加一串行級樣式：
document.getElementById("five_times").style = "color: blue;";//IE不兼容
document.getElementById("six_times").style.cssText = "color: yellow;font-size : 60px;";
JQuery:
$("#div2").css("color","yellow");
$("#div2").css({
"color" : "white",
"font-weight" : "bold",
"font-size" : "50px",
});
7.操作層次節點
JavaScript:
1.childNodes：獲取當前節點的所有子節點（包括元素節點和文本節點）
children：獲取當前節點的所有元素子節點（不包括文本節點）
2.parentNode:獲取當前節點的父節點
3.firstChild:獲取第一個元素節點，包括回車等文本節點
firstElementChild:獲取第一個元素節點，不包括回車節點
lastChild、lastElementChild 同理
4.previousSibling：獲取當前元素的前一個兄弟節點
previousElementSibling：：獲取當前元素的前一個兄弟節點
nextSibling、nextElementSibling
8.js和jquery轉換
兩種轉換方式將一個jQuery對象轉換成js對象：[index]和.get(index);
(1)jQuery對象是一個數據對象，可以通過[index]的方法，來得到相應的js對象。
如：var $v =$("#v") ; //jQuery對象
var v=$v[0]; //js對象
alert(v.checked) //檢測這個checkbox是否被選中
(2)jQuery本身提供，通過.get(index)方法，得到相應的js對象
如：var $v=$("#v"); //jQuery對象
var v=$v.get(0); //js對象
alert(v.checked) //檢測這個checkbox是否被選中
js對象轉成jQuery對象:
對於已經是一個js對象，只需要用$()把DOM對象包裝起來，就可以獲得一個jQuery對象了。$(js對象)
如：var v=document.getElementById("v"); //js對象
var $v=$(v); //jQuery對象
轉換后，就可以任意使用jQuery的方法了。