1.挂事件：
运用JQuery，当点击挂事件时给div加上一个点击事件，当点击移除事件按钮时则取消掉这个div上的点击事件。
<!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> <div id="aa"></div> <input type="button" value="挂事件" id="gua" /> <input type="button" value="移除事件" id="yichu" /> </body> <script type="text/javascript"> $("#aa").css("width","100px"); $("#aa").css("height","100px"); $("#aa").css("background-color","red"); $("#gua").click(function(){ $("#aa").bind("click",function(){ alert("div被点击了"); }) }) $("#yichu").click(function(){ $("#aa").unbind("click") }) </script> </html>
2.运用JQuery，做全选，进行批量操作：
<body> <h1>全选效果</h1> <div><input type="checkbox" value="qx" id="qx" /> 全选</div> <br /> <div> <input type="checkbox" value="1" class="ck" /> 潘庄 <input type="checkbox" value="1" class="ck" /> 火炬公园 <input type="checkbox" value="1" class="ck" /> 理工大 <input type="checkbox" value="1" class="ck" /> 马尚 <input type="checkbox" value="1" class="ck" /> 沣水 <input type="checkbox" value="1" class="ck" /> 南定 </div> </body> <script type="text/javascript"> $("#qx").click(function(){ //找到全选按钮的选中状态 //var xz = $(this)[0].checked; //这是用js方法写的。 var xz = $(this).prop("checked"); //单独用jquery写就用这种方式 //改变所有的checkbox选中状态 $(".ck").prop("checked",xz); }) </script> </html>
3.当点击某一个div的时候所有div都变成红色，点的那个div变成绿色。
<!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> <style> .d{ width: 150px; height: 150px; background-color: red; margin: 5px; float: left; } </style> <body> <div class="d"></div> <div class="d"></div> <div class="d"></div> <div class="d"></div> <div class="d"></div> <div class="d"></div> <div class="d"></div> <div class="d"></div> <div class="d"></div> <div class="d"></div> <div class="d"></div> <div class="d"></div> <div class="d"></div> <div class="d"></div> <div class="d"></div> <div class="d"></div> </body> <script type="text/javascript"> //1.当点击某一个div的时候所有div都变成红色 //2.点的那个div变成绿色 $(".d").click(function(){ $(".d").css("background-color","red"); $(this).css("background-color","green"); })
</script> </html>