jQuery简单入门(三)
3.事件和动画
A. 事件
Aa. DOM加载
1.为什么使用jQuery加载DOM方法？
以javascript的window.onload（）方法加载DOM的先决条件是：必须等待被请求页面的资源全部加载完成，才会为DOM元素添加事件行为;而jquery只要DOM元素加载完成，就立刻绑定事件
2.表现形式：
$(function() {
//你的实现逻辑
});
Ab. 事件绑定
事件绑定方法bind（eventType [， data], function() {...}）
表现形式：
$(function() {
$(“#id”).bind(“click”, function() {
$(this).next().show();
});
});
Ac. 事件合成
Jquery有两个合成事件：hover（）和toggle（）
1.hover（enter， leave）模拟光标悬停
表现形式：
$(function() {
$(“.class”).hover(function() {
//光标悬停,在引用class层叠样式,做出响应
$(this).next().show();
}, function() {
//光标离开引用class层叠样式,做出响应
$(this).next().hide();
});
});
上面的案例解释：当光标悬停在引用了class层叠样式时，显示其后面的一个同辈元素；反之隐藏他
2.toggle（fn1， fn2， ...）模拟鼠标点击事件
表现形式：
$(function() {
$(“button”).toggle(function() {
alert(“鼠标第一次点击！”);
}, function() {
alert(“鼠标第二次点击！”);
}, function() {
alert(“鼠标第三次点击！”);
});
});
当鼠标点击完成3次之后，再次点击，则该事件会进入下一轮事件；即：第四次点击会调用第一个函数...
Ad. 事件对象的属性
1.获取事件类型event.type
$(“input”).click(function(event) {
alert(event.type);//因为这是一个click事件，所以代码会输出click
});
2.event.preventDefault()//阻止默认事件
$(function() {
$(“#sumbit”).click(function(event) {
event.preventDefault();//阻止表单元素提交
});
});
...
Ae. 事件移除
Unbind(eventType [,data])
$(function() {
$(“#button”).bind(“click”, fn1 = function() {
alert(“把fn1点击事件绑定到id为button的DOM元素上”);
}).bind(“click”, fn2 = function() {
alert(“把fn2点击事件绑定到id值为button的DOM元素上”);
});
$(“#button”).unbind(“click”, fn1);//把id值为buttonde的fn1点击事件移除
});
Af. 操作模拟（trigger（））
1.常用模拟
如：
情景描述：现在要求页面加载完毕后，立刻触发点击事件
$(function() {
$(“#button”).trigger(“click”);//当页面DOM加载立即触发id值为button的 元素上面的点击事件
});
2.出发自定义事件
$(function() {
//1.自定义事件
$(“#button”).bind(“iClick”, function() {
});
//2.触发自定义事件
$(“#button”).trigger(“iClick”);
});
3.传递参数(tigger(type[, data[))
Ag. 其他用法
绑定多个事件类型
$(function() {
$(“div”).bind(“mouseover mouseout”, function() {
$(this).toggleClass(“over”);
alert(“鼠标移入或离开该div标签，其样式会切换变化”);
});
});
...
B. 动画
通过jquery的动画方法，提供的多样的视觉效果，给用户提供丰富的视觉体验；
为了实现良好的动画效果，要求html在标准模式下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Ba. Show（）和hide（）
1.show（）//显示动画
$(“tag”).show();
$(“tag”).show(speed);//指定显示的速度：slow、normal、fast或则指明一个速度
2.hide（）//隐藏动画
参考show（）使用形式
Bb. FadeIn（）和fadeOut（）、slideUp（）和slideDown（）
- FadeIn（）和fadeOut（）改变元素的不透明度
$(function() {
$(“tag”).fadeIn();//tag元素的透明度会越来越高（淡入）
$(“tag”).fadeOut();//tag元素的透明度会越来越低（淡出）
});
2.slideUp（）和slideDown（）改变元素的高度
$(function() {
$(“tag”).fadeIn();//tag元素的高度会越来越高
$(“tag”).fadeOut();//tag元素的高度会越来越低
});
Bc. 自定义动画方法animate（）
animate(params, speed, callbackFunction)
1.自定义简单动画
$(function() {
$(“#id”).click(function() {
$(this).animate({left : “500px”}, 1000);//每点击一次，该元素向右移动500个像素单位
});
});
$(function() {
$(“#id”).click(function() {
$(this).animate({left : “+=500px”}, 1000);//每点击一次，该元素在当前位置累加500个像素单位
});
2.多重动画
2.1、同时执行多个动画
$(function() {
$(“#id”).click(function() {
$(this).animate({left : “500px”, height : “200px”}, 1000);
});
2.2、按顺序执行多个动画
$(function() {
$(“#id”).click(function() {
$(this).animate({left : “500px”, height : “200px”}, 1000)
.animate({height : “200px”}, 1000);
});
Be. 动画状态操作
1.停止元素的动画
stop（[clearQueue][, gotoEnd]）
$(“#id”).stop();
$(“#id”).stop(true);//清空所有动画队列
$(“#id”).stop(true, true);//停止当前的动画并到达其末状态，并清空队列
2.判断元素是否处于动画状态
$(“#id”).is（“:animate”）
3.延迟动画
delay([speed])
Bf 其他动画方法
1.toggle（）
2.slideToggle（）
3.fadeTo（）
以渐进的方式调整元素不透明度到一个指定值
$(“#id”).fadeTo(600, 0.2);
4.fadeToggle（）
Bh. 概括
(未完...)
jQuery简单入门(三)的更多相关文章
- jQuery简单入门
jQuery是什么 John Resig在2006年1月发布的一款跨主流浏览器的JavaScript库,简化JavaScript对HTML操作为什么要使用jQuery (1)write less do ...
- jQuery简单入门(二)
2.Dom操作 A.DOM分类 个人认为在jQuery中这些分类被弱化了,有兴趣的读者可以自行补充这方面的知识: aa.DOM Core bb.HTML -DOM cc. CSS-DOM B.jQue ...
- jquery快速入门三
事件 常用事件 click(function(){.......}) #触发或将函数绑定到指定元素的click事件 hover(function(){.....}) 当鼠标指针悬停在上面时触发.... ...
- jquery简单入门1
前端 html:展示 form: 属性: action和method 子标签: input(10种) text password radio checkbox file submit button r ...
- jQuery简单入门（五）
5.Ajax应用 在jQuery中$ajax()方法属于最底层的方法,第二层是load().$.get().$.post(),第三层是$.getScript()和 $.getJSON():下面根据使用 ...
- jQuery简单入门(四)
4.表单应用 表单是HTML的重要组成部分,在采集.提交用户输入的信息和显示列表数据等需求中有重要作用 表单应用 一个简单的表单HTML示例: <form action=”url” method ...
- jquery简单入门（一）
相关: 本文参考<锋利的jQuery第二版> 写在前面: jQuery作为javascript框架,是做网页交互工作者,一个值得学习的优秀的前端框架... 百度指数分析:(http://i ...
- jquery 简单入门
例:GridView
- Asp.Net MVC3 简单入门第一季（三）详解Controller之Filter
前言 前面两篇写的比较简单,刚开始写这个系列的时候我面向的对象是刚开始接触Asp.Net MVC的朋友,所以写的尽量简单.所以写的没多少技术含量.把这些技术总结出来,然后一简单的方式让更多的人很好的接 ...
随机推荐
- Android使用SAX解析XML(4)
util.java文件如下: package com.hzhi.my_sax; import java.io.IOException; import java.io.InputStream; impo ...
- SNAT，是源地址转换，其作用是将ip数据包的源地址转换成另外一个地址
SNAT,可能有人觉得奇怪,好好的为什么要进行ip地址转换啊,为了弄懂这个问题,我们要看一下局域网用户上公网的原理,假设内网主机A(192.168.2.8)要和外网主机B(61.132.62.131) ...
- Scalaz（32）－ Free ：lift - Monad生产线
在前面的讨论里我们提到自由数据结构就是产生某种类型的最简化结构,比如:free monoid, free monad, free category等等.我们也证明了List[A]是个free mono ...
- PHP内核探索之变量（1）Zval
作为数据的容器,我们常常需要跟变量打交道,不管这个变量是数字.数组.字符串.对象还是其他,因而可以说变量是构成语言的不可或缺的基础.本文是PHP内核探索之变量的第一篇,主要介绍zval的基本知识,包括 ...
- Java经典实例：在正则表达式中控制大小写
默认是:区分大小写的: 传递标志参数:Pattern.CASE_INSENSITIVE,以说明匹配时忽略大小写:如果你的代码运行在不同的地区那么你应该再添加一个Pattern.UNICODE_CASE ...
- SQL 行列转换简单示例
SQLSERVER 2005 以后提供了新的方式进行行列转换,下面是一个实例供参考: if object_id('tb') is not null drop table tbTest go ),季度 ...
- Click Magick – 下一代点击跟踪和链接管理
Click Magick 是新一代的广告跟踪和链接管理系统,让每一个点击都能给你带去更多的利润.它是专门设计来跟踪所有类型的点击计费广告,包括从谷歌,必应和 Facebook 的 PPC 广告,就好像 ...
- io.js - 兼容 NPM 平台的 Node.js 新分支
io.js(JavaScript I/O)是兼容 NPM 平台的 Node.js 新分支,由 Node.js 的核心开发者在 Node.js 的基础上,引入更多的 ES6 特性,它的目的是提供更快的和 ...
- javscript闭包的准备工作 -- 作用域与作用域链
作用域是JavaScript最重要的概念之一,想要学好JavaScript就需要理解JavaScript作用域和作用域链的工作原理.今天这篇文章对JavaScript作用域和作用域链作简单的介绍,希望 ...
- 向ArcGIS的ToolBarControl中添加任意的windows控件的方法
概要:在使用ArcEngine开发中,给ToolbarControl添加按钮形式的命令项相信大家都很熟悉了,因为网上的例子很多.但这种使用click调用功能的方式只能满足大部分用户在体验方面的需求,除 ...