JQuery常用操作まとめ

一、スタイル属性操作
1.addClass():選択された要素に1つ以上のクラスを追加
2.removeClass():選択した要素から1つ以上のクラスを削除
3.toggleClass():選択した要素のクラスの追加/削除を切り替える
4.css():スタイル属性の設定または戻し
例:
$('p').css('color')/取得
$('p').css('color','red') ;//設定
5.removeAttr():選択した要素から属性を除去
例:
$('button').click( function(){$('p').removeAttr('id class');} );
二、要素操作
1.remove():選択した要素とそのサブ要素を削除
2.empty():選択した要素からサブ要素を削除
3.unwrap():選択した要素の親要素を削除
4.wrap():一致するすべての要素を他の要素の構造化タグで包む
例:
$("p").wrap("");//すべての段落を新しく作成したdivで包み、wrap()と組み合わせて使用
5.replaceWith():一致するすべての要素を指定したHTMLまたはDOM要素に置き換える
6.replaceAll(selector):selectorが一致するすべての要素を一致する要素に置き換えます.
三、コンテンツの取得/属性の設定
1.text():選択した要素のテキスト内容を設定または返す
2.html():選択した要素の内容を設定または返す
3.val():フォームフィールドの値を設定または戻します.
4.attr():選択した要素の属性値を設定または返します.
5.width()/height():要素の幅を設定または戻します(内側と外側の余白、枠線は含まれません).
6.innerWidth()/innerHeight():幅(内側マージンを含む)
7.outerWidth()/outerHeight():幅(内側の余白と枠線を含む)
四、元素シフト
 insertAfter()、appendTo()、after()、append()、prepend()、before()
1.appendTo():選択した要素の最後に内容を挿入する
2.prepend():選択された要素の先頭に内容を挿入する
3.after():選択した要素の後に内容を挿入する
4.before():選択された要素の前に内容を挿入
五、JQuery遍歴
1.DOMツリーを上に移動:parent()、parents()、parentsUntil()
注意:parentsUntil()メソッドは、2つの指定された要素の間にあるすべての祖先要素を返します.
2.DOMツリーを下に回る:children()、find()
注意:前者は次のレベルのみ、後者はすべての要素を探します.
3.水平遍歴:siblings()、next()、nextAll()、nextUntil()、prev()、prevAll()、prevUntil().
注意:siblings()は、選択した要素のすべての同胞要素を返します.
next()は、選択された要素の次の同胞要素を返します.
nextUntil()は、2つの与えられたパラメータ間のすべての同胞要素を返します.
prevクラスは前の同胞要素に戻ります
4.フィルタリング:first()、last()、eq()、filter()、not()
5.each()メソッドは、一致する要素ごとに実行する関数を規定する

$("button").click(function(){
  $("li").each(function(){
    alert($(this).text())
  });
});

七、高級用法と便利関数(new!!!)
1.jQueryプラグインの作成
jQuery.fn.extend-jQuery要素セットを拡張して新しい方法を提供
jQuery.fn.test-testはカスタム関数名
例:

 $.fn.check = function(){
    return this.each(function() { this.checked = true; });
 }

使用方法:$(「input[type=checkbox]).check();
2.データキャッシュ
Data(key,value)-要素にデータを格納または読み出し、jQueryオブジェクトを返します.
removeData()-キャッシュの削除
例:

$("div").data("blah");  // undefined
$("div").data("blah", "hello");  // blah   hello
$("div").data("blah");  // hello
$("div").data("blah", 86);  //    86
$("div").data("blah");  //  86
$("div").removeData("blah");  //  blah
$("div").data("blah");  // undefined

3. 高速検出データ型
$.type(obj)-objのデータ型を検出
例:

jQuery.type("test") === "string"      
jQuery.type(function(){}) === "function"        
jQuery.type([]) === "array"      
jQuery.type(new Date()) === "date"        
jQuery.type(/test/) === "regexp"

4.オブジェクトのマージ、コピー
$.extend-1つ以上の他のオブジェクトでオブジェクトを拡張し、拡張されたオブジェクトを返します.
例:

var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);
//    ：
//settings == { validate: true, limit: 5, name: "bar" }

$.extendのもう一つの使い方はコピーです
例:

var x = {a:1, b:2, c:3};
var y = {};
jQuery.extend(true, y, x);
//y = {a:1, b:2, c:3};

最初のパラメータがtrueに設定されている場合は、再帰マージ(深コピー)
八、jQuery運動特効
1.非表示/表示
hide(speed,callback)、show()、toggle()の両者間切替
注意:オプションspeedパラメータ:「slow」、「fast」またはミリ秒、オプションcallbackパラメータは、動作実行後に実行される関数名です(以下同じ).
2.フェードアウト
fadeIn(speed,callback)、fadeOut()、fadeToggle()、fadeTo()
3.スライド方法
slideDown(speed,callback)を下に展開し、slideUp()を上に収め、slideToggle()
4.jQueryアニメーション
①animate()、stop()        $(selector).animate( {params},speed,callback );
注意:animate()を使用する場合は、アルパカ法書を使用してすべての属性名を書く必要があります.たとえば、次のようにします.

$("button").click(function(){
  $("div").animate({paddingLeft:'50px'});
});

②animate()はキュー機能をサポートし、複数のanimateを使用すると、1つずつ呼び出されます.たとえば、次のようになります.

$("button").click(function(){
    var div = $("div");
    div.animate({height:'300px',opacity:'0.4'},'slow');
    div.animate({width:'300px',opacity:'0.8'},'slow');
    div.animate({height:'100px',opacity:'0.4'},'slow');
    div.animate({height:'100px',opacity:'0.8'},'slow');
})

2016/12/6以降更新・・・
2018/7/3更新、高度な使い方と便利な関数を追加