<!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> <style type="text/css" > #aa { width:200px; height:200px; } </style> <script src="jquery-1.11.2.min.js"></script> </head> <body> <div id="aa" style="">hello</div> <div class="bb">22</div> <div class="bb">33o</div> <div class="bb">44</div> <input type="text" name="cc" bs="dd"/> </body> <script type="text/javascript"> //根据id找元素,找到具体的dom对象 var d=document.getElementById("aa"); var c=document.getElementsByClassName("bb"); var div=document.getElementsByTagName("div"); var input=document.getElementsByName("cc"); //操作内容 //1.非表单元素 d.innerHTML;d.innertext; //2.表单元素 d.value; //操作属性 d.setAttribute("bs","pp");//设置属性 d.getAttribute("bs");//获取属性 d.removeAttribute("bs");//移除属性 //操作样式 d.style.color="red"; d.style.backgroundColor="yellow"; alert(d.style,width); //匿名函数，找出的jquery对象,如果要取dom对象，取索引0的元素 $(document).ready(function(e) { /*var jd=$("#aa"); //根据id找元素,alert(jd[0]);*/ /*var jc=$(".bb");//根据class找*/ /*var di=$("div");//根据标签名找*/ var ip=$("input[bs=dd]");//根据属性筛选 for(var i=0;i<jc.length;i++) { jc.eq(i); } //操作内容 //1.非表单元素 jd.text(); jd.text("aa"); jd.html(); jd.html("vv"); //2.表单元素 d.value; //属性操作 jd.attr("bs","aa");//设置属性 jd.attr("bs");//获取属性 jd.removeattr("bs");//移除属性 //操作样式 jd.css("background-coler","green"); //alert(jd.css("width")); /*//给一个元素加事件 $("#aa").click(function(){ alert("aa"); })*/ /*//给多个元素加事件 $(".bb").click(function(){ alert($(this).text()); }) */ /*//给多个元素设置相同样式 $(".bb").css("color","pink"); */ }); </script> </html>
事例
<!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> </head> <body> <input type="checkbox" id="all" /> 全选<br /> <input class="t" type="checkbox" value="aa" /> aa <input class="t" type="checkbox" value="bb" /> bb <input class="t" type="checkbox" value="cc" /> cc <input class="t" type="checkbox" value="dd" /> dd <input class="t" type="checkbox" value="ee" /> ee <input type="button" value="测试" id="btn" /> <input type="text" id="txt" /> <input type="button" value="设置选中" id="sel" /> </body> <script type="text/javascript"> $(document).ready(function(e) { //全选 $("#all").click(function(){ var ck = $(".t"); var xz = $(this)[0].checked; ck.prop("checked",xz); }) //取选中项的值 $("#btn").click(function(){ var ck = $(".t"); for(var i=0; i<ck.length;i++) { if(ck.eq(i).prop("checked"))//ck.eq(i)[0].checked { alert(ck.eq(i).val()); } } }) //设置某项选中 $("#sel").click(function(){ var v = $("#txt").val(); var ck = $(".t"); ck.prop("checked",false); for(var i=0;i<ck.length;i++) { if(ck.eq(i).val()==v) { ck.eq(i).prop("checked",true); } } }) }); </script> </html>