JavaScript(16)jQuery 事件
2014-05-27 10:52
232 查看
jQuery 事件
jQuery 是为事件处理特别设计的。
jQuery 事件函数
jQuery 事件处理方法是 jQuery 中的核心函数。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。
通常会把 jQuery 代码放到 <head>部分的事件处理方法中:
单独文件中的函数
如果网站包含许多页面,并希望 jQuery 函数易于维护,那么可以把 jQuery 函数放到独立的 .js 文件中。
jQuery 名称冲突
jQuery 使用 $ 符号作为 jQuery 的简写。(我现在才理解这句话的意思,即:使用 $ 等价于使用 jQuery。)
某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。jQuery 使用名为
noConflict() 的方法来解决该问题。noConflict() 方法会释放会 $ 标识符的控制,这样其他脚本就可以使用它了。
使用 jq 来代替 $ 符号:
如果 jQuery 代码块使用 $ 简写,并且不愿意改变这个快捷方式,那么可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外,依旧不得不使用 "jQuery":
结论:
由于 jQuery 是为处理 HTML 事件而特别设计的,遵循以下原则时,代码会更恰当且更易维护:
把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中($(document).ready(function){......})
把 jQuery 代码置于单独的 .js 文件中
如果存在名称冲突,则重命名 jQuery 库
说完了事件,然后就是具体方法了。方法很多,如果以后有机会用到,可以边用边学习。
列几个比较常用或是有用的方法吧。。。
jQuery 效果
隐藏和显示
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
可以使用 toggle() 方法来切换 hide() 和 show() 方法。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
淡入淡出
jQuery 拥有下面四种 fade 方法:
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
jQuery fadeIn() 用于淡入已隐藏的元素。
如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
可选的 callback 参数是该函数完成后所执行的函数名称。
滑动
jQuery 拥有以下滑动方法:
slideDown()
slideUp()
slideToggle()
jQuery slideDown() 方法用于向下滑动元素。
如果元素向下滑动,则 slideToggle() 可向上滑动它们。
如果元素向上滑动,则 slideToggle() 可向下滑动它们。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
隐藏和显示、淡入淡出、滑动的例子:
jQuery 是为事件处理特别设计的。
jQuery 事件函数
jQuery 事件处理方法是 jQuery 中的核心函数。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。术语由事件“触发”(或“激发”)经常会被使用。
通常会把 jQuery 代码放到 <head>部分的事件处理方法中:
<html> <head> <script type="text/javascript" src="jquery-1.11.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").hide(); }); }); </script> </head> <body> <h2>This is a heading</h2> <p>This is a paragraph.</p> <p>This is another paragraph.</p> <button>Click me</button> </body> </html>在上面的例子中,当按钮的点击事件被触发时会调用一个函数:
$("button").click(function() {..some code...} )该方法隐藏所有 <p> 元素:
$("p").hide();
单独文件中的函数
如果网站包含许多页面,并希望 jQuery 函数易于维护,那么可以把 jQuery 函数放到独立的 .js 文件中。
jQuery 名称冲突
jQuery 使用 $ 符号作为 jQuery 的简写。(我现在才理解这句话的意思,即:使用 $ 等价于使用 jQuery。)
某些其他 JavaScript 库中的函数(比如 Prototype)同样使用 $ 符号。jQuery 使用名为
noConflict() 的方法来解决该问题。noConflict() 方法会释放会 $ 标识符的控制,这样其他脚本就可以使用它了。
使用 jq 来代替 $ 符号:
var jq = $.noConflict();等价于:
var jq = jQuery.noConflict();
如果 jQuery 代码块使用 $ 简写,并且不愿意改变这个快捷方式,那么可以把 $ 符号作为变量传递给 ready 方法。这样就可以在函数内使用 $ 符号了 - 而在函数外,依旧不得不使用 "jQuery":
$.noConflict(); jQuery(document).ready(function($){ $("button").click(function(){ $("p").text("jQuery 仍在运行!"); }); });
结论:
由于 jQuery 是为处理 HTML 事件而特别设计的,遵循以下原则时,代码会更恰当且更易维护:
把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中($(document).ready(function){......})
把 jQuery 代码置于单独的 .js 文件中
如果存在名称冲突,则重命名 jQuery 库
说完了事件,然后就是具体方法了。方法很多,如果以后有机会用到,可以边用边学习。
列几个比较常用或是有用的方法吧。。。
jQuery 效果
隐藏和显示
$(selector).hide(speed,callback); $(selector).show(speed,callback);可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
可以使用 toggle() 方法来切换 hide() 和 show() 方法。
$(selector).toggle(speed,callback);可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。
淡入淡出
jQuery 拥有下面四种 fade 方法:
fadeIn()
fadeOut()
fadeToggle()
fadeTo()
jQuery fadeIn() 用于淡入已隐藏的元素。
$(selector).fadeIn(speed,callback);jQuery fadeOut() 方法用于淡出可见元素。
$(selector).fadeOut(speed,callback);jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
$(selector).fadeToggle(speed,callback);以上3个方法的参数:
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
$(selector).fadeTo(speed,opacity,callback);必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
可选的 callback 参数是该函数完成后所执行的函数名称。
滑动
jQuery 拥有以下滑动方法:
slideDown()
slideUp()
slideToggle()
jQuery slideDown() 方法用于向下滑动元素。
$(selector).slideDown(speed,callback);jQuery slideUp() 方法用于向上滑动元素。
$(selector).slideUp(speed,callback);jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动,则 slideToggle() 可向上滑动它们。
如果元素向上滑动,则 slideToggle() 可向下滑动它们。
$(selector).slideToggle(speed,callback);以上3个方法的参数:
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
隐藏和显示、淡入淡出、滑动的例子:
<head> <script src="jquery-1.11.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); }); </script> </head> <body> <p id="p1">如果点击“隐藏”按钮,我就会消失;再点击“显示”按钮,我就会出现。</p> <button id="hide" type="button">隐藏</button> <button id="show" type="button">显示</button> </body>
<head> <script src="jquery-1.11.1.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000); }); }); </script> </head> <body> <p>演示带有不同参数的 fadeToggle() 方法。</p> <button>点击这里,使三个矩形淡入淡出</button> <br><br> <div id="div1" style="width:80px;height:80px;background-color:red;"></div> <br> <div id="div2" style="width:80px;height:80px;background-color:green;"></div> <br> <div id="div3" style="width:80px;height:80px;background-color:blue;"></div> </body>
<head> <script src="jquery-1.11.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideToggle("slow"); }); }); </script> <style type="text/css"> div.panel,p.flip { margin:0px; padding:5px; text-align:center; background:#e5eecc; border:solid 1px #c3c3c3; } div.panel { height:120px; display:none; } </style> </head> <body> <div class="panel"> <p>出现了</p> </div> <p class="flip">请点击这里</p> </body>
相关文章推荐
- JavaScript事件详解-jQuery的事件实现(三)
- javascript的onchange事件与jQuery的change()方法
- Javascript开发之十三:jQuery中的事件,链式调用,隐式递归
- jQuery javaScript捕获回车事件(示例代码)
- Javascript事件模型系列(三)jQuery中的事件监听方式及异同点
- 本周ASP.NET英文技术文章推荐[02/03 - 02/16]:MVC、Visual Studio 2008、安全性、性能、LINQ to JavaScript、jQuery
- jquery|javascript 回车事件
- javascript 的onclick和click 在 ie 和mozilla中的使用 ;jquery 的dom事件绑定
- javascript 的onclick和click 在 ie 和mozilla中的使用 ;jquery 的dom事件绑定
- javascript事件绑定1-模拟jquery可爱的东西
- javascript的onchange事件与jQuery的change()方法比较
- jquery与javascript中的两个页面加载事件 window.onload 与 $(document).ready(function(){})区别
- javascript中用Jquery注册button的click事件不能响应
- 如何解决asp.net 在vs2010(.net framework 4.0)中listview控件用jquery,javascript为模版中的服务端控件注入事件的方法?因为vs2010在这个方面有存在的bug!
- jQuery与javascript事件对比
- javascript的onchange事件与jQuery的change()方法比较
- javascript事件机制与jQuery.bind的补充说明
- Jquery实现双击行的同时不单计行(在Javascript中让单击Click和Double Click双击事件各自独立)
- 关于jQuery与Javascript的事件绑定
- JavaScript 事件委托 以及jQuery对事件委托的支持