JQuery的基礎學習
阿新 • • 發佈：2018-02-25
mar 全選 oat prop ansi doctype func float har
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>
JQuery的基礎學習