DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jquery中dom操作和事件的實例學習 仿yahoo郵箱登錄框的提示效果
jquery中dom操作和事件的實例學習 仿yahoo郵箱登錄框的提示效果
編輯:JQuery特效代碼     
但感覺這樣寫很沒意思。

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().結果是 區別

這個實例的介紹和拓展就說到這了把
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved