文本框獲得失去焦點(diǎn)——js和jquery方法的對(duì)比
作者： 來源： 發(fā)布時(shí)間：2012-1-30 11:17:37 點(diǎn)擊：
Js方法
<head>
<script type="text/javascript">
function Doit() {
// 獲得一個(gè)input的數(shù)組,需要遍歷
var inputs = document.getElementsByTagName_r("input");
for (var i = 0; i < inputs.length; i++) {
// 如果是文本控件
if (inputs[i].type == "text") {
// 前面有on——
inputs[i].onfocus = function () {
// 通過this直接獲取觸發(fā)的元素
this.style.backgroundColor = "yellow";
};
inputs[i].onblur = function () {
this.style.backgroundColor = "white";
};
}
}
}
</script>
</head>
<body onload="Doit()">
<input id="Text1" type="text" />
<input id="Text2" type="text" />
<input id="Text3" type="text" />
<input id="Button1" type="button" value="button" />
</body>
</html>
Jquery方法
<head>
<script src="jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// 不需要遍歷
$('input[type=text]').click(function () {
// this前面要加dollar符
$(this).css("backgroundColor","yellow");
}).blur(function () { $(this).css("backgroundColor","white");});
// blur前面沒有on
});
</script>
</head>
<body>
<input id="Text1" type="text" />
<input id="Text2" type="text" />
<input id="Text3" type="text" />
<input id="Button1" type="button" value="button" />
</body>
</html>
<head>
<script type="text/javascript">
function Doit() {
// 獲得一個(gè)input的數(shù)組,需要遍歷
var inputs = document.getElementsByTagName_r("input");
for (var i = 0; i < inputs.length; i++) {
// 如果是文本控件
if (inputs[i].type == "text") {
// 前面有on——
inputs[i].onfocus = function () {
// 通過this直接獲取觸發(fā)的元素
this.style.backgroundColor = "yellow";
};
inputs[i].onblur = function () {
this.style.backgroundColor = "white";
};
}
}
}
</script>
</head>
<body onload="Doit()">
<input id="Text1" type="text" />
<input id="Text2" type="text" />
<input id="Text3" type="text" />
<input id="Button1" type="button" value="button" />
</body>
</html>
Jquery方法
<head>
<script src="jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
// 不需要遍歷
$('input[type=text]').click(function () {
// this前面要加dollar符
$(this).css("backgroundColor","yellow");
}).blur(function () { $(this).css("backgroundColor","white");});
// blur前面沒有on
});
</script>
</head>
<body>
<input id="Text1" type="text" />
<input id="Text2" type="text" />
<input id="Text3" type="text" />
<input id="Button1" type="button" value="button" />
</body>
</html>
上一篇:Js中的this和window.event.srcElement 下一篇:
[收藏此文章]
- 1. 文本框獲得失去焦點(diǎn)——js和jquery方法的對(duì)比
- 2. 強(qiáng)力推薦幾種多媒體播放器方案（jQuery、Flash、HT...
- 3. 處理部分黑白部分彩色照片的方法
- 4. 幾種ps曲線的制作方法
- 5. QQ幻想之用蝴蝶翅膀快速刷蠟燭方法揭密
- 6. hp筆記本怎么進(jìn)bios以及筆記本進(jìn)入BIOS的方法
- 7. 在一個(gè)分區(qū)上裝多個(gè)XP的方法
- 8. USB 驅(qū)動(dòng)自動(dòng)卸載方法
- 9. 迅雷簡單刷流量方法
- 10. (Android 開發(fā))實(shí)現(xiàn)用戶注冊(cè)時(shí)自動(dòng)檢測用戶名是否存...
