ホーム > コンテント (全6件)
  • 要素に指定された実行中のアニメーションを中止する

    body要素のアニメーションを中止する。

    $( 'body' ).stop();

// 実行中のアニメーションを中断し、背景を黒くするアニメーションを実行する
$( 'body' ).stop().animation( { backgroundColor: "#000000" }, 1000} );

    アニメーションは要素別のキューに保存されており、stop関数はそのキューを空にする。キューが空で次のアニメーションが指定されている場合は、すぐに次のアニメーションが実行される。

    キーワード:
  • 要素を複製する

    先頭のtr要素を複製して末尾に追加する

    $( 'tr:last' ).after( $( 'tr:first' ).clone( true ) );

    clone関数により指定した要素（子要素を含む）を複製できる。引数はその要素に割り当てられたイベント設定も同時に複製するかどうかの指定で、trueの場合はイベント設定も複製される。
    複製した要素が子要素としてinputタグを含む場合、value属性値は複製時に設定されている値にならない場合（jQuery 1.9.1など）があるので注意が必要。

    キーワード:
  • コンテンツを挿入する

    IDがlistのUL要素内の先頭にLI要素を挿入する

    $('ul#list').prepend( '<li>アイテム0</li>' );

<!-- html部分 -->
<ul id="list">
<li>アイテム1</li>
<li>アイテム2</li>
</ul>

    機能は、$('ul#list').html( '<li>アイテム0</li>'+$('ul#list').html() );と同じ。なお末尾に追加する場合はappend関数を使う。

    キーワード:
  • コンテンツを追加する

    IDがlistのUL要素内の末尾にLI要素を追加する。

    $('ul#list').append( '<li>アイテム3</li>' );

<!-- html部分 -->
<ul id="list">
<li>アイテム1</li>
<li>アイテム2</li>
</ul>

    機能は、$('ul#list').html( $('ul#list').html()+'<li>アイテム3</li>' );と同じ。なお先頭に挿入する場合はprepend関数を使う。

    キーワード:
  • jQuery UIのアコーディオンを使う

    IDがlistの要素にアコーディオンを適用する。

    $(document).ready( function () {
	$( '#list' ).accordion();
}

<!-- html部分 -->
<div id="list">
<h3><a href="#">見出し1</a></h3>
<div>ここに見出し1の中身</div>
<h3><a href="#">見出し2</a></h3>
<div>ここに見出し2の中身</div>
</div>

    jQueryのほか、jQuery UI、jQuery UI Widgetが必要で、初期化時に適用したい要素に対してaccordion関数を呼び出す。アコーディオンの中身はh3要素とdiv要素がペアで、必要な数だけ繰り返す。

    キーワード:
  • 要素を空にする

    IDがcontentの要素を空にする。

    $( '#content' ).empty();

    $( '#content' ).html( '' ) で問題ないような気もする。

    キーワード:
 
 
ツールバーへスキップ