jquery之遍歷與事件 一.遍歷： 二.事件的綁定 事件： ...
jquery之遍歷與事件
一.遍歷：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script> 7 </head> 8 <body> 9 <select name="" id="selectId"> 10 <option value="1">1</option> 11 <option value="2">2</option> 12 <option value="3">3</option> 13 <option value="4">4</option> 14 </select> 15 </body> 16 <script type="text/javascript"> 17 /* 18 * 遍歷方式一 19 */ 20 var options=$("#selectId option"); 21 for (var i = 0; i < options.length; i++) { 22 console.log($(options[i]).val()); 23 } 24 25 /* 26 * 遍歷方式二： 27 * 參數一：是索引 28 * 參數二：單個js對象 29 */ 30 options.each(function(index,element){ 31 console.log(index+"===="+$(element).val()); 32 }); 33 /* 34 * 遍歷方式三 35 * options:要遍歷的數組 36 * function---->index:索引 37 * function---->element:單個js對象 38 */ 39 $.each(options,function(index,element){ 40 console.log(index+"----"+$(element).val()); 41 }); 42 43 </script> 44 </html>
二.事件的綁定
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title></title> 6 <script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script> 7 </head> 8 <body> 9 <input type="button" name="btn" id="btn" value="點擊" /> 10 <input type="button" name="btn1" id="btn1" value="點擊1" /> 11 12 <input type="button" name="btn1" id="dropOne" value="解除單個事件" /> 13 14 <input type="button" name="btn1" id="dropAll" value="解除所有事件" /> 15 16 <input type="text" name="username" id="username" value="" placeholder="請輸入用戶名" /> 17 </body> 18 <script type="text/javascript"> 19 /** 20 * 動態綁定事件一： 21 * 使用jquery對象.時間（） 22 * 23 * 這種綁定方式不能解除事件 24 */ 25 $("#btn").click(function(){ 26 alert("我被點擊了"); 27 }); 28 /** 29 * 動態綁定時間二： 30 * jquery對象.bind(事件名,function(){}); 31 * 32 * 這種綁定方式綁定的事件可以解除 33 */ 34 $("#btn1").bind("click",function(){ 35 alert("我被點擊了"); 36 }); 37 /** 38 * 動態綁定事件三： 39 * jquery對象.bind({"事件一":function(){},"事件二":function(){}}); 40 * 41 * 一個對象綁定多個事件 42 * 為文本輸入框 綁定滑鼠焦點失去，與得到事件 43 * 這種綁定方式綁定的事件可以解除 44 */ 45 46 $("#username").bind({ 47 "blur":function(){ 48 console.log("滑鼠焦點失去"); 49 50 }, 51 "focus":function(){ 52 console.log("滑鼠焦點得到"); 53 } 54 }); 55 56 /** 57 * 事件的動態解除 58 * 59 *jquery對象.unbind();不傳參數，解除所有事件 60 *jquery對象.unbind("事件名");傳參數，解除指定事件 61 */ 62 $("#dropOne").click(function(){ 63 $("#btn1").unbind("click"); 64 });//解除指定事件 65 66 $("#dropAll").click(function(){ 67 68 $("#username").unbind();//解除所有 69 }); 70 71 </script> 72 </html>
事件：
