JQuery对于检测用户行为并基于这些行为进行反应非常有用。
让我们从一个简单的表单开始
在这个表单中，我们有一个文本框和一个小型框。
步骤1 - 检查是否选中
在我们的第一次测试中，我们想要在小型框被选中时在文本框中显示一些文本。为此我们需要两件事
1- 等待小型框“mybox”上发生变化。为了实现这一点，我们将使用JQuery函数$.change，它用于检测特定选择器上任何变化。
2- 如果发生变化，将在文本框“mytext”中放置文本。为此，我们将使用一个简单的IF条件语句以及用于设置选择器值的JQuery函数$.val结合起来。
现在，当您点击复选框时，它会将文本框的值在 "yes" 和 "no" 之间切换。很简单，不是吗？
第二步 - 使用jQuery更改CSS
在下一步中，我们将使用复选框来更改表单的一些CSS样式。
您将在这里看到3行新内容。第一行
$("#mytext").css("border","medium solid green"); // 我边框的初始颜色：绿色
定义了边框的初始颜色。我已经将边框应用到“mytext”表单元素上，但也可以将其应用到任何“div”、“p”等元素上。
注意
您可以使用ID或class将事件绑定到选择器上。对于ID，您将使用：("mytext")，对于class，您将使用(“.mytext”)。
让我们从一个简单的表单开始
<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”上发生变化。为了实现这一点，我们将使用JQuery函数$.change，它用于检测特定选择器上任何变化。
2- 如果发生变化，将在文本框“mytext”中放置文本。为此，我们将使用一个简单的IF条件语句以及用于设置选择器值的JQuery函数$.val结合起来。
<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
$("#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> 现在，当您点击复选框时，它会将文本框的值在 "yes" 和 "no" 之间切换。很简单，不是吗？
第二步 - 使用jQuery更改CSS
在下一步中，我们将使用复选框来更改表单的一些CSS样式。
您将在这里看到3行新内容。第一行
$("#mytext").css("border","medium solid green"); // 我边框的初始颜色：绿色
定义了边框的初始颜色。我已经将边框应用到“mytext”表单元素上，但也可以将其应用到任何“div”、“p”等元素上。
注意
您可以使用ID或class将事件绑定到选择器上。对于ID，您将使用：("mytext")，对于class，您将使用(“.mytext”)。
|
|
Login
Search
Recent Comments
Who's Online
Donat-O-Meter
| Stats | |
| Goal: | $100.00 |
| Due Date: | Aug 31 |
| Gross Amount: | $0.00 |
| Net Balance: | $0.00 |
| Left to go: | $100.00 |
 |
|