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 相关文章推荐
ie 处理 gif动画 的onload 事件的一个 bug
Apr 12 Javascript
创建一个复制UBB软件信息的链接或按钮的js代码
Jan 06 Javascript
javascript setTimeout()传递函数参数(包括传递对象参数)
Apr 07 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 Javascript
js实现的切换面板实例代码
Jun 17 Javascript
JS小游戏之仙剑翻牌源码详解
Sep 25 Javascript
js判断浏览器类型及设备(移动页面开发)
Jul 30 Javascript
JS原生带小白点轮播图实例讲解
Jul 22 Javascript
基于js中this和event 的区别(详解)
Oct 24 Javascript
Javascript 类型转换、封闭函数及常见内置对象操作示例
Nov 15 Javascript
vue实现浏览器全屏展示功能
Nov 27 Javascript
Vue的自定义组件不能使用click方法的解决
Jul 28 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 生成WML页面方法详解
2009/08/09 PHP
php多文件上传实现代码
2014/02/20 PHP
PHP SPL标准库之文件操作(SplFileInfo和SplFileObject)实例
2015/05/11 PHP
PHP中SSO Cookie登录分析和实现
2015/11/06 PHP
php实现往pdf中加数字签名操作示例【附源码下载】
2018/08/07 PHP
PHP将英文数字转换为阿拉伯数字实例讲解
2019/01/28 PHP
Javascript中对象继承的实现小例
2014/05/12 Javascript
基于canvas实现的钟摆效果完整实例
2016/01/26 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
JS实现刷新父页面不弹出提示框的方法
2016/06/22 Javascript
Nodejs中解决cluster模块的多进程如何共享数据问题
2016/11/10 NodeJs
微信小程序 图片边框解决方法
2017/01/16 Javascript
Ionic2调用本地SQlite实例
2017/04/22 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
node.js将MongoDB数据同步到MySQL的步骤
2017/12/10 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
2018/01/08 Javascript
javascript标准库(js的标准内置对象)总结
2018/05/26 Javascript
浅谈super-vuex使用体验
2018/06/25 Javascript
angularJs中ng-model-options设置数据同步的方法
2018/09/30 Javascript
express如何解决ajax跨域访问session失效问题详解
2019/06/20 Javascript
在微信小程序中使用mqtt服务的方法
2019/12/13 Javascript
基于vue--key值的特殊用处详解
2020/07/31 Javascript
python3.5仿微软计算器程序
2020/03/30 Python
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
python3 selenium 切换窗口的几种方法小结
2018/05/21 Python
Django1.9 加载通过ImageField上传的图片方法
2018/05/25 Python
python selenium 获取接口数据的实现
2020/12/07 Python
CSS3中的5个有趣的新技术
2009/04/02 HTML / CSS
拉飞逸官网:Lafayette 148 New York
2020/07/15 全球购物
个人批评与自我批评发言稿
2014/09/28 职场文书
2014年客户经理工作总结
2014/11/20 职场文书
单位计划生育责任书
2015/05/09 职场文书
目标责任书格式范文
2015/05/11 职场文书
道歉短信大全
2015/05/12 职场文书
合作意向书范本
2019/04/17 职场文书
Win10开机修复磁盘错误怎么跳过?Win10关闭开机磁盘检查的方法
2022/09/23 数码科技