jquery与javescript的区别（一）
一.找元素：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <script src="jquery-1.11.2.min.js"></script> <style type="text/css"> #aa{ width:100px; height:100px;} </style> </head> <body> <div id="aa" style="color:red"><span>aaaaaa</span></div> <div class="a1">div1</div> <div class="a1">div2</div> <span class="a1" bs="1">span1</span> <input type="text" name="uid" id="bd" value="aa" /> <input type="checkbox" id="ck" /> 全选 <br /> <br /> <input type="checkbox" class="ck" /> <input type="checkbox" class="ck" /> <input type="checkbox" class="ck" /> <input type="checkbox" class="ck" /> <input type="checkbox" class="ck" /> </body> </html>
1.id
javescript：var a = document.getElementById("aa");
jquery： var a = $("#aa");
2.class
javescript：var a = document.getElementsByClassName("a1");
jquery： var a = $(".a1");
3.name
javescript：var a = document.getElementsByName("uid");
jquery: 没有专门的方法
var a = $("div");
var a = $("[bs=1]");
二.操作内容：
1.javescript：
//非标单元素 alert(a.innerText); //文本 alert(a.innerHTML); //HTML代码 //表单元素 alert(a.value); a.value="hello";
2.jquery:
//非表单元素 alert(a.text()); a.text("bbbbb"); alert(a.html()); //表单元素 a.val("hello");
三.操作属性
1.javescript：
a.setAttribute("test","test");
a.removeAttribute("test");
alert(a.getAttribute("value"));
2.jquery:
a.attr("test","test");
a.removeAttr("test");
alert(a.attr("value"));
a.prop("test","test");
a.removeProp("test");
alert(a.prop("test"));
a.prop("checked",true);
alert(a.prop("checked"));
四.操作样式：
1.javescript：
a.style.fontSize = "30px";
alert(a.style.color);
2.jquery:
a.css("background-color","green");
alert(a.css("width"));
五.统一操作：
1.javescript：
var d = document.getElementsByClassName("a1"); for(var i=0;i<d.length;i++) { d[i].style.fontSize = "30px"; }
2.jquery:
$(".a1").css("font-size","30px");
$(".ck").prop("checked",true);
