jquery之遍历与事件
程序员文章站
2022-03-10 08:24:36
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>
事件：
上一篇： Jquery实现树桩导航
下一篇： HTML知识点总结之table