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 写的一个简单的timer
Jul 30 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
Feb 22 Javascript
js实现九宫格图片半透明渐显特效的方法
Feb 16 Javascript
jQuery实现简单的日期输入格式化控件
Mar 12 Javascript
npm 下载指定版本的组件方法
May 17 Javascript
详解vue如何使用rules对表单字段进行校验
Oct 17 Javascript
jQuery实现模拟搜索引擎的智能提示功能简单示例
Jan 27 jQuery
vue axios封装及API统一管理的方法
Apr 18 Javascript
微信小程序自定义菜单切换栏tabbar组件代码实例
Dec 30 Javascript
JS如何实现手机端输入验证码效果
May 13 Javascript
Map与WeakMap类型在JavaScript中的使用详解
Nov 18 Javascript
JavaScript async/await原理及实例解析
Dec 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数据库开发知多少
2006/10/09 PHP
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
mysqli扩展无法在PHP7下升级问题的解决
2019/09/10 PHP
jquery form表单提交插件asp.net后台中文解码
2010/06/12 Javascript
深入理解JS中的变量及作用域、undefined与null
2014/03/04 Javascript
AngularJS表单编辑提交功能实例
2015/02/13 Javascript
js闭包实现按秒计数
2015/04/23 Javascript
基于BootStrap Metronic开发框架经验小结【七】数据的导入、导出及附件的查看处理
2016/05/12 Javascript
实例讲解Jquery中隐藏hide、显示show、切换toggle的用法
2016/05/13 Javascript
JavaScript中一些特殊的字符运算
2017/08/17 Javascript
JavaScript正则表达式和级联效果
2017/09/14 Javascript
jquery ajaxfileupload异步上传插件
2017/11/21 jQuery
vue获取dom元素注意事项
2017/12/28 Javascript
JS实现前端页面的搜索功能
2018/06/12 Javascript
webpack优化的深入理解
2018/12/10 Javascript
[00:57]深扒TI7聊天轮盘语音出处5
2017/05/11 DOTA
[04:45]DOTA2-DPC中国联赛正赛 iG vs LBZS 赛后选手采访
2021/03/11 DOTA
Python脚本在Appium库上对移动应用实现自动化测试
2015/04/17 Python
python3中bytes和string之间的互相转换
2017/02/09 Python
浅谈flask截获所有访问及before/after_request修饰器
2018/01/18 Python
python利用JMeter测试Tornado的多线程
2020/01/12 Python
Python下利用BeautifulSoup解析HTML的实现
2020/01/17 Python
python+selenium实现12306模拟登录的步骤
2021/01/21 Python
欧洲第一的摇滚和金属乐队服装网站:EMP
2017/10/26 全球购物
欧洲最大的滑雪假期供应商之一:Sunweb Holidays
2018/01/06 全球购物
String是最基本的数据类型吗?
2013/06/13 面试题
优秀老师事迹材料
2014/02/05 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
铅球加油稿100字
2014/09/26 职场文书
2014最新股权信托合同协议书
2014/11/18 职场文书
答谢词范文
2015/01/05 职场文书
师德承诺书
2015/01/20 职场文书
什么是创业计划书?什么是商业计划书?这里一一解答
2019/07/12 职场文书
PHP判断是否是json字符串
2021/04/01 PHP
Python 使用dict实现switch的操作
2021/04/07 Python