开发者新闻：jQuery 教程：$.change、$.val 和 $.css
发布者：kaotik于 2009/11/10 13:01:21 24892 次浏览学习如何使用 jQuery 检测您表单的变化，并根据这些变化作出反应
JQuery 适用于检测用户动作并根据这些动作执行反应
让我们从一个简单的表单开始
<form id="form1" name="form1" method="post" action="">
<input type="text" name="mytext" id="mytext" />
<input type="checkbox" name="mybox" id="mybox" />
form> 在这个表单中，我们有一个文本字段和一个复选框。
步骤 1 - 检查是否勾选
在我们的第一个测试中，当复选框被勾选时，我们希望在文本字段中显示一些文本。为此我们需要两件事
1- 等待对复选框 "mybox" 的更改。为了完成这个，我们将使用一个名为 $.change 的 jQuery 函数。这个函数用于检测特定选择器上的任何更改。
2- 如果有更改发生，将文本放入文本字段 "mytext"。为此，我们需要结合一个简单的 IF 条件语句和 $.val 函数，这个函数用于设置选择器的值。
<script language="javascript" src="jquery-1.3.2.min.js">script>
<script language="javascript">
$(document).ready(function() { //在处理任何javascript之前完成整个页面的加载
$("#mybox").change(function () {
if ($('#mybox:checked').val() ) {
$("#mytext").val("yes");
} else {
$("#mytext").val("no");
}
});
});
script>
<form id="form1" name="form1" method="post" action="">
<input type="text" name="mytext" id="mytext" />
<input type="checkbox" name="mybox" id="mybox" />
form> 现在，当您点击复选框时，它将在“是”和“否”之间改变文本框的值。这不是很简单吗？
步骤 2 - 使用 jQuery 更改 CSS
在这个下一步中，我们将使用复选框来更改表单的一些 CSS。
<script language="javascript" src="jquery-1.3.2.min.js">script>
<script language="javascript">
$(document).ready(function() { //Finish loading the entire page before processing any javascript
$("#mytext").css("border","medium solid green"); //initial color for my border: green
$("#mybox").change(function () {
if ($('#mybox:checked').val() ) {
$("#mytext").val("yes");
$("#mytext").css("border","medium solid blue"); //if checked apply blue
} else {
$("#mytext").css("border","medium solid red"); //if unchecked apply red
"#mytext").val("no");
}
});
});
script>
<form id="form1" name="form1" method="post" action="">
<input type="text" name="mytext" id="mytext" />
<input type="checkbox" name="mybox" id="mybox" />
form> 这里将出现3行新内容。第一行
$("#mytext").css("border","medium solid green"); // 对边框的初始颜色设置为绿色
定义了我们的边框初始颜色。我对表单元素 "mytext" 应用了边框，但也可以将其应用于任何 "div"、"p" 等元素。
注意
您可以使用它们的 ID 或类来绑定到选择器上的操作。对于 id，您将使用：("Нytext")，对于类，您将使用 (".mytext")
回复：Jquery教程：$.change，$.val和$.css
