jquery中dom操作和事件的實例學(xué)習(xí) 仿yahoo郵箱登錄框的提示效果
更新時間：2011年11月30日 19:45:11 作者：
最近把jquery中的dom操作和jquery中的事件和動畫的方法都大體測了一下。本來想細(xì)細(xì)的把每個方法都寫出來介紹下
但感覺這樣寫很沒意思。
jquery的優(yōu)勢就是簡單的代碼就能帶來更好的用戶體驗。
所以就找?guī)讉€我感覺實用的例子，拿出來介紹下。順帶把其中用到的操作和事件介紹下。
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("請輸入郵箱地址");
}
})
});
實現(xiàn)的效果就是地址框獲取鼠標(biāo)焦點時，地址框中的值清空。失去鼠標(biāo)焦點的時候，地址框恢復(fù)默認(rèn)設(shè)置。
介紹下這里用到的jquery事件：
focus()是當(dāng)jquery對象得到鼠標(biāo)焦點時候觸發(fā)，blur()是當(dāng)jquery對象失去鼠標(biāo)焦點時候觸發(fā)
順帶介紹下其他鼠標(biāo)的事件。mouseover()是鼠標(biāo)移入對象觸發(fā)。mouseout()鼠標(biāo)移出對象觸發(fā)。mousemove()是鼠標(biāo)在對象中移動時觸發(fā)。
用到的jquery的dom操作：
val()是獲取元素value的值，也可以設(shè)置元素value的值。這個在一個函數(shù)內(nèi)實現(xiàn)獲取和設(shè)置的方法在jquery中是很常見的
類是的還有html(),text(),heigth(),width(),css(),attr()等等。
這里區(qū)分下html()和text()
html()是相對于對象中html代碼，而text()只是對象中的文本內(nèi)容
舉個例子<p><strong>區(qū)別</strong></p>
$('p').html()。結(jié)果是<strong>區(qū)別</strong>
$('p').text().結(jié)果是 區(qū)別
這個實例的介紹和拓展就說到這了把
jquery的優(yōu)勢就是簡單的代碼就能帶來更好的用戶體驗。
所以就找?guī)讉€我感覺實用的例子，拿出來介紹下。順帶把其中用到的操作和事件介紹下。
html代碼：
<input type="text" id="address" value="請輸入郵箱地址"/>
jquery代碼：
復(fù)制代碼 代碼如下:
$(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("請輸入郵箱地址");
}
})
});
實現(xiàn)的效果就是地址框獲取鼠標(biāo)焦點時，地址框中的值清空。失去鼠標(biāo)焦點的時候，地址框恢復(fù)默認(rèn)設(shè)置。
介紹下這里用到的jquery事件：
focus()是當(dāng)jquery對象得到鼠標(biāo)焦點時候觸發(fā)，blur()是當(dāng)jquery對象失去鼠標(biāo)焦點時候觸發(fā)
順帶介紹下其他鼠標(biāo)的事件。mouseover()是鼠標(biāo)移入對象觸發(fā)。mouseout()鼠標(biāo)移出對象觸發(fā)。mousemove()是鼠標(biāo)在對象中移動時觸發(fā)。
用到的jquery的dom操作：
val()是獲取元素value的值，也可以設(shè)置元素value的值。這個在一個函數(shù)內(nèi)實現(xiàn)獲取和設(shè)置的方法在jquery中是很常見的
類是的還有html(),text(),heigth(),width(),css(),attr()等等。
這里區(qū)分下html()和text()
html()是相對于對象中html代碼，而text()只是對象中的文本內(nèi)容
舉個例子<p><strong>區(qū)別</strong></p>
$('p').html()。結(jié)果是<strong>區(qū)別</strong>
$('p').text().結(jié)果是 區(qū)別
這個實例的介紹和拓展就說到這了把
相關(guān)文章
setTimeout使用時會產(chǎn)生動畫隊列，有可能是在chrome瀏覽器中窗口不處于最前端時動畫的隊列產(chǎn)生積累，下面為大家介紹下詳細(xì)的解決方法2013-10-10
最近項目開發(fā)中遇到這樣的功能:1.點擊按鈕的時候，可以進(jìn)行倒計時，倒計時自定義.2.當(dāng)接收短信失敗后，倒計時停止，可點擊重新發(fā)送短信.3.點擊的元素支持一般標(biāo)簽和input標(biāo)簽?？此坪軓?fù)雜其實實現(xiàn)代碼很簡單，下面小編給大家分享下實現(xiàn)代碼，需要的朋友參考下吧2017-05-05
jquery同時選擇兩個id對象的時候，可以用add來實現(xiàn)。2010-10-10
這篇文章主要為大家詳細(xì)介紹了jQuery實現(xiàn)彈幕特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-11-11
這篇文章主要介紹了jQuery實現(xiàn)拖拽效果插件的方法,較為詳細(xì)的分析了jQuery拖拽效果的實現(xiàn)技巧,需要的朋友可以參考下2015-03-03
基于jQuery的遍歷同id元素 并響應(yīng)事件的代碼
寫網(wǎng)頁的時候，腳本循環(huán)的時候有很多時候都會循環(huán)出來同id的網(wǎng)頁元素，下面貼出來代碼，如何利用jQuery對這些元素進(jìn)行逐一遍歷并可響應(yīng)消息2012-06-06
jquery 讀取頁面load get post ajax 四種方式代碼寫法
jquery 讀取頁面load get post ajax 四種方式代碼寫法，學(xué)習(xí)jquery的朋友可以參考下。2011-04-04
jQuery自定義動畫函數(shù)實例詳解(附demo源碼)
這篇文章主要介紹了jQuery自定義動畫函數(shù)實現(xiàn)方法,形式實例分析了jQuery通過插件結(jié)合數(shù)學(xué)運算實現(xiàn)滑塊動畫運動的效果,并附完整demo源碼供讀者下載,需要的朋友可以參考下2015-12-12
網(wǎng)上關(guān)于JS實現(xiàn)貪吃蛇的文章有很多，最近閑來無事，想著利用jQury來實現(xiàn)貪吃蛇小游戲，下面實現(xiàn)這篇文章主要介紹了利用jQuery實現(xiàn)貪吃蛇小游戲的方法，文中給出的是吸納思路和示例代碼，需要的朋友可以參考下。2017-03-03
jquery獲取對象的方法足以應(yīng)付常見的各種類型的對象
獲取對象是比較常見的操作了，因為想要操作一個對象之前，一定要先獲取，這是必須的，下面整理了常見對象的獲取方法，希望對大家有所幫助2014-05-05