～説明～
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>
以上