奋夜的奋斗  ————  事件与动画 ————  来自地狱的战镰

小小的单词难不倒我们哦!!!!!!!

   bind:绑定     unbind:接触绑定    toggle:栓牢   fadeout:渐显    fadeout:渐没

一:事件

1.鼠标事件

(1)$()是$(document)的简写,默认参数是document.

$(function(){}是$(document).ready(function(){})的简写。

(1)事件绑定 bind(type [,data],fn);

type是事件类型,有blur,focus,load,resize,scroll,unload,click,dbclick,mousedown,mouseup,

mouseover,mousemove,mouseout,mouseenter,mouseleave,change,select,submit,keydown,

keypress,keyup和error等,也可是是自定义名称。

eg:光棒效果:

 <script type="text/javascript" src="jq/jQuery1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$("li").bind({"mouseover":function(){
$(this).css("background","green");
},"mouseout":function(){
$(this).css("background","");
}, "click":function(){
alert($(this).text());
},
}).unbind("mouseout mouseover"); });
</script>
</head> <body>
<ul>
<li>胡椒粉和健康</li>
<li>对付佛教快点回家</li>
<li>解放后地上佛</li>
<li>都会放假回家都会降低发动机和房价</li>
</ul>
</body>

bind的列子:

<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" >
$(document).ready(function(){ //等待所有dom绘制完成后就执行
$("#panel h5.head").bind("click",function(){
var $content = $(this).next();
if($content.is(":visible")){
$content.hide();
}else{
$content.show();
}
});//bind }); //$(document)
</script>
</head>
<body> <div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继prototype之后的有一个优秀的javascript类库
</div>
</div> </body>
</html>

二:键盘事件:

对于click,mouseover,mouseout这类事件,可以使用下面的简写方法:

<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript" >
$(document).ready(function(){ //等待所有dom绘制完成后就执行
$("#panel h5.head").mouseover(function(){
$(this).next().show();
}).mouseout(function(){
$(this).next().hide();
}); }); //$(document)
</script>
</head>
<body> <div id="panel">
<h5 class="head">什么是jQuery?</h5>
<div class="content">
jQuery是继prototype之后的有一个优秀的javascript类库
</div>
</div> </body>
</html>

三:表单事件

eg:

<style type="text/css">
.myred{
color:red;
} </style>
<script type="text/javascript" src="jq/jQuery1.11.1.js"></script>
<script type="text/javascript">
$(function(){
$("input").focus(function(){
$("span").addClass("myred");
});
});
$(function(){
$("input").blur(function(){
$("span").removeClass("myred");
});
}); </script>
</head> <body>
<input><span class="myred">键盘事件 ,移除显示</span>
</body>

DA 二: 动画

1,

(1)show()将元素display样式设置为先前的显示状态(block,inline);hide()将display样式设置为none,导致隐藏。

可以加参数fast,slow,normal,时间整数(毫秒)。

(2)fadeOut()改到透明度到消失,fadeIn()相反。

(3)slideDown()向下显示,slideUp()向上隐藏。

(4)animate(params,speed,callback)自定义动画,params为样式如{property1:"value1",property2:"value2"}

speed速度,可选;callback动画执行完执行的函数,可选。

eg:

$('input').bind('click', function () {      if ($(this).is(':visible')) {//如果内容为显示       $(this).hide();      } else {       $(this).show();      }     })

2.切换元素可见状态(toggle())

#panel
{
position:relative;
width:100px;
height:300px;
border:1px solid #0050D0;
background:#96e555;
cursor:pointer;
}
html代码:
<div id="panel"></div>
jQuery代码:
$("#panel").click(function () {
$(this).animate({ left: "+=500px" }, 3000) //累计从左移动,先执行
.animate({ height: "-=100px" }, 2000) //累计减少高度,后执行
.animate({ opacity: "0.5" }, 3000)//透明度降低到0.5
.fadeOut("slow", function () { //动画都可以带有回调函数
$(this).css("display", "block"); //显示,css方法不加入到动画队列,因此在callback中
$(this).animate({ opacity: "1" }, 3000); //改变透明度
});
});

(1)+=和-=可以累计改变属性的值,如果直接写数字则改变一次。

(2)animate中的left是从左,top是从上;

(3)css()方法不会加入到动画队列,而是立即执行。

(4)将多个属性放到animate中会同时执行这些动画。

3,停止动画和判断是否正在动画

(1)stop[clearQueue][gotoEnd]);可选参数,true或false;clearQueue是否要清空未执行的动画队列;gotoEnd代表

是否直接跳转到 当前动画 的末状态。 如果直接使用stop()就停止当前正在进行的动画,后面的动画继续。

(2)hover(enter,leave)是鼠标悬停事件,进入执行enter,出来执行leave;下面的例子防止动画效果与鼠标不一致:

如果有多个动画,想在enter时停止,可以将参数clearQueue设为true ,像这样stop(true)

stop(false,true)让当前动画直接到末状态。

stop(true,true)让当前动画直接到末状态,并清空动画队列。

(3)判断是否处于动画状态

(4)延迟动画  delay(1000)  延迟1秒。

欣欣向荣

锋利的jQuery中的事件与动画的更多相关文章

  1. jQuery中的事件和动画——《锋利的jQuery》(第2版)读书笔记2

    第4章 jQuery中的事件和动画 jQuery中的事件 加载DOM $(document).ready(function(){   // 编写代码... }); 可以简写成: $(function( ...

  2. jQuery中的事件与动画<思维导图>

    Javascript和HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的.当文档或者它的某些元素发生某些变化或操作时,浏览器会自动生成一个事件.例如当浏览器装载完一个文档后,会生成事件. ...

  3. 第三章 jQuery中的事件与动画

    第三章jQuery中的事件与动画 一. jQuery中的事件 jQuery事件是对javaScript事件的封装. 1.基础事件 在javaScript中,常用的基础事件有鼠标事件.键盘事件.wind ...

  4. jQuery中的事件和动画 以及视频展示效果实例

    经过这几天学习jQuery中的事件和动画,对jQuery更深的认识,接下来先把视频展示效果的代码贴出来,最后把我在学习jQuery事件和动画之后总结的思维导图 <!doctype html> ...

  5. 锋利的jQuery ——jQuery中的事件和动画(四)

    一.jQuery中的事件 1)加载DOM $(document).ready()和window.onload的区别 1>执行时机 $(document).ready(){}  方法内注册的事件, ...

  6. jQuery中的事件与动画 (你的明天Via Via)

    众所周知,页面在加载时,会触发load事件:当用户单击某个按钮时,会触发该按钮的click事件. 这些事件就像日常生活中,人们按下开关,灯就亮了(或者灭了),往游戏机里投入游戏币就可以启动游戏一样, ...

  7. Jquery中的事件和动画

    在学习Jquery中的过程中我们绝大部分都用到了事件的操作,也可以说事件是Jquery中必不可少的一部分,我们常见的一些事件有单击事件,鼠标事件,键盘事件等等.在Jquery中的学习中为了能使让页面以 ...

  8. 【jQuery基础学习】03 jQuery中的事件与动画

    关于jQuery中的事件 js与HTML之间的交互是通过用户和浏览器操作页面时引发的事件来处理的. jQuery增加并扩展了基本的事件处理机制,jQuery不仅提供了更加优雅的事件处理方法,而且极大地 ...

  9. JQuery制作网页—— 第七章 jQuery中的事件与动画

    1. jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件 ...

随机推荐

  1. 更改Windows Live Writer默认日志与草稿保存路径

    目的:把保存Windows Live Writer的日志与草稿文件夹My Weblog Posts移动到E:\Blog\路径下 用mklink命令,创建E:\Blog\路径下的My Weblog Po ...

  2. leangoo

    leangoo网址:https://www.leangoo.com/

  3. 安卓 SQLite error:SQLite database locked exception while compling : PRAGMA journal_mode .....

    项目中频繁的切换Tab键,会频繁地从数据库读取数据,这是报出这样的错误: 解决方法是在国外的某论坛找到的 : 在插入数据的时候,首先: SQLiteDatabase db = SQLiteDataba ...

  4. Jqgrid学习(转载)

    jqGrid API 全   JQGrid是一个在jquery基础上做的一个表格控件,以ajax的方式和服务器端通信. JQGrid Demo 是一个在线的演示项目.在这里,可以知道jqgrid可以做 ...

  5. php 分词

    发现了一个很好的分词类库phpanalysis2.0. 原文连接地址:http://www.phpbone.com/phpanalysis/         分 词系统简介:PHPAnalysis分词 ...

  6. QT第五天学习

    回顾: QFile QTextSream QDataSream QFileInfo QDir Dir entryList 返回目录下所有文件和目录的名字 entryInfoList 返回目录下所有文件 ...

  7. 使用Intent创建Tab页面

    前面已经介绍了如何使用TabActivity来创建Activity布局,前面添加Tab页面使用了TabHost.TabSpec如下方法. setContent(int viewId):直接将指定Vie ...

  8. 负载均衡软件LVS分析四(测试)

    一.启动LVS集群服务LVS负载均衡管理和使用有两种方式,一种是以ipvsadm命令行脚步与ldirectord监控方式,一种是以Piranha工具进行管理和使用.下面分别介绍. 1.利用ipvsad ...

  9. WinMerge文件编码设置

    http://blog.sina.com.cn/s/blog_7575fab10101o0na.html 系统默认是System codepage,我们要选用Custom codepage.值得注意的 ...

  10. 开箱即用 - jwt 无状态分布式授权

    基于JWT(Json Web Token)的授权方式 JWT 是JSON风格轻量级的授权和身份认证规范,可实现无状态.分布式的Web应用授权: 从客户端请求服务器获取token, 用该token 去访 ...