このサイトは、主にjQueryに関連する内容を淡々と書きとめたものです。過度な期待はしないでください。
あと、ブラウザはChromeやFirefoxの最新版をお勧めいたします。

  • ページトップへスクロール

    idがpagetopの要素をクリックすると、ページのトップへスクロールする。

    $('#pagetop').click( function() {
    	$('html,body').animate({'scrollTop':'0px'},'slow');
    	return false;
    } );
    

    html要素はIE7~9、Firefox 9.01、Opera 11.60が動作する(Chrome 16、Safari 5.1はNG)。body要素はChrome 16、Safari 5.1が動作する(IE7~9、Firefox 9.01、Opera 11.60はNG)。このようなことから、htmlとbody要素の両方を指定する必要がある。

  • 要素が表示されているか調べる

    idがpost-1の要素が表示されているか調べる。

    if ( $( '#post-1:visible' ).length > 0 ) {
    	/* 表示されている場合の処理を記述する */
    }
    

    指定の要素が表示されている場合のみ非表示にする時は、$( '#post-1:visible' ).hide();と記述すればいい。

  • 要素が表示されているか調べる

    IDがcationの要素が表示されているか調べる。

    if ( $( '#cation:visible' ).length != 0 ) {
    	// 表示されている場合の対応をここで
    }

    この例ではIDで指定した要素が存在しない場合も0になるので、その点は注意すること。

  • チェックボックス(ラジオボタン)がチェックされているか調べる

    idがcheckbox1のチェックボックス(ラジオボタン)がチェックされているか調べる。

    if ( $( '#checkbox1:checked' ).length > 0 ) {
    	/* チェックされている場合の処理を記述する */
    }
    

    attr関数でchecked属性(その値の有無)を調べる方法もある。

  • JSONテキストをパースする

    変数jsontextの内容をパースしてオブジェクトに変換する。

    try {
    	var jsonobj = jQuery.parseJSON( jsontext );
    } catch (e) {
    	// パースエラー時の対応をここで
    }

    変数の内容が正しいJSON形式でない場合は例外が発生するので、基本的にはcatchすること。

  • 要素の高さを取得する

    idがpost-1の要素の高さを取得する。

    var height = $( '#post-1' ).height();
    

    取得できる高さはピクセル値で、上下のpadding分は含まれていない。例えばその要素の高さが50pxでpaddingが10pxの場合は、取得できる高さの値は50となる(jQuery 1.7.1でIE7~9、Chrome 16、Firefox 9、Safari 5.1、Opera 11.60で確認)。なおheight関数は、$( window ).height()と記述することでブラウザの表示領域の高さを、$( 'body' ).height()とすることでドキュメントの高さ(長さ)を取得できる。

  • jQueryで初期処理を行う2

    HTMLドキュメント、画像が読み込まれたタイミング(window.onloadイベント)で実行するスクリプトを記述する。

    jQuery.event.add( window, 'load', function() {
    	/* ここにスクリプトを記述する */
    } );
    

    onloadイベント前に何らかの処理を行う場合は、ready関数を使用する。

  • テキストボックス/テキストエリアの入力内容を取得する

    idがaddrの入力内容を取得する。

    var text = $( '#addr' ).val();
    

    val関数により、テキストボックス(input要素)のvalue属性値だけでなく、テキストエリア(textarea要素)の入力内容も取得できる。

  • 要素の幅を取得する

    idがpost-1の要素の幅を取得する。

    var width = $( '#post-1' ).width();
    

    取得できる幅はピクセル値で、左右のpadding分は含まれていない。例えばその要素の幅が100pxでpaddingが10pxの場合は、取得できる幅の値は100となる(jQuery 1.7.1でIE7~9、Chrome 16、Firefox 9、Safari 5.1、Opera 11.60で確認)。なおwidth関数は、$( window ).width()と記述することでブラウザの表示領域の幅を、$( 'body' ).width()とすることでドキュメントの幅を取得できる。

  • 要素を非表示にする

    IDがmessageの要素を非表示にする。

    /* すぐに非表示 */
    $( '#message' ).hide();
    
    /* じわっと非表示 */
    $( '#message' ).fadeOut( 'slow' );
    

    hide関数かfadeOut関数を使う。fadeOut関数の第1パラメータには消えるまでの時間(’fast’、’normal’、’fast’、または消えるまでのミリ秒)を、第2パラメータには消えた時に呼び出される関数が指定できる。

  • jQueryで初期処理を行う

    jQueryでさまざまな初期処理を行う場合はready関数を使う。

    $(document).ready( function() {
    	/* ここにスクリプトを記述する */
    } );
    

    HTMLドキュメント(DOM)が読み込まれ、操作可能になったタイミングで実行される(window.onloadイベント前)。

  • OpenPNEでjQueryを使う

    OpenPNE 3.4などでprototype.jsを使用している場合、単純にjquery.jsを組み込んで$()を呼び出すと正しくエラーになってしまう。これを回避するためには、$()を呼び出す前にnoConflict関数を呼び出す。

    jQuery.noConflict();
    ( function($) {
    	/* ここに従来通りのjQueryスクリプトを記述する */
    } )( jQuery );
    

    jQueryスクリプトは、$()をjQuery()に書き換えてもいい。