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>