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 当前日期转化为中文的实现代码
May 13 Javascript
jQuery 一个图片切换的插件
Oct 09 Javascript
JavaScript继承模式粗探
Jan 12 Javascript
基于React.js实现原生js拖拽效果引发的思考
Mar 30 Javascript
JQuery 封装 Ajax 常用方法(推荐)
May 21 jQuery
简单实现vue中的依赖收集与响应的方法
Feb 18 Javascript
微信小程序传值以及获取值方法的详解
Apr 29 Javascript
浅谈ECMAScript 中的Array类型
Jun 10 Javascript
vue中get请求如何传递数组参数的方法示例
Nov 08 Javascript
如何优雅地取消 JavaScript 异步任务
Mar 22 Javascript
js+css实现全屏侧边栏
Jun 16 Javascript
jquery实现拖拽添加元素功能
Dec 01 jQuery
基于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自动更新新闻DIY
2006/10/09 PHP
一步一步学习PHP(7) php 字符串相关应用
2010/03/05 PHP
PHP实现将科学计数法转换为原始数字字符串的方法
2014/12/16 PHP
php微信支付之公众号支付功能
2018/05/30 PHP
js获取元素在浏览器中的绝对位置
2010/07/24 Javascript
Extjs4 GridPanel 的几种样式使用介绍
2013/04/18 Javascript
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
解决extjs grid 不随窗口大小自适应的改变问题
2014/01/26 Javascript
JS中怎样判断undefined(比较不错的方法)
2014/03/27 Javascript
HTML页面弹出居中可拖拽的自定义窗口层
2014/05/07 Javascript
基于promise.js实现nodejs的promises库
2014/07/06 NodeJs
JavaScript插件化开发教程 (二)
2015/01/27 Javascript
搞定immutable.js详细说明
2016/05/02 Javascript
Angularjs中UI Router的使用方法
2016/05/14 Javascript
angularjs封装bootstrap时间插件datetimepicker
2016/06/20 Javascript
全面了解JavaScirpt 的垃圾(garbage collection)回收机制
2016/07/11 Javascript
JS查找字符串中出现次数最多的字符
2016/09/05 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
JavaScript 中调用 Kotlin 方法实例详解
2017/06/09 Javascript
详解用node搭建简单的静态资源管理器
2017/08/09 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
2017/11/15 Javascript
javascript操作向表格中动态加载数据
2020/08/27 Javascript
python结合API实现即时天气信息
2016/01/19 Python
Python Socket编程详细介绍
2017/03/23 Python
python通过百度地图API获取某地址的经纬度详解
2018/01/28 Python
python统计指定目录内文件的代码行数
2019/09/19 Python
手把手教你从PyCharm安装到激活(最新激活码),亲测有效可激活至2089年
2020/11/25 Python
使用gunicorn部署django项目的问题
2020/12/30 Python
css背景图片的背景裁切、背景透明度、背景变换等效果运用
2012/12/24 HTML / CSS
处级领导干部四风问题自我剖析材料
2014/09/29 职场文书
世界遗产的导游词
2015/02/13 职场文书
基层党支部承诺书
2015/04/30 职场文书
2016年小学生寒假家长评语
2015/10/10 职场文书
入团申请书格式
2019/06/20 职场文书
python - asyncio异步编程
2021/04/06 Python
MySQL定时备份数据库(全库备份)的实现
2021/09/25 MySQL