jQuery学习笔记7——单行文本框
单行文本框获取和失去焦点改变样式.
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
<head>
4
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5
<title>单行文本框应用</title>
6
<script language="javascript" src="jquery-1.3.1.js"></script>
7
<style type="text/css">
8
* { margin:0; padding:0; word-break:break-all; }
9
body { background:#fff; color:#333; font:12px/1.5em Helvetica, Arial, sans-serif; }
10
h1, h2, h3, h4, h5, h6 { font-size:1em; }
11
a { color:#2B93D2; text-decoration:none; }
12
a:hover { color:#E31E1C; text-decoration:underline; }
13
ul, li { list-style:none; }
14
fieldset, img { border:none; }
15
.focus{ border:1px solid #f00;background:#fcc;}
16
</style>
17
</head>
18
<body>
19
<form action="#" method="POST" id="regForm">
20
<fieldset>
21
<legend>个人基本信息</legend>
22
<div>
23
<label for="username">名称:</label><input type="text" id="username"/>
24
</div>
25
<div>
26
<label for="pass">密码:</label><input type="password" id="pass"/>
27
</div>
28
<div>
29
<label for="msg">详细信息:</label><textarea id="msg"></textarea>
30
</div>
31
</fieldset>
32
</form>
33
</body>
34
</html>
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
8
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
9
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
10
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
11
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
12
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
13
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
14
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
15
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
16
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
17
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
18
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
19
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
20
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
21
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
22
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
23
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
24
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
25
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
26
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
27
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
28
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
29
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
30
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
31
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
32
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
33
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
34
![](https://www.cnblogs.com/Images/OutliningIndicators/None.gif)
添加jQuery事件
1
$(function(){
2
$("input").focus(function(){
3
$(this).addClass("focus");
4
}).blur(function(){
5
$(this).removeClass("focus");
6
});
7
})
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
或者
1
$(function(){
2
$(":input").focus(function(){
3
$(this).addClass("focus");
4
}).blur(function(){
5
$(this).removeClass("focus");
6
});
7
})
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockStart.gif)
2
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
3
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
4
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockStart.gif)
5
![](https://www.cnblogs.com/Images/OutliningIndicators/InBlock.gif)
6
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedSubBlockEnd.gif)
7
![](https://www.cnblogs.com/Images/OutliningIndicators/ExpandedBlockEnd.gif)
"input"只配合<input/>元素
":input"可以匹配所有<input>,<textarea><select><button>元素