- 浏览: 2990793 次
- 性别:
- 来自: 河南
文章分类
- 全部博客 (340)
- Java综合 (26)
- 程序人生 (53)
- RIA-ExtJS专栏 (18)
- RIA-mxGraph专栏 (4)
- RIA-Flex4专栏 (43)
- 框架-Spring专栏 (16)
- 框架-持久化专栏 (22)
- 框架-Struts2专栏 (11)
- 框架-Struts专栏 (12)
- SQL/NOSQL (12)
- 报表/图表 (2)
- 工作流 (5)
- XML专栏 (4)
- 日常报错解决方案 (5)
- Web前端-综合 (12)
- Web/JSP (14)
- Web前端-ajax专栏 (14)
- Web前端-JQuery专栏 (9)
- IDE技巧 (6)
- FILE/IO (14)
- 远程服务调用 (2)
- SSO单点登录 (2)
- 资源分享 (22)
- 云计算 (1)
- 项目管理 (3)
- php专栏 (1)
- Python专栏 (2)
- Linux (1)
- 缓存系统 (1)
- 队列服务器 (1)
- 网络编程 (0)
- Node.js (1)
最新评论
-
hui1989106a:
我的也不能解压,360和好压都试了,都不行
《Spring in Action》完整中文版分享下载 -
temotemo:
这些example有些过时了,官方建议使用HBase-1.0 ...
Java操作Hbase进行建表、删表以及对数据进行增删改查,条件查询 -
zy8102:
非常感谢~
HeadFirst系列之七:《深入浅出SQL》原版高清PDF电子书分享下载 -
zy8102:
重命名了一下搞定了
HeadFirst系列之七:《深入浅出SQL》原版高清PDF电子书分享下载 -
zy8102:
为什么下载以后老解压不了呢?
HeadFirst系列之七:《深入浅出SQL》原版高清PDF电子书分享下载
jQuery 是为事件处理特别设计的。
————————————————————
jQuery 事件函数
隐藏、显示、切换、滑动 以及动画
实例
jQuery hide()
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").click(function(){ $(this).hide(); }); }); </script> </head> <body> <p>If you click on me, I will disappear.</p> </body> </html>
演示简单的 jQuery hide() 函数。
jQuery hide()
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".ex .hide").click(function(){ $(this).parents(".ex").hide("slow"); }); }); </script> <style type="text/css"> div.ex { background-color:#e5eecc; padding:7px; border:solid 1px #c3c3c3; } </style> </head> <body> <h3>Island Trading</h3> <div class="ex"> <button class="hide" type="button">Hide me</button> <p>Contact: Helen Bennett<br /> Garden House Crowther Way<br /> London</p> </div> <h3>Paris Trading</h3> <div class="ex"> <button class="hide" type="button">Hide me</button> <p>Contact: Marie Bertrand<br /> 265, Boulevard Charonne<br /> Paris</p> </div> </body> </html>
另一个 hide() 演示。如何隐藏部分文本。
jQuery slideToggle()
<html> <head> <script type="text/javascript" src="/jquery/jquery.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>Because time is valuable, we deliver quick and easy learning.</p> <p>At W3School, you can study everything you need to learn, in an accessible and handy format.</p> </div> <p class="flip">Show/Hide Panel</p> </body> </html>
演示简单的 slide panel 效果。
jQuery fadeTo()
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("div").fadeTo("slow",0.25); }); }); </script> </head> <body> <div id="test" style="background:yellow;width:300px;height:300px"> <button type="button">Click to Fade</button> </div> </body> </html>
演示简单的 jQuery fadeTo() 函数。
jQuery animate()
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#start").click(function(){ $("#box").animate({height:300},"slow"); $("#box").animate({width:300},"slow"); $("#box").animate({height:100},"slow"); $("#box").animate({width:100},"slow"); }); }); </script> </head> <body> <p><a href="#" id="start">Start Animation</a></p> <div id="box" style="background:#98bf21;height:100px;width:100px;position:relative"> </div> </body> </html>
演示简单的 jQuery animate() 函数。
————————————————————
jQuery 隐藏和显示
通过 hide() 和 show() 两个函数,jQuery 支持对 HTML 元素的隐藏和显示:
实例
<html> <head> <script type="text/javascript" src="/jquery/jquery.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">If you click on the "Hide" button, I will disappear.</p> <button id="hide" type="button">Hide</button> <button id="show" type="button">Show</button> </body> </html>hide() 和 show() 都可以设置两个可选参数:speed 和 callback。
语法:
$(selector).hide(speed,callback) $(selector).show(speed,callback)callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
speed 参数可以设置这些值:"slow", "fast", "normal" 或 milliseconds:
实例
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").hide(1000); }); }); </script> </head> <body> <button type="button">Hide</button> <p>This is a paragraph with little content.</p> <p>This is another small paragraph.</p> </body> </html>
————————————————————
jQuery 切换
jQuery toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素的可见状态。
隐藏显示的元素,显示隐藏的元素。
语法:
$(selector).toggle(speed,callback)speed 参数可以设置这些值:"slow", "fast", "normal" 或 毫秒。
实例
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").toggle(); }); }); </script> </head> <body> <button type="button">Toggle</button> <p>This is a paragraph with little content.</p> <p>This is another small paragraph.</p> </body> </html>
callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback
参数的知识。
————————————————————
jQuery 滑动函数 - slideDown, slideUp, slideToggle
jQuery 拥有以下滑动函数:
$(selector).slideDown(speed,callback) $(selector).slideUp(speed,callback) $(selector).slideToggle(speed,callback)speed 参数可以设置这些值:"slow", "fast", "normal" 或 毫秒。
callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
slideDown() 实例
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideDown("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>Because time is valuable, we deliver quick and easy learning.</p> <p>At W3School, you can study everything you need to learn, in an accessible and handy format.</p> </div> <p class="flip">Show Panel</p> </body> </html>
slideUp() 实例
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".flip").click(function(){ $(".panel").slideUp("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; } </style> </head> <body> <div class="panel"> <p>Because time is valuable, we deliver quick and easy learning.</p> <p>At W3School, you can study everything you need to learn, in an accessible and handy format.</p> </div> <p class="flip">Hide Panel</p> </body> </html>slideToggle() 实例
<html> <head> <script type="text/javascript" src="/jquery/jquery.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>Because time is valuable, we deliver quick and easy learning.</p> <p>At W3School, you can study everything you need to learn, in an accessible and handy format.</p> </div> <p class="flip">Show/Hide Panel</p> </body> </html>
————————————————————
jQuery Fade 函数 - fadeIn(), fadeOut(), fadeTo()
jQuery 拥有以下 fade 函数:
$(selector).fadeIn(speed,callback) $(selector).fadeOut(speed,callback) $(selector).fadeTo(speed,opacity,callback)speed 参数可以设置这些值:"slow", "fast", "normal" 或 毫秒。
fadeTo() 函数中的 opacity 参数规定减弱到给定的不透明度。
callback 参数是在 hide 或 show 函数完成之后被执行的函数名称。您将在本教程下面的章节学习更多有关 callback 参数的知识。
fadeTo() 实例
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("div").fadeTo("slow",0.25); }); }); </script> </head> <body> <div id="test" style="background:yellow;width:300px;height:300px"> <button type="button">Click to Fade</button> </div> </body> </html>
fadeOut() 实例
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#test").click(function(){ $(this).fadeOut(4000); }); }); </script> </head> <body> <div id="test" style="background:yellow;width:200px">CLICK ME AWAY!</div> <p>If you click on the box above, it will be removed.</p> </body> </html>
————————————————————
jQuery 自定义动画
jQuery 函数创建自定义动画的语法:
$(selector).animate({params},[duration],[easing],[callback])
关键的参数是 params。它定义了产生动画的属性。可以同时设置多个此类属性:
animate({width:"70%",opacity:0.4,marginLeft:"0.6in",fontSize:"3em"});第二个参数是 duration。它定义用来应用于动画的时间。它设置的值是:"slow", "fast", "normal" 或 毫秒。
实例 1
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#start").click(function(){ $("#box").animate({height:300},"slow"); $("#box").animate({width:300},"slow"); $("#box").animate({height:100},"slow"); $("#box").animate({width:100},"slow"); }); }); </script> </head> <body> <p><a href="#" id="start">Start Animation</a></p> <div id="box" style="background:#98bf21;height:100px;width:100px;position:relative"> </div> </body> </html>
实例 2
<html> <head> <script type="text/javascript" src="/jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#start").click(function(){ $("#box").animate({left:"100px"},"slow"); $("#box").animate({fontSize:"3em"},"slow"); }); }); </script> </head> <body> <p><a href="#" id="start">Start Animation</a></p> <div id="box" style="background:#98bf21;height:100px;width:200px;position:relative"> HELLO </div> </body> </html>HTML 元素默认是静态定位,且无法移动。
如需使元素可以移动,请把 CSS 的 position 设置为 relative 或 absolute。
————————————————————
jQuery 效果 - 来自本页
函数
描述
$(selector).hide()
隐藏被选元素
$(selector).show()
显示被选元素
$(selector).toggle()
切换(在隐藏与显示之间)被选元素
$(selector).slideDown()
向下滑动(显示)被选元素
$(selector).slideUp()
向上滑动(隐藏)被选元素
$(selector).slideToggle()
对被选元素切换向上滑动和向下滑动
$(selector).fadeIn()
淡入被选元素
$(selector).fadeOut()
淡出被选元素
$(selector).fadeTo()
把被选元素淡出为给定的不透明度
$(selector).animate()
对被选元素执行自定义动画
发表评论
-
JQuery简单学习(9)——jQuery AJAX 函数
2010-12-27 11:12 2698jQuery 拥有供 AJAX 开发的丰富函数(方法)库 ... -
JQuery简单学习(8)——jQuery CSS 函数
2010-12-27 11:05 1812jQuery CSS 操作 jQuery 拥有三种供 ... -
JQuery简单学习(7)——jQuery HTML 操作
2010-12-27 11:00 2574jQuery 包含很多供改变和操作 HTML 的强大函数 ... -
JQuery简单学习(6)——JQuery Callback 函数
2010-12-27 10:53 7209动画创造了对 callback 函数的需求。 ———— ... -
JQuery简单学习(4)——JQuery事件
2010-12-27 10:36 1658jQuery 是为事件处理特别设计的。 ——————— ... -
JQuery简单学习(3)——JQuery选择器
2010-12-27 10:11 1426选择器允许您对元素组或单个元素进行操作。 —————— ... -
JQuery简单学习(2)——JQuery语法
2010-12-27 10:04 2117通过 jQuery,您可以选取(查询,query) HT ... -
JQuery简单学习(1)——JQuery简介
2010-12-27 09:54 1979Jquery是继prototype之后又一个优秀的Java ...
相关推荐
一天搞定jQuery(四)——使用jQuery完成省市二级联动的效果
jquery图片加载动画——queryloader2 兼容所有浏览器
一天搞定jQuery(二)——使用jQuery表格的隔行换色
一天搞定jQuery(五)——使用jQuery完成下拉列表左右选择
一天搞定jQuery(一)——使用jQuery完成定时弹出广告
jQuery中文版1.4——1.7API参考手册CHM版
一天搞定jQuery(三)——使用jQuery完成复选框的全选和全不选
用jquery仿sohu登录——邮箱文本框输入提示 最近在弄一个网站,会员注册、登录时均需要邮箱,为是用户录入,仿sohu登录,用jquery做了一个邮箱输入智能提示,不足之处,请大家指正,不要只扔板砖啊...呵... 目前ie,...
jQuery实例讲解——通过一些小实例讲解jQuery的应用
NULL 博文链接:https://xa-zbl.iteye.com/blog/552797
完整的jquery简单校验,适合初学者,希望对大家有帮助,会陆续上传其他实例
jquery 分页——jqueryPage.js
jQuery.fn = jQuery.prototype = {jquery: core_version,init: function(selector, co
利用jquery实现了基础的可编辑表格的操作.
1. 引入 1. 如果数据与展示无关,那么就违背了model和view分离的原则,DOM不友好 2. 如果数据量比较大,会使得DOM结构复杂化,并且每次访问数据
jQuery Smoove一个简单的jQuery插件使用CSS3实现超级性感的滚动效果
jquery引用文件,jquery.min.js和jquery.js............希望可以帮助到大家
代码如下:当然,jQuery的Callbacks不是这么简单,jQuery的Callbacks支持如下选项:once:确保fire只执行一次,之后的fire不再
1. 源码分析jQuery.extend = jQuery.fn.extend = function() {var options, name, src, co
JQuery本地文件管理器——界面截图,欢迎大家下载