快捷導(dǎo)航

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

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

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

這一講中，主要對(duì)JQuery的選擇器做個(gè)簡(jiǎn)單的介紹，JQuery是怎么樣來(lái)獲取到值的。廢話不多說(shuō)，直接貼代碼，我們根據(jù)DEMO來(lái)說(shuō)事。

復(fù)制代碼代碼如下:

 
<%@ 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寫的JQuery所以就直接添加aspx頁(yè)了。

代碼中東西很少，頭部寫了兩段JavaScript腳本，body中有一個(gè)文本輸入框，兩個(gè)按鈕，一個(gè)按鈕有onclick="btnclick();"事件，另一個(gè)沒(méi)有。從運(yùn)行的效果看，其實(shí)兩個(gè)button實(shí)現(xiàn)的是相同的效果，都是彈出文本框輸入的內(nèi)容?，F(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è)事件去掉，直接寫$("#btn2").click(function() { var t1 = $("#txt1").val(); alert(t1); });那么點(diǎn)擊第二個(gè)Button將不會(huì)有任何的效果。

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

您可能感興趣的文章: