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>

　　事件：

　　

 

posted @ 2018-01-16 22:31  猿上生活  阅读(1845)  评论(0)  编辑  收藏  举报