jQueryチュートリアル
jQuery
は24kの小さなJavaScriptライブラリで、HTMLページで必要なものをほとんど選択するための非常に簡単で強力なセレクタを提供します。さらに、DOMのトラバース、イベント処理(フォーム、ブラウザ、マウス、キーボード)、アニメーションエフェクト、Ajaxを使用してWeb開発を簡素化する革新的な方法も多数用意されています。間違いなくJavaScriptをコード化する方法は変わります。
ハッピーラーニングjQuery。 🙂
jQueryのクイックスタート
jQueryの簡単な使用例
単純なjQueryのhello worldの例で、jQueryライブラリをダウンロードしてHTMLページに組み込む方法を示します。
-
link://jquery/different-call-javascript-and-jquery/[Call
JavaScriptとjQueryの関数]JavaScriptとjQueryで関数を呼び出して、ページが読み込まれた後に動的コンテンツを作成するさまざまな方法を示します。
-
link://jquery/how-to-load-ajax-libraries-google-code/[Load jQuery
[Googleコードから]]GoogleからjQueryライブラリを読み込む方法とその理由を示す例。
jQueryの実用例
いくつかのjQuery実用例と例。
-
link://jquery/how-to-create-a-table-zebra-stripes-effect-jquery/[テーブル
Zebra Stripes effect with jQuery]jQueryでテーブルゼブラストライプエフェクトを作成します(1行だけ)。
-
link://jquery/page-loading-effects-with-jquery/[ページ読み込みエフェクト
with jQuery]jQueryを使用してフェードインページ読み込みエフェクトを作成します。
jQuery]jQueryでページを更新するlocation.reload();
** link://jquery/how-to-stop-a-page-from-exitまたはunload-with-jquery/[Stop
jQueryで終了またはアンロードしたページ]jQueryの “beforeunload”イベントでページを終了またはアンロードします。
-
link://jquery/jqueryでイメージがロードされているかどうかを確認する/[Check if
イメージにjQueryがロードされている場合]イメージがロードされているかどうかを確認するために、jQuery “load()”と “error()”イベントを組み合わせて使用します。
-
link://jquery/要素が存在するかどうかを確認するjquery/[Check if
要素がjQueryで存在するかどうかを確認する方法を示す例]を参照してください。
-
link://jquery/add-remove-css-class-dynamic-in-jquery/[Add/
CSSクラスを動的に削除する]CSSクラスをjQueryで動的に追加/削除する方法を示す例。
-
link://jquery/jqueryで特定のクラス名を持つかどうかをチェックする/[Check
要素に特定のCSSクラスがある場合]+要素が特定のCSSクラスを持つかどうかをjQueryで確認する方法を示す例。
-
link://jquery/how-to-load-javascript-at-runtime-jquery/[Load
jQueryを使用した実行時のJavaScriptライブラリ]jQueryを使用してextrenal JavsScriptライブラリを実行する例を示します。
-
link://jquery/how-to-create-a-jt-with-jquery/[ツールチップの例
with jQuery]jQueryでツールチップ効果を作成する方法を示す例。
-
link://jquery/jquery-library-is-loadの場合のチェック方法/[Check if
jQuery library is loaded]jQueryライブラリがロードされているかどうかを確認する方法。
-
リンク://jquery/how-to-get-delicious-bookmark-count-with-jquery-and-json/[Get
jQuery Ajax関数によるDelicious bookmark count]jQuery Ajaxリモート呼び出しでDeliciousブックマーク数を取得する方法。
-
link://jquery/how-to-highlight-table-row-on-jquery/[ハイライト
hover上のテーブル行レコード]hover上のテーブル行レコードをjQueryでハイライト表示する方法。
jQueryセレクタ
jQueryで必要なものを選択します。
-
link://jquery/jquery-how-to-get-element-with-css-class-name-and-id/[Select
CSSクラス名とid with jQuery]jQuery、$(.classname)と$(#id)でCSSクラス名とidを選択します。
-
link://jquery/jquery-universal-selector-example/[ユニバーサル**
セレクタ]すべての要素、すべてを選択します。
-
link://jquery/select-multiple-elements-in-jquery/[複数選択
要素]jQueryで複数の要素を選択します。
-
link://jquery/jquery-how-to-get-the-tag-name/[タグ名を取得する
jQuery]jQuery tagNameでタグ名を取得します。
-
link://jquery/jquery-how-to-get-the-tag-value-or-element-content/[Get
tag value with jQuery]jQuery .html()でタグ値を取得します。
セレクタと一致しないすべての要素を選択します。
-
空のセレクタ
+
内部に子またはテキストがないすべての要素を選択します。
指定したテキストを含むすべての要素を選択します。
jQuery属性セレクタ
jQueryの属性セレクタに関するすべて
-
link://jquery/jquery-attribute-selector-examples/[属性セレクタ
[]]+
8属性セレクタの例を使用して、jQueryで属性セレクタを使用する方法を示します。
jQuery DOMのトラバース
jQueryでの要素のトラバースに関するすべて。
-
リンク://jquery/jquery-child-and-sibling-selector-example/[子と
兄弟セレクタ]4種類のjQueryの子セレクタと兄弟セレクタの理解:
子セレクタ(A> B)、隣接兄弟セレクタ(A B)、一般兄弟セレクタ(A〜B)の順に選択します。
親のntg-childであるすべての要素を選択します。
-
link://jquery/jquery-first-child-last-child-selector-example/[First
子と最後の子セレクタ]+ ntg-childの略語であるjQueryで最初の子要素または最後の子要素を選択します。
-
link://jquery/jquery-only-child-selector-example/[子のみ
selector]+親の唯一の子であるすべての要素を選択します。
「X」要素の子である「Y」に一致するすべての要素を選択します。
-
link://jquery/jquery-descendant-selector-example/[Descendantセレクタ
(X Y)]「X」要素の子要素、孫要素、孫孫、孫孫、孫の子要素である「Y」の要素をすべて選択します。
-
link://jquery/jquery-general-sibling-selector-example/[一般兄弟
selector(X〜Y)]”X”要素の兄弟である “Y”と一致する要素をすべて選択します。
-
link://jquery/jquery-adjacent-sibling-selector-example/[隣接
兄弟セレクタ(X Y)]”X”要素の兄弟である “Y”にマッチする直後または次の要素を選択します。
一致する要素のセットから特定の要素を選択します(子孫のみ)。
一致する要素のセット(すべてのレベル)から特定の要素を選択します。
-
link://jquery/filter-and-find-in-jquery/との違い
()とfind()の間の例jQueryのfilter()とfind()の間のdiffreentを表示する例です。
一致したセット内の直後の兄弟要素を選択する
要素
**
prev()セレクタ
一致するセット内の直前の兄弟要素を選択する
要素
**
children()selector
+
一致する要素の子を選択します。単一のレベルのみを移動します。
-
link://jquery/find-and-jqueryの違い/[Difference
find()とchildren()の間の例+ jQueryのfind()とchildren()の違いを示す例です。
jQuery DOM操作
jQueryのdom操作に関するすべて。
-
リンク://jquery/jquery-before-and-insertbefore-example/[before()および
insertBefore()example)jQueryと一致する要素の前にテキストまたはHTMLコンテンツを追加します。
-
link://jquery/jquery-after-and-insertafter-example/[after()および
insertAfter()の例)jQueryと一致する要素の後にテキストまたはHTMLコンテンツを追加します。
-
link://jquery/jquery-prepend-and-prependto-example/[prepend()および
prependTo()example]jQueryで一致する要素の内容の前にテキストまたはHTMLコンテンツを追加します。
-
link://jquery/jquery-append-and-appendto-example/[append()および
appendTo()example]+一致した要素の内容の後ろにテキストまたはHTMLコンテンツをjQueryで追加します。
jQueryで一致する要素のコピーを作成する
** link://jquery/jquery-empty-and-remove-example/[空()と削除()
例]+一致した要素をjQueryで削除します。
jQueryを使用して、一致する要素のhtmlコンテンツを取得または設定します。
jQueryを使用して、一致する要素のテキストを取得または設定します。
jQueryのtoggleClassの使い方を示す例 – 一致する要素にクラス名がない場合は追加します。一致する要素にすでにクラス名がある場合は、それを削除します。
一致した要素のそれぞれにHTML要素をラップします。
jQuery HTMLフォーム
jQueryのHTMLフォーム要素のすべて。
-
link://jquery/jquery-form-selector-example/[フォームセレクタ
例]+フォーム要素のjQueryセレクタ:テキストボックス、パスワード、テキストエリア、ラジオボタン、チェックボックス、ファイルのアップロード、非表示の値、選択(ドロップダウンボックス)、送信ボタン、リセットボタン。
jQueryフォームイベント:focus()、blur()、change()、select()およびsubmit()。
-
link://jquery/how-to-get-textbox-value-with-jquery/[テキストボックスを取得する
value]val()を使用してjQueryでテキストボックスの値を取得します。
-
link://jquery/add-remove-textbox-dynamic-with-jquery/[Add/
テキストボックスを削除]jQueryでテキストボックスを追加または削除します。
-
link://jquery/how-to-select-a-jquery付きラジオボタン/[ラジオを選択
ボタン]+ jQueryでラジオボタンを選択します。
-
link://jquery/how-to-set-a-drop-box-value-in-jquery/[Set a
ドロップダウンボックスの値]+ jQueryのドロップダウンボックスの値を設定します。
jQueryでクリックした後に送信ボタンを無効にする。
jQueryエフェクト
jQueryのビルドインエフェクトに関するすべて。
-
link://jquery/jquery-fadein-fadeout-and-fadeto-example/[fadeIn()、
fadeOut()およびfadeTo()の例)jQuery fadeIn()、fadeOut()およびfadeTo()エフェクトについてデモストレーションします。
-
link://jquery/jquery-slideup-slidedown-and-slidetoggle-example/[slideUp()、
slideDown()およびslideToggle()の例)jQueryのslideUp()、slideDown()およびslideToggle()エフェクトについてデモを行います。
-
リンク://jquery/jquery-show-and-hide-example/[show()とhide()
例]+ jQueryのshow()およびhide()エフェクトについて説明します。
jQueryのイベント処理
jQueryでのイベント処理に関するすべて。
-
link://jquery/jquery-bind-and-unbind-example/[bind()とunbind()
例]マッチした要素のイベントハンドラをアタッチまたはアタッチする方法。
-
link://jquery/how-to-trigger-other-elements-jquery付きイベントハンドラ/[Trigger
他の要素イベントハンドラ]jQueryを使用して他の要素のイベントハンドラをトリガする方法。
jQueryブラウザのイベント
jQueryのブラウザイベントに関するすべて。
-
link://jquery/mashable-floating-effect-jqueryの例/[Mashable
ブラウザのscroll()イベントを使用して素晴らしいMashableのスクロールエフェクトを実装する方法を示す例です。
ブラウザのサイズが変更されたことを検出します。
jQueryマウスのイベント
jQueryのマウスイベントに関するすべて。
-
link://jquery/jquery-click-and-dblclick-example/[click()および
dblclick()example]+マウスのシングルクリックを検出し、jQueryをダブルクリックします。
jQueryでマウスの動きを検出します。
-
link://jquery/different-between-mouseover-and-mouseenter-in-jquery/[異なる
mouseover()とmouseenter()の間)+ jQueryでmouseover()とmouseenter()の違いを表示する例です。
-
link://jquery/different-between-mouseout-and-mouseleave-in-jquery/[異なる
mouseout()とmouseleave()の間の例+ jQueryのmouseout()とmouseleave()の違いを表示する例です。
-
link://jquery/jquery-mouseup-and-mousedown-example/[異なる
mouseup()とmousedown()]+ jQueryのmouseup()とmousedown()の違いを表示する例です。
jQueryのキーボードイベント
jQueryのキーボードイベントに関するすべて。
-
link://jquery/jquery-keyboard-events-example/[キーボードイベント
例]キーボードイベント – keyup()、keydown()、keypress()の例。
-
jqueryで確認する
/[Check
Enterキーが押された場合]jQueryキーボードイベントで「Enterキー」が押されたかどうかをチェックする方法を示す例。
-
link://jquery/how-to-detect-copy-paste-and-cut-jqueryの動作/[Detect
コピー、ペースト、カットの動作]jQueryでコピー、ペースト、カットの動作を検出する方法。
jQuery共通問題
いくつかの一般的なjQueryの問題と解決策。
-
link://jquery/jquery-is-working-in-wordpress-solution/[jQuery $()
関数が動作していませんか?]jQuery.noConflict()またはjQuery()でjQueryの競合の問題を回避する方法を示します。
-
link://jquery/jquery-access-to-restricted-uri-denied-solution/[アクセス
制限されたURI拒否]エラー+ “制限されたURI拒否へのアクセス”エラーを解決するソリューション。