jQueryの基本まとめ - CSSセレクタを使おう -


よく忘れるやつをメモりんこ

## <i class="fa fa-pencil" aria-hidden="true"></i> jQueryのセレクタゆるっとまとめ
|   書式    |指定対象 | 例 |名称|
|:-----------|:------------|:-------------|:-------------|
|$('要素')|特定の要素|$('div')|要素セレクター|
|$('#ID名')|特定のid属性をもつ要素 |$('#hoge')|IDセレクター|
|$('.CLASS名')|特定のclass属性をもつ要素 |$('.hoge')|クラスセレクター|
|$('要素A 要素B')|要素Aの内側にある要素B|$('.hoge .fuga')|子孫セレクター|
|$('*')|全てのセレクタ|$('*')|ユニバーサルセレクター|
|$('A, B')|要素Aと要素B|$('#hoge, .fuga')|グループセレクター|
|$('要素A > 要素B')|特定の要素Aの直下に配置された要素B (Aの中にB)|$('#hoge > .fuga')|子セレクター|
|$('要素A + 要素B')|要素Aの次に出現する要素B (AとBは同じ階層)|$('#hoge + .fuga')|隣接セレクター|
|$('要素A ~ 要素B')|要素Aの後に出現する要素~要素D  (Aの次~B)|$('#hoge ~ .fuga')|間接セレクター|
|$('要素:empty')|子要素やテキストを含まない要素|$('p:empty')|empty擬似クラス|
|$('要素:parent')|子要素やテキストを含む要素|$('p:parent')|parentフィルター|
|$('要素:only-child')|セレクタに特定の要素が1つだけ含まれている要素|$('li span:only-child')|only-child擬似クラス|



##  <i class="fa fa-pencil" aria-hidden="true"></i> HTMLの読み込みが終わったら実行される
```js
$(document).ready(function(){
});

// 省略形
$(function(){
});

```

##  <i class="fa fa-pencil" aria-hidden="true"></i> グループセレクタ ('A, B')
グループセレクタでは複数のセレクタをカンマ区切りで指定できる。
ただし、１つのシンタックス''の中でカンマ区切りをすること。

```js
$(function(){
  $('#first, #second').css('color', 'red');
  // $('#first', '#second').css('color', 'red'); エラー。よくやるw
});
```


```html
<ul>
	<li id="first">テキストテキストテキストテキスト</li>
	<li id="second">テキストテキストテキストテキストテキスト</li>
	<li id="third">テキストテキストテキストテキストテキスト</li>
	<li id="fourth">テキストテキストテキストテキストテキスト</li>
</ul>
```


##  <i class="fa fa-pencil" aria-hidden="true"></i> 子セレクタ ('A > B')
特定の要素の直下に配置された要素を選択できる

```js
$(function(){
  $('#first > span').css('color', 'red'); // firstのspan
});
```


```html
<ul>
	<li id="first"><span>HIT</span>テキストテキストテキストテキスト</li>
	<li id="second">テキストテキストテキストテキストテキスト</li>
	<li id="third">テキストテキストテキスト<span>テキスト</span>テキスト</li>
	<li id="fourth">テキストテキストテキストテキストテキスト</li>
</ul>
```



##  <i class="fa fa-pencil" aria-hidden="true"></i> 隣接セレクタ ('A + B')
特定の要素の次に出現する要素を選択できる

```js
$(function(){
  $('#first + li').css('color', 'red'); // second
});
```

```html
<ul>
	<li id="first"><span>テキスト</span>テキストテキストテキストテキスト</li>
	<li id="second">テキストテキストテキストテキストテキスト</li>
	<li id="third">テキストテキストテキストテキストテキスト</li>
	<li id="fourth">テキストテキストテキストテキストテキスト</li>
</ul>
```

##  <i class="fa fa-pencil" aria-hidden="true"></i> 関接セレクタ ('A ~ B')
特定のセレクタの後に出現する要素を選択できる
※ ここでは#secondは含まれないので要注意。


```js
$(function(){
  $('#second ~ #fourth').css('color', 'red'); // third, fourth
});
```


```html
<ul>
	<li id="first"><span>HIT</span>テキストテキストテキストテキスト</li>
	<li id="second">テキストテキストテキストテキストテキスト</li>
	<li id="third">テキストテキストテキストテキストテキスト</li>
	<li id="fourth">テキストテキストテキストテキストテキスト</li>
</ul>
```

##  <i class="fa fa-pencil" aria-hidden="true"></i> 子要素やテキストが無い要素を選択 (:empty)

```js
$(function(){
  $('li:empty').css('color', 'red'); // first, 最後のli
});
```
```html
<ul>
	<li id="first"></li>
	<li id="second">テキストテキストテキストテキストテキスト</li>
	<li id="third">テキストテキストテキストテキストテキスト</li>
	<li></li>
</ul>
```

##  <i class="fa fa-pencil" aria-hidden="true"></i> 子要素やテキストを含む要素を選択 (:parent)

```js
$(function(){
  $('li:parent').css('color', 'red'); // second, third
});
```
```html
<ul>
	<li id="first"></li>
	<li id="second">テキストテキストテキストテキストテキスト</li>
	<li id="third">テキストテキストテキストテキストテキスト</li>
	<li></li>
</ul>
```

##  <i class="fa fa-pencil" aria-hidden="true"></i> セレクタに特定の要素が1つだけ含まれている要素を選択 (:only-child)

```js
$(function(){
  $('li span:only-child').css('color', 'red'); // firstのspan
});
```
```html
<ul>
	<li id="first"><span>HIT</span>テキストテキストテキストテキスト</li>
	<li id="second">テキスト<span>テキスト</span>テキスト<span>テキスト</span>テキスト</li>
	<li id="third">テキストテキストテキストテキストテキスト</li>
	<li id="fourth">テキストテキストテキストテキストテキスト</li>
</ul>
```


##  <i class="fa fa-pencil" aria-hidden="true"></i> 特定の文字列が含まれている要素を選択 (:contains)

```js
$(function(){
  $('li:contains("HIT")').css('color', 'red'); // first
});
```
```html
<ul>
	<li id="first"><span>HIT</span>テキストテキストテキストテキスト</li>
	<li id="second">テキスト<span>テキスト</span>テキスト<span>テキスト</span>テキスト</li>
	<li id="third">テキストテキストテキストテキストテキスト</li>
	<li id="fourth">テキストテキストテキストテキストテキスト</li>
</ul>
```


##  <i class="fa fa-pencil" aria-hidden="true"></i> 特定の要素が含まれている要素を選択 (:has)

```js
$(function(){
  $('li:has(span)').css('color', 'red'); // first, second
});
```
```html
<ul>
	<li id="first"><span>HIT</span>テキストテキストテキストテキスト</li>
	<li id="second">テキスト<span>テキスト</span>テキスト<span>テキスト</span>テキスト</li>
	<li id="third">テキストテキストテキストテキストテキスト</li>
	<li id="fourth">テキストテキストテキストテキストテキスト</li>
</ul>
```