在jQuery中，常用的表單事件有4種：
下面我們一一給大家介紹。
在jQuery中，focus()和blur()這2個事件往往都是配合使用。例如。在用戶在文本框輸入信息時，將光標放在文本框中，文本框會獲取焦點。當文本框失去光標時，文本框失去焦點。
onfocus表示獲取焦點觸發的事件，onblur表示失去焦點觸發的事件。
具有獲得焦點和失去焦點事件的元素有3個（一定要記住啊）：
舉例:
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
//獲取文本框默認值
var txt = $("#search").val();
//focus()獲取焦點事件
$("#search").focus(function () {
if ($(this).val() == txt) {
$(this).val("");
}
});
//blur()失去焦點事件
$("#search").blur(function () {
if ($(this).val() == "") {
$(this).val(txt);
}
});
})
</script>
</head>
<body>
<input id="search" type="text" value="百度一下，你就知道"/><input id="btn" type="button" value="搜索" />
</body>
</html>
在浏覽器預覽效果如下：
分析：
在這個例子中，當文本框獲取焦點時，文本框提示文字就會消失；當文本框失去焦點後，會判斷是否已經輸入字符串，如果沒有的話，文本框提示文字會重新出現。通過這個例子，大家都能感性地理解“獲取焦點”和“失去焦點”事件是怎麼一回事了。
focus()相當於JavaScript中的onfocus()方法，作用是獲得焦點時觸發的事件。
blur()相當於JavaScript中的onblur()方法，作用是失去焦點時觸發的事件。
在jQuery中，當用戶在單行文本框text和多行文本框textarea輸入文本時，由於文本框內字符串的改變將會觸發onchange事件。此外，在下拉列表select中一個選項的狀態改變後也會觸發onchange事件。
具有獲得onchange事件的元素有3個：
舉例:
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#txt").change(function () {
//這裡的$(this)指的是$("#txt")
var len = $(this).val().length;
$("#num").text(len);
})
})
</script>
</head>
<body>
<textarea id="txt" rows="5" cols="20"></textarea><br />
輸入字符長度為：<span id="num"></span>
</body>
</html>
在浏覽器預覽效果如下：
分析：
當我們在文本框輸入字符，然後讓文本框失去焦點，即可看到統計字符串的長度值。
在jQuery中，當用戶選中單行文本框text或多行文本框textarea的文本時，會觸發select事件。select事件的具體過程是從鼠標按鍵被按下，到鼠標開始移動並選中內容的過程。這個過程並不包括鼠標鍵的放開。
新手很容易把select和change這2個事件搞混，誤以為下拉列表列表項的選中觸發的事件是select。這一點大家要搞清楚：下拉列表列表項的選中觸發的事件是change而不是select。
舉例:
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="../App_js/jquery-1.12.0.min.js"></script>
<script type="text/javascript">
$(function () {
$("#txt1").select(function () {
alert("你選中了單行文本框中的內容");
});
$("#txt2").select(function () {
alert("你選中了多行文本框中的內容");
});
})
</script>
</head>
<body>
<input id="txt1" type="text" value="歡迎來到 學習網學習JavaScript入門教程"/><br />
<textarea id="txt2" cols="20" rows="5">歡迎來到 學習網學習JavaScript入門教程</textarea>
</body>
</html>
在浏覽器預覽效果如下：
分析：
當我們選中單行文本框text或多行文本框的內容時都會彈出相應的對話框。
總結1、這一節所學到的事件都是針對表單而言，大家要清楚這一點；
2、在JavaScript中，常用的表單事件如下：
3、jQuery表單事件跟JavaScript表單事件本質是一樣的，只不過jQuery全部把這些表單事件封裝了一遍，然後使用自己的語法罷了。