JS和jQuery用法區別
外觀區別
jQuery與JS最直觀的區別就是外觀上jQuery對象比js對象多了"$()"。
查找元素
js方法：
var a = document.getElementById("id名"); 返回一個對象
var a = document.getElementsByClassName("class名"); 返回一個對象數組
var a = document.getElementsByTagName("標簽名"); 返回一個對象數組
var a = document.getElementsByName("name名"); 返回帶有指定名稱的對象的集合。
Jquery方法：
var a = $("#id名");
var a = $(".class名");
var a = $("標簽名");
var a = $("[屬性名=屬性值]");
操作標簽
js:
classList.add("類名")；
classList.remove("類名")；
classList.contains(cls) 存在返回true，否則返回false
classList.toggle(cls) 存在就刪除，否則添加
jquery:
$("div").addClass("a1") 添加類名
$("div").removeClass("a1") 移除
$("div").hasClass("a1")
$("div").toggleClass("a1")
操作內容
js方法：
（1).非表單元素：
a.innerText; 獲取文本
a.innerHTML; 獲取HTML代碼
（2）.表單元素：
a.value; 獲取
a.value="hello"; 賦值
Jquery方法：
（1）.非表單元素：
a.text(); //取得第一個匹配元素
a.text("bbbbb");
a.html(); //取得第一個匹配元素當前的html內容
a.html("<div class="a"></div>") // 覆蓋所有匹配元素的html內容
（2）.表單元素：
a.val();無參數是取值，有參數是賦值。
操作屬性
JS里面用來操作屬性的方法:
div.setAttribute("","");——設置屬性、修改屬性
div.removeAttribute("");——移除屬性，引號里面寫一個屬性名
div.getAttribute();——獲取屬性
jQuery里面用來操作屬性的方法:
自定義屬性：
添加屬性：div.attr({k1: v1, k2:v2});——給這個attr方法加入參數，屬性名叫做test，屬性的值是aa。
移除屬性：div.removeAttr("test");——移除test這條屬性。
獲取屬性：div.attr("test");——在attr方法里面直接寫入一個屬性的名就可以了。
------------------------------------------------------------------------
固有屬性：
a.prop("屬性名","屬性值"); 添加屬性
a.removeProp("屬性名"); 刪除屬性
alert(a.prop("屬性名")); 獲取屬性
a.prop("checked",true);
alert(a.prop("checked")); 選擇點擊事件
操作位置
js:
offsetLeft、offsetTop屬性：只可獲取，不可設置（類似jQuery的position()方法）
style.left、style.top:既可設置，也可獲取。
jquery:
position() 方法：只能獲取，不能設置
offset()方法：既能獲取，也能設置。獲取和設置元素相對於文檔的偏移量
scrollLeft()、scrollTop(),滾動方法：既能獲取，也能設置
$(element).scrollLeft(200); //設置元素滾動的left值
操作樣式
JS里面操作樣式的關鍵字是style。
例：
div.style.backgroundColor= "red";
把這個div的背景色設置成為了紅色。
jQuery里面操作樣式的關鍵字是css。
例：
div.css("background-color","yellow");
把這個div的背景色變為黃色，在這里CSS里面所有的樣式和css樣式表里面的樣式是一模一樣的沒有任何變化。
注意：
JS操作樣式的方法只能獲取內聯樣式，不能取內嵌的和外部的。
jQuery操作樣式的方法可以是內聯的也可以是內嵌的。
事件
js:
方式一：
<div id="d1" onclick="changeColor(this);">點我</div>
<script>
function changeColor(ths) {
ths.style.backgroundColor="green";
}
</script>
方式二：
<div id="d2">點我</div>
<script>
var divEle2 = document.getElementById("d2");
divEle2.onclick=function () {
this.innerText="呵呵";
}
</script>
jQuery:
<input type="button" id="mybutton" value="點我">
<script>
$(function(){
$("#mybutton").on("click",function(e){
alert(e.type)
//在觸發該事件的時候，系統會給傳給你這個參數，他包含了觸發該事件的一些信息
//這里e指代event
})
})
</script>
