先來看一下Js和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> <script src="jquery-1.11.2.min.js"></script> </head> <body> <input type="button" value="測試" onclick="test()" /> <input type="button" value="測試2" id = "btn" /> </body> <script type="text/javascript"> function test() { alert("aa"); } $(document).ready(function(e) { $("#btn").click(function(){ alert("第二個按鈕"); }) }); </script> </html>
aa 是Js點擊觸發的事件
第二個按鈕 是Jquery點擊觸發的事件
看一下運行的效果
點擊測試
再點擊測試2
再來看一下，從代碼上它們有什么區別
Js中，給他們加事件，是在按鈕后面加個點擊事件
Jquery中，是通過個id找到這個元素，然后點擊后才觸發的事件
Js中如果要給好幾個元素都加事件，需要每句代碼后面都要加點擊事件，來看一下Juery中
運行的結果
三個按鈕都可以彈出同樣的一句話
那如果想知道點擊了誰該怎么做呢？
來看一下事件部分的代碼
這句話的意思就是 選取點擊它自身的值，來看一下運行的結果
點擊測試4
點擊測試5
點擊測試三也是同樣的效果
顯示的是他們的value值
再做一個比較有趣的點擊事件
先大概講一下然后再來看他們的代碼
有三個按鈕，點擊單純點擊第二個，是不會彈窗口的，要先點擊第一個，再點擊第二個才可以，如果再點擊第三個，那么再點擊第二個，又不行了，等於說給它移除了這個事件
來看一下代碼
<input type="button" value="掛事件" id="gua" /> <input type="button" value="測試事件" id="ceshi" /> <input type="button" value="移出事件" id="yichu" />
//點擊給測試事件按鈕掛上一個事件 $("#gua").click(function(){ //bind方法用於掛事件 $("#ceshi").bind("click",function(){ alert("掛上了事件"); }); }) //點擊給測試時間按鈕移除點擊事件 $("#yichu").click(function(){ $("#ceshi").unbind("click"); })
注意，我只是截取了關鍵的部分代碼，那些引入Jquery包，還有最外層的代碼還是需要的
來看一下運行的效果
這時候點擊測試事件是不管事的，那就點擊掛事件再來點擊測試事件看看有什么樣的效果
這時候測試事件可以點擊了，而且點擊多少次都可以，如果點擊了移除事件，那么測試事件就不能彈出了
這里有兩個關鍵字要記住，就是加事件和減事件，以后做動態可以用到 bind需要兩個參數，unbind需要一個
下面再來看一下Jquery做全選
之前做的全選都是用Js做的，Js做的全選其實有BUG，不知道大家有沒有注意，就是如果光點全選按鈕的話還是好使的，要是你單獨點擊某個按鈕的話，再點擊全選就會出現問題
來看一下Js做全選的部分代碼
運行的結果
點擊全選
都沒有問題，如果單獨點擊某一項，再來看一下
點擊全選
再點擊一下
確實是有問題
下面主要來看一下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> <script src="jquery-1.11.2.min.js"></script> </head> <body> <br /> <div><input type="checkbox" id="qx" onclick="xuan()" /> 全選</div> <br /> <div> <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" /> 桓台 </div> </body> <script type="text/javascript"> /*function xuan() { var a = document.getElementById("qx"); var ck = document.getElementsByClassName("ck"); for(var i=0;i<ck.length;i++) { if(a.checked) { ck[i].setAttribute("checked","checked"); } else { ck[i].removeAttribute("checked"); } } }*/ $("#qx").click(function(){ // var xz = $(this)[0].checked; //DOM對象 var xz = $(this).prop("checked"); //Jquery對象 $(".ck").prop("checked",xz); }) </script> </html>
綠色部分是注釋Js做法的
Jquery做起來其實就用三句代碼非常簡便，而且沒有BUG
可以來看一下運行的結果，先來試一下點擊單獨一項
點擊全選
再次點擊
沒有問題
Jquery中是可以統一給他設置的，無論樣式還是事件