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>
事件：
