jQueryでの作業は、ほんの少しですが、慣れていないことが多く、忘れてしまっている基本がたくさんあるので、今すぐ簡単に復習しましょう。
表示/非表示
$("div").hide(1000,"linear",function(){}) //div を隠す
最初のパラメータは、消失の時間を設定します。
2番目のパラメータは、トランジション効果、トランジション効果が遅い、速い、通常を持っています。
3番目のパラメータは、非表示が終了した後に実行する関数です。
$("div").show(1000,"linear",function(){}) //div を表示する
hide() と同じパラメータです。
$("div").toggle(1000,function(){}) //div の表示非表示を切り替える
hide() と同じパラメータ。
フェードイン/フェードアウト
フェードイン/アウトは、show/hide と同じ効果を持ちます。
$("div").fadeIn(1000,function(){}) //非表示の div をフェードインする
最初のパラメータはフェードの時間です。
2番目のパラメータは、フェード終了後に実行される関数です。
$("div").fadeOut(1000,function(){}) //表示されている div をフェードアウトする
fadeIn()と同じパラメータです。
$("div").fadeToggle(1000,function(){}) //スイッチのフェードイン
fadeIn()と同じパラメータ。
$("div").fadeTo(,function(){}) //div に不透明度を持つグラデーションを設定する。
最初のパラメータはグラデーションの時間。
2 番目のパラメータは不透明度 (0 から 1 の間)。
3番目のパラメータは、フェード終了後に実行される関数です。
スライド
スライドの効果はフェードインとフェードアウトに似ています。
$("div").slideDown(1000,function(){}) //div をスクロールダウンする
最初のパラメータはスライドの長さです。
2番目のパラメータは、スライド効果が終了した後に実行される関数です。
$("div").slideUp(1000,function(){}) //スライドアップ div
slideDown() と同じパラメータです。
$("div").slideToggle(1000,function(){}) //スライドダウンを切り替える
引数はslideDown()と同じ。
アニメーション
$("div").animate({xxx},1000,function(){}) //カスタムアニメーション
最初のパラメータは、複数のcssプロパティのコレクションです。
注意: いくつかのcss属性は、{paddingLeft : "10px"}のようにキャメルバックで記述する必要があります。
2番目のパラメータ、アニメーションの継続時間
第3パラメータ：アニメーション終了後に実行する関数
$("div").stop(false,false) //アニメーションやエフェクトが終了する前に停止する
最初のパラメータは、アニメーションキューをクリアするかどうか、デフォルトはfalseです。
2番目のパラメータは、現在のアニメーションを直ちに終了するかどうか、デフォルトはfalseです。
メソッドの連鎖
jQueryは、スライドを例として、次の形式で記述することができます。
$("div").css("color","red").slideUp(1000).slideDown(1000) //赤いdivが上下にスライドする効果を得る
利点：このように書くと、ブラウザは同じ要素を何度も探す必要がありません。
上記のすべてのメソッドのパラメータ1000は、"slow "と "fast "の設定に加えて、ミリ秒数を表しています。クラスの追加/削除
$("div").addClass("demo") //divのデモにclassの値を追加する
$("div").removeClass("demo") //divでdemoクラスの値を削除する
$("div").toggleClass("demo") //追加する/指定されたクラスの値を削除する demo
要素の追加/削除
$("p").append("テキストを追加する") //p要素の最後に
$("p").prepend("追加テキストの冒頭") //p要素の先頭に
$("img").after("の後にテキストを追加する。") //img要素の後に
$("img").before("前にテキストを追加する") //img要素の前に
$("div").remove() //div とその子を削除する
$("div").remove(".italic") //クラスを含むオブジェクトを削除する="italic"XMLHttpRequestオブジェクトを含む
$("div").empty() //div 内の子要素を削除する
サイズ
$("div").width() //div の幅を設定または返す
$("div").height() //div の高さを設定または返す
$("div").innerWidth() //div の幅を返す
$("div").innerHeight() //div の高さを返す
$("div").outerWidth() //div の幅を返す
$("div").outerHeight() //div の高さを返す
祖先
$("div").parent() //親要素を返す
$("div").parents() //すべての祖先要素を返す
$("div").parents("ul") //ul要素のすべての祖先要素を返す
$("div").parentsUntil("span") //のすべての要素の間にdivとspanを返す。
子孫
$("div").children() //すべての直接の子要素で div を返す
$("div").children("p") //すべてのp要素でdivを返す
$("div").find("span") //すべての span 要素で div の子孫を返す
$("div").find("*") //すべての子孫要素を div で返す
兄弟姉妹
$("div").siblings() //戻り値 div すべての兄弟要素
$("div").siblings("p") //p要素のすべての兄弟要素のdivを返す
$("div").next() //div の次の兄弟要素を返す
$("div").nextAll() //要素のすべての兄弟が続く div を返す。
$("h2").nextUntil("h6") //要素のすべての兄弟の間のh2からh6を返す
同様に、prev(), prevAll(), prevUntil() も上記と同様で、選択された要素の兄弟姉妹を返します。
フィルタリング
$("xxx").first() //選択された最初の要素に戻る
$("xxx").last() //最後に選択された要素に戻る
$("p").eq(1) //1 番目の p 要素、つまり 2 番目の p 要素のインデックス番号を返す。
$("p").filter(".url") //pタグにurlクラスの要素を返す
$("p").not(".url") //クラスに加えて="url"pタグの外側
Ajax load()
load()は、サーバーで直接データをロードし、返されたデータを選択された要素に配置します。
$("div").load("demo.txt") //デモ.txtdiv に読み込まれたコンテンツの
$("div").load("demo.txt #p1") //デモ.txtid="p1"要素のコンテンツがdivに読み込まれる
$(select).load(url,data,callback)
最初のパラメータ url は、アクセスのアドレスです。
2番目のパラメータdata、要求されたキーと値のペア
3番目のパラメータcallback、コールバック完了後のload()メソッド
コールバック関数には3つのパラメータがあり、responseTxtには呼び出しに成功した結果、statusTxtには呼び出しのステータス、xhrにはXMLHttpRequestオブジェクトが格納されます。
例えば
$("div").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("外部コンテンツが正常に読み込まれた!");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
