JQuery從頭學起第二講
2024-09-06 12:45:27
供稿：網友
這一講中，主要對JQuery的選擇器做個簡單的介紹，JQuery是怎么樣來獲取到值的。廢話不多說，直接貼代碼，我們根據DEMO來說事。
代碼如下:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JQuery2.aspx.cs" Inherits="JQuery_1.JQuery2" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title></title>
<script type="text/javascript" src="JS/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
function btnclick() {
var t1 = $("#txt1").val();
alert(t1);
}
</script>
<script type="text/javascript">
$(document).ready(function() {
$("#btn2").click(function() {
var t1 = $("#txt1").val();
alert(t1);
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="txt1" type="text" />
<input id="btn" type="button" value="button" onclick="btnclick();" />
<input id="btn2" type="button" value="button2" />
</div>
</form>
</body>
</html>
從代碼的第一行可以看出，其實這是個aspx頁面，其實把第一行去掉也沒關系，因為JQuery就是JavaScript腳本，在htmL里也同樣可以運行。因為我是用VS寫的JQuery所以就直接添加aspx頁了。
代碼中東西很少，頭部寫了兩段JavaScript腳本，body中有一個文本輸入框，兩個按鈕，一個按鈕有onclick="btnclick();"事件，另一個沒有。從運行的效果看，其實兩個button實現的是相同的效果，都是彈出文本框輸入的內容。現在我們來簡單分析下這兩段JS
在第一段JS中，自定義了個函數，名字叫：btnclick(),該函數體內用var 關鍵字定義了個變量t1。T1的值通過JQuery的選擇器得到。$("#txt1")創建了一個JQuery的對象，#取的是ID，如果換成name則會得不到值。$("#txt1")的val()方法獲取到了文本框的值。$("#txt1").val()相當于JavaScript中的document.getElementById("txt1").value;
第一個Button中onclick事件執行了第一段JS中的自定義函數，那么第二個Button中沒有onclick事件，如何實現與第一個Button相同的效果呢？我們接下來分析第二段JS代碼。
第二段JS代碼中一開始就直接創建了個JQuery的document對象，并調用了document對象的ready事件，ready事件會在DOM加載完后立即執行。在ready事件中又建了個JQuery對象$("#btn2")，從該對象可以看出JQuery選擇的是id為btn2的控件。創建$("#btn2")的同時調用了onclick();方法。正是這個方法實現了讓Button二實現了和Button一相同的效果。這里簡單說下，在第二段JS代碼中如果把$(document).ready(function() {});這個事件去掉，直接寫$("#btn2").click(function() { var t1 = $("#txt1").val(); alert(t1); });那么點擊第二個Button將不會有任何的效果。
