jquery学习笔记(三)：事件和应用

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

3.1 页面加载事件

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

ready()方法的几种写法：

 //写法一：
 $(document).ready(function(){
     //代码部分
 });

 //写法二：

 $(function(){
     //代码部分
 })

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

3.2 绑定事件

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

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

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

示例如下：

 <script type="text/javascript">
 $(function(){ 

     //绑定按钮点击事件
     $("#btnClick").bind("click", function () {
       $(this).attr("disabled", "true");
     })

     //实时监测输入变化（不是失去焦点），适用于input、textare
     $('#advice').bind('input propertychange', function() {
 　      //代码
     });

  })

 </script>
 ...省略代码

 <h3> bind()方法绑定事件</h3>

 <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()方法完成是执行的函数。

示例如下：

 <script type="text/javascript">
 $(function(){ // hover()方法的使用
     $("div").hover(
         function(){
             $(this).append("**:爆装备**");
         },
         function(){
             $("b").remove();
         }
     );
 })
 $(function(){//给div改变背景颜色
     $("#btn").toggle(
         function(){
             $("div").css("background-color","green");
         },
         function(){
             $("div").css("background-color","red");
         },
         function(){
             $("div").css("background-color","yellow");
         }
     );
 })
 $(function(){//显示和隐藏div
     $("#btn").click(function(){
         $("div").toggle(1000);
     });
 })
 </script>
 ...省略代码

 <h3> 切换事件</h3>

 <div id="bindTest">打土豪</div>鼠标移上去看看
 <input type="button" id="btn" value="toggle()方法改变div背景色">

3.4 移除事件

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

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

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

示例如下：

 ...省略代码<p></p>
 <p><script type="text/javascript">
 $(function(){
     $("div").click(function(){
         $(this).slideToggle();//给div注册隐藏事件
     });
     $("#btn").click(function(){
         $("div").unbind();//把div的事件移除
     });
 })
 </script>
 ...省略代码</p>
 <h3> 移除事件</h3>

 <div>帽子,点击之后消失</div>
 <div>上衣,点击之后消失</div>
 <div>裤子,点击之后消失</div>
 <div>内裤,点击之后消失</div>
 <div>鞋子,点击之后消失</div>
 <input type="button" id="btn" value="点击之后隐藏事件被移除了">
 ...省略代码

3.5 一次性事件

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

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

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

示例如下：

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

3.6 手动触发指定事件

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

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

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

示例如下：

 <script type="text/javascript">
 $(function(){
     $("div").bind("append-content",function(){
         $(this).append("**，那是我逝去的青春**");
     });
     $("div").trigger("append-content");
 })
 </script>
 ...省略代码
     <h3>trigger()手动触发事件</h3>
     <div>在夕阳下奔跑,</div>
     <div>在夕阳下奔跑</div>

3.7 焦点事件

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

示例如下：

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

3.8 change()改变事件

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

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

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

示例如下：

 <script type="text/javascript">
 $(function(){
     $(".field").change(function(){
     $(this).css("background-color","#FFFFCC");
     });
 })
 </script>
 ...省略代码

     <p>在某个域被使用或改变时，它会改变颜色。</p>
     名 称: <input class="field" type="text">
     <p>性别:
       <select class="field" name="male">
         <option value="volvo">男</option>
         <option value="saab">女</option>
         <option value="audi">保密</option>
       </select>
     </p>

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

 $(selector).bind('input propertychange',function(){
           //your code
  });