JQuery 事件与动画

第一大部分提纲

事件与动画

一、事件

1.在JavaScript语法中的事件，把onxxxxx中的on去掉，就是JQuery中的事件。

onclick - click

ondblclick - dblclick

onmouseover - mouseover

onmouseout - mouseout

onfocus - focus

onblur - blur

onchange - change

onkeydown - keydown

onkeyup - keyup

onkeypress - keypress

2.特有事件：

hover(function(){},function(){})：相当于把mouseover和mouseout结合起来了

toggle(function(){},function(){},...function(){})：每点击一下执行下一个function,如执行到末尾，会再返回第一个执行

3.JQuery中的事件，需要事件的小括号中写function(){}

$("#Button1").click(function(){

//事件处理代码

});

案例：

1.光棒效果：mouseover,mouseout

2.展开面板：click

二、动画

hide(),show()

fadeIn(),fadeOut()

slideUp(),slideDown()

slideUp([毫秒数],[回调函数])

slideUp(3000,function(){xxx();})

animate({left:"500px"},3000,function(){/*回调函数*/})

stop(bool,bool);

第一个参数：是否清空之前的动画序列。

第二个参数：直接走到最后的状态。

第二大部分例题

html xmlns="http://www.w3.org/1999/xhtml">

#ss{

border:1px solid blue;

width:300px;

height:300px;

position:absolute;

}

ul{

list-style-type:none;

width:400px;

border:1px ;

}

.titlebar{

padding:5px;

color:white;

margin-top:1px;

}

.spanbar{

padding:5px;

display:none;

}

#aa{

padding:5px;

border:1px solid blue;

}

</style>

$(document).ready(function () {

//$(".titlebar").click(function () { //click 鼠标点击事件

//var s = $(this).next().css("display");

//if(s == "none")//如果display ==none

//{

// $(this).next().css("display","block");//如果把点击标题那么把下面展开

//}

//else {

// $(this).next().css("display","none");//如果把点击标题那么把下面隐藏

//}

//});

//$(".titlebar").hover(function(){ //hover鼠标移动到上面的事件

// //$(this).next().css("display", "block"); //移动上去显示隐藏部分

//},function(){

// $(this).next().css("display", "none");//鼠标离开隐藏

//})

//$(".titlebar").hover(function () { //hover 鼠标移动事件

// $(this).toggleClass("mover"); //toggleClass 如果没有就添加上如果有就移除

//}, function () {

// $(this).toggleClass("mover");

//})

//$("#aa").toggle(function () { //toggle 里面可以放无数个每次点击执行下一个执行到最后一个就在执行第一个

// $(this).css("background-color","#ffff00");//

//}, function () {

// $(this).css("background-color","#ff00ff");

//}, function () {

// $(this).css("background-color","#00ffff");

//}, function () {

// $(this).css("background-color","#ffffcc");

//});

//动画效果

$(".titlebar").click(function () {

var s = $(this).next().css("display");

if (s == "none")

{

//$(this).next().show();//点击显示

//$(this).next().fadeIn();//渐变显示 fadein(3000)括号里面放秒数 3秒

$(this).next().slideDown();//slideDown()拉下来括号里面放秒数

}

else

{

//$(this).next().hide();点击隐藏

//$(this).next().fadeOut();//fadeOut渐变隐藏

$(this).next().slideUp();//slideUp()拉上去括号里面也是放时间

}

})

$("#ss").click(function () {

//hideDiv();//点击回调函数自动来回拉上来拉下去

// $("#ss").animate({width:"500px",height:"500px"},3000) //自定义动画用animate({},秒数) 自定义的在{}里面写

//$("#ss").animate({ width: "500px" }, 3000).animate({height:"500px"},3000)//先宽度拉伸500px 再高度增长500px

$("#ss").animate({ left: "500px" }, 3000).animate({ top: "200px" }, 3000).animate({ width: "500px" }, 3000).animate({ height: "500px" }, 3000);//跑到中间位置

})

});

//定义显示毁回调函数

function showDiv() {

$("#ss").slideDown(3000, function () { hideDiv(); });

}

function hideDiv() {

$("#ss").slideUp(3000, function () { showDiv(); });

}

</script>

</head>

<body>

<div>

<asp:Repeater ID="Repeater1" runat="server">

<ul>

</HeaderTemplate>

</ul>

</FooterTemplate>

<li>

<%#Eval("Name") %>-<%#Eval("Price") %>

</div>

代号：<%#Eval("Code") %>

<br/>

名称：<%#Eval("Name") %>

<br/>

系列: <%#Eval("Brand") %>

<br/>

油耗：<%#Eval("Oil") %>

<br/>

排量：<%#Eval("Exhaust") %>

<br/>

功率：<%#Eval("Powers") %>

<br/>

上市时间：<%#Eval("Time") %>

<br/>

价格：<%#Eval("PRice") %>

<br/>

</div>

</li>

</ItemTemplate>

</asp:Repeater>

<div>

点击变化颜色

</span>

</div>

</div>

</form>

</body>

</html>

JQuery 事件与动画的更多相关文章

jQuery事件以及动画
jQuery事件以及动画一.jQuery事件加载DOM 在页面加载完毕后, 浏览器会通过 JavaScript 为 DOM 元素添加事件. 在常规的 JavaScript 代码中, 通常使用 wi ...
jQuery事件与动画
一事件 1 加载DOM事件 $(document).ready():执行时机:DOM元素准备就绪执行次数:多次简单写法:原:$(document).ready(function(){}) ...
第三章 jQuery事件和动画
1.什么是事件:事件指的是用于对网页操作的时候,网页做出的一个回应. 2.JQuery中的事件:JQuery事件是对JavaScript事件的封装,常用事件的分类如下:(1)基础事件:window事件 ...
JavaScript jQuery 事件、动画、扩展
事件因为JavaScript在浏览器中以单线程模式运行,页面加载后,一旦页面上所有的JavaScript代码被执行完后,就只能依赖触发事件来执行JavaScript代码. 浏览器在接收到用户的鼠标或 ...
初学jQuery之jQuery事件与动画
今天我们就谈谈jquery中的事件和简单动画吧,它们毕竟基础是进阶华丽的根本!! 1.事件 1.window事件 ready 准备就绪 2.鼠标事件方法 ...
JQuery事件与动画总结
1.加载DOM 1.1.window事件 window.onload=function(){}.... 时机:其他资源都加载完毕后,再执行 $(function(){}) ……:只是等待标签完毕,即可 ...
jquery事件和动画操作集锦
一,事件 1,加载事件 1 2 3 4 5 6 $(document).ready(function(){ //todo }); //dom准备就绪后执行ready里面的函数,此时dom对应的相关 ...
python 之前端开发（ jQuery事件、动画效果、.each()、 .data()）
11.58 事件 11.581 事件绑定方法与解绑绑定事件: // 绑定方式一: $('.box1').click(function () { alert('绑定方式一') }); // 绑定方 ...
jQuery事件和动画
1.toggle事件 <!DOCTYPE html> <html> <head lang="en"> <meta charse ...

随机推荐

export和import实现模块化
export和import实现模块化阅读目录 ES6的模块化的基本规则或特点: 下面列出几种import和export的基本语法: ES6导入的模块都是属于引用: 循环依赖的问题: 浏览器兼容: 参 ...
自定义的Server
自定义的Server 我们在上面对ASP.NET Core默认提供的具有跨平台能力的KestrelServer进行了详细介绍(<聊聊ASP.NET Core默认提供的这个跨平台的服务器——Kes ...
浅谈MySql的存储引擎（表类型）（转）
什么是MySql数据库通常意义上,数据库也就是数据的集合,具体到计算机上数据库可以是存储器上一些文件的集合或者一些内存数据的集合. 我们通常说的MySql数据库,sql server数据库等等其实是 ...
一、Mongo的安装
注:学习为主,平台为WIN7 32位系统一.Mongo的安装 1.1 下载到官方下载地址(http://www.mongodb.org/downloads)去下载所需要的版本 1.2 安装与运行 ...
【剑指Offer学习】【面试题17 ：：合并两个排序的链表】
题目:输入两个递增排序的链表,合并这两个链表并使新链表中的结点仍然是依照递增排序的链表结点定义例如以下: public static class ListNode { int value; List ...
css概述
前言 1.CSS cascading stylesheet 级联样式表 ,外观显示(页面内容显示的方式).CSS文档以.css作为后缀 2.w3c推荐页面文件定义数据和结 ...
Dynamic Pivot table wizard SQL Server
原文 http://www.gyurcit.hu/pivot.html Dynamic Pivot table wizard This stored procedure generate dynami ...
android绑定Service失败原因
今天抄一个代码,学习Service,中间Service的绑定一直是失败的. bindService返回false 上网查询的话都是一些,比如说TabHost的问题发现和自己的问题不一样. 最后想了想 ...
Android 系统api实现定位及使用百度提供的api来实现定位
目前在国内使用定位的方法主要是 1. Android系统提供的 LocationManager locationManager = (LocationManager) getSystemService ...
Redis bio
还是一个很小的模块. bio就是background io的意思,既然要background,就要创建线程,创建几个线程呢?有几种类型的io,就创建几个线程.同一种类型的job需要排队,所以存放各自的 ...

JQuery 事件与动画

JQuery 事件与动画的更多相关文章

随机推荐

热门专题