ホームページ > ウェブフロントエンド > jsチュートリアル > jQueryの基礎知識まとめ learning_jquery

jQueryの基礎知識まとめ learning_jquery

WBOY
リリース: 2016-05-16 18:15:19
オリジナル
906 人が閲覧しました

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","re​​d"); すべての 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 リクエストのオプション

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート