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当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
jQuery照片伸缩效果不影响其他元素的布局
May 09 Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 Javascript
jQuery 3.0十大新特性最终版发布
Jul 14 Javascript
基于cssSlidy.js插件实现响应式手机图片轮播效果
Aug 30 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
Dec 25 Javascript
基于jquery.page.js实现分页效果
Jan 01 jQuery
使用Jenkins部署React项目的方法步骤
Mar 11 Javascript
Vue-CLI 项目在pycharm中配置方法
Aug 30 Javascript
京东优选小程序的实现代码示例
Feb 25 Javascript
记一次react前端项目打包优化的方法
Mar 30 Javascript
js实现3D旋转相册
Aug 02 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判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
Yii遍历行下每列数据的方法
2016/10/17 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
jquery插件之easing使用
2010/08/19 Javascript
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
jquery模拟按下回车实现代码
2011/09/20 Javascript
javascript实现简单的二级联动
2015/03/19 Javascript
理解javascript定时器中的单线程
2016/02/23 Javascript
JavaScript核心语法总结(推荐)
2016/06/02 Javascript
angularjs实现文字上下无缝滚动特效代码
2016/09/04 Javascript
JavaScript中三个等号和两个等号的区别(== 和 ===)浅析
2016/09/22 Javascript
node.js学习之断言assert的使用示例
2017/09/28 Javascript
用vue快速开发app的脚手架工具
2018/06/11 Javascript
Vue EventBus自定义组件事件传递
2018/06/25 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
微信小程序事件流原理解析
2019/11/27 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
2020/04/29 Javascript
vue.js 输入框输入值自动过滤特殊字符替换中问标点操作
2020/08/31 Javascript
如何基于viewport vm适配移动端页面
2020/11/13 Javascript
带你了解python装饰器
2017/06/15 Python
python实现图片二值化及灰度处理方式
2019/12/07 Python
Pyspark读取parquet数据过程解析
2020/03/27 Python
香港No.1得奖零食网:香港零食大王
2016/07/22 全球购物
香港礼品网站:GiftU eshop
2017/09/01 全球购物
大学生自我鉴定
2013/12/16 职场文书
新学期红领巾广播稿
2014/01/14 职场文书
ktv总经理岗位职责
2014/02/17 职场文书
大学生党员个人对照检查材料范文
2014/09/25 职场文书
银行领导班子四风对照检查材料
2014/09/27 职场文书
倡议书的格式写法
2015/04/28 职场文书
介绍信格式样本
2015/05/05 职场文书
2019最新婚庆对联集锦!
2019/07/10 职场文书
粗暴解决CUDA out of memory的问题
2021/05/22 Python
ES6 解构赋值的原理及运用
2021/05/25 Javascript
Smart 2 车辆代号 HC11 全新谍照曝光
2022/04/21 数码科技