jqueryの一般的な操作を整理した基本的な導入_jquery

jQuery はアメリカ人の John Resig によって作成され、ドイツの Jörn Zaefferer やルーマニアの Stefan Petre など、世界中から多くの JavaScript 専門家がそのチームに参加するよう集まりました。
jQuery は、プロトタイプに次ぐ優れた Javascript フレームワークです。その目的は、- WRITE LESS, DO MORE、書くコードを減らして、より多くのことを実行することです。
これは他の js ライブラリの範囲を超えた軽量の js ライブラリです (圧縮後わずか 21k)。CSS3 およびさまざまなブラウザ (IE 6.0、FF 1.5、Safari 2.0、Opera 9.0) と互換性があります。
jQuery は、ユーザーが HTML ドキュメントとイベントをより簡単に処理し、アニメーション効果を実現し、Web サイトに AJAX インタラクションを簡単に提供できるようにする、高速で簡潔な JavaScript ライブラリです。
jQuery のもう 1 つの大きな利点は、ドキュメントが非常に充実しており、さまざまなアプリケーションが詳細に説明されていることです。また、選択できる成熟したプラグインも多数あります。
jQuery は、ユーザーの HTML ページのコードと HTML コンテンツを分離したままにすることができます。つまり、コマンドを呼び出すために HTML に大量の JS を挿入する必要はなく、ID を定義するだけです。
Jquery は、プロトタイプに次ぐ優れた Javascript フレームワークです。私はプロトタイプをあまり使用せず、簡単に理解しているだけです。しかし、jquery を使用してから、すぐにその優雅さに魅了されました。プロトタイプと jquery を比較するためにこの比喩を使用する人もいます。プロトタイプは Java に似ており、jquery は Ruby に似ています。実際、私は Java の方が好きですが (Ruby にはあまり触れません)、jquery のシンプルな実用性には大きな魅力があります。このプロジェクトでは、jquery を唯一のフレームワーク クラス パッケージとして使用します。実際、私も使用中に少し経験がありますが、これらの経験は jquery のドキュメントにも記載されているかもしれませんが、参考までに書き留めておこうと思います。
ひとつ、見つけました!
$() のことをまだ覚えていますよね?プロトタイプと DWR は両方とも、 document.getElementById() の代わりにこの関数を使用します。はい、jquery もこれに倣いました。 document.getElementById() の目的を達成するために、jquery は次のように記述されます。
コード

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

var someElement = $("#myId");

他の 2 つのフレームワークより # が 1 つ多いようです。次の使用法を見てください:
コード

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

$("div p"); // (1)
$("div.container"); // (2)
$("div #msg"); 🎜> $("table a",context ); // (4)

プロトタイプでこのような記述を見たことがありますか?コードの最初の行は、すべてのタグの下にある P 要素を取得します。コードの 2 行目はクラス コンテナを持つ要素を取得し、コードの 3 行目はラベルの下に ID msg を持つ要素を取得します。コードの 4 行目は、コンテキストが context であるテーブル内のすべての接続要素を取得します。
CSS に慣れている方であれば、これらの記述方法は非常に馴染みのあるものであることがわかります。右。その通り。その秘密がわかります。これは、jquery が Dom オブジェクト内の要素を見つける方法です。 CSS セレクターに似ています。

二番目、Jquery オブジェクト? jquery には each(fn) などの便利な関数が多数用意されていますが、これらの関数を使用するための前提条件は、使用するオブジェクトが Jquery オブジェクトであることです。 Dom オブジェクトを Jquery オブジェクトにするのは、次のメソッド (一部のみ) を使用するだけで非常に簡単です。
コード

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

var a = $("#cid");
var b = $("hello"); var c = document .createElement("table") ;
var tb = $©;

3 番目に、body タグの onload
を置き換えます。 $() の場所以外で最もよく使用されます。次のコード: コード

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

$(document) .ready(function(){

alert("hello");
});(1)
(2)


上記の 2 つのコードは同等です。ただし、コード 1 の利点は、パフォーマンスとロジックを分離できることです。また、同じ操作を異なる js ファイルで実行することもできます。つまり、$(document).ready (fn) は競合することなくページ内で繰り返し出現できます。基本的に、Jqeury の多くのプラグインはこの機能を利用しているため、初期化中に競合することなく複数のプラグインを一緒に使用できます。
とにかく、この規約により JavaScript と HTML を分離できます。推奨。
4 番目、イベントメカニズム
私がよく使うイベントはおそらくボタンの onclick です。以前は input 要素に onclick = "fn()" と記述していました。jquery を使用すると、JavaScript コードを HTML コードから分離し、HTML をクリーンな状態に保ち、「イベント」という用語を知らなくてもイベントを簡単にバインドできます。 。
コード

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

$(ドキュメント)。 ready(function (){
$("#clear").click(function(){
alert("テーブルをクリアしようとしています");
});
$( "form[ 0]").submit(validate);
});
function validate(){
//フォーム検証を行います
}

five 、同じ関数は set
コード

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

$("#msg").html();
$("#msg").html("hello");

上記の２行のコードは同じ関数を呼び出します。しかし、結果は大きく異なります。
最初の行は指定された要素の HTML 値を返し、2 行目は文字列 hello を指定された要素に設定します。 jquery のほとんどの関数にはこの機能があります。
Six, ajax
ajax が跋扈する時代です。 ajax を知らない人も含めて、どれだけの人がそれを使い始めたことでしょう。おお。 jquery を使用して ajax を実装することも同様に単純かつ異常です
コード

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

$ .get("search.do",{id:1},rend);
function rend(xml){
alert(xml)>} (1)
$.post(" search.do",{id:1},rend);
関数 rend(xml){
alert(xml);
$(" #msg").ajaxStart (function(){
this.html("読み込み中...");
});(3)
$("#msg").ajaxSuccess(function( ){
This.html("読み込み完了!");
});(4)


これらはより一般的に使用されるメソッドであり、get と post は同じように使用されます。 。最初のパラメータは非同期リクエストの URL、2 番目はパラメータ、3 番目はコールバック メソッドです。

メソッド 3 と 4 は、指定された Dom オブジェクトでの ajax 実行に応じてイベントをバインドします。もちろん、jquery の AJAX 関連機能はこれだけではありません。興味があれば、さらに学習してください。

セブン、フェードインとフェードアウト
コード

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

$("#msg").fadeIn("fast");

$("#msg").fadeOut("slow");
そうです、上の 2 行のコードはそれぞれ、Msg という ID を持つ jquery オブジェクトのフェードインとフェードアウトを実装しています。 Gmail のような動的な読み込み通知バーを作成するのは、jquery を使用するのと同じくらい簡単です。 2 つの関数で受け付けるパラメータは速度などに加えて、フェードインまたはフェードアウトの完了時刻として使用される整数も受け取ることができ、単位は MS です。
八、プラグイン
これもプラグインの時代です。
jquery プラグインはすっきりしていてシンプルな印象を与えます。 Jtip など、その機能を使用するには、要素のクラスに Jtip を追加し、jtip.js とそのスタイルを導入するだけで済みます。他のすべてのプラグインが含まれています。私が jquery を好む重要な理由は、jquery がすでに多くの優れた素晴らしいプラグインを持っていることです。
非常に悪く書かれています。もしかしたら、jquery の利点が分からないかもしれません。まあ、ただ聞いているだけではダメなので、試してみてください。面白いと思うでしょう。
今日はこれで終わりにしましょう。新しい発見があればまた共有します。
Jquery リソースを追加します。
http://www.visualjquery.com/index.xml 優れた API クエリ サイト
http://jquery.com/demo/thickbox/ lightBox についてご存知ですか? Jquery が同じことをどのように実装しているかを見てみましょう
http://jquery.com/plugins/ 素晴らしいプラグインがたくさんあります。
http://15daysofjquery.com/jquery の 15 日間チュートリアル
http://jquery.org.cn/visual/cn/index.xml //優れた JQUERY 中国語学習の推奨事項
jquery ソース
jQuery はアメリカ人の John Resig によって作成され、ドイツの Jörn Zaefferer やルーマニアの Stefan Petre など、世界中から多くの JavaScript 専門家がチームに加わりました。
jQuery は、プロトタイプに次ぐ優れた Javascript フレームワークです。その目的は、- WRITE LESS, DO MORE、書くコードを減らして、より多くのことを実行することです。
これは他の js ライブラリの範囲を超えた軽量の js ライブラリです (圧縮後わずか 21k)。CSS3 およびさまざまなブラウザ (IE 6.0、FF 1.5、Safari 2.0、Opera 9.0) と互換性があります。
jQuery は、ユーザーが HTML ドキュメントとイベントをより簡単に処理し、アニメーション効果を実現し、Web サイトに AJAX インタラクションを簡単に提供できるようにする、高速で簡潔な JavaScript ライブラリです。
jQuery のもう 1 つの大きな利点は、ドキュメントが非常に充実しており、さまざまなアプリケーションが詳細に説明されていることです。また、選択できる成熟したプラグインも多数あります。
jQuery は、ユーザーの HTML ページのコードと HTML コンテンツを分離したままにすることができます。つまり、コマンドを呼び出すために HTML に大量の JS を挿入する必要はなく、ID を定義するだけです。
jQuery の最新リリース バージョンは 1.3.2 です。
公式ダウンロード アドレスは次のとおりです: http://code.google.com/p/jqueryjs/downloads/list
Microsoft の Visual Studio 2008 SP1 は、jquery の動的プロンプトをサポートします。はコード内にあります。対応する vsdoc スクリプトをページにインポートするだけです