(学习留存,如有侵权,请告知,立刻删除!)
JQuery事件:
例子:(加载后标签选择器单击事件)
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
单独文件中的函数:
正常开发中jQuery 函数应放到独立的 .js 文件中;例如:
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>
JQuery名称冲突的解决办法:
var jq=jQuery.noConflict(),帮助您使用自己的名称(比如 jq)来代替 $ 符号;
由于 jQuery 是为处理 HTML 事件而特别设计的,那么当您遵循以下原则时,您的代码会更恰当且更易维护:
- 把所有 jQuery 代码置于事件处理函数中;
- 把所有事件处理函数置于文档就绪事件处理器中;
- 把 jQuery 代码置于单独的 .js 文件中;
- 如果存在名称冲突,则重命名 jQuery 库;
方法 | 描述 |
---|---|
bind() | 向匹配元素附加一个或更多事件处理器 |
blur() | 触发、或将函数绑定到指定元素的 blur 事件 |
change() | 触发、或将函数绑定到指定元素的 change 事件 |
click() | 触发、或将函数绑定到指定元素的 click 事件 |
dblclick() | 触发、或将函数绑定到指定元素的 double click 事件 |
delegate() | 向匹配元素的当前或未来的子元素附加一个或多个事件处理器 |
die() | 移除所有通过 live() 函数添加的事件处理程序。 |
error() | 触发、或将函数绑定到指定元素的 error 事件 |
event.isDefaultPrevented() | 返回 event 对象上是否调用了 event.preventDefault()。 |
event.pageX | 相对于文档左边缘的鼠标位置。 |
event.pageY | 相对于文档上边缘的鼠标位置。 |
event.preventDefault() | 阻止事件的默认动作。 |
event.result | 包含由被指定事件触发的事件处理器返回的最后一个值。 |
event.target | 触发该事件的 DOM 元素。 |
event.timeStamp | 该属性返回从 1970 年 1 月 1 日到事件发生时的毫秒数。 |
event.type | 描述事件的类型。 |
event.which | 指示按了哪个键或按钮。 |
focus() | 触发、或将函数绑定到指定元素的 focus 事件 |
keydown() | 触发、或将函数绑定到指定元素的 key down 事件 |
keypress() | 触发、或将函数绑定到指定元素的 key press 事件 |
keyup() | 触发、或将函数绑定到指定元素的 key up 事件 |
live() | 为当前或未来的匹配元素添加一个或多个事件处理器 |
load() | 触发、或将函数绑定到指定元素的 load 事件 |
mousedown() | 触发、或将函数绑定到指定元素的 mouse down 事件 |
mouseenter() | 触发、或将函数绑定到指定元素的 mouse enter 事件 |
mouseleave() | 触发、或将函数绑定到指定元素的 mouse leave 事件 |
mousemove() | 触发、或将函数绑定到指定元素的 mouse move 事件 |
mouseout() | 触发、或将函数绑定到指定元素的 mouse out 事件 |
mouseover() | 触发、或将函数绑定到指定元素的 mouse over 事件 |
mouseup() | 触发、或将函数绑定到指定元素的 mouse up 事件 |
one() | 向匹配元素添加事件处理器。每个元素只能触发一次该处理器。 |
ready() | 文档就绪事件(当 HTML 文档就绪可用时) |
resize() | 触发、或将函数绑定到指定元素的 resize 事件 |
scroll() | 触发、或将函数绑定到指定元素的 scroll 事件 |
select() | 触发、或将函数绑定到指定元素的 select 事件 |
submit() | 触发、或将函数绑定到指定元素的 submit 事件 |
toggle() | 绑定两个或多个事件处理器函数,当发生轮流的 click 事件时执行。 |
trigger() | 所有匹配元素的指定事件 |
triggerHandler() | 第一个被匹配元素的指定事件 |
unbind() | 从匹配元素移除一个被添加的事件处理器 |
undelegate() | 从匹配元素移除一个被添加的事件处理器,现在或将来 |
unload() | 触发、或将函数绑定到指定元素的 unload 事件 |
(1)bind() 方法:
定义:规定向被选元素添加一个或多个事件处理程序,并规定事件发生时运行的函数;
实例:
当点击鼠标时,隐藏或显示 p 元素:
$("button").bind("click",function(){
$("p").slideToggle();
});
将事件和函数绑定到元素:
定义:规定向被选元素添加的一个或多个事件处理程序,以及当事件发生时运行的函数;
语法:$(selector).bind(event,data,function)
event:必需,规定添加到元素的一个或多个事件;由空格分隔多个事件,必须是有效的事件;
data:可选,规定传递到函数的额外数据;
function:必需。规定当事件发生时运行的函数;
<script type="text/javascript">
$(document).ready(function(){
$("button").bind("click",function(){
$("p").slideToggle();
});
});
</script>
<body>
<p>This is a paragraph.</p>
<button>请点击这里</button>
</body>
替代语法:$(selector).bind({event:function, event:function, ...})
{event:function, event:function, ...}:必需。规定事件映射,其中包含一个或多个添加到元素的事件,以及当事件发生时运行的函数;
<script type="text/javascript">
$(document).ready(function(){
$("button").bind({
click:function(){$("p").slideToggle();},
mouseover:function(){$("body").css("background-color","red");},
mouseout:function(){$("body").css("background-color","#FFFFFF");}
});
});
</script>
<body>
<p>This is a paragraph.</p>
<button>请点击这里</button>
</body>
(2)blur()方法:
定义:当元素失去焦点时发生 blur 事件;blur() 函数触发 blur 事件,或者如果设置了 function 参数,该函数也可规定当发生 blur 事件时执行的代码;
提示:早前,blur 事件仅发生于表单元素上。在新浏览器中,该事件可用于任何元素;
实例:
当输入域失去焦点 (blur) 时改变其颜色:
$("input").blur(function(){
$("input").css("background-color","red");
});
触发blur事件:
定义:触发被选元素的 blur 事件;
失去焦点语法:$(selector).blur()
聚集焦点语法:$(selector).focus()
<script type="text/javascript">
$(document).ready(function(){
$("input").focus(function(){
$("input").css("background-color","#FFFFCC");
});
$("input").blur(function(){
$("input").css("background-color","#D6D6FF");
});
$("#btn1").click(function(){
$("input").focus();
});
$("#btn2").click(function(){
$("input").blur();
});
});
</script>
<body>
Enter your name: <input type="text" />
<p>请在上面的输入域中点击,使其获得焦点,然后在输入域外面点击,使其失去焦点。</p>
<p><button id="btn1">触发输入域的 focus 事件</button></p>
<p><button id="btn2">触发输入域的 blur 事件</button></p>
</body>
将函数绑定到blur事件:
定义:规定当被选元素的 blur 事件发生时运行的函数;
语法:$(selector).blur(function)
function:可选。规定当 blur 事件发生时运行的函数;
<script type="text/javascript">
$(document).ready(function(){
$("input").focus(function(){
$("input").css("background-color","#FFFFCC");
});
$("input").blur(function(){
$("input").css("background-color","#D6D6FF");
});
});
</script>
<body>
Enter your name: <input type="text" />
<p>请在上面的输入域中点击,使其获得焦点,然后在输入域外面点击,使其失去焦点。</p>
</body>
(3)change()事件:
定义:当元素的值发生改变时,会发生 change 事件。该事件仅适用于文本域(text field),以及 textarea 和 select 元素。change() 函数触发 change 事件,或规定当发生 change 事件时运行的函数;
注释:当用于 select 元素时,change 事件会在选择某个选项时发生。当用于 text field 或 text area 时,该事件会在元素失去焦点时发生;
实例:
当输入域发生变化时改变其颜色:
$(".field").change(function(){
$(this).css("background-color","#FFFFCC");
});
触发change事件:
定义:触发被选元素的 change 事件;
语法:$(selector).change()
<script type="text/javascript">
$(document).ready(function(){
$(".field").change(function(){
$(this).css("background-color","#FFFFCC");
});
$("button").click(function(){
$("input").change();
});
});
</script>
<body>
<button>激活文本域的 change 事件</button>
<p>Enter your name: <input class="field" type="text" /></p>
</body>
将函数绑定到change事件:
定义:规定当被选元素的 change 事件发生时运行的函数;
语法:$(selector).change(function)
function:可选。规定当 change 事件发生时运行的函数;
<script type="text/javascript">
$(document).ready(function(){
$(".field").change(function(){
$(this).css("background-color","#FFFFCC");
});
});
</script>
<body>
<p>在某个域被使用或改变时,它会改变颜色。</p>
Enter your name: <input class="field" type="text" />
<p>Car:
<select class="field" name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
</p>
</body>
(4)chick()事件:
定义:当点击元素时,会发生 click 事件;当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click;
click() 方法触发 click 事件,或规定当发生 click 事件时运行的函数;
实例:
当点击按钮时,隐藏或显示元素:
$("button").click(function(){
$("p").slideToggle();
});
触发click事件:
定义:触发被选元素的click事件;
语法:$(selector).click()
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle(); //单击事件;
});
$("p").dblclick(function(){
$("button").click(); //双击事件;
});
});
</script>
<body>
<button>点击这里进行切换</button>
<p>双击本段落会触发上面这个按钮的 click 事件。</p>
</body>
将函数绑定到click事件:
定义:规定当被选元素的 change 事件发生时运行的函数;
语法:$(selector).click(function)
function:可选。规定当发生 click 事件时运行的函数;
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("p").slideToggle();
});
});
</script>
<body>
<p>这是一个段落。</p>
<button>切换</button>
</body>
(5)dblclick()事件:
定义:当双击元素时,会发生 dblclick 事件;当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click;在很短的时间内发生两次 click,即是一次 double click 事件。dblclick() 方法触发 dblclick 事件,或规定当发生 dblclick 事件时运行的函数;
提示:如果把 dblclick 和 click 事件应用于同一元素,可能会产生问题;
实例:
当双击按钮时,隐藏或显示元素;
$("button").dblclick(function(){
$("p").slideToggle();
});
触发dblclick事件:
定义:触发被选元素的dblclick事件;
语法:$(selector).dblclick()
<script type="text/javascript">
$(document).ready(function(){
$("button").dblclick(function(){
$("p").slideToggle();
});
$("p").click(function(){
$("button").dblclick();
});
});
</script>
<body>
<button>请双击这里</button>
<p>点击本段落会触发上面这个按钮的 dblclick 事件。</p>
</body>
将函数绑定到dblclick事件:
定义:规定当被选元素的 dblclick事件发生时运行的函数;
语法:$(selector).dblclick(function)
function:可选。规定当发生 dblclick 事件时运行的函数;
<script type="text/javascript">
$(document).ready(function(){
$("button").dblclick(function(){
$("p").slideToggle();
});
});
</script>
<body>
<p>这是一个段落。</p>
<button>请双击此处</button>
</body>
(6)delegate()事件:
定义:delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数;使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素);
实例:
当点击鼠标时,隐藏或显示 p 元素;
$("div").delegate("button","click",function(){
$("p").slideToggle();
});
语法:$(selector).delegate(childSelector,event,data,function)
childSelector:必需。规定要附加事件处理程序的一个或多个子元素;
event:必需。规定附加到元素的一个或多个事件;由空格分隔多个事件值。必须是有效的事件;
data:可选。规定传递到函数的额外数据;
function:必需。规定当事件发生时运行的函数;
<script type="text/javascript">
$(document).ready(function(){
$("div").delegate("p","click",function(){
$(this).slideToggle();
});
$("button").click(function(){
$("<p>这是一个新段落。</p>").insertAfter("button");
});
});
</script>
<body>
<div style="background-color:yellow">
<p>这是一个段落。</p>
<p>请点击任意一个 p 元素,它会消失。包括本段落。</p>
<button>在本按钮后面插入一个新的 p 元素</button>
</div>
<p><b>注释:</b>通过使用 delegate() 方法,而不是 live(),只有 div 元素中的 p 元素会受到影响。</p>
</body>
向未来的元素添加事件处理程序
如何使用 delegate() 方法向尚未创建的元素添加事件处理程序
<script type="text/javascript">
$(document).ready(function(){
$("div").delegate("p","click",function(){
$(this).slideToggle();
});
$("button").click(function(){
$("<p>这是一个新段落。</p>").insertAfter("button");
});
});
</script>
<body>
<div style="background-color:yellow">
<p>这是一个段落。</p>
<p>请点击任意一个 p 元素,它会消失。包括本段落。</p>
<button>在本按钮后面插入一个新的 p 元素</button>
</div>
<p><b>注释:</b>通过使用 delegate() 方法,而不是 live(),只有 div 元素中的 p 元素会受到影响。</p>
</body>
(7)die()事件:
定义:die() 方法移除所有通过 live() 方法向指定元素添加的一个或多个事件处理程序;
实例:
移除所有通过 live() 方法向 p 元素添加的事件处理程序;
$("p").die();
语法:$(selector).die(event,function)
event:必需。规定要移除的一个或多个事件处理程序;由空格分隔多个事件值。必须是有效的事件;
function:可选。规定要移除的特定函数;
<script type="text/javascript">
function changeSize(){
$(this).animate({fontSize:"+=3px"});
}
function changeColor(){
$(this).animate({letterSpacing:"+=2px"});
}
$(document).ready(function(){
$("p").live("click",changeSize);
$("p").live("click",changeColor);
$("button").click(function(){
$("p").die("click",changeSize);
});
});
</script>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<p>点击任意 p 元素可以增加尺寸和字间距。包括该段落。</p>
<button>移除通过 live() 方法为 p 元素添加的 changeSize() 事件处理器</button>
</body>
移除通过 live() 添加的特定函数
如何使用 live() 方法移除事件处理程序的特定函数;
<script type="text/javascript">
function changeSize()
{
$(this).animate({fontSize:"+=3px"});
}
function changeColor()
{
$(this).animate({letterSpacing:"+=2px"});
}
$(document).ready(function(){
$("p").live("click",changeSize);
$("p").live("click",changeColor);
$("button").click(function(){
$("p").die("click",changeSize);
});
});
</script>
<body>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<p>点击任意 p 元素可以增加尺寸和字间距。包括该段落。</p>
<button>移除通过 live() 方法为 p 元素添加的 changeSize() 事件处理器</button>
</body>
(8)error()事件:
定义:当元素遇到错误(没有正确载入)时,发生 error 事件,error() 方法触发 error 事件,或规定当发生 error 事件时运行的函数;
提示:该方法是 bind('error', handler) 的简写方式;
实例:
如果图像不存在,则用一段预定义的文本取代它;
$("img").error(function(){
$("img").replaceWith("
Missing image!
");});
触发error事件:
定义:触发被选元素的error事件;
语法:$(selector).error()
<script type="text/javascript">
$(document).ready(function(){
$("img").error(function(){
$("img").replaceWith("<p><b>图片未加载!</b></p>");
});
$("button").click(function(){
$("img").error();
});
});
</script>
<body>
<img src="/i/eg_tulip.jpg" />
<p>如果上面的图像没有正确地加载,会被替换为一段 "图片未加载" 的文本。</p>
<button>触发图像的 error 事件</button>
</body>
将函数绑定到error事件:
定义:规定当被选元素的 error事件发生时运行的函数;
$(selector).error(function)
function:可选。规定当发生 error 事件时运行的函数;
<script type="text/javascript">
$(document).ready(function(){
$("img").error(function(){
$("img").replaceWith("<p><b>图片未加载!</b></p>");
});
});
</script>
<body>
<img src="errorimg.gif" />
<p>如果上面的图像没有正确地加载,会被替换为一段 "图片未加载" 的文本。</p>
</body>
(9)isDefaultPrevented()事件:
定义:isDefaultPrevented() 方法返回指定的 event 对象上是否调用了 preventDefault() 方法;
实例:
防止链接打开 URL,并声明来自 isDefaultPrevented() 的结果;
$("a").click(function(event){
event.preventDefault();
alert("Default prevented: " + event.isDefaultPrevented()
);
});
语法:event.isDefaultPrevented()
event:必需。规定需要检查的事件。这个 event 参数来自事件绑定函数;
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(event){
event.preventDefault();
alert("Default prevented: " + event.isDefaultPrevented());
});
});
</script>
<body>
<a href="http://w3school.com.cn/">W3School</a>
<p>preventDefault() 方法将防止上面的链接打开 URL。</p>
<p>请点击该链接,检查是否阻止了默认动作。</p>
</body>
(10)pageX()事件:
定义:pageX() 属性是鼠标指针的位置,相对于文档的左边缘;
实例:
显示鼠标指针的位置:
$(document).mousemove(function(e){
$("span").text("X: " + e.pageX + ", Y: " + e.pageY);
});
语法:event.pageX
event:必需。规定要使用的事件。这个 event 参数来自事件绑定函数;
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).mousemove(function(e){
$("span").text("X: " + e.pageX + ", Y: " + e.pageY);
});
});
</script>
<body>
<p>鼠标指针位于: <span></span></p>
</body>
(11)pageY()事件:
定义:pageY() 属性是鼠标指针的位置,相对于文档的上边缘;
实例:
显示鼠标指针的位置;
$(document).mousemove(function(e){
$("span").text("X: " + e.pageX + ", Y: " + e.pageY);
});
语法:event.pageY
event:必需。规定要使用的事件。这个 event 参数来自事件绑定函数;
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(document).mousemove(function(e){
$("span").text("X: " + e.pageX + ", Y: " + e.pageY);
});
});
</script>
<body>
<p>鼠标指针位于: <span></span></p>
</body>
(12)preventDefault()事件:
定义:preventDefault() 方法阻止元素发生默认的行为(例如,当点击提交按钮时阻止对表单的提交);
实例:
防止链接打开 URL;
$("a").click(function(event){
event.preventDefault();
});
语法:event.preventDefault()
event:必需。规定阻止哪个事件的默认动作。这个 event 参数来自事件绑定函数;
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(event){
event.preventDefault();
});
});
</script>
<body>
<a href="http://w3school.com.cn/">W3School</a>
<p>preventDefault() 方法将防止上面的链接打开 URL。</p>
</body>
(13)result()事件:
定义:result 属性包含由被指定事件触发的事件处理器返回的最后一个值,除非这个值未定义;
实例:
显示最后一次点击事件返回的结果;
$("button").click(function(e) {
$("p").html(e.result
);
});
语法:event.result
event:必需。规定返回的最后一个值来自哪个事件。这个 event 参数来自事件绑定函数;
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(e) {
return ("最后一次点击的鼠标位置是: X" +e.pageX + ", Y" + e.pageY);
});
$("button").click(function(e) {
$("p").html(e.result);
});
});
</script>
<body>
<p>这是一个段落。</p>
<button>请点击这里</button>
</body>;
(14)target()事件:
定义:target 属性规定哪个 DOM 元素触发了该事件;
实例:
显示哪个 DOM 元素触发了事件;
$("p, button, h1, h2").click(function(event){
$("div").html("Triggered by a " + event.target.nodeName
+ " element.");
});
语法:event.target
event:必需。规定需要检查的事件。这个 event 参数来自事件绑定函数;
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p, button, h1, h2").click(function(event){
$("div").html("点击事件由一个 " + event.target.nodeName + " 元素触发");
});
});
</script>
<body>
<h1>这是一个标题</h1>
<h2>这是另一个标题</h2>
<p>这是一个段落</p>
<button>这是一个按钮</button>
<p>标题、段落和按钮元素定义了一个点击事件。如果您触发了事件,下面的 div 会显示出哪个元素触发了该事件。</p>
<div></div>
</body>
(15)timeStamp()事件:
定义:timeStamp 属性包含从 1970 年 1 月 1 日到事件被触发时的毫秒数;
实例:
显示出当对按钮元素的点击事件发生时的时间戳;
$("button").click(function(event){
$("span")html(event.timeStamp);
});
语法:event.timeStamp
event:必需。规定返回该时间戳的事件。这个 event 参数来自事件绑定函数;
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(e){
$("span").text(e.timeStamp);
});
});
</script>
<body>
<p>对下面这个按钮的点击事件发生在 1970 年 1 月 1 日之后 <span>unknown</span> 毫秒。</p>
<button>Click me</button>
</body>
(16)type()事件:
定义:type 属性描述触发哪种事件类型;
实例:
$("p").bind('click dblclick mouseover mouseout',function(event){
$("div").html("Event: " +event.type
);
});
语法:event.type
event:必需。规定要检查的事件。这个 event 参数来自事件绑定函数;
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").bind('click dblclick mouseover mouseout',function(event){
$("div").html("事件:" + event.type);
});
});
</script>
<body>
<p>该段落定义了 click、double-click、mouseover 以及 mouseout 事件。如果您触发了其中的一个事件,下面的 div 中会显示出事件的类型。</p>
<div></div>
</body>
(17)which()事件:
定义:which 属性指示按了哪个键或按钮;
实例:
显示按了哪个键;
$("input").keydown(function(event){
$("div").html("Key: " + event.which
);
});
语法:event.which
event:必需。规定要检查的事件。这个 event 参数来自事件绑定函数;
<script type="text/javascript">
$(document).ready(function(){
$("input").keydown(function(event){
$("div").html("Key: " + event.which);
});
});
</script>
<body>
请随意键入一些字符:<input type="text" />
<p>当您在上面的框中键入文本时,下面的 div 会显示键位序号。</p>
<div />
</body>
(18)focus()事件:
定义:当元素获得焦点时,发生 focus 事件,当通过鼠标点击选中元素或通过 tab 键定位到元素时,该元素就会获得焦点;focus() 方法触发 focus 事件,或规定当发生 focus 事件时运行的函数;
实例:
当输入框获得焦点时,改变它的背景色;
$("input").focus(function(){
$("input").css("background-color","#FFFFCC");
});
触发focus事件:
定义:触发被选元素的dblclick事件;
语法:$(selector).focus()
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input").focus(function(){
$("input").css("background-color","#FFFFCC");
});
$("input").blur(function(){
$("input").css("background-color","#D6D6FF");
});
$("#btn1").click(function(){
$("input").focus();
});
$("#btn2").click(function(){
$("input").blur();
});
});
</script>
<body>
Enter your name: <input type="text" />
<p>请在上面的输入域中点击,使其获得焦点,然后在输入域外面点击,使其失去焦点。</p>
<p><button id="btn1">触发输入域的 focus 事件</button></p>
<p><button id="btn2">触发输入域的 blur 事件</button></p>
</body>
将函数绑定到focus事件:
定义:规定当被选元素的 blur 事件发生时运行的函数;
语法:$(selector).focus(function)
function:可选。规定当发生 focus 事件时运行的函数;
<script type="text/javascript">
$(document).ready(function(){
$("input").focus(function(){
$("input").css("background-color","#FFFFCC");
});
$("input").blur(function(){
$("input").css("background-color","#D6D6FF");
});
});
</script>
<body>
Enter your name: <input type="text" />
<p>请在上面的输入域中点击,使其获得焦点,然后在输入域外面点击,使其失去焦点。</p>
</body>