jQuery 学習メモ:
jQuery 学習
1. 基本構文:
$(selector).action()
$: jQuery の定義
selector: セレクター、クエリ、HTML 要素の検索
action(): 要素
で実行されるアクション 例:
$(this).hide()-----現在の要素を非表示
$("p"),hide( )----------すべての p 要素を非表示
$("#ID").hide()-----id=ID の要素を非表示
$("p.Class")- - ------Hide P with class=Class
$(document).ready(function(){-----});
これは、ドキュメントが事前に実行されないようにするために使用されます。 jQueryコードが読み込まれます。
2. セレクターは属性を通じて要素を選択します
$("[href]") href 属性を持つすべての要素を選択します
$("[href='AA']") 属性 href='AA ' を選択します要素
$("[href!='AA']") はすべての href を選択します。 ='AA' element
$("[href$='.jpg']") は、href 値が .jpg
3 で終わるすべての要素を選択します。 セレクターは CSS 属性
$("p ") を選択します。 .css("background-color","red"); すべての p 要素の背景色を赤に変更します
$("div#ID .Class") id=ID を持つ div 要素内のすべての class=Class 要素
4. 名前の競合
var jQMy = jQuery.noConflict() ではなく、jQMy
5. 一般的なイベント
$(document).ready(function) ドキュメントの準備状況イベント
$(selector) ).click(function) 選択された要素のクリックイベント
$(selector).dblclick(function) 選択された要素のダブルクリックイベント
$(selector).focus(function) 選択された要素が取得されますfocus Event
$(selector).mouseover(function) 選択された要素の Mouseover イベント
6. jQuery 効果
$(selector).hide() 選択された要素
$(selector) を非表示にします。選択した要素を表示
$(selector).toggle() 選択した要素を切り替え(表示・非表示)
$(selector).slideDown() 選択した要素を下にスライド(表示)します
$(selector ).slideUp() 選択した要素を上にスライド(非表示)します
$(selector).slideToggle() 選択した要素を上にスライドするか下にスライドするかを切り替えます
$(selector).fadeIn () 選択した要素をフェードインします
$(selector).fadeOut() 選択した要素をフェードアウトします
$(selector).fadeTo() 選択した要素を指定された不透明度にフェードアウトします
$(selector) .animate() でカスタム アニメーションを実行します選択した要素
パラメータ: "slow"、"fast"、"normal"、またはミリ秒
コールバック関数: callback
$("p").hide(1000 ,function(){
alert ("段落は非表示になりました")
});
7. jQuery の HTML 操作
$(selector).html(content) は、選択された要素の (内部) HTML を変更します。 🎜>$(selector).append(content) 選択した要素の (内部) HTML にコンテンツを追加します。 コンテンツを先頭に追加します。
$(selector).after(content) 選択した要素の後に HTML を追加します。
$(selector) .before(content) 選択した要素の前に HTML を追加します
8. jQuery の CSS 操作
$(selector).css(name,value) 一致する要素の style 属性の値を設定します
$(selector ).css({properties}) 一致する要素に複数のスタイル属性を設定します
$(selector).css(name) 最初に一致した要素のスタイル属性値を取得します
$(selector).height(value)一致する要素の高さを設定します
$(selector).width(value) 要素の幅を一致させます
9. jQuery AJAX リクエスト
$(selector).load(url,data,callback)選択した要素にリモート データをロードします
$.ajax(options) リモート データをロードします XMLHttpRequest オブジェクトにロードします
$.get(url,data,callback,type) HTTP GET を使用してリモート データをロードします
$。 post(url,data,callback,type) HTTP POST を使用してリモート データをロードします
$.getJSON(url,data,callback) HTTP GET を使用してリモート JSON データをロードします
$.getScript(url,callback) Loadリモート JavaScript ファイルを実行します
(セレクター) jQuery 要素セレクター構文
(url) ロードされるデータの URL (アドレス)
(データ) サーバーに送信されるデータのキー/値オブジェクト
(コールバック) データがロードされると、関数が実行されました。
( type) 返されるデータのタイプ (html、xml、json、jasonp、script、text)
(オプション) すべてのキーと値のペア完全な AJAX リクエストのオプション