Jquery_jquery でよく使用されるメソッドのまとめ

//jQuery の利点:

1 軽量
2 つの強力なセレクター
3 DOM 操作の優れたカプセル化
4 信頼性の高いイベント処理メカニズム
5 完璧な Ajax
6 最上位の変数を汚さない
7 優れたブラウザ互換性
チェーン操作モード
9 暗黙的な反復
10 動作は構造層から分離されました
11 豊富なプラグインのサポート
12 完全なドキュメント
13 オープンソース

629e799adbc9dadfcd341ee6c7f26ebfここにはコードを使用できません2cacc6d41bbb37262a98f745aa00fbf0

$("#foo") と jQuery("#foo") は同等です
$.ajax と jQuery.ajax は同等です $ 記号は jQuery

の略称です

// window.onload : $(function(){ })
$(function(){ }) は、js の window.onload イベントに相当します。これだけは window.onload
と同じです。 ただし、window.onload は 1 つしか書き込めませんが、$(function(){ }) は複数の
を書き込むことができます。 略語がない場合は $(document)ready(function(){ })

//チェーン操作スタイル:

    $(".level1>a").click(function(){
      $(this).addClass("current") //给当前元素添加"current"样式
      .next().show(); //下一个元素显示
      .parent().siblings()//父元素的同辈元素
      .children("a") //子元素<a>
      .removeClass("current")//移出"current"样式
      .next().hide();//他们的下一个元素隐藏
    return false;
    })

//jQuery オブジェクトを DOM オブジェクトに変換します:

1 jQuery オブジェクトは配列のようなオブジェクトであり、対応する DOM オブジェクトは [index] メソッドを通じて取得できます

var $cr = $("#cr");//jQuery オブジェクト
var cr = $[0] //DOM オブジェクト
;

2 jQuery 自体によって別のメソッドが提供され、対応する DOM オブジェクトは get(index) メソッドを通じて取得されます

var $cr = $("#cr");//jQuery オブジェクト
var cr = $cr.get(0);//DOM オブジェクト

//DOM オブジェクトを jQuery オブジェクトに変換します:

DOM オブジェクトの場合、DOM オブジェクトを $() でラップするだけで jQuery オブジェクトを取得できます。
メソッドは次のとおりです: $(DOM オブジェクト);

var cr = document.getElementById("cr");//DOM オブジェクト
var $cr = $(cr) //jQuery オブジェクト

//競合を解決します:

1 他の JS ライブラリが jQuery ライブラリと競合する場合、いつでも jQuery.noConflict() 関数を呼び出して、変数 $ の制御を他の JavaScript ライブラリに移すことができます

    var $jaovo = jQuery.noConflict();
    $jaovo(function(){
      $jaovo("p").click(function(){
        alert($jaovo(this).text());
      });
    });

2 「jQuery」を直接使用して jQuery の作業を行うことができます

    jQuery(function(){
      jQuery("p".click(function(){
        alert(jQuery(this).text());
      }));
    });

//jQuery セレクター

1 基本セレクター
基本セレクターは、jQuery で最も一般的に使用されるセレクターであり、要素 ID、クラス、タグ名

を通じて DOM 要素を検索します。

//jQuery :

ラベルオブジェクトを取得するだけです。これは配列です。

//jQuery オブジェクト取得:

$("p");//すべての p タグ オブジェクトを取得 ---- 取得されたオブジェクトは配列です
$("#aa");//ID aa のタグのオブジェクトを取得 --- 取得されるオブジェクトは配列
$(".aaa");//クラス aaa のタグのオブジェクトを取得 --- 取得されるオブジェクトは配列

//jQuery オブジェクトと DOM オブジェクト間の変換:

jQuery メソッドと DOM メソッドを相互に使用 (呼び出し) することはできませんが、オブジェクトは相互に変換できます
$("p");//jQuery オブジェクトです
Document.documentElementsTagName("p");//DOM オブジェクトです
$(document.documentElementsTagName("p"));//DOM オブジェクトを jQuery オブジェクトに変換します
$("p").get(1);//これは DOM オブジェクトです、
Get(1); 配列 p の 2 番目の桁を表します (添え字 1 は 2 番目の桁です)
$($("p").get(1));//jQuery オブジェクトは

に変換されます

//jQuery オブジェクトを DOM オブジェクトに変換:

1 jQuery オブジェクトは配列のようなオブジェクトであり、対応する DOM オブジェクトは [index] メソッドを通じて取得できます
var $cr = $("#cr");//jQuery オブジェクト
var cr = $[0] //DOM オブジェクト
; 2 jQuery 自体によって別のメソッドが提供され、対応する DOM オブジェクトは get(index) メソッドを通じて取得されます
var $cr = $("#cr");//jQuery オブジェクト
var cr = $cr.get(0);//DOM オブジェクト

//DOM オブジェクトを jQuery オブジェクトに変換:

DOM オブジェクトの場合、DOM オブジェクトを $() でラップするだけで jQuery オブジェクトを取得できます。
メソッドは次のとおりです: $(DOM オブジェクト);

var cr = document.getElementById("cr");//DOM オブジェクト
var $cr = $(cr) //jQuery オブジェクト

//要素の作成:

$("1a13e0f18c2398e8800483d008584a7e123bed06894275b65c1ab86501b08a632eb");//属性 title=other と content 123 を持つ 25edfb22a4f469ecb59f1190150159c6 タグを作成します
要素ノード（ラベル名） 属性ノード（属性タイトル='xxx'） テキストラベル(123)

//text() テキスト ノード:

text(): 選択したタグの内部テキスト (人間の目に見える内容) を取得する関数/メソッド
                                                                                                    var li = $("li").text();//li のテキスト ノードのデータ (つまり、123 の内容) を取得します

//attr() 属性の取得/属性の設定/属性の変更:

f9c858b17a39ec55ef2776c60045f8c494b3e26ee717c64999d7867364b1b4a3;

var i = $("p").attr("title");//これは、p タグの title 属性の値を取得します

$("p").attr("title"," bbb");//p タグの title 属性の値を bbb
に変更します

//removeAttr() は、指定された要素の属性値を削除します:

removeAttr(xx,xx); 属性値を削除します

f6e9e54d119fe1113c429e488876afb0あなたの好きな果物は何ですか?94b3e26ee717c64999d7867364b1b4a3
$("p").removeAttr('title',"あなたの最もお気に入り");//pタグ内のtitle属性の値(最もお気に入りのもの)を削除します

//append() 要素を追加します:

一致した子要素を指定された親要素に追加します。

関数チェーン呼び出し: チェーン呼び出しはなぜ使用できるのですか?
これは、前の関数が
と呼ばれたオブジェクトを返しているためです。 たとえば、a の下の a.append(b).append(c) は親タグ オブジェクトであり、関数を呼び出してそれに b を追加しても、戻り値は a のオブジェクトのままであるため、関数を呼び出して、それに c を追加します

//a、b、c はすべてラベル オブジェクトです

var $li_1 = $("

gt;bed06894275b65c1ab86501b08a632eb");//要素ノードのみが作成されます
var $li_2 = $("25edfb22a4f469ecb59f1190150159c6bed06894275b65c1ab86501b08a632eb");
var $parent = $("ul");

$parent.append($li_1).append($li_2);
a.append(b);// a の末尾に b を追加します (追加)。a は親タグ、b は子タグです
a.append(c);// c を a の最後に追加します (追加)。a は親タグ、c は子タグです
a.append(b).append(c);// b と c を a に追加します。B と c はピアですが、b は c の上にあります (連鎖呼び出しの追加)
a.prepend(b)// a の前に b を追加します a は親タグです b は子タグ
a.insertAfter(b);//（同世代の）bの後ろにaを追加します

a.insertBefore(b);// (同世代の) b の前に a を追加します
//モバイルノードを呼び出します
// 一致した要素の前に指定した要素を挿入します (specified element.insertBefore("matched element"))

//appendTo() は要素を追加します:

//a はオブジェクト b はタグ名
appendTo(): 指定された要素を一致する要素のセットに追加します

$("li").appendTo("ul");//li タグを ul
に追加します a.appendTo("b"); //はい、b が a に追加されます (a はラベル、b はラベルです)
指定された要素.appendTo(一致する要素);

//要素を削除（非表示）remove():

a.remove();//HTML から a を削除します (非表示)
var $li = $("ul li:eq(1)").remove();//ul eq(1) の 2 番目の li タグを削除します。これは添字 1 を持つ li 要素であり、これは li 要素 2 です。 、下付き文字は 0 から始まるため
$li.appendTo("ul");//削除したばかりの要素を ul
に再追加します $("ul li").remove("li[title !=Apple]");//title 属性が Apple のものではない ul 要素内の li 要素をすべて削除します

//removeAttr() は、指定された要素の属性値を削除します:

removeAttr(xx,xx); 属性値を削除します
f6e9e54d119fe1113c429e488876afb0あなたの好きな果物は何ですか?94b3e26ee717c64999d7867364b1b4a3
$("p").removeAttr('title',"あなたの最もお気に入り");//pタグ内のtitle属性の値(最もお気に入りのもの)を削除します

//空のクリア():

$("ul li:eq(1)").empty();//ul の 2 番目の li 要素を見つけて、コンテンツを削除します (text ノード,25edfb22a4f469ecb59f1190150159c6content(text node)744eec72f2b4a09d4d5082e1cc972086

//複数の PS があり、1 つだけを置き換えたい場合

$($("p").get(1)).replaceWith("8e99a69fbe029cd4e2b854e244eab143あなたのガールフレンドの一番嫌いな果物は???128dba7a3a77be0113eb0bea6ea0a5d0");//最初の 2 つの p のみを置き換えますタグが置き換えられました
置換するタグに ID を追加することもできます。つまり、1 つだけが置換されます
$("#abc").replaceWith("25edfb22a4f469ecb59f1190150159c6タグを ID abcbed06894275b65c1ab86501b08a632eb")

//replaceAll():
$("8e99a69fbe029cd4e2b854e244eab143ママの一番嫌いな果物は何ですか?128dba7a3a77be0113eb0bea6ea0a5d0").replaceAll("#abc");//前者は後者を ID #abc で置き換えます そのタグ
$("25edfb22a4f469ecb59f1190150159c6すべての p タグを置き換えましたbed06894275b65c1ab86501b08a632eb").replaceAll("p");//先頭は次の

を置き換えます

//ラップ Wrap() wraoAll() WrapInner() :

//wrap() :

Wrap(): 一致した要素を新しい HTML タグでラップします。
a ラベル オブジェクト (ラップされた) b はラベル (b ラベルでラップされた)
すべての a タグはラップされます
a.wrap(b);
// a タグがある場合は、次のようにラップします:
Out＆lt; b＆gt; // a タグが複数ある場合は、
で囲みます。 Out＆lt; b＆gt; Out＆lt; b＆gt; Out＆lt; b＆gt; それぞれをまとめてラッピング分別しております
。 a.wrap("b");// a に親タグを追加します。 a は b
でラップされます。                                                                                             $("p").wrap("5a8028ccc7a7e27417bff9f05adf593272ac96585ae54b6ae11f849d2649d9e6");//p タグに親タグを追加します。つまり、p タグを 5a8028ccc7a7e27417bff9f05adf5932 タグで囲みます。 ;i> ;e388a4556c0f65e1904146cc1a846bee私は p タグです94b3e26ee717c64999d7867364b1b4a372ac96585ae54b6ae11f849d2649d9e6
/*
                                                                                                                                                                                                                                                         72ac96585ae54b6ae11f849d2649d9e6
*/


//wrapAll() :

WrapAll(): すべてのラベルをまとめてラップします。ラップするラベルが一緒になく、途中に他のラベルがある場合でも、ラップするラベルはまとめて移動され、まとめてラップされます。 // パーセル前
                                                                                                                                  e388a4556c0f65e1904146cc1a846beeaaa94b3e26ee717c64999d7867364b1b4a3
                                                                                                                              a.wrapAll(b);//すべてのパッケージ
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 e388a4556c0f65e1904146cc1a846beeaaa94b3e26ee717c64999d7867364b1b4a3
このようにラップすると出力位置が変わり、エフェクトも変わります


//wrapInner() :


WrapInner(): 一致するタグのコンテンツに指定されたタグを追加します (元のタグにサブタグを追加し、親タグのテキスト コンテンツを保存するのと同じです)
                                                                                                                      a.wrapInner("b");//結果は次のようになります: 3499910bf9dac5ae3c52d5ede7383485a4b561c25d9afb9ac8dc4d70affff4191230d36329ec37a2cc24d42c7229b69747a5db79b134e9f6b82c0b36e0489ee08ed b タグを使用してコンテンツを a
で囲みます。                                                                                                                                                                                                                                 $("li").wrapInner("5a8028ccc7a7e27417bff9f05adf593272ac96585ae54b6ae11f849d2649d9e6");//結果は次のようになります: d5b01ed333f292e161ef5c96ce4fe97f5a8028ccc7a7e27417bff9f05adf5932Apple72ac96585ae54b6ae11f849d2649d9e6c256c6e1402846981862b5dcc9125d2b

5a8028ccc7a7e27417bff9f05adf5932Apple72ac96585ae54b6ae11f849d2649d9e6                                                                                      

//エフェクト切り替え toggleClass():

エフェクト間の切り替えを指します。初めて切り替えがない場合は、すべてのクラスで構成されるエフェクトを指します。 現在のエフェクトと指定したエフェクトを行き来することを意味します
080b747a20f9163200dd0a7d304ba388
.high{
font-weight:bold; /* 太字フォント */
色: 赤。 }

.another{

font-style:italic; カラー:ブルー; }
                                                                                      95b0cd14635d3971f49a8c121fdb1d41好きな果物は何ですか?

$("p").toggleClass("another ");//実際には、この関数がトリガーされると、クラスが高い場合に、another と高さを変更するのと同じになります。は赤色の文字で表示されます。別のクラスの場合は青色の文字で表示されます。 したがって、この関数がトリガーされると、色が一度変更されます。これは、$("p").toggleClass(" の後のクラスと p タグです。 another")

内の元のクラスを切り替えます

//要素に特定のスタイルが含まれているかどうかを判断します hasClass():


$("p").hasClass("MyClass");//p タグに MyClass というクラス属性があるかどうかを判断します
$("p").is("MyClass");//上記と同じ


//html() および text():

df1c6a2d3486e5066bc5717ed506700aあなたの好きな果物は何ですか?94b3e26ee717c64999d7867364b1b4a3
$("p").html();//これは p タグです。2 つのタグ (e388a4556c0f65e1904146cc1a846bee94b3e26ee717c64999d7867364b1b4a3) 間のコンテンツは、p の innerHTML と同等です。 ;あなたの一番好きな果物は何ですか?128dba7a3a77be0113eb0bea6ea0a5d0
$("p").text();//p タグ内のテキスト データ (テキスト ノード) であり、次のようになります: あなたの好きな果物は何ですか?

//フォーカスの取得と喪失 focus() Blur() :

focus(): フォーカスを取得
Blur(): フォーカスを失います
Focus（フォーカス機能（）{ステートメント操作}を取得するために実行する必要がある方法とステートメント）
$("タグ名 (#ID名) (.クラス名)").blur(フォーカスを失ったときに実行する必要があるメソッドとステートメント function(){ステートメント操作})

//value() 値の取得/変更defaultValue:

f77c657c5de2a8df3a155d6d00043d9c

//デフォルト値:
value のデフォルト値を表します。コードを記述するときに設定される値です。defaultValue
とは何ですか。 通常、判断に使用されます
If (txt_value == ""){//値が空の場合、開始デフォルト値を value
に割り当てることを意味します 入力ボックスを設定するために使用されます。入力ボックスが何も出力しない場合は、デフォルト値が入力されます（入力ボックスがフォーカスされていない場合は、デフォルト値が入力ボックスに表示されます。フォーカスを取得した後は、デフォルト値が入力されます）。顧客が何も入力しない場合、値は削除され、デフォルト値が値に戻されます。これは、顧客に何も入力されていないことを通知するために使用されます)
$("input").val($("input").defaultValue)
}

//子要素の数を表示しますchildren() (子要素のみ、子要素の子要素、カウントされません、直接の子要素は子要素です):

$("タグ").children();
tag.children();
の jQuery オブジェクト                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    5db79b134e9f6b82c0b36e0489ee08ed
$("a").children();//a の子要素は b と d だけなので 2 です

$("b").children();//b には 1 つの子要素 ​​c
しかないため、1 になります。
$("d").children();//d には子要素がないので 0 です

//兄弟要素、next()、prev()、兄弟要素():

next();//同じ世代の次の要素

prev();//同じ世代の前の要素 兄弟();//すべての兄弟要素 a4b561c25d9afb9ac8dc4d70affff4191230d36329ec37a2cc24d42c7229b69747a

f6e9e54d119fe1113c429e488876afb0あなたの好きな果物は何ですか?94b3e26ee717c64999d7867364b1b4a3

ff6d136ddc5fdfeffaf53ff6ee95f185
d5b01ed333f292e161ef5c96ce4fe97fApplebed06894275b65c1ab86501b08a632eb
4a2a091da3d5ac58ee2d46f3042c0d29オレンジbed06894275b65c1ab86501b08a632eb
8528e5efc56280925b5d285b897a5f2aパイナップルbed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
5a8028ccc7a7e27417bff9f05adf593245672ac96585ae54b6ae11f849d2649d9e6

// 例: next()

var p= $("p").next();
p.html();//p 要素のピアの次の要素の内容 (innerHTML に相当)、結果は次のようになります:
& Lt; タイトル = 'リンゴ' & gt;/リ & gt; ＆lt; li title = 'orange'＆gt; orange＆lt;/li＆gt;
で p のピアの次のタグは ul,ff6d136ddc5fdfeffaf53ff6ee95f185これが html() の内容です929d1f5ca49e04fdcb27f9465b944689
------------------------
// prev()

var p = $("p").prev();

p.html();//p のピア要素、つまり b 要素の前の桁です b 要素の html() は 123 なので、123

です。
123

------------------------

// 兄弟()

var p = $("p").siblings();//すべての要素が配列になりました

p.html(); //これは配列であるため、123 になります。出力される場合、最初のものが出力されるため、b タグの内容は 123 になります。すべての内容を確認するには、走査する必要があります。 🎜> for(var i =0;p.length;i ){

alert(p[i].innerHTML);//これがすべてのコンテンツですが、なぜ innerHTML を使用するのですか?
//p は jQuery オブジェクトであるため、jQuery オブジェクトの後に添字が続く場合は DOM オブジェクトとなるため、innerHTML のみを使用できます。これは jQuery オブジェクトの html() メソッドと同じ機能です
//alert() は通常のポップアップ ボックスです
//結果は次のようになります:
123
あなたの好きな果物は何ですか?
アップル
オレンジ
パイナップル
456
}


//イベント委任メカニズム:

イベント委任メカニズム: 要素を見つけてその属性を変更する必要がありますが、この要素が見つかるかどうかわからないため、一時変数を使用してイベントをそれに委任し、要素を探します見つかったら、インシデントを に転送します。

// $(custom variable.target).closest("探している要素").css("見つかった後の属性", "属性値を変更する")

// ここでは、オブジェクトをクリックして検索を開始します (a をクリックすると、まず a を探し、次に spa を探し、次に p を探し、次に body を探し、正しいタグが見つかるまで、オンラインで検索するのはやめてください)

$(document).bind("click",function(e){
$(e.target).closest("body").css("color","re​​d");
})
//$(document).bind("click",function("p"){
// $ ("p").Css ("色", "赤"); //

//ドキュメント: ドキュメント全体を表します。ドキュメント内の不確実なオブジェクトを照合したいので、この形式を使用しました。
//e: 探している特定の要素を指します。これは不特定の値です。$(e.target) は不特定のオブジェクトです
// 不特定のマッチングから、一致する人が
                                                                                       

                                                                                                                               
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   で で で 929d1f5ca49e04fdcb27f9465b944689
                                                                                       

//オブジェクトの左マージンと上マージンを取得します offset():


使用法:
jQuery object.offset();
jQuery object.offset().left/top;
var $p = $("p").offset();//配列である p の左マージンと上マージンを取得します
$p.left;//取得した値は左マージン
$p.top;//取得した値が上マージン

//座標と表示を設定、show():

Object.css().show("slow(遅い)"/"normal(普通)"/"fast(速い)");

あらかじめ決められた 3 つの速度 (「遅い」、「標準」、「速い」) のいずれかの文字列、またはアニメーションの継続時間を表すミリ秒の値 (1000 など)
$("#id").mouseover(function(e){
//e はネイティブ JS のevent
と同等です // e (マウスオーバー) によってトリガーされるイベント オブジェクトである div 要素を作成します。これは、トリガーされたときのイベント ソース オブジェクト (HTML タグを参照) を表します
var tooltip = "c4f2e5f2cda17ebc51ceca5f4bbed902" this.title "16b28748ea4df4d9c2150843fecfba68";
$("body").append(tooltip); // ドキュメントに追加します

$("#tooltip").css({

"top":e.pageY "px", "left":e.pageX "px", "幅":"300px"

}).show("fast"); //x 座標と y 座標を設定して表示します。ここでの e は、イベント ソースがこのイベントをトリガーしたときのイベントとマウスの交点の座標です。これを表すボックスの左上隅の座標

})