Jquery_jquery でよく使用されるメソッドのまとめ-jsチュートリアル-php.cn

//jQuery の利点:

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

$("#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 オブジェクトに変換:

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

//要素の作成:

$("

123

");//属性 title=other と content 123 を持つ

タグを作成します
要素ノード（ラベル名）属性ノード（属性タイトル='xxx'）テキストラベル(123)

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

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

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

;

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

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

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

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

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

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

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

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

var $li_1 = $("

gt;

");//要素ノードのみが作成されます
var $li_2 = $("

");
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); 属性値を削除します

//空のクリア():

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

content(text node)< li> ;)

//選択したノード clone() をコピーします:

clone(true): ノードをコピーします。true の場合、ノードにバインドされているイベントリスナーもコピーされます。書かれていない場合、デフォルトは false です。

$("li").clone()//現在のノードをコピーします

$("li").clone().appendTo("ul");//li ノードをコピーし、ul に追加します (ul の内側に追加します)
$("li").clone(true).appendTo("ul");//li ノードをコピーし、li にバインドされているイベントリスナーをコピーし、一緒に ul に追加します (ul の内側に追加します)

//選択したノードを置換 replaceWith(),replaceAll():

a は置換されるオブジェクトです

b は置換される完全なタグです
a.replaceWith(b);//b は a を置き換えます (次の b は前の a を置き換えます) 後者は前の
を置き換えます b.replaceAll(a);//bReplace a (前の b は次の a を置き換えます) 前部分は次の
を置き換えます

// ps が複数ある場合は置き換えられます

$("p").replaceWith("gt;あなたのガールフレンドの一番嫌いな果物は???");//p タグ全体を < ;strong> に置き換えます。あなたのガールフレンドの果物は何ですか?一番嫌いな果物???

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

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

タグを ID abc

//replaceAll():
$("ママの一番嫌いな果物は何ですか?").replaceAll("#abc");//前者は後者を ID #abc で置き換えますそのタグ
$("

すべての p タグを置き換えました

").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("");//p タグに親タグを追加します。つまり、p タグを タグで囲みます。 ;i> ;

私は p タグです

/*

*/

//wrapAll() :

WrapAll(): すべてのラベルをまとめてラップします。ラップするラベルが一緒になく、途中に他のラベルがある場合でも、ラップするラベルはまとめて移動され、まとめてラップされます。 // パーセル前

aaa

a.wrapAll(b);//すべてのパッケージ

aaa

このようにラップすると出力位置が変わり、エフェクトも変わります

//wrapInner() :

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

Apple

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

エフェクト間の切り替えを指します。初めて切り替えがない場合は、すべてのクラスで構成されるエフェクトを指します。現在のエフェクトと指定したエフェクトを行き来することを意味します