快捷導(dǎo)航

JQuery從頭學(xué)起第二講

更新時間：2010年07月04日 18:26:18 作者：

在第一講中，已經(jīng)對JQuery做了入門級的介紹，我相信看過的網(wǎng)友都應(yīng)該知道怎么開始寫一個簡單的JQuery程序了。首先是需要引入一個JQuery包，其次是根據(jù)JQuery的語法寫代碼就可以了。

這一講中，主要對JQuery的選擇器做個簡單的介紹，JQuery是怎么樣來獲取到值的。廢話不多說，直接貼代碼，我們根據(jù)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頁面，其實把第一行去掉也沒關(guān)系，因為JQuery就是JavaScript腳本，在htmL里也同樣可以運行。因為我是用VS寫的JQuery所以就直接添加aspx頁了。

代碼中東西很少，頭部寫了兩段JavaScript腳本，body中有一個文本輸入框，兩個按鈕，一個按鈕有onclick="btnclick();"事件，另一個沒有。從運行的效果看，其實兩個button實現(xiàn)的是相同的效果，都是彈出文本框輸入的內(nèi)容?，F(xiàn)在我們來簡單分析下這兩段JS

在第一段JS中，自定義了個函數(shù)，名字叫：btnclick(),該函數(shù)體內(nèi)用var 關(guān)鍵字定義了個變量t1。T1的值通過JQuery的選擇器得到。$("#txt1")創(chuàng)建了一個JQuery的對象，#取的是ID，如果換成name則會得不到值。$("#txt1")的val()方法獲取到了文本框的值。$("#txt1").val()相當(dāng)于JavaScript中的document.getElementById("txt1").value;

第一個Button中onclick事件執(zhí)行了第一段JS中的自定義函數(shù)，那么第二個Button中沒有onclick事件，如何實現(xiàn)與第一個Button相同的效果呢？我們接下來分析第二段JS代碼。

第二段JS代碼中一開始就直接創(chuàng)建了個JQuery的document對象，并調(diào)用了document對象的ready事件，ready事件會在DOM加載完后立即執(zhí)行。在ready事件中又建了個JQuery對象$("#btn2")，從該對象可以看出JQuery選擇的是id為btn2的控件。創(chuàng)建$("#btn2")的同時調(diào)用了onclick();方法。正是這個方法實現(xiàn)了讓Button二實現(xiàn)了和Button一相同的效果。這里簡單說下，在第二段JS代碼中如果把$(document).ready(function() {});這個事件去掉，直接寫$("#btn2").click(function() { var t1 = $("#txt1").val(); alert(t1); });那么點擊第二個Button將不會有任何的效果。

今天這一講就到此，其他不贅述，如果有疑問或需要源碼可以加入群：34979719，下一講，我們將會講常用控件的取值和賦值。

您可能感興趣的文章: