jQuery要点整理　その１　セレクタ・主要メソッドの紹介

## ～説明～

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

------

### ◆セレクタ

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

#### 型セレクタ

要素名で指定する。

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

#### IDセレクタ

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

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

#### クラスセレクタ

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

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

#### 擬似クラス

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

```javascript
$(':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([セレクタ])  | 親要素<br />セレクタが指定されている場合は、それに適合する要素に限定 |
| parents([セレクタ]) | 祖先要素<br />セレクタが指定されている場合は、それに適合する要素に限定 |

#### 子要素で絞り込む

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

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

#### 小孫要素に絞り込む

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

### ◆属性やプロパティ操作

#### 属性を操作するメソッド

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

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

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

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

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

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

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

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

#### jQuery(JavaScript)部分

```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>

```



以上