JQuery入门(5)
2015-04-20 14:28
218 查看
一、页面加载事件
在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()方法完成是执行的函数。
示例如下:
四、移除事件
unbind() 方法移除被选元素的事件处理程序。该方法能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行。
语法形式:$(selector).unbind(event,function)
其中参数event表示需要移除的事件名称,多个事件名用空格隔开,function参数为事件执行时调用的函数名称。
在jQuery中页面加载事件是ready()。ready()事件类似于就JavaScript中的onLoad()事件,但前者只要页面的DOM结构加载后便触发,而后者必须在页面全部元素加载成功才触发,ready()可以写多个,按顺序执行。
ready()方法的几种写法:
写法一:
$(document).ready(function(){
//代码部分
});
//写法二:
$(function(){
//代码部分
})
写法二简洁明了,使用是最广泛的。
二、绑定事件
在jQuery中可以使用bind()方法进行事件的绑定。bind()功能是给每个选择元素的事件绑定处理函数。
语法:$(selector).bind(event,[data] function)
参数event为事件名称,多个事件名称用空格隔开,function为事件执行的函数。
示例如下:
<script type="text/javascript"> $(function(){ $("#btnClick").bind("click", function () { $(this).attr("disabled", "true"); }) }) </script> ...省略代码 <h3>bind()方法绑定事件</h3> <input id="btnClick" type="button" value="点击之后按钮不可用">
三、切换事件
在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参数为事件执行时调用的函数名称。
相关文章推荐
- (2)入门指南——(3)为什么jquery工作的很好(Why jQuery works well)
- jQuery入门(3):DOM(选择器,属性,筛选,文档处理)
- jQueryUI Autocomplete插件使用入门教程(最新版)---------转载
- jquery $.ajax入门应用二
- jQuery是什么,jQuery入门简介
- 从零开始学jQuery:jQuery与Ajax入门
- jQuery入门[5]-AJAX
- jquery.validate.js的基本用法入门
- Jquery学习入门一
- jQuery 入门
- jQuery中文入门指南,翻译加实例,jQuery的起点教程
- 从零开始学习jQuery 开天辟地入门篇<转>
- Jquery基础入门一内置方法和属性(2)
- jQuery入门[1]-构造函数
- jQuery学习入门总结之css()和addClass()的不同
- jQuery学习笔记之一——jQuery入门与基础核心
- jquery 入门教程 [翻译] 推荐
- 从零开始学习jQuery:一、开天辟地入门篇(子秋出品)
- JQuery入门——用unbind方法移除绑定事件
- jQuery快速入门