jquery change()

這陣子在看網頁設計?愛上jQuery這本書,書中的內容對我來說不會很難,但是當我看到8-4 change()這一節時,使用的js檔範例:

$(document).ready(function(){
$(‘:input’).bind(“change”,function(){
$(‘#dis’).text($(this).attr(‘name’)+’=’+$(this).val());
});
});

html檔範例:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<head>
<meta http-equiv=”Content-Language” content=”zh-tw”>
<meta http-equiv=”Content-Type” content=”text/html; charset=big5″>
<title>My Jquery Test Page</title>
<script type=”text/javascript” src=”../jquery-1.2.1.pack.js”></script>
<script type=”text/javascript” src=”myfirst70.js”></script>
<style>
html
{
background-color:green;
color:white;
width:400px;
font:90% Verdana;

}
</style>
</head>
<body>
姓名:<input type=text name=name size=20><br>
暱稱:<input type=text name=nick size=20><br>
<span id=dis></span>
</body>
</html>

作者這樣說明,change() change(fn) 當符合定義的物件,失去focus並且其值已改變時觸發的事件。

範例說明是輸入姓名 王大銘後,移到下一格

不輸入暱稱,直接離開欄位,結果與上圖一樣,並沒有觸動任何的事件,因為暱稱欄位的值並沒有改變,還是空白。

我覺得這個說明是沒錯,但是change()的重要精髓,應該是要講輸入暱稱然後離開欄位,就可以發現觸動改變的狀況及現象的說明吧,如果講姓名欄位,因為這個欄位又沒有加上要change()的改變,不管你有輸或沒輸,根本沒有觸動的功能發生,不知作者為何還要這麼講?

但是如果改口講到暱稱的欄位,因為有觸動的功能,所以就可以看到改變,不知讀者是否看出這裡的差異?

感謝你看到這裡,很快就可以離開了,但最好的獎勵行動就是按一下幫我分享或留言,感恩喔~

點我分享到Facebook

1 則留言

  1. 範例中的兩個input 藉由
    $(‘:input’).bind(‘change’,function(){
    $(‘#dis’).text($(this).attr(‘name’)+’=’+$(this).val());
    });
    });
    是都有綁定 change的事件,所以當姓名有輸入值的時候,觸發了change的事件
    所以 #dis 會出現姓名的值,但是暱稱如果沒有輸入就直接跳過是不會觸發change的事件的,所以畫面並沒有任何得更動(指的是#dis仍保留姓名的值)

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *