jquery中dom操作和事件的執行個體學習 仿yahoo郵箱登入框的提示效果

但感覺這樣寫很沒意思。

jquery的優勢就是簡單的代碼就能帶來更好的使用者體驗。

所以就找幾個我感覺實用的例子，拿出來介紹下。順帶把其中用到的操作和事件介紹下。

html代碼：

<input type="text" id="address" value="請輸入郵箱地址"/>

jquery代碼：
複製代碼 代碼如下:
$(document).ready(function(){
$('#address').focus(function(){
var add_value=$(this).val();
if(add_value=="請輸入郵箱地址"){
$(this).val("");
}
})
$('#address').blur(function(){
var add_value=$(this).val();
if(add_value==""){
$(this).val("請輸入郵箱地址");
}
})
});

實現的效果就是地址框擷取滑鼠焦點時，地址框中的值清空。失去滑鼠焦點的時候，地址框恢複預設設定。

介紹下這裡用到的jquery事件：

focus()是當jquery對象得到滑鼠焦點時候觸發，blur()是當jquery對象失去滑鼠焦點時候觸發

順帶介紹下其他滑鼠的事件。mouseover()是滑鼠移入對象觸發。mouseout()滑鼠移出對象觸發。mousemove()是滑鼠在對象中移動時觸發。

用到的jquery的dom操作：

val()是擷取元素value的值，也可以設定元素value的值。這個在一個函數內實現擷取和設定的方法在jquery中是很常見的

類是的還有html(),text(),heigth(),width(),css(),attr()等等。

這裡區分下html()和text()

html()是相對於對象中html代碼，而text()只是對象中的常值內容

舉個例子<p><strong>區別</strong></p>

$('p').html()。結果是<strong>區別</strong>

$('p').text().結果是 區別

這個執行個體的介紹和拓展就說到這了把