内容来自【汇智网】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 });