zoukankan      html  css  js  c++  java
  • jQuery-day02

    事件
    change 改变,单选复选按钮状态改变,下拉列表框切换选项

    $(selector).事件(匿名函数)

    bin绑定只能绑定已经存在的元素,对于动态添加的元素无法绑定
    $(selector).bind(事件名,匿名函数)
    $(selector).bind(事件名 事件名2,匿名函数)

    on 可以用于动态添加的元素绑定事件,推荐使用
    详情看on.html 中注释

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
     2 <html xmlns="http://www.w3.org/1999/xhtml">
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     5 <title>无标题文档</title>
     6 </head>
     7 
     8 <body>
     9     <div>test</div>
    10 
    11     
    12     <input type="button" value="添加span" onclick="addSpan()"/>
    13 </body>
    14 </html>
    15 <script src="../jquery-3.2.1.min.js"></script>
    16 <script>
    17     function addSpan(){
    18         $("body").append("<span>abc</span>");    
    19     }
    20 
    21     /*
    22     绑定一个事件
    23     $("div").on('click',function(){
    24         alert(123);    
    25     });
    26     
    27     对动态添加的元素绑定事件
    28     $(document).on('click','span',function(){
    29         alert(456);    
    30     })
    31     多个事件绑定多个函数,调用同一个函数
    32     $("div").on("click mouseover",function(){
    33         alert(123);
    34     });
    35     同时给多个元素绑定多个事件
    36     $(document).on({
    37         mouseover:function(){
    38             alert("over中");
    39         },
    40         click:function(){
    41             alert("单击中");
    42         },
    43         dbclick:function(){
    44             alert("双击中");
    45         }
    46     },"div,span,#test");
    47     
    48     绑定自定义事件,并且传参
    49     $("div").on('click',{username:"老王",age:18},showName);
    50     function showName(dataList){
    51         alert("名字为"+dataList.data.age);
    52     }
    53 */
    54 
    55 
    56 
    57 
    58 
    59 </script>

    动画
    show() 显示隐藏的元素,可以指定速度,
    hide() 隐藏显示的元素

    slideDown()
    slideUp()

    不希望内容溢出当前容器,就给当前容器添加滚动条
    overflow:滚动条属性 scroll可见 hidden隐藏
    overflow-x:设置水平滚动条
    overflow-y:设置垂直滚动条

    javascript中设置滚动条的位置
    scrollLeft:水平滚动条距离左边的位置
    scrollTop:垂直滚动条距离上边的位置

  • 相关阅读:
    第87天:HTML5中新选择器querySelector的使用
    第86天:HTML5应用程序标签和智能表单
    第85天:HTML5语义化标签
    第84天:jQuery动态创建表格
    第83天:jQuery中操作form表单
    第82天:jQuery中prop()和attr()的区别
    第81天:jQuery 插件使用方法
    第80天:jQuery插件使用
    第79天:jQuery事件总结(二)
    对事务的特性ACID的理解
  • 原文地址:https://www.cnblogs.com/beiluoL/p/10280402.html
Copyright © 2011-2022 走看看