jQuery は非常に強力なクライアント側 JS プログラミング テクノロジです。ここでは、関連する背景知識については詳しく説明しませんが、asp.net コントロールと組み合わせて開発する方法を簡単に説明したいと思います。
たとえば、次の図に示すような関数を実行したいとします。その結果、ステータス、数値、数値 1、数値 2、平均のすべての項目が背景でバインドされます。チェックボックス ボタンをクリックして自動的に計算する方法です。現在の行 2 数値の平均はいくらですか? jQueryを使って実現するのが前提?
ページの 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(); } }
フロントページの本文部分:
<body> <form id="form1" runat="server"> <div> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"> <Columns> <asp:TemplateField HeaderText="状态"> <ItemTemplate> <asp:CheckBox ID="checkstate" runat="server" /> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="编号"> <ItemTemplate> <asp:Label ID="lblId" runat="server"> <%#Eval("id") %></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="数字1"> <ItemTemplate> <asp:Label ID="lblNum1" runat="server"> <%#Eval("num1") %></asp:Label> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="数字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>
キーはページの先頭部分にあり、次のコードを入力して、次のような効果を実現します。
<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>
jQuery コードは読みやすく、理解しやすいことがわかります。コードも非常に美しく、最も重要なのは互換性が高いことです。
これは、jQuery がどのように威力を発揮するかを示す、より簡単な例を添付しています。その結果、各行のボタンをクリックすると、現在の行のテキストの値がポップアップ表示されます。
<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="数据1" /></td> <td><input type=button onclick="GetTest()" value="获取" /></td> </tr> <tr> <td>2</td> <td><input type=text value="数据2" /></td> <td><input type=button onclick="GetTest()" value="获取" /></td> </tr> </table> </body> </html>
想像してみてください。これを js で行うと非常に面倒ですし、さまざまなブラウザの互換性も考慮する必要があります。これを見ると、jQuery は短いにもかかわらず、非常に強力であるとため息をつきます。

实现方法:1、用“$("img").delay(毫秒数).fadeOut()”语句,delay()设置延迟秒数;2、用“setTimeout(function(){ $("img").hide(); },毫秒值);”语句,通过定时器来延迟。

修改方法:1、用css()设置新样式,语法“$(元素).css("min-height","新值")”;2、用attr(),通过设置style属性来添加新样式,语法“$(元素).attr("style","min-height:新值")”。

区别:1、axios是一个异步请求框架,用于封装底层的XMLHttpRequest,而jquery是一个JavaScript库,只是顺便封装了dom操作;2、axios是基于承诺对象的,可以用承诺对象中的方法,而jquery不基于承诺对象。

增加元素的方法:1、用append(),语法“$("body").append(新元素)”,可向body内部的末尾处增加元素;2、用prepend(),语法“$("body").prepend(新元素)”,可向body内部的开始处增加元素。

删除方法:1、用empty(),语法“$("div").empty();”,可删除所有子节点和内容;2、用children()和remove(),语法“$("div").children().remove();”,只删除子元素,不删除内容。

在jquery中,apply()方法用于改变this指向,使用另一个对象替换当前对象,是应用某一对象的一个方法,语法为“apply(thisobj,[argarray])”;参数argarray表示的是以数组的形式进行传递。

去掉方法:1、用“$(selector).removeAttr("readonly")”语句删除readonly属性;2、用“$(selector).attr("readonly",false)”将readonly属性的值设置为false。

on()方法有4个参数:1、第一个参数不可省略,规定要从被选元素添加的一个或多个事件或命名空间;2、第二个参数可省略,规定元素的事件处理程序;3、第三个参数可省略,规定传递到函数的额外数据;4、第四个参数可省略,规定当事件发生时运行的函数。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

MinGW - Minimalist GNU for Windows
このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポート ライブラリとヘッダー ファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。

DVWA
Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター

VSCode Windows 64 ビットのダウンロード
Microsoft によって発売された無料で強力な IDE エディター

ドリームウィーバー CS6
ビジュアル Web 開発ツール
