～説明～

jQueryの要点を★回に渡って紹介する。
今回は『その１』としてjQueryの基本中の基本であるセレクタと主要メソッドを紹介する。
次回は要素の追加、変更、削除を紹介する予定。

◆セレクタ

jQueryでは「セレクタ」を用いて要素を指定する。

型セレクタ

要素名で指定する。

$('div'); // すべての<div>を指定
$('p');   // すべての<p>を指定

IDセレクタ

要素のID属性の値を用いて指定する。

$('#userId');    // id="userId"が指定された要素を指定
$('div#userId'); // <div id="userId">を指定

クラスセレクタ

各要素のclass属性に同一値（文字列）を含むものを指定する。クラスセレクタでは空白ごとに区切られた部分を１つの値として扱う。

$('.top');    // class="top"が指定されたもの＆class属性値に空白で区切られた"top"が含まれる要素を指定
$('div.top'); // <div class="top">が指定されたもの＆class属性値に空白で区切られた"top"が含まれる要素を指定
$('.top.munu'); // class="top menu">が指定されたもの

擬似クラス

要素の状態や位置などを表す際に指定する。

$(':focus'); // フォーカスが当たっている要素（IE9のデフォルトは<body>）
$(':checked'); // checked属性を持つ要素

独自拡張セレクタ

セレクタ	重要度	対象
:hedder	★★	見出し `<h1>～<h6>`
:visible		画面に表示されている要素
:hidden	★	画面に表示されていない要素
:animated		アニメーションが動作している要素
:parent	★	子要素やテキスト要素を持つ要素
:has(セレクタ)	★★	指定したセレクタで表された子要素を持つ要素
:input	★★★	入力可能な要素　`<input>, <select>, <textarea>, <button>`
:submit	★	送信ボタン　`<input type = "submit">, <button>`
:image	★★★	画像による送信ボタン　`<input type = "image">`
:reset	★	取り消しボタン　`<input type = "reset">, <button type = "reset">`
:button	★	ボタン　`<input type = "button">, <button>`
:checkbox	★★★	チェックボックス　`<input type = "checkbox">`
:radio	★★★	ラジオボタン　`<input type = "radio">`
:file	★	アップロードするファイル　`<input type = "file">`
:password	★★	パスワード　`<input type = "password">`
:text	★★	テキスト入力　`<input type = "text">, typeが省略された<input>`
:selected	★★★	`<select>` 内の`<option selected>`

◆親・子要素で絞り込む

親要素で絞り込む

メソッド	説明
parent([セレクタ])	親要素セレクタが指定されている場合は、それに適合する要素に限定
parents([セレクタ])	祖先要素セレクタが指定されている場合は、それに適合する要素に限定

子要素で絞り込む

メソッド	説明
children([セレクタ])	子要素セレクタが指定されている場合は、それに適合する要素に限定
contents()	テキストやコメントも含めたすべての子要素

$('div').children('ul');
$(ul#main-mune').contents;

小孫要素に絞り込む

メソッド	説明
find(セレクタ/DOMオブジェクト/$(...))	引数に適合するすべての子孫要素

◆属性やプロパティ操作

属性を操作するメソッド

メソッド	説明
attr(属性名)	指定した属性の値を取得 $(...)で指定された要素が複数ある場合は、最初に指定された要素が対象となる
attr(属性名, 値)	指定した属性に値を設定
attr(オブジェクト)	複数の属性を同時に指定
attr(属性名, 関数)	指定した属性に関数の戻り値を設定関数＝コールバック関数
removeAttr(属性名)	指定した属性を削除

プロパティを操作するメソッド

メソッド	説明
prop(プロパティ名)	指定したプロパティの値を取得
prop(プロパティ名, 値)	指定したプロパティの値を設定
prop(オブジェクト)	複数のプロパティの値を同時に設定
prop(プロパティ名, 関数)	プロパティの値に関数の戻り値を設定
removeProp(プロパティ名)	指定したプロパティを削除

value属性の値を操作するメソッド

メソッド	説明
val()	value属性の値を取得
val(値)	value属性の値を設定
val(関数)	value属性の値に関数の戻り値を設定

CSSプロパティを操作するメソッド

メソッド	説明
cscs(プロパティ名)	指定したプロパティの値を取得
css(プロパティ名, 値)	指定した文字列をプロパティの値として設定
css(オブジェクト)	複数のプロパティを同時に設定
css(プロパティ名, 関数)	プロパティの値に関数の戻り値を設定

上記で説明したセレクタやメソッドを使用したサンプル

jQuery(JavaScript)部分

<script type="text/javascript"> 
    $(function(){

        // *****************************************************************    
        // id = "btnSelectPropSet"のボタン押下時の処理
        // *****************************************************************
        $('#btnSelectPropSet').click(function(){
            // id = "fruitValues"のmultiplepプロパティがfalseの場合
            if ($('#fruitValues').prop('multiple') == false){

                // id = "fruitValues"のmultiplepプロパティにtrueを設定
                $('#fruitValues').prop('multiple', true);

            // 上記以外の場合
            }else{

                // id = "fruitValues"のmultiplepプロパティにfalseを設定
                $('#fruitValues').prop('multiple', false);
            }
        });

        // *****************************************************************    
        // id = "btnSelectPropSet"のボタン押下時の処理
        // *****************************************************************
        $('#btnValSet').click(function(){
            // 独自セレクタ(:text)を用いて<input type = "text">のval値を設定
            $(':text').val('hogehogeText');

            // 独自セレクタ(:hidden)を用いて画面に表示されていない要素のval値を設定
            $(':hidden').val('hogehogeHideen');

            // 型セレクタ(textarea)を用いて<textarea>タグのval値を設定
            $('textarea').val('hogehogeTextarea');

        });

        // カウンタ
        var ctr = 0;

        // *****************************************************************    
        // id = "btnMsgView01"のボタン押下時の処理
        // *****************************************************************
        $('#btnMsgView01').click(function(){
            ctr = ctr + 1;
            $('<p id = p_msg_' + ctr + ' class = "pmsg">(' + ctr + ')ボタンがクリックされました</p>').appendTo('#main');
            $('<a id = a_link_' + ctr + ' href ="https://www.yahoo.co.jp/">yahooへ</a>').appendTo('#main');
            // <a>タグの'target'属性に'_blank'を設定（＝新しいウィンドウで開く）
            $('a').attr('target', '_blank');
        });

        // *****************************************************************    
        // id = "btnMsgCrear01"のボタン押下時の処理
        // *****************************************************************
        $('#btnMsgCrear01').click(function(){
            ctr = 0;

            // クラスセレクタを使用してclass = "pmsg"のものを削除
            $('.pmsg').remove();
            // 型セレクタを使用して <a>タグを削除
            $('#main a').remove();
        });

        // *****************************************************************    
        // id = "btnSelectPropSet"のボタン押下時の処理
        // *****************************************************************
        $('#btnMsgColorChange01').click(function(){

            // 文字色が黒の場合、青文字に設定
            if ($('.pmsg').css('color') == "rgb(0, 0, 0)") {
                $('.pmsg').css('color', 'blue');

            // 上記以外かつ文字色が青の場合、赤文字に設定
            }else if ($('.pmsg').css('color') == "rgb(0, 0, 255)") {
                $('.pmsg').css('color', 'red');

            // 上記以外（＝赤）の場合、黒文字に設定
            }else {
                $('.pmsg').css('color', 'black');
            }
        });

    });     
</script>

HTML部分

汚いHTMLで申し訳ないが、参考になれば…

see_no_evil

<html>
<head>
    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
        <script type="text/javascript"> 
          // ここにjQueryが来る
        </script>
    </head>

    <body>
        <div id = "main">

            <input id = 'btnSelectPropSet' type = 'button' value = "セレクトボックスのmultipleプロパティを変更" />

            <p>好きな果物：
                <select id = "fruitValues" name="fruit">
                    <option value="1">リンゴ</option>
                    <option value="2">みかん</option>
                    <option value="3">グレープフルーツ</option>
                    <option value="4">桃</option>
                    <option value="5">メロン</option>
                </select>
            </p>
            <br>

            <p>val関数の検証</p>
                <input id = 'btnValSet' type = 'button' value = "value属性の変更" />

            <p>Text：
                <input type = "text" id = "inputText01" value= "defalutValueText">
            </p>
            <p>Hidden：
                <input type = "hidden" id = "inputHidden01" value= "defalutValueHidden">
            </p>
            <p>Textarea：
                <textarea id = "inputTextarea01">defalutValueTextarea1</textarea>
                <textarea id = "inputTextarea02">defalutValueTextarea2</textarea>
            </p>

            <input id = 'btnMsgView01'  type = 'button' value = "クリックでメッセージ表示" />
            <input id = 'btnMsgCrear01' type = 'button' value = "クリックでメッセージクリア" />
            <input id = 'btnMsgColorChange01'  type = 'button' value = "クリックでメッセージの文字色を変更" />

        </div>
    </body>
</html>

以上