jQueryでよく使われる関数メソッドのまとめ

<div class="wrap"><p>Test Paragraph.</p></div>

jQueryでは、多くの有用な方法と属性を提供し、自分でまとめた一般的な関数、方法を提供しています.個人的には開発でよく使われると思いますが、皆さんの勉強と参考に供します.
イベント処理
ready(fn)
コード:

$(document).ready(function(){
  // Your code here...
})；

 
役割:Webアプリケーションの応答速度を大幅に向上させることができます.この方法を使用すると、DOMの読み込み準備が整い、操作が可能になったときにバインドされた関数をすぐに呼び出すことができますが、99.99%のJavaScript関数はその時点で実行する必要があります.
bind(type,[data],fn)
 
コード:

$("p").bind("click", function(){
  alert( $(this).text() );
}); 

≪アクション|Actions|emdw≫:一致する要素ごとにclickのような特定のイベントにイベント・プロセッサ関数をバインドします.イベントリスニングの役割を果たす.
 
toggle(fn,fn)
コード:
 

$("td").toggle(
  function () {
    $(this).addClass("selected");
  },
  function () {
    $(this).removeClass("selected");
  }
);

 
役割:クリックするたびに呼び出す関数を切り替えます.一致する要素をクリックすると、指定した最初の関数がトリガーされ、同じ要素を再度クリックすると、指定した2番目の関数がトリガーされます.興味深い関数で、いくつかの機能を動的に実装するときに使用される可能性があります.
(click()、focus()、keydown()のようなイベントはここでは言いませんが、それらは開発でよく使われています.)
外観効果
 
 

addClass(class)  removeClass(class) 

//   ：
$(".stripe tr").mouseover(function(){  
               $(this).addClass("over");}).mouseout(function(){ 
               $(this).removeClass("over");})
});
//     ：
$(".stripe tr").mouseover(function() { $(this).addClass("over") });
$(".stripe tr").mouseout(function() { $(this).removeClass("over") });

 
 
≪アクション|Actions|emdw≫:指定した要素にスタイルを追加または削除して、ダイナミックなスタイル効果を実現します.上記の例では、マウスが2色の表を移動するコードを実現します.
 
css(name,value)
 
コード:
 

$("p").css("color","red");

 
 
≪アクション|Actions|emdw≫:一致する要素にスタイル・プロパティの値を設定するのは簡単です.この個人的な感覚は上のaddClass(class)と少し似ています.
 
slide(),hide(),fadeIn(), fadeout(), slideUp() ,slideDown()
 
コード:
 

$("#btnShow").bind("click",function(event){ $("#divMsg").show() });
$("#btnHide").bind("click",function(evnet){ $("#divMsg").hide() });

 
 
作用:jQueryで提供される比較的よく使われるいくつかのダイナミック効果の関数.パラメータ:show(speed,[callback])を追加して、すべての一致する要素を優雅なアニメーションで表示し、表示が完了した後にオプションでコールバック関数をトリガーすることもできます.
 
animate(params[,duration[,easing[,callback]]])
 
役割:アニメーション効果を作成するために使用される関数は、非常に強力で、この関数を連続的に使用することができます.
 
フィルタの検索
 
map(callback)
 
 
 
HTMLコード:
 
 
 

<p><b>Values: </b></p>
<form>
  <input type="text" name="name" value="John"/>
  <input type="text" name="password" value="password"/>
  <input type="text" name="url" value="http://ejohn.org/%22/>
</form> 

 
jQueryコード:
 
 

$("p").append( $("input").map(function(){
  return $(this).val();
}).get().join(", ") ); 

結果:
 

[ <p>John, password, http://ejohn.org/%3C/p> ]

役割:要素のセットを他の配列に変換します(要素配列の有無にかかわらず).この関数を使用して、値、属性、CSSスタイル、またはその他の特別な形式にかかわらず、リストを作成できます.これはすべて'$.map()'は便利に構築されます.
 
find(expr)
 
HTMLコード:
 

<p><span>Hello</span>, how are you?</p> 

 
 
 
jQueryコード:
 

$("p").find("span") ;

 
結果:

[ <span>Hello</span> ] 

≪アクション｜Action｜oraolap≫:指定した式に一致するすべての要素を検索します.この関数は処理中の要素の子孫要素を見つける良い方法です.
ドキュメント処理
 
attr(key,value)
 
HTMLコード:
 

<img/><img/> 

 
jQueryコード:
 

$("img").attr("src","test.jpg");

≪アクション|Actions|ldap≫:一致する要素の属性値を取得または設定します.この方法により、最初のマッチング要素から属性の値を容易に取得することができる.要素に対応する属性がない場合はundefinedを返します.HTMLタグの制御には必須のツールです.
html()/html(val)
 
HTMLコード:
 

<div><p>Hello</p></div>

 
jQueryコード:
 

$("div").html();

 
結果:

<p>Hello</p>

 
 
 
役割:一致する要素のhtmlコンテンツを取得または設定し、同じタイプの方法にはtext()とval()があります.前者はすべての一致する要素の内容を取得します.後者は、一致する要素の現在の値を取得します.3つは,コンテンツの操作によく用いられる類似点がある.wrap(html)
 
HTMLコード:
 

<p>Test Paragraph.</p> 

 
jQueryコード:
 

$("p").wrap("<div class='wrap'></div>"); 

 
結果:
 
 
役割:一致するすべての要素を他の要素の構造化タグで包む.このパッケージは、ドキュメントに追加の構造化タグを挿入するのに最も役立ち、元のドキュメントの意味品質を破壊しません.私たちのDOMを柔軟に修正することができます.Empty()HTMLコード:
 

<p>Hello, <span>Person</span> <a href="#">and person</a></p> 

 
jQueryコード:
 

$("p").empty(); 

結果:

<p></p>

 
≪アクション|Actions|emdw≫:一致する要素セット内のすべてのサブノードを削除します.
 
Ajax処理
load(url,[data],[callback])
url(String):HTMLのWebサイトにロードされます.data(Map):オプションでサーバに送信されるkey/valueデータ.callback(Callback):オプションで、正常にロードされたときのコールバック関数.
 
コード:
 
 

$("#feeds").load("feeds.aspx", {limit: 25}, function(){
   alert("The last 25 entries in the feed have been loaded");
 });

役割:リモートHTMLファイルコードを読み込み、DOMに挿入します.これもJquery操作Ajaxで最もよく使われる最も有効な方法です.
serialize()
 
HTMLコード:

<p id="results"><b>Results: </b> </p>
<form>
  <select name="single">
    <option>Single</option>
    <option>Single2</option>
  </select>
  <select name="multiple" multiple="multiple">
    <option selected="selected">Multiple</option>
    <option>Multiple2</option>
    <option selected="selected">Multiple3</option>
  </select><br/>
  <input type="checkbox" name="check" value="check1"/> check1
  <input type="checkbox" name="check" value="check2" 
checked="checked"/> check2
  <input type="radio" name="radio" value="radio1" 
checked="checked"/> radio1
  <input type="radio" name="radio" value="radio2"/> radio2
</form> 

 
 
 
jQueryコード:
 

$("#results").append( "<tt>" + $("form").serialize() + "</tt>" ); 

≪アクション|Actions|emdw≫:表の内容を文字列としてシーケンス化します.Ajaxリクエストに使用します.
 
ツール
jQuery.each(obj,callback)
コード:

$.each( [0,1,2], function(i, n){
  alert( "Item #" + i + ": " + n );
});//    
$.each( { name: "John", lang: "JS" }, function(i, n){
  alert( "Name: " + i + ", Value: " + n );//    
});

 
 
≪アクション|Actions|emdw≫:オブジェクトと配列をインスタンス化するために使用できる汎用的な例遍メソッド.
jQuery.makeArray(obj)HTMLコード:
 

<div>First</div><div>Second</div><div>Third</div><div>Fourth</div> 

 
jQueryコード:
 

var arr = jQuery.makeArray(document.getElementsByTagName("div"));

 
結果:
 

Fourth
Third
Second
First 

役割:クラス配列オブジェクトを配列オブジェクトに変換します.配列とオブジェクトの間で柔軟に変換できます.
jQuery.trim(str)
役割:これはよく知られているはずですが、文字列の先頭と末尾のスペースを取り除くことです.
小結:実際の開発では他の方法や属性を使う可能性がありますが、以上は個人的に初心者がjQueryを初めて学ぶときに身につけなければならない方法だと思っています.皆さんの勉強の参考にします.何か悪いことがあったら教えてください.
 
 
 
 
 
回転元:http://justjavac.iteye.com/blog/714667