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 相关文章推荐
一个网页标题title的闪动提示效果实现思路
Mar 22 Javascript
在JavaScript中正确引用bind方法的应用
May 11 Javascript
window.open不被拦截的简单实现代码(推荐)
Aug 04 Javascript
Angular中使用better-scroll插件的方法
Mar 27 Javascript
Vue.js 踩坑记之双向绑定
May 03 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 Javascript
JavaScript变量作用域及内存问题实例分析
Jun 10 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
Aug 08 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 11 Javascript
写一个Vue loading 插件
Nov 09 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
NT IIS下用ODBC连接数据库
2006/10/09 PHP
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
PHP文件读写操作之文件读取方法详解
2011/01/13 PHP
php实现微信支付之企业付款
2018/05/30 PHP
php 自定义函数实现将数据 以excel 表格形式导出示例
2019/11/13 PHP
Mootools 1.2教程(3) 数组使用简介
2009/09/14 Javascript
用js调用迅雷下载代码的二种方法
2013/04/15 Javascript
location.href用法总结(最主要的)
2013/12/27 Javascript
JavaScript的strict模式与with关键字介绍
2014/02/08 Javascript
如何用javascript计算文本框还能输入多少个字符
2015/07/29 Javascript
javascript拖拽应用实例
2016/03/25 Javascript
js调用webservice构造SOAP进行身份验证
2016/04/27 Javascript
js实现对table的增加行和删除行的操作方法
2016/10/13 Javascript
jQuery实现的简单拖动层示例
2017/02/22 Javascript
详解如何使用PM2将Node.js的集群变得更加容易
2017/11/15 Javascript
微信小程序实现下载进度条的方法
2017/12/08 Javascript
.vue文件 加scoped 样式不起作用的解决方法
2018/05/28 Javascript
浅析微信扫码登录原理(小结)
2018/10/29 Javascript
layui动态绑定事件的方法
2019/09/20 Javascript
jquery实现购物车基本功能
2019/10/25 jQuery
Python数据可视化编程通过Matplotlib创建散点图代码示例
2017/12/09 Python
python+django加载静态网页模板解析
2017/12/12 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
pyshp创建shp点文件的方法
2018/12/31 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
Pytorch 实现权重初始化
2019/12/31 Python
Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)
2020/02/13 Python
Python关于__name__属性的含义和作用详解
2020/02/19 Python
python实现ssh及sftp功能(实例代码)
2020/03/16 Python
pytorch 中forward 的用法与解释说明
2021/02/26 Python
VELTRA台湾:世界自由行专家
2017/08/15 全球购物
自我鉴定书范文
2013/10/02 职场文书
自我评价的范文
2014/02/02 职场文书
英文辞职信范文
2015/05/13 职场文书
2015年公司中秋节致辞
2015/07/31 职场文书