zoukankan      html  css  js  c++  java
  • jquery学习笔记(三):事件和应用

    内容来自【汇智网】jquery学习课程

    3.1 页面加载事件

    在jQuery中页面加载事件是ready()。ready()事件类似于就JavaScript中的onLoad()事件,但前者只要页面的DOM结构加载后便触发,而后者必须在页面全部元素加载成功才触发,ready()可以写多个,按顺序执行。

    ready()方法的几种写法:

     1 //写法一:
     2 $(document).ready(function(){
     3     //代码部分
     4 });
     5 
     6 //写法二:
     7 
     8 $(function(){
     9     //代码部分
    10 })

    写法二简洁明了,使用是最广泛的

    3.2 绑定事件

    在jQuery中可以使用bind()方法进行事件的绑定。bind()功能是给每个选择元素的事件绑定处理函数。

    语法:$(selector).bind(event,[data] function)

    参数event为事件名称,多个事件名称用空格隔开,function为事件执行的函数。

    示例如下:

     1 <script type="text/javascript">
     2 $(function(){ 
     3 
     4     //绑定按钮点击事件
     5     $("#btnClick").bind("click", function () {
     6       $(this).attr("disabled", "true");
     7     })
     8 
     9 
    10     //实时监测输入变化(不是失去焦点),适用于input、textare
    11     $('#advice').bind('input propertychange', function() {
    12        //代码
    13     });
    14 
    15  })
    16 
    17 </script>
    18 ...省略代码
    19  
    20 <h3> bind()方法绑定事件</h3>
    21  
    22 <input id="btnClick" type="button" value="点击之后按钮不可用">    

    3.3 切换事件

    在jQuery中提供了hover()和toggle()这两个方法用于事件的切换。所谓的切换事件,就是有两个以上的事件绑定于一个元素,在元素的行为动作间进行切换。

    hover()方法:

    hover()方法的功能是当鼠标移到所选元素上时,执行方法中的第一个函数,鼠标移出时,执行方法中的第二个函数,实现事件的切换效果。

    语法形式:$(selector).hover(over,out);

    over参数为移到所选元素上触发的函数,out参数为移出元素时触发的函数。

    toggle()方法:

    toggle()方法toggle() 方法用于绑定两个或多个事件处理器函数,以响应被选元素的轮流的 click 事件。

    语法形式:$(selector).toggle(fun1(),fun2(),funN(),...)

    注意:toggle()方法在1.9.0之后的版本是不支持的。

    也可用于切换被选元素的 hide() 与 show() 方法。

    语法形式:$(selector).toggle(speed,callback)

    speed参数可选,作用是规定hide/show效果的速度;callback()参数可选,当toggle()方法完成是执行的函数。

    示例如下:

     1 <script type="text/javascript">
     2 $(function(){ // hover()方法的使用
     3     $("div").hover(
     4         function(){
     5             $(this).append("**:爆装备**");
     6         },
     7         function(){
     8             $("b").remove();
     9         }
    10     );    
    11 })
    12 $(function(){//给div改变背景颜色
    13     $("#btn").toggle(
    14         function(){
    15             $("div").css("background-color","green");
    16         },
    17         function(){
    18             $("div").css("background-color","red");
    19         },
    20         function(){
    21             $("div").css("background-color","yellow");
    22         }
    23     );
    24 })
    25 $(function(){//显示和隐藏div
    26     $("#btn").click(function(){
    27         $("div").toggle(1000);
    28     });
    29 })
    30 </script>
    31 ...省略代码
    32  
    33 <h3> 切换事件</h3>
    34  
    35 <div id="bindTest">打土豪</div>鼠标移上去看看
    36 <input type="button" id="btn" value="toggle()方法改变div背景色">

    3.4 移除事件

    unbind() 方法移除被选元素的事件处理程序。该方法能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行。

    语法形式:$(selector).unbind(event,function)

    其中参数event表示需要移除的事件名称,多个事件名用空格隔开,function参数为事件执行时调用的函数名称。

    示例如下:

     1 ...省略代码<p></p>
     2 <p><script type="text/javascript">
     3 $(function(){
     4     $("div").click(function(){
     5         $(this).slideToggle();//给div注册隐藏事件
     6     });
     7     $("#btn").click(function(){
     8         $("div").unbind();//把div的事件移除
     9     });
    10 })
    11 </script>
    12 ...省略代码</p>
    13 <h3> 移除事件</h3>
    14  
    15 <div>帽子,点击之后消失</div>
    16 <div>上衣,点击之后消失</div>
    17 <div>裤子,点击之后消失</div>
    18 <div>内裤,点击之后消失</div>
    19 <div>鞋子,点击之后消失</div>
    20 <input type="button" id="btn" value="点击之后隐藏事件被移除了">
    21 ...省略代码

    3.5 一次性事件

    one() 方法为被选元素附加一个或多个事件处理程序,并规定当事件发生时运行的函数。当使用 one() 方法时,每个元素只能运行一次事件处理器函数。

    语法形式:$(selector).one(event,[data],function)

    其中event参数必需,当添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。data参数可选,是传递到函数的额外数据。function参数必需,当事件发生时运行的函数。

    示例如下:

     1 <script type="text/javascript">
     2 $(function(){
     3     $("p").one("click",function(){
     4       $(this).animate({fontSize:"+=6px"});
     5     });
     6 }) 
     7 </script>
     8 ...省略代码
     9     <h3>one()方法的使用</h3>
    10     <p>这是一个段落。</p>
    11     <p>这是另一个段落。</p>
    12     <p>请点击 p 元素增加其内容的文本大小。每个 p 元素只会触发一次改事件。</p>

    3.6 手动触发指定事件

    trigger() 方法触发被选元素的指定事件类型。

    语法形式:$(selector).trigger(event,[param1,param2,...])

    其中event参数必需,是指定元素要触发的事件。可以使自定义事件(使用 bind() 函数来附加),或者任何标准事件。后面的参数可选,是指传递到事件处理程序的额外参数。额外的参数对自定义事件特别有用。

    示例如下:

     1 <script type="text/javascript">
     2 $(function(){
     3     $("div").bind("append-content",function(){
     4         $(this).append("**,那是我逝去的青春**");
     5     });
     6     $("div").trigger("append-content");
     7 }) 
     8 </script>
     9 ...省略代码
    10     <h3>trigger()手动触发事件</h3>
    11     <div>在夕阳下奔跑,</div>
    12     <div>在夕阳下奔跑</div>

    3.7 焦点事件

    当元素获得焦点时,发生 focus 事件;当元素失去焦点时发生 blur 事件。

    示例如下:

     1 <script type="text/javascript">
     2 $(function(){ 
     3     $("input").focus(function(){//获得焦点
     4         $("input").css("background-color","#FFFFCC");
     5     });
     6     $("input").blur(function(){//失去焦点
     7         $("input").css("background-color","#D6D6FF");
     8     });
     9 })
    10 </script>
    11 ...省略代码
    12 <h3>焦点事件</h3>
    13 输入名字: <input type="text">
    14 <p>请在上面的输入域中点击,使其获得焦点,然后在输入域外面点击,使其失去焦点。</p>

    3.8 change()改变事件

    当元素的值发生改变时,会发生 change 事件。该事件仅适用于文本域(text field),以及 textarea 和 select 元素。change() 函数触发 change 事件,或规定当发生 change 事件时运行的函数。

    语法形式:$(selector).change(function)

    参数function是当change事件发生时运行的函数

    示例如下:

     1 <script type="text/javascript">
     2 $(function(){ 
     3     $(".field").change(function(){
     4     $(this).css("background-color","#FFFFCC");
     5     });
     6 })
     7 </script>
     8 ...省略代码
     9  
    10     <p>在某个域被使用或改变时,它会改变颜色。</p>
    11     名 称: <input class="field" type="text">
    12     <p>性别:
    13       <select class="field" name="male">
    14         <option value="volvo">男</option>
    15         <option value="saab">女</option>
    16         <option value="audi">保密</option>
    17       </select>
    18     </p>

    备注当控件失去焦点时,change()才会执行,如果想实时监测文本框输入改变,请参考bind()事件

     $(selector).bind('input propertychange',function(){
               //your code
      });
  • 相关阅读:
    笨方法学python中执行argv提示ValueError: not enough values to unpack (expected 4, got 1)
    VMware workstation安装
    Redis bigkey分析
    MySQL drop table 影响及过程
    MySQL 大表硬连接删除
    ES elasticsearch 各种查询
    ES elasticsearch 各种聚合
    ES elasticsearch 聚合统计
    ES elasticsearch 实现 count单字段,分组取前多少位,以地理位置中心进行统计
    MySQL行溢出、varchar最多能存多少字符
  • 原文地址:https://www.cnblogs.com/qiujinyong/p/4958770.html
Copyright © 2011-2022 走看看