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的方法了。