JQuery入门(5)

xiaoxiao2024-01-19 161

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

ready()方法的几种写法：写法一：

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

$(function(){ //代码部分 }) 写法二简洁明了，使用是最广泛的。二、绑定事件在jQuery中可以使用bind()方法进行事件的绑定。bind()功能是给每个选择元素的事件绑定处理函数。

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

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

示例如下：

三、切换事件在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("<b>:爆装备</b>"); }, 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背景色"> ...省略代码

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

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

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