JQuery從頭學(xué)起第二講
2024-09-06 12:45:27
供稿：網(wǎng)友
這一講中，主要對(duì)JQuery的選擇器做個(gè)簡(jiǎn)單的介紹，JQuery是怎么樣來(lái)獲取到值的。廢話不多說(shuō)，直接貼代碼，我們根據(jù)DEMO來(lái)說(shuō)事。
代碼如下:
<%@ 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>
從代碼的第一行可以看出，其實(shí)這是個(gè)aspx頁(yè)面，其實(shí)把第一行去掉也沒(méi)關(guān)系，因?yàn)镴Query就是JavaScript腳本，在htmL里也同樣可以運(yùn)行。因?yàn)槲沂怯肰S寫(xiě)的JQuery所以就直接添加aspx頁(yè)了。
代碼中東西很少，頭部寫(xiě)了兩段JavaScript腳本，body中有一個(gè)文本輸入框，兩個(gè)按鈕，一個(gè)按鈕有onclick="btnclick();"事件，另一個(gè)沒(méi)有。從運(yùn)行的效果看，其實(shí)兩個(gè)button實(shí)現(xiàn)的是相同的效果，都是彈出文本框輸入的內(nèi)容。現(xiàn)在我們來(lái)簡(jiǎn)單分析下這兩段JS
在第一段JS中，自定義了個(gè)函數(shù)，名字叫：btnclick(),該函數(shù)體內(nèi)用var 關(guān)鍵字定義了個(gè)變量t1。T1的值通過(guò)JQuery的選擇器得到。$("#txt1")創(chuàng)建了一個(gè)JQuery的對(duì)象，#取的是ID，如果換成name則會(huì)得不到值。$("#txt1")的val()方法獲取到了文本框的值。$("#txt1").val()相當(dāng)于JavaScript中的document.getElementById("txt1").value;
第一個(gè)Button中onclick事件執(zhí)行了第一段JS中的自定義函數(shù)，那么第二個(gè)Button中沒(méi)有onclick事件，如何實(shí)現(xiàn)與第一個(gè)Button相同的效果呢？我們接下來(lái)分析第二段JS代碼。
第二段JS代碼中一開(kāi)始就直接創(chuàng)建了個(gè)JQuery的document對(duì)象，并調(diào)用了document對(duì)象的ready事件，ready事件會(huì)在DOM加載完后立即執(zhí)行。在ready事件中又建了個(gè)JQuery對(duì)象$("#btn2")，從該對(duì)象可以看出JQuery選擇的是id為btn2的控件。創(chuàng)建$("#btn2")的同時(shí)調(diào)用了onclick();方法。正是這個(gè)方法實(shí)現(xiàn)了讓Button二實(shí)現(xiàn)了和Button一相同的效果。這里簡(jiǎn)單說(shuō)下，在第二段JS代碼中如果把$(document).ready(function() {});這個(gè)事件去掉，直接寫(xiě)$("#btn2").click(function() { var t1 = $("#txt1").val(); alert(t1); });那么點(diǎn)擊第二個(gè)Button將不會(huì)有任何的效果。
