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 相关文章推荐
THREE.JS入门教程(4)创建粒子系统
Jan 24 Javascript
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
jquery mobile实现拨打电话功能的几种方法
Aug 05 Javascript
js实现浏览器的各种菜单命令比如打印、查看源文件等等
Oct 24 Javascript
jQuery选择器源码解读(二):select方法
Mar 31 Javascript
jquery实现邮箱自动填充提示功能
Nov 17 Javascript
AngularJS中重新加载当前路由页面的方法
Mar 09 Javascript
JavaScript实现预览本地上传图片功能完整示例
Mar 08 Javascript
jQuery实现input输入框获取焦点与失去焦点时提示的消失与显示功能示例
May 27 jQuery
vue-cli3 取消eslint校验代码的解决办法
Jan 16 Javascript
JavaScript设计模式---单例模式详解【四种基本形式】
May 16 Javascript
原生JS实现多条件筛选
Aug 19 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
真正的ZIP文件操作类(php)
2007/07/21 PHP
PHP设计模式之责任链模式的深入解析
2013/06/13 PHP
PHP防止注入攻击实例分析
2014/11/03 PHP
WordPress中获取页面链接和标题的相关PHP函数用法解析
2015/12/17 PHP
thinkPHP中多维数组的遍历方法
2016/01/09 PHP
php简单备份与还原MySql的方法
2016/05/09 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
JS面向对象、prototype、call()、apply()
2009/05/14 Javascript
Jquery Ajax学习实例4 向WebService发出请求,返回实体对象的异步调用
2010/03/16 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
js实现简洁的TAB滑动门效果代码
2015/09/06 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
python实现域名系统(DNS)正向查询的方法
2016/04/19 Python
Python语言生成水仙花数代码示例
2017/12/18 Python
python处理csv数据动态显示曲线实例代码
2018/01/23 Python
50行Python代码实现人脸检测功能
2018/01/23 Python
Python日期时间模块datetime详解与Python 日期时间的比较,计算实例代码
2018/09/14 Python
Django 实现xadmin后台菜单改为中文
2019/11/15 Python
python爬虫开发之urllib模块详细使用方法与实例全解
2020/03/09 Python
使用css实现android系统的loading加载动画
2019/07/25 HTML / CSS
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
日本著名的服饰鞋帽综合类购物网站:MAGASEEK
2019/01/09 全球购物
初任培训自我鉴定
2013/10/07 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
淘宝客服工作职责
2014/07/11 职场文书
2014年后勤工作总结范文
2014/12/16 职场文书
酒店工程部主管岗位职责
2015/04/16 职场文书
会议室使用管理制度
2015/08/06 职场文书
乡镇团代会开幕词
2016/03/04 职场文书
读《茶花女》有感:山茶花的盛开与凋零
2020/01/17 职场文书