JQuery 常用方法和事件详细介绍

文档就绪函数
$(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 函数。

(0)

相关推荐

  • JQuery 常用方法和事件详细介绍

    文档就绪函数$(document).ready(function(){--- jQuery functions go here ----});这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码.如果在文档没有完全加载之前就运行函数,操作可能失败.(试图隐藏一个不存在的元素:获得未完全加载的图像的大小) 把所有 jQuery 代码置于事件处理函数中把所有事件处理函数置于文档就绪事件处理器中 hide/show/toogle$(selector).hide(speed,callback)

  • jquery中的事件处理详细介绍

    1.页面载入完毕响应事件 所谓页面载入完毕是指DOM元素载入就绪了,能够被读取和操作了. ①jQuery中的$(doucument).ready()事件 ready(fn)是jQuery事件模块中最重要的一个函数.这个方法可以看作是对window.onload注册事件的替代方法.通过使用这个方法,可以在DOM载入就绪时立刻调用所绑定的函数,而几乎所有的javaScript函数都是需要在那一刻执行. ready(fn) 返回值:Object 参数-fn:要在DOM载入就绪时执行的参数Functio

  • jQuery Ajax中的事件详细介绍

    Ajax会触发很多事件. 有两种事件,一种是局部事件,一种是全局事件: 局部事件:通过$.ajax来调用并且分配. 复制代码 代码如下: $.ajax({     beforeSend: function(){      // Handle the beforeSend event     },     complete: function(){      // Handle the complete event     }     // ... }); 全局事件,可以用bind来绑定,用unb

  • 微信小程序 触控事件详细介绍

    微信小程序 触控事件: 微信小程序的"事件"挺有意思.看了说明文档后发现它的功能很全,事件可以向父节点传递,而且打印这个事件的信息很透明,调试起来应该非常方便. 接下来把文档copy过来 原文地址:https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html >>>什么是事件 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发

  • jquery ready(fn)事件使用介绍

    1.事件简介 (1)当DOM载入就绪可以查询及操纵时绑定一个要执行的函数: (2)请确保在 <body> 元素的onload事件中没有注册函数,否则不会触发+$(document).ready()事件: (3)可以在同一个页面中无限次地使用$(document).ready()事件: (4)其中注册的函数会按照(代码中的)先后顺序依次执行. 2.事件格式 $(document).ready(function(){ //jQuery代码 }); 3.实例 复制代码 代码如下: <!DOCT

  • jQuery实用基础超详细介绍

    一.jQuery 简介 jQuery 是继 Prototype 之后又一个优秀的 JavaScript 库jQuery 理念: 写得少, 做得多. 优势如下:轻量级强大的选择器出色的 DOM 操作的封装可靠的事件处理机制完善的 Ajax出色的浏览器兼容性链式操作方式-- 第一个案例 二.jQuery 对象 jQuery 对象就是通过 jQuery ($()) 包装 DOM 对象后产生的对象jQuery 对象是 jQuery 独有的. 如果一个对象是 jQuery 对象, 那么它就可以使用 jQu

  • IOS 开发之触摸事件详细介绍

    IOS 触摸事件 iOS中的事件可以分为3大类型: 触摸事件 加速计事件 远程控制事件 响应者对象 在iOS中不是任何对象都能处理事件,只有继承了UIResponder的对象才能接收并处理事件.我们称之为"响应者对象". UIApplication.UIViewController.UIView都继承自UIResponder,因此它们都是响应者对象,都能够接收并处理事件. UIResponder内部提供了以下方法来处理事件 触摸事件(对应Android的action_down.acti

  • jQuery中的each()详细介绍(推荐)

    each()方法能使DOM循环结构简洁,不容易出错.each()函数封装了十分强大的遍历功能,使用也很方便,它可以遍历一维数组.多维数组.DOM, JSON 等等 在javaScript开发过程中使用$each可以大大的减轻我们的工作量. 下面提一下each的几种常用的用法 each处理一维数组 var arr1 = [ "aaa", "bbb", "ccc" ]; $.each(arr1, function(i,val){ alert(i);

  • jQuery Deferred和Promise创建响应式应用程序详细介绍

    这篇文章,我们一起探索一下 JavaScript 中的 Deferred 和 Promise 的概念,它们是 JavaScript 工具包(如Dojo和MochiKit)中非常重要的一个功能,最近也首次亮相于 流行的 JavaScript 库 jQuery(已经是1.5版本的事情了). Deferred 提供了一个抽象的非阻塞的解决方案(如 Ajax 请求的响应),它创建一个 "promise" 对象,其目的是在未来某个时间点返回一个响应.如果您之前没有接触过 "promis

  • JS 事件绑定、事件监听、事件委托详细介绍

    在JavaScript的学习中,我们经常会遇到JavaScript的事件机制,例如,事件绑定.事件监听.事件委托(事件代理)等.这些名词是什么意思呢,有什么作用呢? 事件绑定 要想让 JavaScript 对用户的操作作出响应,首先要对 DOM 元素绑定事件处理函数.所谓事件处理函数,就是处理用户操作的函数,不同的操作对应不同的名称. 在JavaScript中,有三种常用的绑定事件的方法: 在DOM元素中直接绑定: 在JavaScript代码中绑定: 绑定事件监听函数. 在DOM中直接绑定事件

随机推荐