引入Jquery包，所有的JS、Jquery代码写到这句话下面的<script type="text/javascript"></script>里
<script src=" Jquery包地址 "></script>
一、JS与Jquery取元素的区别
Jquery取元素取到的都是数组（索引数组）
1.根据Id取元素
JS，取到的是一个div元素
<div id="aa"></div>
<div class="bb"></div>
<div name="cc"></div>
<script>
var A = document.getElementById("aa");
alert(A);
</script>
JQUERY
根据Id找元素，$(#idname);查找到Jquery具体的对象，此对象是一个数组，Jquery可根据对象操作元素
<div id="aa"></div> <div class="bb"></div> <div name="cc"></div> <script> //输出对象b var A = $("#aa"); //输出（对象b）数组的索引0,得到一个div元素 alert(A[0]); </script>
2.根据class取元素
JS，取到一个数组
<div id="aa"></div>
<div class="bb"></div>
<div name="cc"></div>
<script>
var B = document.getElementByclassNmae("bb");
alert(B);
</script>
JQUERY
根据class取元素,$(".classname");查找到Jquery具体的对象，此对象是一个数组，
<div id="aa"></div> <div class="bb"></div> <div name="cc"></div> //输出对象B var B = $(".bb") //输出（对象B）数组的索引0,得到一个div元素 alert(B[0]); alert(B[1])； alert(B[2])； //取Jquery对象本身,使用.eq() alert(B.eq(0)); //取Jquery对象本身的元素用.eq(0)[0] alert(b.eq(0)[0]);
3.根据标签名取
JS
<div id="aa"></div>
<div class="bb"></div>
<div name="cc"></div>
<script>
var C = document.getElementsByTagName("div");
alert(C);
</script>
JQUERY
<div id="aa"></div> <div class="bb"></div> <div name="cc"></div> <script> var C = $("div"); alert(C[0]); </script>
④根据name取
JS
var D = document.getElemrntsByName("cc");
alert(D);
JQUERY
Jquery没有提供根据name取，但是提供了根据属性取
<div id="aa"></div> <div class="bb"></div> <div name="cc"></div> <div bs="1"></div> <script>
var D = $("[name=cc]");
alert(D[0]);
var E = $("[bs=1]");
alert(E[0]);
var F = $("[class=bb]"); alert(F[0]); </script>
二、JS与JQUERY操作的区别
1.操作元素
2.操作内容
①非表单元素
JS
<div id="aa"></div>
<div class="bb"></div>
<div name="cc"></div>
<script>
var A = document.getElementById("aa");
aa.innerText = "hello";
aa.innerHTML = "<span style='color:red'>world</span>";
</script>
JQUERY
<div id="aa">11</div>
//取值，括号里不给参数
var A = aa.text();
alert(A);//输出结果为11
//赋值，括号里给参数
var B = aa.text(”hello world“)；
alert(B);//输出结果为hello world
<div id="aa">11</div> //取值，括号里不给参数 var A = aa.HTML(); alert(A);//输出结果为11 //赋值，括号里给参数 var B = aa.HTML(”hello world“)； alert(B);//输出结果为hello world
②表单元素
JS
<div id="aa">11</div>
//取值，括号里不给参数
var A = aa.val();
alert(A);//输出结果为11
//赋值，括号里给参数
var B = aa.val(”hello world“)；
alert(B);//输出结果为hello world
3.操作属性
①设置属性
JS
<div id="aa"></div>
<script>
var A = document.getElementById("aa");
A.setAttribute("bs","1");
</script>
JQUERY
<div id="aa"></div>
<script>
var A = $("#aa");
A.attr("bs","1");
</script>
②获取属性
JS
<div id="aa"></div> <script> var A = document.getElementById("aa"); A.getAttribute("bs","1"); </script>
JQUERY
<div id="aa" bs="1"></div> <script> var A = $("#aa"); A.attr("bs"); </script>
③移除属性
JS
<div id="aa" bs="1"></div> <script> var A = document.getElementById("aa"); A.removeAttribute("bs"); </script>
JQUERY
<div id="aa" bs="1"></div> <script> var A = $("#aa"); A.removeAttr("bs"); </script>
4.操作样式
JS
<div id="aa" style="100px; height:100px; background-color:#09F">11</div>
<script> var A = document.getElementById("aa");
A.style.backgroundColor = "red";
</script>
JQUERY
<div id="aa" style="100px; height:100px; background-color:#09F">11</div> <script> var A = $("#aa"); A.css("background-color","red"); </script>
三、操作上的便宜性
同时隐藏三个div
JS
<script src="jquery-1.11.2.min.js"></script> </head> <body> <div class="aa" style="100px; height:100px; background-color:red">11111111111</div> <div class="aa" style="100px; height:100px; background-color:blue">22222222222</div> <div class="aa" style="100px; height:100px; background-color:yellow">33333333333</div> </body> </html> <script type="text/javascript"> var A = document.getElementsByClassName("aa"); for(var i=0;i<A.length;i++) { A[i].style.display = "none"; }
JQUERY
$(".aa").css("display","none");