jQuery是一種非常強(qiáng)大的客戶端JS編程技術(shù)，這里不想過(guò)多闡述它的相關(guān)背景知識(shí)，只想簡(jiǎn)單演示一下如何與asp.net的控件結(jié)合開(kāi)發(fā)。
比如，我們要做一個(gè)下面如圖所示的功能，效果是狀態(tài)、編號(hào)、數(shù)字1、數(shù)字2、平均值所有的項(xiàng)都是通過(guò)后臺(tái)綁定，如何點(diǎn)擊checkbox按鈕，來(lái)實(shí)現(xiàn)自動(dòng)計(jì)算當(dāng)前行兩個(gè)數(shù)字的平均值呢？前提是用jQuery來(lái)實(shí)現(xiàn)？
我們直接在頁(yè)面的Page_Load事件中輸入如下代碼：
protected void Page_Load(object sender, EventArgs e) { if (!Page.IsPostBack) { DataTable dt = new DataTable(); dt.Columns.AddRange(new DataColumn[] { new DataColumn("id",typeof(Int32)), new DataColumn("num1",typeof(Int32)), new DataColumn("num2",typeof(Int32)) }); DataRow dr = null; dr = dt.NewRow(); dr["id"] = 1; dr["num1"] = 20; dr["num2"] = 40; dt.Rows.Add(dr); dr = dt.NewRow(); dr["id"] = 2; dr["num1"] = 40; dr["num2"] = 30; dt.Rows.Add(dr); this.GridView1.DataSource = dt.DefaultView; this.GridView1.DataBind(); } } 前臺(tái)頁(yè)面body部分：
<body> <form id="form1" runat="server"> <div> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"> <Columns> <asp:TemplateField HeaderText="狀態(tài)"> <ItemTemplate> <asp:CheckBox ID="checkstate" runat="server" /> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="編號(hào)"> <ItemTemplate> <asp:Label ID="lblId" runat="server"> <%#Eval("id") %></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="數(shù)字1"> <ItemTemplate> <asp:Label ID="lblNum1" runat="server"> <%#Eval("num1") %></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="數(shù)字2"> <ItemTemplate> <asp:Label ID="lblNum2" runat="server"> <%#Eval("num2") %></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="平均值"> <ItemTemplate> <asp:TextBox ID="avg_value" runat="server" /> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </div> </form> </body>
關(guān)鍵的在頁(yè)面的head部分，輸入如下代碼就可以實(shí)現(xiàn)如圖效果了。
<script src="js/jquery-1.4.2.js"></script> <script type="text/javascript"> $(function () { $("#<%=GridView1.ClientID%>").find("tr td input[type=checkbox]").each(function () { $(this).bind("click", function () { if (this.checked) { var id = $(this).parent().parent().find("span[id*=lblId]").text(); var num1 = $(this).parent().parent().find("span[id*=lblNum1]").text(); var num2 = $(this).parent().parent().find("span[id*=lblNum2]").text(); var result = (parseFloat(num1) + parseFloat(num2)) / 2; $(this).parent().parent().find("input[id*=avg_value]").val(result); } else { $(this).parent().parent().find("input[id*=avg_value]").val(""); } }); }); }); </script>
你會(huì)發(fā)現(xiàn)jQuery的代碼讀著很輕松，很容易理解。而且代碼也很優(yōu)美，最關(guān)鍵的是兼容性很好。
再附一個(gè)簡(jiǎn)單點(diǎn)的例子，這是一個(gè)靜態(tài)html頁(yè)面，看jQuery是如何發(fā)揮威力的。效果是點(diǎn)擊每一行的按鈕時(shí)，彈出當(dāng)前行的text里面的value。
<html> <head> <script type="text/javascript" src="jquery-1.4.2.js"></script> <script type="text/javascript"> $(function(){ $("table tr td").each(function(){ $(this).find("[type=button]").click(function(){ alert($(this).parent().parent().find("[type=text]").val()); }); }); }); </script> </head> <body> <table> <tr> <td>1</td> <td><input type=text value="數(shù)據(jù)1" /></td> <td><input type=button onclick="GetTest()" value="獲取" /></td> </tr> <tr> <td>2</td> <td><input type=text value="數(shù)據(jù)2" /></td> <td><input type=button onclick="GetTest()" value="獲取" /></td> </tr> </table> </body> </html> 試想，如果我們用js去做，將會(huì)很麻煩，而且還要考慮各種瀏覽器的兼容性。看到這里不得不感嘆一句，jQuery雖然短小，但是相當(dāng)強(qiáng)大啊。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
