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应用于login页面的问题及解决
Oct 17 Javascript
Ext.get() 和 Ext.query()组合使用实现最灵活的取元素方式
Sep 26 Javascript
详解jQuery中的元素的属性和相关操作
Aug 14 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
Jan 05 Javascript
关于input全选反选恶心的异常情况
Jul 24 Javascript
ES6中的数组扩展方法
Aug 26 Javascript
vue实现可增删查改的成绩单
Oct 27 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 Javascript
解决vue-cli webpack打包后加载资源的路径问题
Sep 25 Javascript
使用kbone解决Vue项目同时支持小程序问题
Nov 08 Javascript
JS实现旋转木马轮播图
Jan 01 Javascript
Vue使用Element实现增删改查+打包的步骤
Nov 25 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 setcookie() cannot modify header information 的解决方法
2009/01/09 PHP
PHP 第二节 数据类型之数组
2012/04/28 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
jquery下json数组的操作实现代码
2010/08/09 Javascript
javascript是怎么继承的介绍
2012/01/05 Javascript
jQuery中的pushStack实现原理和应用实例
2015/02/03 Javascript
微信小程序 网络请求(post请求,get请求)
2017/01/17 Javascript
浅谈vue中数据双向绑定的实现原理
2017/09/14 Javascript
JS库之wow.js使用方法
2017/09/14 Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
2019/05/22 Javascript
JS实现网页烟花动画效果
2020/03/10 Javascript
利用Celery实现Django博客PV统计功能详解
2017/05/08 Python
Python 操作文件的基本方法总结
2017/08/10 Python
在Pycharm terminal中字体大小设置的方法
2019/01/16 Python
Python函数返回不定数量的值方法
2019/01/22 Python
python 整数越界问题详解
2019/06/27 Python
python 批量添加的button 使用同一点击事件的方法
2019/07/17 Python
Centos7 下安装最新的python3.8
2019/10/28 Python
简单了解python中的f.b.u.r函数
2019/11/02 Python
pandas 中对特征进行硬编码和onehot编码的实现
2019/12/20 Python
tensorflow安装成功import tensorflow 出现问题
2020/04/16 Python
基于Tensorflow一维卷积用法详解
2020/05/22 Python
Python Matplotlib简易教程(小白教程)
2020/07/28 Python
美国知名艺术画网站:Art.com
2017/02/09 全球购物
美国电子元器件分销商:Newark element14
2018/01/13 全球购物
八项规定整改方案
2014/02/21 职场文书
党员创先争优公开承诺书
2014/03/28 职场文书
感恩教育活动总结
2014/05/05 职场文书
安全生产目标管理责任书
2014/07/25 职场文书
2014年学校食堂工作总结
2014/11/25 职场文书
幼儿园大班教师个人总结
2015/02/05 职场文书
青岛导游词
2015/02/12 职场文书
幼儿园小朋友毕业感言
2015/07/30 职场文书
2016党员学习心得体会范文
2016/01/23 职场文书
解决Goland 同一个package中函数互相调用的问题
2021/05/06 Golang
详解Nginx的超时keeplive_timeout配置步骤
2022/05/25 Servers