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 相关文章推荐
JavaScript中也使用$美元符号来代替document.getElementById
Jun 19 Javascript
收集的10个免费的jQuery相册
Feb 26 Javascript
js实现瀑布流的一种简单方法实例分享
Nov 04 Javascript
解决jquery中美元符号命名冲突问题
Jan 08 Javascript
对Jquery中的ajax再封装,简化操作示例
Feb 12 Javascript
js制作简易年历完整实例
Jan 28 Javascript
深入理解JavaScript系列(45):代码复用模式(避免篇)详解
Mar 04 Javascript
javascript实现点击提交按钮后显示loading的方法
Jul 03 Javascript
js实现YouKu的漂亮搜索框效果
Aug 19 Javascript
微信小程序 用户数据解密详细介绍
Jan 09 Javascript
vue项目使用.env文件配置全局环境变量的方法
Oct 24 Javascript
vue实现同时设置多个倒计时
May 20 Vue.js
基于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
我的论坛源代码(五)
2006/10/09 PHP
PHP面向对象的使用教程 简单数据库连接
2006/11/25 PHP
php 目录与文件处理-郑阿奇(续)
2011/07/04 PHP
PHP屏蔽关键字实现方法
2016/11/17 PHP
php+redis在实际项目中HTTP 500: Internal Server Error故障排除
2017/02/05 PHP
jquery购物车实时结算特效实现思路
2013/09/23 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
对JavaScript的全文搜索实现相关度评分的功能的方法
2015/06/24 Javascript
JavaScript实现页面跳转的几种常用方式
2015/11/28 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
2017/06/12 Javascript
node中的session的具体使用
2018/09/14 Javascript
JavaScript和TypeScript中的void的具体使用
2019/09/12 Javascript
微信小程序使用echarts获取数据并生成折线图
2019/10/16 Javascript
DWR内存兼容及无法调用问题解决方案
2020/10/16 Javascript
[03:38]2014DOTA2西雅图国际邀请赛 VG战队巡礼
2014/07/07 DOTA
python使用PyGame模块播放声音的方法
2015/05/20 Python
使用tensorflow实现线性回归
2018/09/08 Python
在pyqt5中QLineEdit里面的内容回车发送的实例
2019/06/21 Python
可视化pytorch 模型中不同BN层的running mean曲线实例
2020/06/24 Python
Python文件夹批处理操作代码实例
2020/07/21 Python
Python 列表反转显示的四种方法
2020/11/16 Python
matplotlib事件处理基础(事件绑定、事件属性)
2021/02/03 Python
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
巴西男士胡须和头发护理产品商店:Beard
2017/11/13 全球购物
Oracle性能调优原则
2012/05/03 面试题
2014爱耳日宣传教育活动总结
2014/03/09 职场文书
大型演出策划方案
2014/05/28 职场文书
新疆民族团结演讲稿
2014/08/27 职场文书
手机销售员岗位职责
2015/04/11 职场文书
2015年个人实习工作总结
2015/05/28 职场文书
中国合伙人观后感
2015/06/02 职场文书
简单介绍 http请求响应参数、无连接无状态、MIME、状态码、端口、telnet、curl
2021/03/31 HTML / CSS
nginx处理http请求实现过程解析
2021/03/31 Servers
JavaScript利用html5新方法操作元素类名详解
2021/11/27 Javascript