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 相关文章推荐
js下判断 iframe 是否加载完成的完美方法
Oct 26 Javascript
web的各种前端打印方法之jquery打印插件PrintArea实现网页打印
Jan 09 Javascript
php,js,css字符串截取的办法集锦
Sep 26 Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
Feb 05 Javascript
JS实现可关闭的对联广告效果代码
Sep 14 Javascript
利用Javascript实现BMI计算器
Aug 16 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
Feb 05 Javascript
动态创建Angular组件实现popup弹窗功能
Sep 15 Javascript
利用js给datalist或select动态添加option选项的方法
Jan 25 Javascript
JavaScript闭包与作用域链实例分析
Jan 21 Javascript
移动端(微信等使用vConsole调试console的方法
Mar 05 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伪静态的实现方法解析
2020/07/31 PHP
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
Javascript表达式中连续的 && 和 || 之赋值区别
2010/10/17 Javascript
Jquery知识点二 jquery下对数组的操作
2011/01/15 Javascript
一些实用的jQuery代码片段收集
2011/07/12 Javascript
多个js与css文件的合并方法详细说明
2012/12/26 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
javascript中去除数组重复元素的实现方法【实例】
2016/04/12 Javascript
JS实现间歇滚动的运动效果实例
2016/12/22 Javascript
js模糊查询实例分享
2016/12/26 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
web前端开发中常见的多列布局解决方案整理(一定要看)
2017/10/15 Javascript
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
es6数据变更同步到视图层的方法
2019/03/04 Javascript
element实现合并单元格通用方法
2019/11/13 Javascript
微信小程序中限制激励式视频广告位显示次数(实现思路)
2019/12/06 Javascript
javascript设计模式 ? 策略模式原理与用法实例分析
2020/04/21 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
2020/09/21 Javascript
[01:28]国服启动器接入蒸汽平台操作流程视频
2021/03/11 DOTA
python元组操作实例解析
2014/09/23 Python
Python中 Lambda表达式全面解析
2016/11/28 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
python用for循环求和的方法总结
2019/07/08 Python
利用matplotlib实现根据实时数据动态更新图形
2019/12/13 Python
Django 路由层URLconf的实现
2019/12/30 Python
Python运行异常管理解决方案
2020/03/09 Python
使用matplotlib动态刷新指定曲线实例
2020/04/23 Python
详解python logging日志传输
2020/07/01 Python
python 实现弹球游戏的示例代码
2020/11/17 Python
使用纯HTML5编写一款网页上的时钟的代码分享
2015/11/16 HTML / CSS
一级方程式赛车官方网上商店:F1 Store(支持中文)
2018/01/12 全球购物
机电一体化专业推荐信
2013/12/03 职场文书
销售经理岗位职责
2014/03/16 职场文书
考试作弊检讨
2015/01/27 职场文书
python基于机器学习预测股票交易信号
2021/05/25 Python