2007年8月29日

jQuery的简单应用－实现文本框获取焦点时改变样式
jQuery官方网站：http://jquery.com/

功能实现：
用户在输入文字时，如果能高亮显示正在输入的那个文本框的话，会更人性化些，下面就使用jQuery来实现。

实现原理：
在document加载完成后(ready)，添加input的focus和blur事件，并进行增加和删除样式的操作。

代码示例：
 1<html>
 2<head><title></title>
 3<style type="text/css">
 4    .redBack{
 5        color:white;
 6        background:red;
 7        border:2px solid black; 
 8    }
 9</style>
10<script language="javascript" src="jquery-1.1.4.js" type="text/javascript"></script>
11<script language="javascript">
12$(document).ready(function(){
13$('input').focus(function(){
14    $(this).addClass('redBack');
15    //alert("hello");
16});
17
18$('input').blur(function(){
19    $(this).removeClass('redBack');
20});
21});
22</script>
23</head>
24<body>
25<input type="text" value="hello,shanzhu" id="myText">
26<input type="text" value="hello,shanzhu" id="myText2">
27<input type="text" value="hello,shanzhu" id="myText3">
28<input type="text" value="hello,shanzhu" id="myText4">
29<input type="text" value="hello,shanzhu" id="myText5">
30<input type="text" value="hello,shanzhu" id="myText6">
31</body>
32</html>

说明：
$(this)表示正在操作的对象。
posted @ 2007-08-29 13:15 客家网络 阅读(1688) 评论(1) 编辑

导航

公告

发布“图片水印工具”beta版本，欢迎使用，并提出意见与建议。
昵称：客家网络
园龄：6年3个月
粉丝：0
关注：0
<2007年8月>
日一二三四五六
2930311234
567891011
12131415161718
19202122232425
2627282930311
2345678

统计

搜索

 
 

常用链接

我的标签

随笔分类(12)

随笔档案(14)

最新评论

阅读排行榜

评论排行榜

推荐排行榜