jquery change()

By:
On:
In: JavaScript, jQuery
Tagged:

这阵子在看网页设计?爱上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()的改变，不管你有输或没输，根本没有触动的功能发生，不知作者为何还要这么讲？

但是如果改口讲到昵称的栏位，因为有触动的功能，所以就可以看到改变，不知读者是否看出这里的差异？

1 則留言

  1. 范例中的两个input 藉由
    $(‘:input’).bind(‘change’,function(){
    $(‘#dis’).text($(this).attr(‘name’)+’=’+$(this).val());
    });
    });
    是都有绑定 change的事件，所以当姓名有输入值的时候，触发了change的事件
    所以 #dis 会出现姓名的值，但是昵称如果没有输入就直接跳过是不会触发change的事件的，所以画面并没有任何得更动(指的是#dis仍保留姓名的值)

Comments are closed.