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 相关文章推荐
超越Jquery_01_isPlainObject分析与重构
Oct 20 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
Jul 10 Javascript
12种不宜使用的Javascript语法整理
Nov 04 Javascript
关于vue.js组件数据流的问题
Jul 26 Javascript
浅谈vue的props,data,computed变化对组件更新的影响
Jan 16 Javascript
除Console.log()外更多的Javascript调试命令
Jan 24 Javascript
es6 symbol的实现方法示例
Apr 02 Javascript
vue全局自定义指令-元素拖拽的实现代码
Apr 14 Javascript
详解node登录接口之密码错误限制次数(含代码)
Oct 25 Javascript
使用原生JS实现滚轮翻页效果的示例代码
May 31 Javascript
在js文件中引入(调用)另一个js文件的三种方法
Sep 11 Javascript
Vue实现圆环进度条的示例
Feb 06 Vue.js
基于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数组保存文本与文本反编成数组实例
2014/11/13 PHP
浅谈PHP中try{}catch{}的使用方法
2016/12/09 PHP
PHP实现绘制二叉树图形显示功能详解【包括二叉搜索树、平衡树及红黑树】
2017/11/16 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
JavaScript DOM 学习第九章 选取范围的介绍
2010/02/19 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
2014/09/04 Javascript
JavaScript中判断整数的多种方法总结
2014/11/08 Javascript
JavaScript实现更改网页背景与字体颜色的方法
2015/02/02 Javascript
jquery选择器中的空格与大于号>、加号+与波浪号~的区别介绍
2016/06/24 Javascript
jquery插件开发之选项卡制作详解
2017/08/30 jQuery
axios中cookie跨域及相关配置示例详解
2017/12/20 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
js实现视图和数据双向绑定的方法分析
2020/02/05 Javascript
[01:22:10]Ti4 循环赛第二日 DK vs Empire
2014/07/11 DOTA
python操作MongoDB基础知识
2013/11/01 Python
Python温度转换实例分析
2018/01/17 Python
python使用正则表达式去除中文文本多余空格,保留英文之间空格方法详解
2020/02/11 Python
python实现飞船大战
2020/04/24 Python
纯CSS3实现3D旋转书本效果
2016/03/21 HTML / CSS
HTML5和CSS3让网页设计提升到下一个高度
2009/08/14 HTML / CSS
德国便宜的宠物店:Brekz.de
2020/10/23 全球购物
为什么如下的代码int a=100,b=100;long int c=a * b;不能工作
2013/11/29 面试题
机电一体化专业应届本科生求职信
2013/09/27 职场文书
实习教师自我鉴定
2013/09/27 职场文书
应届毕业生求职信范例分享
2013/12/17 职场文书
马云的职业生涯规划之路
2014/01/01 职场文书
学校采购员岗位职责
2014/01/02 职场文书
中文专业学生自我评价范文
2014/02/06 职场文书
经理任命书模板
2014/06/06 职场文书
小学假期安全广播稿
2014/09/28 职场文书
教师三严三实心得体会
2014/10/11 职场文书
受欢迎的自荐信,就这么写!
2019/04/19 职场文书
10大幻兽系恶魔果实 蝙蝠果实上榜,第一自愈能力强
2022/03/18 日漫