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.鼠标事件 方法 ...
随机推荐
- 【38.46%】【codeforces 615E】Hexagons
time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...
- TDM-GCC是从mingw-w64项目patch而来,全部使用静态链接,对线程不需要额外的DLL,默认使用SJLJ异常(真是好东西)
Windows版GCC之TDM-GCC 4.5.2 平时写 C/C++ 小程序的时候,不喜欢开VS,太庞大了,还要建项目.对于小程序,一个可以进行单文件编译的 IDE 是我的首选,我用的是 C-Fre ...
- Android检测网络是否可用并获取网络类型
在类中使用getSystemService的时候需要这样进行使用:1. public class JajaMenu extends Activity { public static JajaMenu ...
- MongoDB小结
教程 MongoDB MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统.在高负载的情况下,添加更多的节点,可以保证服务器性能.MongoDB 旨在为WEB应用提供可扩展的 ...
- ubuntu 在配置MySQL维修
第一步 设备MySQL sudo apt-get install mysql-server 第二步骤 构造MySQL 2.1 vim /etc/mysql/my.cnf 到场bind-address ...
- android 创建一个新的每次project什么时候 请问自己主动 参加 V7依赖?
android 创建一个新的每次project什么时候 请问自己主动 参加 V7依赖? 分析原因: 主要是由于.我之前的 SDK 的版本号 更新的有点高了.低版本号是不会有这样的问题g的,新版本号中g ...
- WPF中使用TranslateTransform3D修改CAD的3D旋转中心
原文:WPF中使用TranslateTransform3D修改CAD的3D旋转中心 前面一篇文章讲述了2D旋转功能的实现,文章提到了修改3D旋转中心,这一节主要总结一下具体的修改3D旋转 ...
- toolbox、library 的组织
不要重复制造轮子:重复利用已完成的函数: 1. 一个普通的 matlab toolbox bigData:规模较大的数据集: data:一般的数据集: demos:演示程序,直接可以运行: tools ...
- 零元学Expression Design 4 - Chapter 6 教你如何在5分钟内做出文字立体感效果
原文:零元学Expression Design 4 - Chapter 6 教你如何在5分钟内做出文字立体感效果 又来一篇五分钟做设计啦~ 本篇将教大家如何运用Design内建工具Blend Path ...
- python3操作注册表设置/取消IE代理
import io, sys, time, re, os import winreg def enableProxy(IP, Port): proxy = IP + ":" + s ...