<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>事件</title>
<script src="../jquery.min.js"></script>
<script>
//就绪函数
$(function(){
//事件下拉或上升
$("#th1").click(function(){
$("#p").slideToggle(2000);
});
//改变文本背景颜色
$("#th2").focus(function(){
$("#p1").css("background-color","red");
});
//输入域失去焦点 (blur) 时改变其颜色:
$("#th3").blur(function(){
$("#p1").css("background-color","#D6D6F5");
});
//触发、或将函数绑定到指定元素的 change 事件
$("#th4").change(function(){
$(this).css("color","red");
});
//触发、或将函数绑定到指定元素的 click 事件
//显示对元素点击事件的时间戳
$("#th5").click(function(){
$("p").html(event.timeStamp);
});
//双击按钮事件
$("#th4").dblclick(function(){
$("p").slideToggle();
});
//向匹配元素的当前或未来的子元素附加一个或多个事件处理器
$("div").delegate("button","click",function(){
$("p").slideToggle();
});
//$("img").error(function(){
//$().replaceWith("图变未加载");
//});
//鼠标在屏幕上的XY坐标
$(document).mousemove(function(e){
$("#p2").text("x"+e.pageX+"y:"+e.pageY);
});
//阻止网址联接
$("a").click(function(event){
//阻止默认事件的发生
event.preventDefault();
alert("禁止访问");
});
//鼠标最后停止的地方时
$("#th6").click(function(e){
return("鼠标最后停止的地方时x:"+e.pageX+"y:"+e.pageY);
});
$("#th6").click(function(e){
$("#p3").html(e.result);
});
// 触发该事件的 DOM 元素。
$("p,h1,h3,p,button").click(function(event){
$("#c").html("点击了"+event.target.nodeName+"元素触发");
});
//该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数
$("#th7").click(function(event){
$("span").html(event.timeStamp);
//$("span").html(e.timeStamp);
});
//显示触发了哪种类型的事件
$(".p").bind('click mouseout mouseover ',function(event){
$("div").html("事件"+event.type);
});
//当您在上面的框中键入文本时,下面的 div 会显示键位序号
//指示按了哪个键或按钮
//触发、或将函数绑定到指定元素的 key down 事件
$("#th8").keydown(function(event){
$("#cd").html("key:"+event.which);
});
//触发、或将函数绑定到指定元素的 focus 事件
//得到焦点变换颜色
$("#th9").focus(function(){
$("#th9").css("background-color","red");
});
//触发、或将函数绑定到指定元素的 blur 事件
//失去焦点变换颜色
$("#th9").blur(function(){
$("#th9").css("background-color","#dddaaa");
});
//计算在输入域中的按键次数:
// 触发、或将函数绑定到指定元素的 key down 事件
i=0;
$("#th10").keydown(function(){
$("#sp").text(i+=1);
});
//触发、或将函数绑定到指定元素的 key press 事件
/*keypress 事件与 keydown 事件类似。当按钮被按下时,会发生该事件。它发生在当前获得焦点的元素上。
不过,与 keydown 事件不同,每插入一个字符,就会发生 keypress 事件。
keypress() 方法触发 keypress 事件,或规定当发生 keypress 事件时运行的函数。
注释:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。*/
$("#th10").keypress(function(){
$("sp").text(i+=1);
});
// keyup() 方法
/*完整的 key press 过程分为两个部分,按键被按下,然后按键被松开并复位。
当按钮被松开时,发生 keyup 事件。它发生在当前获得焦点的元素上。
keyup() 方法触发 keyup 事件,或规定当发生 keyup 事件时运行的函数。
注释:如果在文档元素上进行设置,则无论元素是否获得焦点,该事件都会发生。
*/
$("#t1").keyup(function(){
$("#t1").css("background-color","#dddaaa");
});
//触发、或将函数绑定到指定元素的 mouse down 事件
$("#th11").mousedown(function(){
$("#t2").slideToggle();
});
//向匹配元素添加事件处理器。每个元素只能触发一次该处理器。
//当点击 该 元素时,增加该元素的文本大小
$("#th12").one("click",function(){
$(this).animate({
fontSize:"+=6px",
width:"50px"
});
});
//对浏览器窗口调整大小进行计数:
//触发、或将函数绑定到指定元素的 resize 事件
x=0;
$(window).resize(function(){
$("#t3").text(x+=1);
});
//
//对元素滚动的次数进行计数:
x=0;
$("#t4").scroll(function(){
$("#t5").text(x+=1);
});
//移除所有 p 元素的事件处理器:
$("#th13").click(function(){
$("#t5").unbind();
});
});
</script>
<style>
p{
background-color:#FF9900;
color:#FF0000;
width:100px;
height:100px;}
div{
background-color:#FFCC33;
width:50px;
height:50px;}
</style>
</head>
<body>
<div style="background:1px scroll #FF0000;">
<p id="p3">这是一个段落</p>
<button>按钮</button>
</div>
<span id="p2">鼠标坐标</span>
<p id="p">事件测试</p>
<input id="p1" type="text"/>
<input type="button" value="下拉/上升按钮" id="th1"/><br />
<input type="button" value="焦点按钮" id="th2"/><br />
<input type="button" value="失去焦点时改变其颜色按钮" id="th3"/><br />
<input type="button" value="双击按钮" id="th4"/><br />
<input type="button" value="时间戳按钮" id="th5"/><br />
<input type="button" value="按钮" id="th6"/>
<a href="http://www.baidu.com">百度</a>
<input type="button" value="距1970年毫秒时间按钮" id="th7"/>
<p>段落一</p>
<h1>标题一</h1>
<h3>标题二</h3>
<p>段落二</p>
<button>按钮</button>
<div id="c"></div>
<span id="time1">从1970到事件发生的毫秒数</span>
<p class="p">显示事件</p>
<div></div>
<input type="text" id="th8"/>
<div id="cd"></div>
文本框得到焦点和失去焦点改变颜色<input type="text" id="th9"/>
<input type="text" id="th10"/>
计算键盘在输入框的次数<span id="sp"></span>
<input type="text" id="t1"/>
<input type="button" id="th11" value="按钮触发mousedown"/>
<input type="text" id="th12" />
<p id="t2">测试</p>
<input type="button" value="" id="th13"/>
<span id="t3">浏览器窗口大小</span>
<div id="t4" style="overflow:scroll;">
sadsadfsadfsafdsa
asfsafsafsafsafs<br />
<br />
<br />
sadsadfsadfsafdsa
asfsafsafsafsafs<br />
<br />
<br />
</div>
<span id="t5">元素滚动次数</span>
<input type="button" value="移除元素事件处理器" id="th13"/>
</body>
</html>
单击按钮改变div的大小
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script src="jquery.min.js"></script>
<script>
$(function(){
$("#th1").click(function(){
//alert($("#d").width()+":"+$("#d")height());
alert($("#div1").width()+":"+$("#div1").height());
});
$("#th2").click(function(){
alert($("#div1").innerWidth()+":"+$("#div1").innerHeight());
});
$("#th3").click(function(){
alert($("#div1").outerWidth()+":"+$("#div1").outerHeight());
});
$("#th4").click(function(){
$("#div1").width(500)+":"+$("#div1").height(500);
});
$("#th5").click(function(){
$("#div1").innerWidth(540)+":"+$("#div1").innerHeight(540);
});
$("#th6").click(function(){
$("#div1").outerWidth(300)+":"+$("#div1").outerHeight(300);
});
});
</script>
<style>
div{
border:1px solid #FF00FF;}
</style>
</head>
<body>
<div id="div1"> 测试</div>
<input type="button" value="查询宽和高" id="th1"/>
<input type="button" value="查询宽和高(包含内边距)" id="th2"/>
<input type="button" value="查询所有宽和高" id="th3"/>
<input type="button" value="修改宽和高" id="th4"/>
<input type="button" value="修改宽和高(包含内边距)" id="th5"/>
<input type="button" value="修改所有宽和高" id="th6"/>
</body>
</html>