JQueryをゼロから学ぶ、講義2_jquery-jsチュートリアル-php.cn

JQueryをゼロから学ぶ、講義2_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

リリース： 2016-05-16 18:23:44

オリジナル

1270 人が閲覧しました

この講義では主に、JQuery のセレクターと JQuery が値を取得する方法について簡単に説明します。早速、コードを投稿して、デモに基づいて説明しましょう。

コードをコピーコードは次のとおりです:

<%@ Page Language="C# " AutoEventWireup= "true" CodeBehind="JQuery2.aspx.cs" Inherits="JQuery_1.JQuery2" %>

;

コードの最初の行からわかるように、実際には、最初の行を削除しても問題はありません。 JQuery は JavaScript スクリプトなので、HTML でも同様に実行できます。 VS を使用して JQuery を書いたので、aspx ページを直接追加しました。

コードには、2 つの JavaScript スクリプトが記述されており、本文には 1 つのボタンが含まれています。、もう一方はそうではありません。実行中の効果から判断すると、2 つのボタンは実際には同じ効果を実現しており、両方ともテキストボックスに入力された内容をポップアップ表示します。ここで、これら 2 つの JS 部分を簡単に分析してみましょう

JS の最初の部分では、btnclick() という名前の関数がカスタマイズされており、関数本体で var キーワードを使用して変数 t1 が定義されています。 T1 の値は、JQuery のセレクターを通じて取得されます。 $("#txt1") は JQuery オブジェクトを作成します。 # これを name に変更すると、値は取得されません。 $("#txt1") の val() メソッドは、テキストボックスの値を取得します。 $("#txt1").val() は、JavaScript の document.getElementById("txt1").value に相当します。

最初のボタンの onclick イベントは、最初の JS 関数でカスタマイズを実行します。 2 番目のボタンには onclick イベントがありません。最初のボタンと同じ効果を実現するにはどうすればよいですか?次に、JS コードの 2 番目の部分を分析してみましょう。

2 番目の JS コードでは、最初から JQuery ドキュメントオブジェクトが作成され、DOM が読み込まれた直後にドキュメントオブジェクトの Ready イベントが呼び出されます。 Ready イベントでは、JQuery オブジェクト $("#btn2") が作成されます。このオブジェクトから、JQuery が btn2 の ID を持つコントロールを選択していることがわかります。 $("#btn2") を作成するときに、onclick() メソッドが呼び出されます。この方法により、ボタン 2 でボタン 1 と同じ効果を実現できます。ここで簡単に説明します。JS コードの 2 番目の部分で、$(document).ready(function() {}) イベントを削除する場合は、 $("#btn2").click(function() { var t1 = $("#txt1").val(); 2 番目のボタンをクリックしても効果はありません。

今日の講義はこれで終わりです。その他については詳しく説明しません。質問がある場合、またはソースコードが必要な場合は、グループ 34979719 に参加してください。次の講義では、次のことについて説明します。一般的に使用されるコントロールの値の取得と割り当て。