• 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>

      事件:

      

  • 相关阅读:
    POJ2352
    POJ 2524 并查集
    A POJ1611
    树状dp--B
    spring mvc实现文件上传与下载
    Joda-Time
    JAVA对象与JSON之间的转换
    jackson-databind注解
    JPA注解
    springMVC、spring、jpa、springData整合配置
  • 原文地址:https://www.cnblogs.com/xuzhaocai/p/8299181.html
Copyright © 2020-2023  润新知