jQuery の例

❮ 前章へ 次へ ❯

jQuery セレクタのスキルを伸ばしたいですか?

この jQuery セレクタ・テスタを試してください。


jQuery セレクタ

$("p").hide()
全ての <p> 要素を非表示にする jQuery hide() メソッドのデモ。

$("#test").hide()
id="test" である要素を非表示にする jQuery hide() メソッドのデモ。

$(".test").hide()
class="test" である要素を非表示にする jQuery hide() メソッドのデモ。

$(this).hide()
現在の HTML 要素を非表示にする jQuery hide() メソッドのデモ。

例の説明


jQuery イベント

jQuery click()
jQuery click() イベントのデモ。

jQuery dblclick()
jQuery dblclick() イベントのデモ。

jQuery mouseenter()
jQuery mouseenter() イベントのデモ。

jQuery mouseleave()
jQuery mouseleave() イベントのデモ。

jQuery mousedown()
jQuery mousedown() イベントのデモ。

jQuery mouseup()
jQuery mouseup() イベントのデモ。

jQuery hover()
jQuery hover() イベントのデモ。

jQuery focus() と blur()
jQuery focus() と blur() イベントのデモ。

例の説明


jQuery Hide/Show

jQuery hide()
jQuery hide() メソッドのデモ。

jQuery hide() と show()
jQuery hide() と show() メソッドのデモ。

jQuery toggle()
jQuery toggle() は hide() と show() の間をトグルする。

jQuery hide()
その他の hide デモ。テキストの一部を非表示にする方法。

例の説明


jQuery フェード

jQuery fadeIn()
jQuery fadeIn() メソッドのデモ。

jQuery fadeOut()
jQuery fadeOut() メソッドのデモ。

jQuery fadeToggle()
jQuery fadeToggle() メソッドのデモ。

jQuery fadeTo()
jQuery fadeTo() メソッドのデモ。

例の説明


jQuery スライド

jQuery slideDown()
jQuery slideDown() メソッドのデモ。

jQuery slideUp()
jQuery slideUp() メソッドのデモ。

jQuery slideToggle()
jQuery slideToggle() メソッドのデモ。

例の説明


jQuery アニメーション

jQuery animate()
jQuery animate() メソッドの簡単な使用方法のデモ。

jQuery animate() - 複数の CSS プロパティ操作
jQuery animate() メソッドを使用して複数の CSS プロパティを操作するデモ。

jQuery animate() - 相対値の使用
jQuery animate() メソッドで相対値を使用するデモ。

jQuery animate() - 定義済の値を使用
jQuery animate() メソッドで定義済の値 "hide"、"show"、"toggle" を使用するデモ。

jQuery animate()
jQuery animate() メソッドを使用するその他のデモ(複数の animate() は、前が終了した後に順次呼び出されます)。

jQuery animate()
jQuery animate() メソッドを使用するその他のデモ(複数の animate() は、前が終了した後に順次呼び出されます)。

例の説明


jQuery アニメーションの停止

jQuery stop() スライド
jQuery stop() メソッドのデモ。

jQuery stop() アニメーション(パラメータ付)
jQuery stop() メソッドのデモ。

例の説明


jQuery HTML コンテンツと属性の取得

jQuery text() と html() - コンテンツの取得
jQuery text() と html() メソッドを使用してコンテンツを取得する。

jQuery val() - コンテンツの取得
jQuery val() メソッドを使用してフォームフィールドの値を取得する。

jQuery attr() - 属性値の取得
jQuery attr() メソッドを使用して属性の値を取得する。

例の説明


jQuery HTML コンテンツと属性の設定

jQuery text()、html()、val() - コンテンツの設定
jQuery text()、html()、val() メソッドを使用してコンテンツを設定する。

jQuery text() と html() - コールバック関数によるコンテンツの設定
コンテンツの設定 + text() と html() 内のコールバック関数使用。

jQuery attr() - 属性値の設定
jQuery attr() メソッドを使用して属性の値を設定する。

jQuery attr() - 複数の属性値の設定
jQuery attr() メソッドを使用して複数の属性値を設定する。

jQuery attr() - コールバック関数による属性値の設定
属性値の設定 + attr() 内のコールバック関数使用。

例の説明


jQuery HTML 要素/コンテンツの追加

jQuery append()
選択した HTML 要素の最後にコンテンツを挿入する。

jQuery prepend()
選択した HTML 要素の先頭にコンテンツを挿入する。

jQuery append() - 幾つかの新規要素を挿入
text/HTML、jQuery、JavaScript/DOM で新規要素を作成し、テキストへその新規要素を追加する。

jQuery after() と before()
選択した HTML 要素の前後にコンテンツを挿入する。

jQuery after() - 幾つかの新規要素を挿入
text/HTML、jQuery、JavaScript/DOM で新規要素を作成し、選択した要素へその新規要素を追加する。

例の説明


jQuery HTML 要素/コンテンツの削除

jQuery remove()
選択した要素を削除する。

jQuery empty()
選択した要素の全ての子要素を削除する。

jQuery remove() - パラメータ付
削除する要素をフィルタリングする。

例の説明


jQuery CSS クラスの取得と設定

jQuery addClass()
いろいろな要素へ class 属性を追加する。

jQuery addClass() - 複数のクラス
addClass() メソッド内に複数のクラスを指定する。

jQuery removeClass()
いろいろな要素から指定のクラスを削除する。

jQuery toggleClass()
指定の要素に対しクラスの追加/削除の間をトグルする。

例の説明


jQuery css() メソッド

jQuery css() - CSS プロパティを返す
最初にマッチした要素から、指定した CSS プロパティ の値を返す。

jQuery css() - CSS プロパティの設定
マッチした全要素に、指定の CSS プロパティ を設定する。

jQuery css() - CSS プロパティの設定
マッチした全要素に、複数の CSS プロパティ を設定する。

例の説明


jQuery ディメンジョン

jQuery - width() と height() を返す
指定した要素の幅と高さを返す。

jQuery - innerWidth() と innerHeight() を返す
指定した要素の inner-width/height を返す。

jQuery - outerWidth() と outerHeight() を返す
指定した要素の outer-width/height を返す。

jQuery - outerWidth(true) と outerHeight(true) を返す
指定した要素の outer-width/height (マージンを含む) を返す。

jQuery - document と window の width() と height() を返す
文書 (HTML 文書) と ウィンドウ (ブラウザのビューポート)の幅と高さを返す。

jQuery - width() と height() の設定
指定した要素の幅と高さを設定する。

例の説明


jQuery 祖先のトラバース

jQuery parent()
jQuery parent() メソッドのデモ。

jQuery parents()
jQuery parents() メソッドのデモ。

jQuery parentsUntil()
jQuery parentsUntil() メソッドのデモ。

例の説明


jQuery 子孫のトラバース

jQuery children()
jQuery children() メソッドのデモ。

jQuery find()
jQuery find() メソッドのデモ。

例の説明


jQuery 兄弟のトラバース

jQuery siblings()
jQuery siblings() メソッドのデモ。

jQuery next()
jQuery next() メソッドのデモ。

jQuery nextAll()
jQuery nextAll() メソッドのデモ。

jQuery nextUntil()
jQuery nextUntil() メソッドのデモ。

例の説明


jQuery トラバースのフィルタリング

jQuery first()
jQuery first() メソッドのデモ。

jQuery last()
jQuery last() メソッドのデモ。

jQuery eq()
jQuery eq() メソッドのデモ。

jQuery filter()
jQuery filter() メソッドのデモ。

jQuery not()
jQuery not() メソッドのデモ。.

例の説明


jQuery AJAX load() メソッド

jQuery load()
<div> 要素内にファイルのコンテンツをロードする。

jQuery load()
<div> 要素内にファイル内における指定要素のコンテンツをロードする。

jQuery load() - callback 付
コールバック関数付の jQuery load()メソッドを使用する。

例の説明


jQuery AJAX get() と post() メソッド

jQuery get()
サーバ上のファイルからデータを取得するために $.get() 使用する。

jQuery post()
リクエストと共にいくつかのデータを送信するために $.post() メソッドを使用する。

例の説明


❮ 前章へ 次へ ❯