jQuery簡単メモ

これはjQueryを勉強するときに作った簡単なメモです.
私の考えは

これらの簡単なメモに基づいて、彼らの詳細な使い方を思い出します.

同じ効果をどのようにオリジナルJavaScriptで実現するか、あるいはどのようにオリジナルJavaScriptでこれらの方法を書くかをよく考えて、JavaScriptの練習の目的を達成します.

はいくつかのソースコード(初期のjQueryから)を見ることができ、他のフレームワークと比較することで、各フレームワークの長所と短所を理解し、原生JavaScriptと各フレームワーク

を熟知する.
要素の選択$().action
ドキュメントのロードが完了するまで待つ

$(function() {
    //jQuery method
})

$(docuemnt).ready(function() {
    //jQuery method
})

セレクタ

$()
$("selecter")
$("#id")
$(".class")

≪イベント｜Events｜ldap≫

click()

dblclick()

mouseenter()

mouseleave()

mousedown()

mouseup()

hover()

focus()

blur()

非表示/表示

hide()

show()

toggle() $(selector).toggle(speed,callback);

フェードイン/フェードアウト

fadeIn()

fadeOut()

fadeToggle()

fadeTo()不透明度(0-1間)

スライド

slideDown()

slideUp()

slideToggle()

アニメーション(Animation)$(selector).animate({params},speed,callback);

paramsは必須で、ほとんどのCSS属性を操作できますが、Comelネーミング法

を使用する必要があります.

speedオプション、アニメーション実行速度(fast,normal,slow,ミリ秒)

callbackオプション、animate完了後に実行される関数

アニメーションを停止$(selector).stop(stopAll,goToEnd);

stopAllは、アニメーションキューをクリアするかどうかです.デフォルトはfalseです.つまり、現在のアニメーション

のみをクリアします.

goToEndはすぐにアニメーションを完了するかどうかで、デフォルトはfalse

です.
Chaining
同じ要素で実行コマンドに連絡し、次から次へと連絡します.

$("#p1").css("color","red")
  .slideUp(2000)
  .slideDown(2000);

キャプチャ

text()

html()

val()

attr()

設定

text("text")

html("html")

val("value")

attr("attr", "attrValue")

以上の4つの方法にはコールバック関数があり、関数には2つのパラメータがあります.現在の要素はリストの下に表示され、元の(古い)値です.の双曲線コサインを返します.
要素の追加

append()

preppend()

before()

after()

要素の削除

remove()---要素とそのサブ要素を削除する

empty()---サブエレメント

を削除

remove(.class)フィルタ

CSSクラス

addClass()

removeClass()

toggleClass()

css()メソッド

css("propertyname");

css("propertyname","value");

css({"propertyname":"value","propertyname":"value",...});

サイズ

width()

height()

innerWidth()

innerHeight()

outerWidth()

outerWidth()

祖先

parent()

parents("selecter")

parentUntil("selecter")

子孫

children() $(div).children("p.1")

find("selecter")

同胞

siblings("selecter")

next()

nextAll()

nextUntil("selecter")

prev()

prevAll()

prevUntil("selecter")

フィルタリング

first()

last()

eq(0)

filter()

not()

AJAX load()

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){
    if(statusTxt=="success")
      alert("External content loaded successfully!");
    if(statusTxt=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

AJAX get()/post()

$.get()

$.post()

noConflict

var jq = $.noConflict();

JSONP