jQuery的简单应用－实现文本框获取焦点时改变样式
jQuery官方网站：http://jquery.com/
功能实现：
用户在输入文字时，如果能高亮显示正在输入的那个文本框的话，会更人性化些，下面就使用jQuery来实现。
实现原理：
在document加载完成后(ready)，添加input的focus和blur事件，并进行增加和删除样式的操作。
代码示例：
说明：
$(this)表示正在操作的对象。
功能实现：
用户在输入文字时，如果能高亮显示正在输入的那个文本框的话，会更人性化些，下面就使用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>
<html>2
<head><title></title>3
<style type="text/css">
4
.redBack{
.redBack5
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)表示正在操作的对象。
浙公网安备 33010602011771号