jquery事件和动画操作集锦
1
2
3
4
5
6
|
$(document).ready( function (){ //todo }); //dom准备就绪后执行ready里面的函数,此时dom对应的相关文件(比如图片)可能还未加载完毕,此时图片的height和width还不能访问。 $img.load( function (){ //todo }); //图片加载完毕后执行里面的函数。 |
1
2
3
4
5
6
7
8
|
var $ul=$( "#ulMain" ); $ul.bind( "click" ,{name: "zy" ,age:22}, function (event){ alert(event.data.name); }); //绑定ul的click事件,并传递一个参数(参数类型为一个对象)。bind方法可以多次调用。 简写方式如下: $ul.click({name: "zy" ,age:22}, function (event){ alert(event.data.name); }); |
1
2
3
|
$( "#divMain" ).bind( "mouseenter mouseleave" , function (){ $( this ).append($( "<b>div append</b>" )); }); |
1
2
3
4
5
6
7
8
9
10
11
|
$( "#divMain" ).bind( "mouseenter.divevent" , function (){ $( this ).append($( "<b>div mouseenter</b><br/>" )); }).bind( "click.divevent" , function (){ $( this ).append($( "<b>div click</b><br/>" )); }).bind( "dblclick.divevent" , function (){ $( this ).append($( "<b>div dblclick</b><br/>" )); }); $( "#btnSubmit" ).bind( "click" , function (){ $( "#divMain" ).unbind( ".divevent" ); //解除命名空间即可 }); |
1
2
3
4
5
6
7
8
9
10
|
$( "#divMain" ).bind( "click" , function (){ $( this ).append($( "<b>div click</b><br/>" )); }).bind( "click.divevent" , function (){ $( this ).append($( "<b>div click.divevent</b><br/>" )); }); $( "#btnSubmit" ).bind( "click" , function (){ $( "#divMain" ).trigger( "click!" ); //感叹号表示仅触发没有命名空间的事件,这里仅会触发click事件,注意:1.9及以后版本移除了该功能! $( "#divMain" ).trigger( "click" ); //触发所有click事件,这里会触发click和click.divevent事件。 }); |
1
2
3
4
5
6
|
var $ul=$( "#ulMain" ); $ul.hover( function (){ $( this ).css({backgroundColor: "red" }); //光标移入该元素时修改背景色为红色 }, function (){ $( this ).css({backgroundColor: "white" }); //光标移入该元素时修改背景色为白色 }); |
1
2
3
4
5
6
7
|
$( "#btnMain" ).toggle( function (){ $ul.css( "color" , "red" ); }, function (){ $ul.css( "color" , "yellow" ); }, function (){ $ul.css( "color" , "blue" ); }); //依次单击按钮触发的事件。 |
1
2
3
4
|
var $ul=$( "#ulMain" ); $( "#btnMain" ).click( function (){ $ul.toggle(); }); // 单击按钮时,隐藏或显示ul |
1
2
3
4
|
$( "#spanMain" ).click( function (event){ $( "#spanSpan" ).text( "span click" ); event.stopPropagation(); // 阻止事件冒泡,event为事件对象 }); |
1
2
3
4
5
6
7
|
$( "#btnSubmit" ).click( function (event){ if ($( "txtName" )== "" ) { //todo,错误提示 event.preventDefault(); //阻止submit的默认行为,即不提交表单。 } }); |
1
2
3
|
$( "#btnPay" ).click( function ( event ){ alert(event.type); //事件的类型,此处输出 click }); |
1
2
3
4
5
|
$( "a" ).click( function (event){ var tg=event.target; //获取触发事件的元素,这里为<a/>,该对象是DOM对象 alert(tg.href); return false ; }); |
1
2
3
4
5
6
7
8
|
$( "a" ).mouseover( function (event){ var reltg=event.relatedTarget; //相当于IE中的event.fromElement,即光标是从哪个元素移入的 alert(reltg.toString()); // return false ; }); // $( "a" ).mouseout( function (event){ alert(event.relatedTarget.toString()); // 针对mouseout,相当于IE中的event.toElement,即光标移出后到哪个元素上了。 }); |
1
2
3
4
|
$( "a" ).click( function (event){ alert(event.pageX+ "," +event.pageY); return false ; }); |
1
2
3
|
$( "#txtMain" ).keyup( function (e){ alert(e.which); // 比如按键盘上的A,则返回65 }); |
1
2
3
|
$( "#txtMain" ).keydown( function (e){ alert(e.ctrlKey+ "," +e.shiftKey+ "," +e.altKey); }); |
1
2
3
4
5
6
7
8
9
10
|
var $ul =$( "#ulMain" ); $( "#btnMain" ).click(func1= function (e){ $ul.append($( "<li>func1</li>" )); }).click(func2= function (){ $ul.append($( "<li>func2</li>" )); }); $( "#btnDel" ).click( function (){ $( "#btnMain" ).unbind( "click" ,func2); }); |
1
2
3
4
|
var $ul =$( "#ulMain" ); $( "#btnMain" ).one( "click" , function (){ $ul.append($( "<li>func1</li>" )); }); //click事件仅会触发一次。 |
1
2
3
4
5
6
7
|
$( "#btnMain" ).bind( "click" , function (e,name,age){ $( function (){ var $ul =$( "#ulMain" ); $( "#btnMain" ).bind( "click" , function (e,name,age){ alert(name+ "," +age); }).trigger( "click" ,[ "zy" ,11]); // 页面加载后就会执行click事件处理函数。 }); |
1
2
3
4
5
6
|
$divMain =$( "#divMain" ); $( "#btnSubmit" ).toggle( function (){ $divMain.hide(1000); //元素在1000毫秒内隐藏掉,不带参数会立即隐藏 }, function (){ $divMain.show(1500); //元素在1500毫秒内显示出来 }); |
1
2
3
4
5
6
|
$divMain =$( "#divMain" ); $( "#btnSubmit" ).toggle( function (){ $divMain.slideUp(); }, function (){ $divMain.slideDown(); }); |
1
2
3
4
5
6
7
8
|
#divMain{ position : relative ; //或者是 absolute ,这样才可以影响元素的 top , left , bottom , right 属性。 width : 300px ; height : 300px ; border : 1px solid #005000 ; background : #96E555 ; cursor : pointer ; } |
1
2
3
4
5
6
|
$( function (){ $divMain =$( "#divMain" ); $( "#btnSubmit" ).click( function (){ $divMain.animate({left: "500px" }, 2000, null ); }); }); |
1
2
3
4
|
$divMain =$( "#divMain" ); $( "#btnSubmit" ).click( function (){ $divMain.animate({left: "+=200px" }, 2000); //在当前位置累加200px }); |
1
2
3
4
|
$divMain =$( "#divMain" ); $( "#btnSubmit" ).click( function (){ $divMain.animate({left: "+=200px" ,height: "-=50px" }, 2000); // 位置变化的同时,高度也在变化 }); |
1
2
3
4
|
$( "#btnSubmit" ).click( function (){ $divMain.animate({left: "+=100px" }, 1000) .animate({height: "-=50px" },1000); }); |
1
2
3
4
5
|
stop(clearQueue, gotoEnd); // clearQueue表示是否清空未执行完的队列, gotoEnd表示是否将正在执行的动画跳转到末状态。 $divMain =$( "#divMain" ); $( "#btnSubmit" ).click( function (){ $divMain.stop().animate({left: "+=100px" }, 1000); // 停止当前正在执行的动画,立即执行向右移动100的动画。 }); |
1
2
3
4
5
6
7
|
$divMain =$( "#divMain" ); $( "#btnSubmit" ).click( function (){ if (!$divMain.is( ":animated" )) //元素不处于动画中才执行下面的动画 { $divMain.animate({left: "+=100px" }, 1000); } }); |
1
2
3
4
5
6
7
|
$divMain =$( "#divMain" ); $( "#btnSubmit" ).click( function (){ if (!$divMain.is( ":animated" )) { $divMain.delay(2000).animate({left: "+=100px" }, 1000); //推迟2秒后才执行动画 } }); |
1
2
3
4
|
$divMain =$( "#divMain" ); $( "#btnSubmit" ).click( function (){ $divMain.slideToggle(); }); |
1
2
3
4
|
$divMain =$( "#divMain" ); $( "#btnSubmit" ).click( function (){ $divMain.fadeTo(1000,0.2); //用1000毫秒时间将不透明度调整到20% }); |
1
2
3
4
|
$divMain =$( "#divMain" ); $( "#btnSubmit" ).click( function (){ $divMain.fadeToggle(); }); |
jquery事件和动画操作集锦的更多相关文章
- jQuery的一些基本的函数和用jQuery做一些动画操作
jQuery是对js的封装,因为js有一些不方便的地方.所以,jQuery才会去对js进行封装. jQuery对于标签元素的获取 $('div')或$('li') <!DOCTYPE html& ...
- 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事件 ...
- JQuery 事件与动画
第一大部分 提纲 事件与动画 一.事件 1.在JavaScript语法中的事件,把onxxxxx中的on去掉,就是JQuery中的事件. onclick - click ondblclick - db ...
- JavaScript jQuery 事件、动画、扩展
事件 因为JavaScript在浏览器中以单线程模式运行,页面加载后,一旦页面上所有的JavaScript代码被执行完后,就只能依赖触发事件来执行JavaScript代码. 浏览器在接收到用户的鼠标或 ...
- Jquery基础之动画操作
Jquery的动画效果能够轻松的为网页添加动画效果,为网页带来了新的活力. 一.show()方法和hide()方法 show()方法和hide()方法是jquery中最基本的动画方法.使用show() ...
- python 之 前端开发( jQuery事件、动画效果、.each()、 .data())
11.58 事件 11.581 事件绑定方法与解绑 绑定事件: // 绑定方式一: $('.box1').click(function () { alert('绑定方式一') }); // 绑定方 ...
- 初学jQuery之jQuery事件与动画
今天我们就谈谈jquery中的事件和简单动画吧,它们毕竟基础是进阶华丽的根本!! 1.事件 1.window事件 ready 准备就绪 2.鼠标事件 方法 ...
随机推荐
- Android SDK location should not contain whitespace, as this cause problems with NDK tools
解决方案一: The easiest solution is to move the SDK somewhere else, where there is no space or other whit ...
- PAT 1065 - 1068 题解
这次的题目来源是 2013 年 10 月 7 日下午的浙大计算机研究生招生机试题. 这次题目的难度,按姥姥的说法是:『比普通的 PAT 要难了 0.5 个点.我是把自己的题目从 1.0 到 5.0 以 ...
- 全栈工程师之路(二)—— JavaScript(网页前端脚本语言)
javascript 是可以运行在网页前端的脚本语言,可以基于 html 之上实现更丰富的交互(网页内容的交互显示).异步回调.多线程.定时器.动画等. hello_world.html <ht ...
- Linux下快速静态编译Qt以及Qt动态/静态版本共存(提供了编译4.6,5.6的精通编译脚本,并且apt-get install 需要的库也全列出来了。还有分析问题的心理过程)good
qt4.6 Linux./configure -static -release -confirm-license -opensource -qt-zlib -qt-libpng -qt-libjpeg ...
- WPF制作的党旗
原文:WPF制作的党旗 --------------------------------------------------------------------------------引用或转载时请保 ...
- WPF 3D model - Sphere, Cone, and Cylinder
原文:WPF 3D model - Sphere, Cone, and Cylinder Extending Visual3D - Sphere, Cone, and Cylinder http: ...
- 基于Android开发的天气预报app(源码下载)
原文:基于Android开发的天气预报app(源码下载) 基于AndroidStudio环境开发的天气app -系统总体介绍:本天气app使用AndroidStudio这个IDE工具在Windows1 ...
- Eclipseproject标准的文件夹层次
为什么特别写一个文档首场讲座解释什么层次,你是eclipse正在使用java.io.File类在读workspace档,我相信不知道eclipse,为了避免以后再出现这样的令人难堪的情况,还是编写这样 ...
- springboot 集成oauth2
未实现.首先实现spring security. 1. 关于oauth2 隐隐觉得集成oauth2,用好它是一个不太简单的事儿,需要对oauth2了解一番. oauth2比较好的参考,都是别人原创文章 ...
- 你所不知道的 Kindle - 阅读微信公众号文章
Kindle 是一款非常优秀的阅读设备,它为我们提供了非常舒服的阅读体验,并且配合强大的亚马逊图书资源,应该是目前最好的阅读设备之一.Kindle 在已有的成就下还一直在努力提升用户体验.为中国用户开 ...