快捷導(dǎo)航

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中animate動(dòng)畫(huà)積累的解決方法
setTimeout使用時(shí)會(huì)產(chǎn)生動(dòng)畫(huà)隊(duì)列，有可能是在chrome瀏覽器中窗口不處于最前端時(shí)動(dòng)畫(huà)的隊(duì)列產(chǎn)生積累，下面為大家介紹下詳細(xì)的解決方法
2013-10-10
jQuery插件開(kāi)發(fā)發(fā)送短信倒計(jì)時(shí)功能代碼
最近項(xiàng)目開(kāi)發(fā)中遇到這樣的功能:1.點(diǎn)擊按鈕的時(shí)候，可以進(jìn)行倒計(jì)時(shí)，倒計(jì)時(shí)自定義.2.當(dāng)接收短信失敗后，倒計(jì)時(shí)停止，可點(diǎn)擊重新發(fā)送短信.3.點(diǎn)擊的元素支持一般標(biāo)簽和input標(biāo)簽。看似很復(fù)雜其實(shí)實(shí)現(xiàn)代碼很簡(jiǎn)單，下面小編給大家分享下實(shí)現(xiàn)代碼，需要的朋友參考下吧
2017-05-05
jQuery中add實(shí)現(xiàn)同時(shí)選擇兩個(gè)id對(duì)象
jquery同時(shí)選擇兩個(gè)id對(duì)象的時(shí)候，可以用add來(lái)實(shí)現(xiàn)。
2010-10-10
jQuery實(shí)現(xiàn)彈幕特效
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)彈幕特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-11-11
jQuery實(shí)現(xiàn)拖拽效果插件的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)拖拽效果插件的方法,較為詳細(xì)的分析了jQuery拖拽效果的實(shí)現(xiàn)技巧,需要的朋友可以參考下
2015-03-03
基于jQuery的遍歷同id元素并響應(yīng)事件的代碼
寫(xiě)網(wǎng)頁(yè)的時(shí)候，腳本循環(huán)的時(shí)候有很多時(shí)候都會(huì)循環(huán)出來(lái)同id的網(wǎng)頁(yè)元素，下面貼出來(lái)代碼，如何利用jQuery對(duì)這些元素進(jìn)行逐一遍歷并可響應(yīng)消息
2012-06-06
jquery 讀取頁(yè)面load get post ajax 四種方式代碼寫(xiě)法
jquery 讀取頁(yè)面load get post ajax 四種方式代碼寫(xiě)法，學(xué)習(xí)jquery的朋友可以參考下。
2011-04-04
jQuery自定義動(dòng)畫(huà)函數(shù)實(shí)例詳解(附demo源碼)
這篇文章主要介紹了jQuery自定義動(dòng)畫(huà)函數(shù)實(shí)現(xiàn)方法,形式實(shí)例分析了jQuery通過(guò)插件結(jié)合數(shù)學(xué)運(yùn)算實(shí)現(xiàn)滑塊動(dòng)畫(huà)運(yùn)動(dòng)的效果,并附完整demo源碼供讀者下載,需要的朋友可以參考下
2015-12-12
jQuery實(shí)現(xiàn)貪吃蛇小游戲（附源碼下載）
網(wǎng)上關(guān)于JS實(shí)現(xiàn)貪吃蛇的文章有很多，最近閑來(lái)無(wú)事，想著利用jQury來(lái)實(shí)現(xiàn)貪吃蛇小游戲，下面實(shí)現(xiàn)這篇文章主要介紹了利用jQuery實(shí)現(xiàn)貪吃蛇小游戲的方法，文中給出的是吸納思路和示例代碼，需要的朋友可以參考下。
2017-03-03
jquery獲取對(duì)象的方法足以應(yīng)付常見(jiàn)的各種類型的對(duì)象
獲取對(duì)象是比較常見(jiàn)的操作了，因?yàn)橄胍僮饕粋€(gè)對(duì)象之前，一定要先獲取，這是必須的，下面整理了常見(jiàn)對(duì)象的獲取方法，希望對(duì)大家有所幫助
2014-05-05