jquery中dom操作和事件的實(shí)例學(xué)習(xí) 仿yahoo郵箱登錄框的提示效果

更新時(shí)間：2011年11月30日 19:45:11 作者：

最近把jquery中的dom操作和jquery中的事件和動(dòng)畫(huà)的方法都大體測(cè)了一下。本來(lái)想細(xì)細(xì)的把每個(gè)方法都寫(xiě)出來(lái)介紹下

但感覺(jué)這樣寫(xiě)很沒(méi)意思。

jquery的優(yōu)勢(shì)就是簡(jiǎn)單的代碼就能帶來(lái)更好的用戶體驗(yàn)。

所以就找?guī)讉€(gè)我感覺(jué)實(shí)用的例子，拿出來(lái)介紹下。順帶把其中用到的操作和事件介紹下。

html代碼：

<input type="text" id="address" value="請(qǐng)輸入郵箱地址"/>

jquery代碼：

復(fù)制代碼代碼如下:

 
$(document).ready(function(){ 
$('#address').focus(function(){ 
var add_value=$(this).val(); 
if(add_value=="請(qǐng)輸入郵箱地址"){ 
$(this).val(""); 
} 
}) 
$('#address').blur(function(){ 
var add_value=$(this).val(); 
if(add_value==""){ 
$(this).val("請(qǐng)輸入郵箱地址"); 
} 
}) 
}); 

實(shí)現(xiàn)的效果就是地址框獲取鼠標(biāo)焦點(diǎn)時(shí)，地址框中的值清空。失去鼠標(biāo)焦點(diǎn)的時(shí)候，地址框恢復(fù)默認(rèn)設(shè)置。

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

focus()是當(dāng)jquery對(duì)象得到鼠標(biāo)焦點(diǎn)時(shí)候觸發(fā)，blur()是當(dāng)jquery對(duì)象失去鼠標(biāo)焦點(diǎn)時(shí)候觸發(fā)

順帶介紹下其他鼠標(biāo)的事件。mouseover()是鼠標(biāo)移入對(duì)象觸發(fā)。mouseout()鼠標(biāo)移出對(duì)象觸發(fā)。mousemove()是鼠標(biāo)在對(duì)象中移動(dòng)時(shí)觸發(fā)。

用到的jquery的dom操作：

val()是獲取元素value的值，也可以設(shè)置元素value的值。這個(gè)在一個(gè)函數(shù)內(nèi)實(shí)現(xiàn)獲取和設(shè)置的方法在jquery中是很常見(jiàn)的

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

這里區(qū)分下html()和text()

html()是相對(duì)于對(duì)象中html代碼，而text()只是對(duì)象中的文本內(nèi)容

舉個(gè)例子區(qū)別

$('p').html()。結(jié)果是區(qū)別

$('p').text().結(jié)果是區(qū)別

這個(gè)實(shí)例的介紹和拓展就說(shuō)到這了把

您可能感興趣的文章:

相關(guān)文章

jQuery獲得頁(yè)面元素的絕對(duì)/相對(duì)位置即絕對(duì)X,Y坐標(biāo)
jQuery獲得頁(yè)面元素的絕對(duì)X,Y坐標(biāo)，可以用offset()方法，下面有個(gè)不錯(cuò)的坐標(biāo)大家可以參考下
2014-03-03
用jquery生成二級(jí)菜單的實(shí)例代碼
這篇文章介紹了用jquery生成二級(jí)菜單的代碼，需要的朋友可以參考一下
2013-06-06
jquery自動(dòng)切換tabs選項(xiàng)卡的具體實(shí)現(xiàn)
這篇文章主要介紹了jquery自動(dòng)切換tabs選項(xiàng)卡的具體實(shí)現(xiàn)，有需要的朋友可以參考一下
2013-12-12
jquery 圖片輪換效果
重寫(xiě)了昨天的圖片輪換，加入了自動(dòng)切換效果，改變了布局，增強(qiáng)了可定制性，當(dāng)然，還是有點(diǎn)小小的問(wèn)題，在IE 6+,chrome,firfox3.68下測(cè)試正常運(yùn)行
2010-07-07
jQuery的position()方法詳解
position()函數(shù)用于返回當(dāng)前匹配元素相對(duì)于其被定位的祖輩元素的偏移，也就是相對(duì)于被定位的祖輩元素的坐標(biāo)。該函數(shù)只對(duì)可見(jiàn)元素有效。
2015-07-07
Javascript 鏈?zhǔn)秸{(diào)用實(shí)現(xiàn)代碼(參考jquery)
謂的鏈?zhǔn)秸{(diào)用無(wú)非是一個(gè)語(yǔ)法技巧而已，我就學(xué)Jquery寫(xiě)了一個(gè)粗淺的庫(kù)。
2010-05-05
jQuery彈框插件使用方法詳解
這篇文章主要為大家詳細(xì)介紹了jQuery彈框插件的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-05-05
Jquery回調(diào)對(duì)象與延遲對(duì)象用法詳解
本文詳細(xì)講解了Jquery回調(diào)對(duì)象與延遲對(duì)象的用法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-05-05
js整數(shù)字符串轉(zhuǎn)換為金額類型數(shù)據(jù)(示例代碼)
本篇文章主要是對(duì)js整數(shù)字符串轉(zhuǎn)換為金額類型數(shù)據(jù)的示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2013-12-12
jQuery$命名沖突怎么辦如何解決
某些框架也使用 $ 符號(hào)作為簡(jiǎn)寫(xiě)（就像 jQuery），如果您在用的兩種不同的框架正在使用相同的簡(jiǎn)寫(xiě)符號(hào)，有可能導(dǎo)致腳本停止運(yùn)行，下面有個(gè)不錯(cuò)的解決方法
2014-01-01