JQuery 常用方法和事件详细介绍


Posted in Javascript onApril 18, 2013

文档就绪函数
$(document).ready(function(){
--- jQuery functions go here ----
});
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数,操作可能失败。(试图隐藏一个不存在的元素;获得未完全加载的图像的大小)

把所有 jQuery 代码置于事件处理函数中
把所有事件处理函数置于文档就绪事件处理器中

hide/show/toogle
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示或切换完成后所执行的函数名称。

jQuery 事件

Event 函数 绑定函数至
$(document).ready(function) 将函数绑定到文档的就绪事件(当文档完成加载时)
$(selector).click(function) 触发或将函数绑定到被选元素的点击事件
$(selector).dblclick(function) 触发或将函数绑定到被选元素的双击事件
$(selector).focus(function) 触发或将函数绑定到被选元素的获得焦点事件
$(selector).mouseover(function) 触发或将函数绑定到被选元素的鼠标悬停事件

jQuery Fading 方法:

通过 jQuery,您可以实现元素的淡入淡出效果。

jQuery 拥有下面四种 fade 方法:

  • fadeIn()
  • fadeOut()
  • fadeToggle()

可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。可选的 callback 参数是 fading 完成后所执行的函数名称。

  • fadeTo()

jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。

$(selector).fadeTo(speed,opacity,callback);

必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。

必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。

  可选的 callback 参数是该函数完成后所执行的函数名称。

由于 JavaScript 语句(指令)是逐一执行的,按照次序,动画之后的语句可能会产生错误或页面冲突,因为动画还没有完成。

为了避免这个情况,您可以以参数的形式添加 Callback 函数。如果您希望在一个涉及动画的函数之后来执行语句,请使用 callback 函数。

Javascript 相关文章推荐
最近项目写了一些js,水平有待提高
Jan 31 Javascript
在iframe里的页面编写js,实现在父窗口上创建动画效果展开和收缩的div(不变动iframe父窗口代码)
Dec 20 Javascript
javascript学习总结之js使用技巧
Sep 02 Javascript
JavaScript 七大技巧(二)
Dec 13 Javascript
Angularjs注入拦截器实现Loading效果
Dec 28 Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 Javascript
JS查找字符串中出现最多的字符及个数统计
Feb 04 Javascript
Ionic2调用本地SQlite实例
Apr 22 Javascript
Vue2 配置 Axios api 接口调用文件的方法
Nov 13 Javascript
深入koa-bodyparser原理解析
Jan 16 Javascript
JS实现将对象转化为数组的方法分析
Jan 21 Javascript
JS中比较两个Object数组是否相等方法实例
Nov 11 Javascript
基于JQuery 滑动与动画的说明介绍
Apr 18 #Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
Apr 18 #Javascript
基于JQuery 选择器使用说明介绍
Apr 18 #Javascript
关于jquery css的使用介绍
Apr 18 #Javascript
js字符串转换成xml对象并使用技巧解读
Apr 18 #Javascript
jQuery使用技巧简单汇总
Apr 18 #Javascript
document.documentElement的一些使用技巧
Apr 18 #Javascript
You might like
php中长文章分页显示实现代码
2012/09/29 PHP
php数组保存文本与文本反编成数组实例
2014/11/13 PHP
PHP 数据结构队列(SplQueue)和优先队列(SplPriorityQueue)简单使用实例
2015/05/12 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
JavaScript之HTMLCollection接口代码
2011/04/27 Javascript
js 编码转换 gb2312 和 utf8 互转的2种方法
2013/08/07 Javascript
javascript:window.open弹出窗口的位置问题
2014/03/18 Javascript
怎么通过onclick事件获取js函数返回值(代码少)
2015/07/28 Javascript
微信小程序 本地存储及登录页面处理实例详解
2017/01/11 Javascript
利用百度地图API获取当前位置信息的实例
2017/11/06 Javascript
微信小程序如何播放腾讯视频的实现
2019/09/20 Javascript
Vue路由管理器Vue-router的使用方法详解
2020/02/05 Javascript
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
[01:01:52]DOTA2-DPC中国联赛正赛 iG vs LBZS BO3 第一场 3月4日
2021/03/11 DOTA
Python标准库与第三方库详解
2014/07/22 Python
Python中super()函数简介及用法分享
2016/07/11 Python
为什么你还不懂得怎么使用Python协程
2019/05/13 Python
用Python实现最速下降法求极值的方法
2019/07/10 Python
python如何运行js语句
2020/09/09 Python
Book Depository美国:全球领先的专业网上书店之一
2019/08/14 全球购物
兰蔻法国官方网站:Lancôme法国
2020/02/22 全球购物
教师绩效考核方案
2014/01/21 职场文书
中学生差生评语
2014/01/30 职场文书
恶搞卫生巾广告词
2014/03/18 职场文书
食品安全责任书
2014/04/15 职场文书
2014年团工作总结
2014/11/27 职场文书
硕士毕业论文导师评语
2014/12/31 职场文书
工程催款通知书
2015/04/17 职场文书
2015年实习班主任工作总结
2015/04/23 职场文书
消防演习通知
2015/04/25 职场文书
同事去世追悼词
2015/06/23 职场文书
运动会报道稿大全
2015/07/23 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书
Python趣味挑战之用pygame实现简单的金币旋转效果
2021/05/31 Python
什么是css原子化,有什么用?
2022/04/24 HTML / CSS