jqueryの共通スキルと一般的なメソッドのリスト collection_jquery

1. ページ要素に関する参照
jquery の $() による要素の参照には、id、クラス、要素名、要素の階層関係、dom または xpath 条件などのメソッドと返されるオブジェクトが含まれます。 jquery オブジェクト (コレクション オブジェクト) は、dom で定義されたメソッドを直接呼び出すことができません。
2. jQuery オブジェクトと dom オブジェクト間の変換
jquery で定義されたメソッドを使用できるのは jquery オブジェクトのみです。 dom オブジェクトと jquery オブジェクトには違いがあることに注意してください。メソッドを呼び出すときは、dom オブジェクトと jquery オブジェクトのどちらを操作しているかに注意する必要があります。
通常の dom オブジェクトは、通常 $() を通じて jquery オブジェクトに変換できます。
例: $(document.getElementById("msg")) は jquery オブジェクトであり、jquery メソッドを使用できます。
jquery オブジェクト自体がコレクションであるためです。したがって、jquery オブジェクトを dom オブジェクトに変換する場合は、項目の 1 つを取得する必要があります。これは通常、インデックスを通じて取得できます。
例: $("#msg")[0]、$("div").eq(1)[0]、$("div").get()[1]、$("td " )[5] これらは dom オブジェクトです。dom 内のメソッドを使用できますが、Jquery メソッドは使用できなくなりました。
以下の書き方は全て正しいです。
3. jQuery コレクションの特定の項目を取得する方法
取得した要素コレクションに対して、特定の項目(インデックスで指定)を取得します。 ) は、eq または get(n) メソッド、またはインデックス番号を使用して取得できます。eq は jquery オブジェクトを返し、get(n) と Index は dom 要素オブジェクトを返すことに注意してください。 jquery オブジェクトの場合は jquery メソッドのみを使用でき、dom オブジェクトの場合は dom メソッドのみを使用できます。たとえば、3 番目の
要素の内容を取得する場合です。以下の 2 つのメソッドがあります。
$("div").eq(2).html(); //jquery オブジェクトのメソッドを呼び出します。
$("div").get(2).innerHTML; / /dom メソッドの属性を呼び出します
4. 同じ関数が set と get を実装します
これは、主に次のような Jquery の多くのメソッドに当てはまります:
$("#msg" ).html(); //ID msg の要素ノードの HTML コンテンツを返します。
//ID msg を持つ要素ノードのコンテンツに「新しいコンテンツ」を HTML 文字列として書き込むと、ページに新しいコンテンツが太字で表示されます
$("#msg").text(); //Return id msgの要素ノードのテキスト内容です。
//「新しいコンテンツ」を通常のテキスト文字列として要素ノードのコンテンツに msg の ID で書き込むと、ページに新しいコンテンツが表示されます
$("#msg").height() / /msg の id を返します 要素の高さ
$("#msg").height("300") //id msg の要素の高さを 300 に設定します
$("#msg ").width(); //id msg の要素の幅を返します
$("#msg").width("300"); //id msg の要素の幅を 300 に設定します
$("input") .val("); //フォーム入力ボックスの値を返します
$("input").val("test"); //フォーム入力ボックスの値を設定しますテストするボックス
$(" #msg").click(); //ID msg
$("#msg").click(fn); の要素のクリック イベントをトリガーします。 ID msg の要素のクリック イベントに対する関数
同様に、blur、focus、select、submit イベントには 2 つの呼び出しメソッドがあります
5. コレクションの処理関数
jquery によって返されるコンテンツは、自分でループしてそれぞれを処理する必要はありません。jquery には、コレクションを処理するための非常に便利なメソッドが用意されています。
//Set Different。それぞれインデックス 0、1、2 を持つ p 要素の値
//テーブルのインターレース色変更効果を実現します
// 各 p 要素にクリック イベントを追加し、p をクリックします。コンテンツをポップアップする要素

6. 拡張機能必要な関数
}) //jquery の拡張 min メソッドと max メソッド 拡張メソッドを使用します (「$.メソッド名"):

7 、メソッド
の連結をサポートします。いわゆる連結とは、jquery オブジェクトでさまざまなメソッドを継続的に呼び出すことができることを意味します。例:
8. 要素の操作スタイル
主に以下のメソッドが含まれます:
$("#msg").css("background"); //要素の背景色を返します。 >$("#msg").css("background", "#ccc") //要素の背景をグレーに設定します$("#msg").height(300); msg").width("200"); //幅と高さを設定します
$("#msg").css({ color: "red", background: "blue" });// スタイルを設定します名前と値のペアの形式で
$("#msg").addClass("select"); //select という名前のクラスを要素に追加します
$("#msg").removeClass(" select"); //要素
の select という名前のクラスを削除します$(" #msg").toggleClass("select"); //存在する (存在しない) 場合は、という名前のクラスを削除 (追加) select

9. 完全なイベント処理関数

Jquery HTML 要素にイベントを直接記述する必要はなく、取得したオブジェクトにイベントを直接追加できます。 jQuery経由で。 例:
$("#msg").click(function(){}) //クリック イベントを要素に追加します//3 つの異なる p 要素に個別のクリック イベントを設定します 異なる処理
jQuery のいくつかのカスタム イベント:
(1) hover(fn1, fn2): ホバー イベント (マウスがオブジェクト上を移動し、オブジェクトの外に移動する) を模倣するメソッド。マウスが一致する要素上に移動すると、最初に指定された関数がトリガーされます。マウスがこの要素の外に出ると、指定された 2 番目の関数がトリガーされます。
//テーブルの列にマウスを置くと、クラスをオーバーに設定し、離れるときにクラスをアウトに設定します。
(2) ready(fn): DOM がロードされ、クエリと操作の準備ができたときに実行される関数をバインドします。
//ページがロードされると、「Load Success」というプロンプトが表示されます。これは onload イベントに相当します。 $(fn)
に相当 (3) toggle(evenFn,oddFn): クリックするたびに呼び出される関数を切り替えます。一致する要素をクリックすると、指定された最初の関数がトリガーされ、同じ要素が再度クリックされると、指定された 2 番目の関数がトリガーされます。後続のクリックごとに、これら 2 つの関数の呼び出しが順番に繰り返されます。
//クリックするたびに、選択した名前のクラスの追加と削除をローテーションします。
(4)trigger(eventtype): 一致する各要素で特定のタイプのイベントをトリガーします。
例:
$("p").trigger("click"); //すべての p 要素のクリック イベントをトリガーします
(5) binding(eventtype,fn), unbind(eventtype) :event バインドとバインド解除
は、一致する各要素からバインドされたイベントを削除 (追加) します。
例:
$("p").bind("click", function(){.text());}); //各 p 要素にクリック イベントを追加します
$( "p").unbind(); //すべての p 要素のすべてのイベントを削除します
$("p").unbind("click") //すべての p 要素のすべてのクリック イベントを削除します
10. いくつかの実用的な特殊効果関数
その中で、toggle() メソッドと slidetoggle() メソッドは状態切り替え関数を提供します。
たとえば、toggle() メソッドには Hide() メソッドと show() メソッドが含まれます。
slideToggle() メソッドには、slideDown() メソッドと slideUp メソッドが含まれます。
11. いくつかの便利な jQuery メソッド
$.browser: ブラウザーの種類を検出します。有効なパラメータ: safari、opera、msie、mozilla。たとえば、IE: $.browser.isie であるかどうかを確認すると、IE ブラウザであれば true が返されます。
$.each(obj, fn): 一般的な反復関数。 (ループの代わりに) オブジェクトと配列を近似的に反復するために使用できます。
たとえば、
は以下と同等です:
は
などの JSON データも処理でき、結果は次のようになります:
$.extend(target,prop1,propN): 1 つまたはその他のオブジェクト 展開されたオブジェクトを返すオブジェクト。これはjqueryで実装された継承メソッドです。
例:
//設定とオプションをマージし、マージした結果を設定に返します。これは、オプションが設定を継承し、継承した結果を設定に保存するのと同等です。
//デフォルトとオプションをマージし、デフォルトの内容を上書きせずにマージした結果を設定に戻します。
複数のパラメータを持つことができます (複数のパラメータを組み合わせて返します)
$.map(array, fn): 配列マッピング。 (変換処理後) 配列内の項目を新しい配列に保存し、結果の新しい配列を返します。
例:
tempArr の内容: [4,5,6]
tempArr の内容: [2,3]
$.merge(arr1, arr2): 2 つをマージします配列を削除して項目を重複させます。
例: $.merge( [0,1,2], [2,3,4] ) //Return [0,1,2,3,4]
$.trim(str):文字列の両端の空白文字を削除します。
例: $.trim(" hello, how are you? "); //Return "hello, how are you?"
12. カスタム メソッドまたは他のクラス ライブラリと jQuery の間の競合を解決します。
多くの場合、要素を取得するために $(id) メソッドを自分で定義するか、プロトタイプなどの他の JS ライブラリでも $ メソッドを定義します。これらの内容を同時にまとめると、変数は次のようになります。メソッド定義の競合が発生した場合、Jquery はこの問題を解決するための特別なメソッドを提供します。
jquery の jQuery.noConflict(); メソッドを使用して、変数 $ の制御を、それを実装する最初のライブラリまたは以前にカスタマイズした $ メソッドに移します。後で Jquery を使用する場合は、すべての $ を jQuery に置き換えるだけです。たとえば、元の参照オブジェクト メソッド $("#msg") は jQuery("#msg") に変更されます。
例:
// jQuery の使用を開始
// 他のライブラリの $() を使用
一般的な jQuery メソッドのリスト:
属性:
$(p).addClass( css 定義されたスタイル タイプ); 要素にスタイルを追加します
$(img).attr({src:test.jpg,alt:test Image}); 要素に属性/値を追加します。パラメータは map $(img).attr(src,test.jpg); 要素に属性/値を追加します
$(img).attr(title, function() { return this.src }); /value 要素に属性/値を追加
$(要素名).html(); 要素内の内容(要素、テキストなど)を取得
$(要素名).html(new要素の内容を設定します
$(要素名).removeAttr(属性名) 要素から指定された属性と属性の値を削除します
$(要素名).removeClass(クラス)要素から指定されたスタイル
$(要素名).text(); 要素のテキストを取得します
$(要素名).text(値); 要素のテキスト値を値
に設定します$(要素名).toggleClass(class) パラメータのスタイルが存在する場合に要素をキャンセルします。 存在しない場合は、このスタイルを設定します。
$(入力要素名).val(); input element
$(入力要素名).val(value); 入力要素の値を値に設定します。
操作:
$(要素名).after(content); element
$(要素名).append(content); コンテンツを要素として使用します コンテンツは要素
$(要素名).appendTo(content) の後に挿入されます>$(要素名).before(内容); afterメソッドの逆
$(要素名).clone(ブール式) ブール式がtrueの場合、要素をクローンします(パラメータがない場合は、
$(要素名).empty() 要素の内容を空に設定します
$(要素名).insertAfter(content); この要素を内容の後に挿入します
$(要素) name).insertBefore(content); この要素を content
$(element) の前に挿入します。 .prependTo(content); 要素をコンテンツの一部として使用し、コンテンツの先頭に配置します
$ (Element).remove(); 指定された要素をすべて削除します
$(Element).remove( exp); exp を含むすべての要素を削除します
$(Element).wrap(html); 要素を html で囲みます 要素
$(element).wrap(element); を使用して要素を囲みます:
コア:
$(html).appendTo(body) は本文の HTML コードに段落を記述するのと同等です
$(elems) は DOM 上の要素を取得します
$(function() {..}); 関数
$(div > p).css(border, 1px plain grey ); を実行し、すべての div の子ノード p を検索し、スタイル
$(input:radio, document. Forms[0]) 現在のページの最初のフォームにあるラジオ ボタンをすべて検索します。
$.extend( prop) prop は jQuery オブジェクトです。
例:
jQuery(expression, [context] ) $( Expression, [context]); デフォルトでは、$() は現在の HTML ドキュメント要素内の DOM をクエリします。
each( callback ) は、一致した各要素をコンテキストとして使用して関数を実行します。
例: 1
例: 2
ready(fn); $(document).ready() 本体内の注記onload イベントではない場合、関数は実行できません。各ページでは
多くの関数をロードして実行でき、fn の順序で実行されます。
bind( type, [data], fn ) は、1 つ以上のイベント ハンドラー関数を、一致する各要素の特定のイベント (クリックなど) にバインドします。可能なイベント属性は次のとおりです:blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、
one( type, [data], fn ) は、一致する要素ごとに特定のイベントです ( Likeクリック) 1 つ以上のイベント ハンドラー関数をバインドします。このイベント ハンドラーは、各
オブジェクトで 1 回だけ実行されます。その他のルールはbind()関数と同じです。
trigger( type, [data] ) は、一致する要素ごとに特定のタイプのイベントをトリガーします。
triggerHandler( type, [data] ) この特定のメソッドは、要素で特定のイベントをトリガーし (イベント タイプを指定)、このイベントに対するブラウザのデフォルト アクションをキャンセルします。
unbind( [type], [ data] ) バインドを解除し、一致する各要素からバインドされたイベントを削除します。
$(p).unbind() はすべての段落のすべてのバインドされたイベントを削除します
$(p).unbind( click ) はすべての段落のクリック イベントを削除します
hover( over, out ) over と out は両方ですメソッド。マウスが一致する要素上に移動すると、最初に指定された関数がトリガーされます。マウスがこの要素の外に出ると、指定された 2 番目の関数がトリガーされます。
toggle( fn, fn ) 一致する要素をクリックすると、指定された最初の関数がトリガーされ、同じ要素が再度クリックされると、指定された 2 番目の関数がトリガーされます。
要素イベント リストの説明
注: パラメーターのない関数。そのパラメーターはオプションの fn です。 jQuery は form 要素のリセット イベントをサポートしていません。
Event description supports elements or objects
blur( ) The element loses focus a, input, textarea, button, select, label, map, area
change( ) The user changes the content of the field input, textarea, select
click( ) The mouse clicks on almost all elements of an object
dblclick( ) The mouse double-clicks on almost all elements of an object
error( ) When an error occurs when loading a document or image window, img
focus ( ) The element gets focus a, input, textarea, button, select, label, map, area
keydown( ) A certain keyboard key is pressed Almost all elements
keypress( ) A certain keyboard key is pressed Press or hold down almost all elements
keyup( ) A certain keyboard key is released Almost all elements
load( fn ) A certain page or image is loaded window, img
mousedown( fn ) Some A mouse button is pressed on almost all elements
mousemove( fn ) The mouse is moved on almost all elements
mouseout( fn ) The mouse is moved from an element on almost all elements
mouseover( fn ) The mouse is moved on an element Almost all elements above the element
mouseup( fn ) A mouse button is released Almost all elements
resize( fn ) The window or frame is resized window, iframe, frame
scroll( fn ) Scroll the document When the visible part is window
select( ) the text is selected document, input, textarea
submit( ) the submit button is clicked form
unload( fn ) the user exits the page window
JQuery Ajax method description :
load( url, [data], [callback] ) loads a remote HTML content into a DOM node.
$(#feeds).load(feeds.html); Load the feeds.html file into the div with the id of feeds
jQuery.get( url, [data], [callback] ) Use GET request a page.
jQuery.getJSON( url, [data], [callback] ) uses GET to request JSON data.
jQuery.getScript( url, [callback] ) uses GET to request a javascript file and execute it.
jQuery.post( url, [data], [callback], [type] ) uses POST to request a page.
ajaxComplete( callback ) Execute a function when an AJAX request ends. This is an Ajax event
ajaxError( callback ) When an AJAX request fails, execute a function. This is an Ajax event