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.鼠标事件 方法 ...
随机推荐
- js精确判断数据类型为何用Object.prototype.toString.call()而不是Object.prototype.toString()
有何区别,为何一定要通过call. 我们知道call是用来改变函数作用域的,Object.prototype.toString.call在这儿也是用来改变作用域的. Object.prototype. ...
- TabHost两种实现方式
第一种:继承TabActivity,从TabActivity中用getTabHost()方法获取TabHost.只要定义具体Tab内容布局就行了. <?xml version="1.0 ...
- Java--垃圾收集算法及内存分配策略
本篇博客,主要介绍GC的收集算法以及根据算法要求所得的内存分配策略! 一.收集算法 收集算法,主要包括四种,分别是:Mark-Sweep(标记-清除).Copying(复制).Mark-Compact ...
- quick-cocos2d-x游戏开发【8】——动画与动作
动画与动作,在quick中都有对其封装,所以我们还是来看一下吧. 总的来说,对于帧动画,quick封装的方法我们能够常常使用,这是很方便的,以下直接上代码来直观感受下, 比方,14张帧图片,採用coc ...
- 简明Python3教程 首页
A Byte of Python 'A Byte of Python' is a free book on programming using the Python language. It serv ...
- BIOS 选项设置的含义
SATA Mode Section: ADHI: Advanced Host Controller Interface - this is a hardware mechanism that allo ...
- IOS开发之把 Array 和 Dictionaries 序列化成 JSON 对象
1 前言通过 NSJSONSerialization 这个类的 dataWithJSONObject:options:error:方法来实现,Array 和 dictionary 序列化成 JSON ...
- ELK日志系统:Elasticsearch + Logstash + Kibana 搭建教程 good
环境:OS X 10.10.5 + JDK 1.8 步骤: 一.下载ELK的三大组件 Elasticsearch下载地址: https://www.elastic.co/downloads/elast ...
- delphi 线程教学第一节:初识多线程(讲的比较浅显),还有三个例子
http://www.cnblogs.com/lackey/p/6297115.html 几个例子: http://www.cnblogs.com/lackey/p/5371544.html
- ReportViewer,RDLC 报表开发之个性化样式
原文:ReportViewer,RDLC 报表开发之个性化样式 报表开发中,客户对样式提出了要求: 1.工具栏上显示每页条数 2.只导出Excel,不需要下拉菜单. 3.报表上显示的图表,分页时,每页 ...