|
|
復(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頁面，其實(shí)把第一行去掉也沒關(guān)系，因?yàn)镴Query就是JavaScript腳本，在htmL里也同樣可以運(yùn)行。因?yàn)槲沂怯肰S寫的JQuery所以就直接添加ASPx頁了。
代碼中東西很少，頭部寫了兩段JavaScript腳本，body中有一個(gè)文本輸入框，兩個(gè)按鈕，一個(gè)按鈕有onclick="btnclick();"事件，另一個(gè)沒有。從運(yùn)行的效果看，其實(shí)兩個(gè)button實(shí)現(xiàn)的是相同的效果，都是彈出文本框輸入的內(nèi)容。現(xiàn)在我們來簡單分析下這兩段JS
在第一段JS中，自定義了個(gè)函數(shù)，名字叫：btnclick(),該函數(shù)體內(nèi)用var 關(guān)鍵字定義了個(gè)變量t1。T1的值通過JQuery的選擇器得到。$("#txt1")創(chuàng)建了一個(gè)JQuery的對象，#取的是ID，如果換成name則會(huì)得不到值。$("#txt1")的val()方法獲取到了文本框的值。$("#txt1").val()相當(dāng)于JavaScript中的document.getElementById("txt1").value;
第一個(gè)Button中onclick事件執(zhí)行了第一段JS中的自定義函數(shù)，那么第二個(gè)Button中沒有onclick事件，如何實(shí)現(xiàn)與第一個(gè)Button相同的效果呢？我們接下來分析第二段JS代碼。
第二段JS代碼中一開始就直接創(chuàng)建了個(gè)JQuery的document對象，并調(diào)用了document對象的ready事件，ready事件會(huì)在DOM加載完后立即執(zhí)行。在ready事件中又建了個(gè)JQuery對象$("#btn2")，從該對象可以看出JQuery選擇的是id為btn2的控件。創(chuàng)建$("#btn2")的同時(shí)調(diào)用了onclick();方法。正是這個(gè)方法實(shí)現(xiàn)了讓Button二實(shí)現(xiàn)了和Button一相同的效果。這里簡單說下，在第二段JS代碼中如果把$(document).ready(function() {});這個(gè)事件去掉，直接寫$("#btn2").click(function() { var t1 = $("#txt1").val(); alert(t1); });那么點(diǎn)擊第二個(gè)Button將不會(huì)有任何的效果。
今天這一講就到此，其他不贅述，如果有疑問或需要源碼可以加入群：34979719，下一講，我們將會(huì)講常用控件的取值和賦值。
JavaScript技術(shù)：JQuery從頭學(xué)起第二講，轉(zhuǎn)載需保留來源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時(shí)間聯(lián)系我們修改或刪除，多謝。
