但感覺這樣寫很沒意思。
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().結果是 區別
這個實例的介紹和拓展就說到這了把