jquery的一些应用
JavaScript的一些复习：操作内容，操作属性，操作样式
<title>无标题文档</title> <style> #aa { width:200px; height:200px;} </style> <script src="jquery-1.11.2.min.js"></script> </head> <body> <div id="aa" style=""><span>hello</span></div> <div class="bb">22</div> <div class="bb">33</div> <div class="bb">44</div> <input type="text" name="cc" bs="dd" /> </body> <script type="text/javascript"> //根据ID找元素,找到具体的DOM对象 var a = document.getElementById("aa"); var b = document.getElementsByClassName("bb"); //b[0].style.color="red"; var di= document.getElementsByTagName("div"); var input = document.getElementsByName("cc"); //操作内容 //1.非表单元素 //var d = document.getElementById("aa"); d.innerHTML; d.innerText; //2.表单元素 取value d.value; //操作属性 d.setAttribute("bs","aa");//设置属性（属性名，属性值） d.getAttribute("bs");//获取属性（属性名） d.removeAttribute("bs");//移除属性（属性名） //操作样式 d.style.color = "red"; d.style.backgroundColor = "blue"; alert(d.style.width);//获取不到，因为获取只能获取到内联的不能在外面的 </script>
Jquery中也是分为操作内容，操作属性，操作样式
<!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> #aa { width:200px; height:200px;} </style> <script src="jquery-1.11.2.min.js"></script> </head> <body> <div id="aa" style=""><span>hello</span></div> <div class="bb">22</div> <div class="bb">33</div> <div class="bb">44</div> <input type="text" name="cc" bs="dd" /> </body> <script type="text/javascript"> //jquery中的 $(document).ready(function(e) { //根据ID找元素，找出的JQUERY对象，如果要取DOM对象，取索引0的元素 var jd = $("#aa");//根据ID var ba = $(".bb");//根据Class var ca = $("div");//根据标签名 var ip = $("input[name=cc]");//根据筛选属性 var ip1 = $("input[bs=dd]"); //根据筛选属性,不加空格 //alert(ip1.eq(0)[0]); for(var i=0;i<b.length;i++) { ba.eq(i); //取数组里面的第几个JQUERY对象 } //操作内容 //非表单元素 jd.text(); //jd.text("你好"); //（）里面没有是取值，有是赋值 jd.html(); //jd.html("好啊"); //同上 //2.表单元素 aa.val(); //操作属性 jd.attr("bs","aa");//设置属性（属性名，属性值） jd.attr("bs");//获取属性（属性名） jd.removeAttr("bs");//移除属性（属性名） //操作样式 jd.css("background-color","red");//一个参数是获取，两个是添加 //alert(jd.css("width")); //给一个元素加事件 /*$("#aa").click(function(){ alert("aa"); })*/ //给多个元素加事件 /*$(".bb").click(function(){ alert($(this).text()); })*/ //给多个元素设置相同样式(属性) //$(".bb").css("color","pink"); }); </script> </html>
关于jquery的一些练习题：实现全选功能，输出选中项，设置选中项
<!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>jquery的例子</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" id="button" value="点击获取数据" /> <input type="text" id="tex" name="name" /> <input type="button" id="select" value="提交" /> </body> </html> <script type="text/javascript"> $(document).ready(function(e) { //全选 $("#all").click(function(){ var ck = $(".t"); var xz = $(this)[0].checked; ck.prop("checked",xz); }) //输出取选中的值 $("#button").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()); } } ck.prop("checked",false);//清除选项 }) //设置某项选中 $("#select").click(function(){ var rr = $("#tex").val(); var ck = $(".t"); ck.prop("checked",false);//清除选项 for(var i=0;i<ck.length;i++) { if(ck.eq(i).val()==rr) { ck.eq(i).prop("checked",true); } } }) }); </script>