jQuery与JS的区别，以及jQuery的基础语法

*在使用jQuery时，要在页面最上端加上

<script src="../jquery-1.11.2.min.js"></script>

 

看一下js与jQuery的区别：

JS是这样使用的：

<script type="text/javascript">根据ID取元素,取到的是具体的元素var a = document.getElementById("p1");根据CLASS取var a = document.getElementsByClassName("aa");根据标签名取var a = document.getElementsByTagName("div");根据name取var a = document.getElementsByName("cc");    alert(a); 操作元素操作内容非表单元素a.innerText = "hello";a.innerHTML = "<span style='color:red'>world</span>";表单元素a.value = "hello";操作属性a.setAttribute("bs","1");a.getAttribute("bs");a.removeAttribute("bs");操作样式a.style.color = red;　　　　//只能获取内联属性三个DIV隐藏var a = document.getElementsByClassName("aa");for(var i=0;i<a.length;i++){a[i].style.display = "none";}<script>

这是jQuery的使用方法（）:

<script type="text/javascript">    根据ID找元素,取到的是JQUERY对象var b = $("#a1");根据CLASS取var b = $(".aa");根据标签名取var b = $("div");根据属性筛选var b = $("[name=aa]");操作元素操作内容非表单元素b.text();b.html();

赋值：<div id="a1">11</div>
　　　　var b = $("#a1");
　　　　b.text("aaa")
　　　　//b.html("aaa")

取值：var b = $("#a1");
　　　alert(b.text());
　　 //alert(b.html());

表单元素b.val();

赋值：

var b = $("#a1");
b.val("aaa")

取值：

var b = $("#a1");
b.val();

操作属性 b.attr("bs","1"); 
　　　　 b.attr("bs"); 
　　　　 b.removeAttr("bs"); 


操作样式 alert(b.css("color")); 
　　　　 b.css("font-size","50px");　　　　　　//可以获取、设置任意样式 


alert(b[0]); 取jquery对象用eq()取元素本身用[] 


隐藏三个元素 $(".aa").css("display","none"); 


</script>

 

jQuery事件：挂事件、移除事件

<style type="text/css">
#a1{color:red}
.aa{ width:100px; height:100px; background-color:#39F}
</style>

<div id="a1" style="width:100px; height:200px;">11</div><div class="aa" bs="1">aaaa</div>
<div class="aa" bs="2">bbbbb</div>
<div class="aa" bs="3">ccccc</div>

<input type="text" id="p1" />
<input type="button" id="b1" value="挂事件" />
<input type="button" id="b2" value="移除事件" />

    Jquery【加】事件页面加载完成$(document).ready(function(e) {给a1加点击$("#a1").click(function(){alert('aa');})给class为aa的所有元素加事件$(".aa").click(function(){alert($(this).attr("bs"));$(".aa").css("background-color","#39F");$(this).css("background-color","red");})第二种方式【挂】事件$("#b1").click(function(){$("#a1").bind("click",function(){alert("我是挂上的事件");});})$("#b2").click(function(){$("#a1").unbind("click");})});