主页面
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <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> <script type="text/javascript"> //下面单独写出此内容 </script> </html>
下面进行一些简单的对比
js:
//找元素 var a = document.getElementById("aa"); alert(a); var a = document.getElementsByClassName("a1"); alert(a[2]); document.getElementsByTagName("div"); var a = document.getElementsByName("uid"); alert(a[0]);
JQuery：
//找元素 var a = $("#aa"); alert(a); var a = $(".a1"); alert(a.eq(2)); var a = $("div"); var a = $("[bs=1]"); alert(a);
js:
//操作内容 //非标单元素 alert(a.innerText); //文本 alert(a.innerHTML); //HTML代码 //表单元素 alert(a.value); a.value="hello";
JQuery：
//操作内容 //非表单元素 alert(a.text()); alert(a.html()); //表单元素 a.val("hello");
JS:
//操作属性 a.setAttribute("test","test"); a.removeAttribute("test"); alert(a.getAttribute("value")); //操作样式 a.style.fontSize = "30px"; alert(a.style.color);
JQuery：
- 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法。
- 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
//操作属性 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")); //操作样式 a.css("background-color","green"); alert(a.css("width"));
JS:
//统一操作元素 var d = document.getElementsByClassName("a1"); for(var i=0;i<d.length;i++) { d[i].style.fontSize = "30px"; }
JQuery：
//统一操作元素 $(".a1").css("font-size","30px"); $(".ck").prop("checked",true);
//事件 $("#ck").click(function(){ //alert($(this)); //$(this)选取自身元素 $(".ck").prop("checked",$(this).prop("checked")); }) //匿名函数