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_13_执行模型详解
Oct 20 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
Nov 06 Javascript
现代 JavaScript 开发编程风格Idiomatic.js指南中文版
May 28 Javascript
node.js中的fs.rmdirSync方法使用说明
Dec 16 Javascript
jQuery实现不断闪烁文字的方法
May 15 Javascript
JavaScript匿名函数之模仿块级作用域
Dec 12 Javascript
JavaScript 继承详解(六)
Oct 11 Javascript
Vue.js基础学习之class与样式绑定
Mar 20 Javascript
jQuery插件FusionCharts绘制的2D条状图效果【附demo源码】
May 13 jQuery
分分钟学会vue中vuex的应用(入门教程)
Sep 14 Javascript
在Layui中实现开关按钮的效果实例
Sep 29 Javascript
js实现删除json中指定的元素
Sep 22 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
ninety plus是什么?ninety plus咖啡好吗?
2021/03/04 新手入门
php数据结构与算法(PHP描述) 快速排序 quick sort
2012/06/21 PHP
php多维数组去掉重复值示例分享
2014/03/02 PHP
destoon公司主页模板风格的添加方法
2014/06/20 PHP
PHP校验15位和18位身份证号的类封装
2018/11/07 PHP
PHP基于openssl实现的非对称加密操作示例
2019/01/11 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
2007/07/21 Javascript
js中的异常处理try...catch使用介绍
2013/09/21 Javascript
JavaScript中数据结构与算法(二):队列
2015/06/19 Javascript
js中最容易被忽视的事件问题大总结
2016/05/15 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
domReady的实现案例
2016/11/23 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
JS新包管理工具yarn和npm的对比与使用入门
2016/12/09 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
详解nodejs 文本操作模块-fs模块(一)
2016/12/22 NodeJs
js实现旋转木马效果
2017/03/17 Javascript
Bootstrap标签页(Tab)插件使用方法
2017/03/21 Javascript
jquery实现联想词搜索框和搜索结果分页的示例
2018/10/10 jQuery
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
Python 找到列表中满足某些条件的元素方法
2018/06/26 Python
Python小游戏之300行代码实现俄罗斯方块
2019/01/04 Python
对Python定时任务的启动和停止方法详解
2019/02/19 Python
jupyter notebook实现显示行号
2020/04/13 Python
通过案例解析python鸭子类型相关原理
2020/10/10 Python
Darphin迪梵官网: 来自巴黎,植物和精油调制的护肤品牌
2016/10/11 全球购物
世界上最大的汽车共享网站:Zipcar
2017/01/14 全球购物
英国最受欢迎的在线隐形眼镜商店:VisionDirect.co.uk
2018/12/06 全球购物
Feelunique德国官方网站:欧洲最大的在线美容零售商
2019/07/20 全球购物
保安的辞职报告怎么写
2014/01/20 职场文书
雨花台导游词
2015/02/06 职场文书
拔河比赛新闻稿
2015/07/17 职场文书
python入门之算法学习
2021/04/22 Python
详解python的异常捕获
2022/03/03 Python