jquery常用操作整理基礎入門編

6110 ワード

jQueryはアメリカ人のJohn Resigによって作成され、今まで世界各地から多くのjavascriptの達人がチームに参加しています.ドイツから来たJörn Zaefferer、ルーマニアのStefan Petreなどが含まれています.
jQueryはprototypeに続くもう一つの優秀なJavascrīptフレームワーク.その趣旨は――WRITE LESS,DO MORE,より少ないコードを書き,より多くのことをすることである.
軽量級のjsライブラリ(圧縮後21 kのみ)であり、他のjsライブラリには及ばない.CSS 3にも対応し、各種ブラウザ(IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+)にも対応している.
jQueryは高速で簡潔なjavaScriptライブラリであり、ユーザーがHTML documents、eventsをより容易に処理し、アニメーション効果を実現し、ウェブサイトにAJAXインタラクションを容易に提供することができる.
jQueryのもう一つの大きな利点は、ドキュメントの説明が完備しており、さまざまなアプリケーションも詳しく説明されていると同時に、成熟したプラグインがたくさんあります.
jQueryは、ユーザーのhtmlページ保持コードとhtmlコンテンツを分離することができます.つまり、htmlにjsを挿入してコマンドを呼び出す必要はありません.idを定義するだけでいいです.
Jqueryはprototypeに続いて優秀なJavascrですīptフレームワーク.prototypeについてはあまり使わないので、簡単に理解しました.しかしjqueryを使った後、すぐに彼女の優雅さに惹かれた.prototypeとjqueryを比較するためにこのような比喩を使う人がいる:prototypeはJavaのようで、jqueryはrubyのようだ.実は私はjava(Rubyに触れないでください)が好きですが、jqueryの簡単な実用的なのは確かにかなり魅力的ですね.プロジェクトではjqueryを自分の唯一のフレームワーククラスパッケージとしています.その間にも少し心得がありますが、実はこれらの心得は、jqueryのドキュメントにも記載されているかもしれませんが、忘れないようにメモしておきましょう.
一、君を見つけた!
これを覚えていますか.prototypeもDWRもdocumentの代わりにこの関数を使用した.getElementById().そう、jqueryも追い風になった.documentに達するために.getElementById()の目的は、jqueryがこう書いています.
コード#コード#

 
  
　　var someElement = $("#myId");

他の2つのフレームワークより1つ多いように見えます.はい、次の使い方を見てみましょう.
コード#コード#

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

prototypeでこのような書き方を見たことがありますか?最初の行のコードは、すべてのラベルの下のP要素を取得します.2行目のコードはclassがcontainerの要素を得,3行目のコードはラベルの下のidがmsgの要素を得た.4行目のコードはcontextがコンテキストのtable内のすべての接続要素を得る.
CSSに詳しいと、これらの書き方が見覚えがあると思います!そうだ.まさに.奥義が見えてきたでしょう.jqueryはこのような方法でDomオブジェクトの要素を見つけます.CSSのセレクタと似ています.
二、Jqueryオブジェクト?
jqueryはeach(fn)のような便利な関数をたくさん提供していますが、これらの関数を使用する前提は、あなたが使用しているオブジェクトがJqueryオブジェクトであることです.DomオブジェクトをJqueryオブジェクトにするのは簡単ですが、次の方法(一部のみ):
コード#コード#

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

三、bodyタグの代わりにonload
この慣例は、$()を除いて、最も多く使われている場所かもしれません.次のコード:
コード#コード#

 
  
　　$(document).ready(function(){ 
  
　　alert("hello"); 
  
　　});(1) 
  
　　（2）

上の2つのコードは等価です.しかし、コード1の利点は、表現と論理の分離である.また、異なるjsファイルで同じ操作、すなわち$(document)を行うことができる.ready(fn)は、競合することなく、1つのページで繰り返すことができる.基本的にJqeuryの多くのpluginはこの特性を利用しているが,この特性のために複数のpluginが共通に使用され,初期化時に衝突することはない.
いずれにしても、この慣例はjavascrを分離することができます.īptとHTML.使用を推奨します.
四、事件のメカニズム
私が大量に使っているイベントはbuttonのonclickかもしれません.以前はinput要素にonclick=“fn()”と書くのに慣れていましたが、jqueryを使ってjavascrをīptコードはhtmlコードから分離され、HTMLを清潔に保ち、イベントを簡単にバインドすることができ、「イベント」という名詞を知らないこともできます.
コード#コード#

 
  
　　$(document).ready(function(){ 
  
　　$("#clear").click(function(){ 
  
　　alert("i am about to clear the table"); 
  
　　}); 
  
　　$("form[0]").submit(validate); 
  
　　}); 
  
　　function validate(){ 
  
　　//do some form validation 
  
　　}

五、同一関数実装set
コード#コード#

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

上の2行のコードは、同じ関数を呼び出します.しかし、結果は大きく異なる.
1行目は指定した要素のHTML値を返し、2行目はhelloという文字列を指定した要素に設定します.jqueryの関数の大部分はこのような特性を持っている.
六、ajax
ajaxが横行する時代です.何人か、ajaxを知らない人は全部ついて使います.ああ.jqueryを使用してajaxと同様の単純な異常を実現
コード#コード#

 
  
　　$.get("search.do",{id:1},rend); 
  
　　function rend(xml){ 
  
　　alert(xml); 
  
　　} (1) 
  
　　$.post("search.do",{id:1},rend); 
  
　　function rend(xml){ 
  
　　alert(xml); 
  
　　} (2) 
  
　　$("#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のjqueryオブジェクトのidの漸入とフェードアウトをそれぞれ実現しています.Gmailのようなダイナミックロード通知バーを作るのは、jqueryで簡単です.2つの関数が受け入れるパラメータは,早送りなどの他に,漸入またはフェードアウトの完了時間としてMS単位で整数型を受信することもできる.
八,plugin
これもプラグインの時代です.
jqueryプラグインは私にきれいな感じを与えて、簡単です.Jtipのように、その機能を使用するには、要素のclassにJtipを追加し、jtipを導入する必要があります.jsとそのスタイルでいいです.その他のことはすべてパッケージに挿入します.私がjqueryが好きな重要な原因の一つは、彼女がすでにたくさんの素晴らしいプラグインを持っていることに気づいたことです.
書き方が下手だ.jqueryのメリットが見えないかもしれません.うん、聞くだけではだめだから、試してみよう.おもしろいことに気づくでしょう.
ひとまず一段落しましょう.新しい発見があってから共有します.
Jqueryのリソースを追加します.
　　http://www.visualjquery.com/index.xml良いAPI検索サイト
　　http://jquery.com/demo/thickbox/ライトボックスを知って、Jqueryがどのように同じものを実現するかを見てみましょう.
　　http://jquery.com/plugins/牛のプラグインがたくさんあります.
　　http://15daysofjquery.com/jqueryの15日間のチュートリアル
　　http://jquery.org.cn/visual/cn/index.xml//いいJQUERY中国語学習おすすめ
jqueryソース
jQueryはアメリカ人のJohn Resigによって作成され、今まで世界各地から多くのjavascriptの達人がチームに参加しています.ドイツから来たJörn Zaefferer、ルーマニアのStefan Petreなどが含まれています.
jQueryはprototypeに続くもう一つの優秀なJavascrīptフレームワーク.その趣旨は――WRITE LESS,DO MORE,より少ないコードを書き,より多くのことをすることである.
軽量級のjsライブラリ(圧縮後21 kのみ)であり、他のjsライブラリには及ばない.CSS 3にも対応し、各種ブラウザ(IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+)にも対応している.
jQueryは高速で簡潔なjavaScriptライブラリであり、ユーザーがHTML documents、eventsをより容易に処理し、アニメーション効果を実現し、ウェブサイトにAJAXインタラクションを容易に提供することができる.
jQueryのもう一つの大きな利点は、ドキュメントの説明が完備しており、さまざまなアプリケーションも詳しく説明されていると同時に、成熟したプラグインがたくさんあります.
jQueryは、ユーザーのhtmlページ保持コードとhtmlコンテンツを分離することができます.つまり、htmlにjsを挿入してコマンドを呼び出す必要はありません.idを定義するだけでいいです.
jQueryの最新releaseバージョンは1.3.2です.
公式ダウンロードアドレスは次のとおりです.http://code.google.com/p/jqueryjs/downloads/list
マイクロソフトのvisual studio 2008 sp 1はjqueryに対する動的ヒントをサポートし、コードページに対応するvsdocスクリプトをインポートすればよい.

[React] | useMemo()

反応虹のコンポーネントを使用してアプリケーションに“daynight”テーマを追加.