jQueryの基礎


# はじめに
jQueryが苦手なので、メモを纏めてみました。
初心者の方に役立つ記事かと思います。


# セレクタで指定の要素を取得する
```js:js
$("要素").hoge();
```
等の操作で指定した要素を操作します。

参考サイト
http://www.detelu.com/blog/2011/11/jquery-selector-traversing/


# ユーザの操作(クリック、マウスオーバー等)によって発火させる
## .click();「クリックしたイベントを追加する関数」

```html:html
<p>押されてないよ</p>
<button>クリックしてね</button>
```

```js:js
$('button').click(function(){
  $('p').text("押されました");
});
```

```text:押下前
押されてないよ
```

```text:押下後
押されました
```

参考サイト

http://webkaru.net/jquery/click-event/

## .hover();「マウスを乗せた時、離した時のイベントを追加する関数」
第一引数：マウスを乗せた時の動作
第二引数：マウスを離れた時の動作
となります。

```html:html
<p>マウスをボタンに乗せてみよ</p>
<button>ボタン</button>
```

```js:js
$('button').hover(function(){
  $('p').text('マウスが乗ってるよ');
},
function(){
  $('p').text('マウスが乗ってないよ');
});
```

```text:マウスが乗った時
マウスが乗ってるよ
```

```text:マウスが乗ってない時
マウスが乗ってないよ
```


参考サイト
http://www.jquerystudy.info/reference/events/hover.html


# 要素を隠したり、表示したりする
## .hide();「指定した要素を隠す」

```html:html
<body>
  <p>Pを表示しています</p>
  <button>pを消します</button>
</body>
```
```js:js
$('button').click(function(){
  $('p').hide();
});
```
また引数にタイマーをセットすることでゆっくり消す事もできます

```js:js
$('button').click(function(){
  $('p').hide(2000);
});
```
参考サイト
http://www.task-notes.com/entry/20150112/1420994026


## .fadeOut()「指定した要素を要素をアニメーションを付けて隠す」
指定した要素を要素をアニメーションを付けて隠します。
ふわっと消えます。

```html:html
<body>
  <p>Pを表示しています</p>
  <button>pふわっと消します</button>
</body>
```
```js:js
$('button').click(function(){
  $('p').fadeOut();
});
```

また引数にタイマーをセットすることでゆっくり消す事もできます。

```js:js
$('button').click(function(){
  $('p').fadeOut(2000);
});
```
参考サイト
http://www.buildinsider.net/web/jqueryref/007

## .slideUp();「指定した要素を要素をアニメーションを付けて隠す」
指定した要素を要素をアニメーションを付けて隠します。
下から上に向かって消えます。

```html:html
<body>
  <p>Pを表示しています</p>
  <button>下から上に消します</button>
</body>
```
```js:js
$('button').click(function(){
  $('p').slideUp();
});
```

また引数にタイマーをセットすることでゆっくり消す事もできます。

```js:js
$('button').click(function(){
  $('p').slideUp(2000);
});
```
参考サイト
http://h2ham.seesaa.net/article/305452745.html

## .show();「隠れている要素を表示する」

```html:html
<body>
  <p style="display: none">Pを表示しています</p>
  <button>pを表示します</button>
</body>
```
```js:js
$('button').click(function(){
  $('p').show();
});
```
また引数にタイマーをセットすることでゆっくり表示することも出来ます。

```js:js
$('button').click(function(){
  $('p').show(2000);
});
```
参考サイト
http://www.buildinsider.net/web/jqueryref/007


## .fadeIn();「隠れている要素をアニメーションを付けて表示する」
隠れている要素をアニメーションを付けて表示します。
ふわっと表示します。

```html:html
<body>
  <p style="display: none">Pを表示しています</p>
  <button>pを表示します</button>
</body>
```
```js:js
$('button').click(function(){
  $('p').fadeIn();
});
```
また引数にタイマーをセットすることでゆっくり表示することも出来ます。

```js:js
$('button').click(function(){
  $('p').fadeIn(2000);
});
```
参考サイト
http://www.buildinsider.net/web/jqueryref/007

## .slideDown();「隠れている要素をアニメーションを付けて表示する」
隠れている要素をアニメーションを付けて表示します。
上から下に表示します。

```html:html
<body>
  <p style="display: none">Pを表示しています</p>
  <button>pを表示します</button>
</body>
```
```js:js
$('button').click(function(){
  $('p').slideDown();
});
```
また引数にタイマーをセットすることでゆっくり表示することも出来ます。

```js:js
$('button').click(function(){
  $('p').slideDown(2000);
});
```
参考サイト
http://www.buildinsider.net/web/jqueryref/007


# 値の取得、変更、削除、追加等をおこなう
## .css()「特定の要素に対して、CSSの取得、変更、削除、追加をおこなう」

```css
p {
  color: #ff0000;
}
```

### 取得
取得するには**プロパティのみ**セットする。

```js
$("p").css("color");
```

### 変更
変更するには**プロパティと値を**をセットする。

```js
$("p").css("color", "#000000");
```

## 削除
削除するには**プロパティと空の値を**をセットする。

```js
$("p").css("font-size", "10px");
```
参考サイト
http://kawatama.net/web/1744

# .attr();「特定の要素を取得、変更する」

```html
<a href="http://qiita.com/">Qiitaに飛びます</a>
```
### 取得
取得するには**プロパティ**をセットする。

```js
$('a').attr('href');
// ▶ http://qiita.com/
```

### 変更
変更するには**プロパティと値を**をセットする。

```js
$('a').attr('href', 'http://qiita.com/Kaki_Shoichi');
// ▶ http://qiita.com/Kaki_Shoichi
```

参考サイト
http://www.buildinsider.net/web/jqueryref/007

## .text();「要素配下のテキストを取得、変更、削除する」

```html
<p>Pを表示しています</p>
```

### 取得
取得するのに引数は不要です。

```js
$('p').text();
// ▶ Pを表示しています
```

### 変更
変更するには**値を**をセットする。

```js
$('a').text('pの文言を変更しました');
// ▶ pの文言を変更しました
```

### 削除
変更するには**空の値を**をセットする。

```js
$('a').text('');
// ▶ 
```

参考サイト
http://www.buildinsider.net/web/jqueryref/004


## .html();「指定した要素内のHTMLを取得、変更、削除する」

```html:html
<div>
  <p>Pを表示しています</p>
</div>
```

### 取得
取得するのに特に引数は必要ありません。

```js
$('div').html();
// ▶ <p>Pを表示しています</p>
```

### 変更
変更するには**タグ**をセットする。

```js
$('div').html(('<b>pの要素をbに変更します</b>');
// ▶ <b>pの要素をbに変更します</b>
```

### 削除
変更するには**空の値を**をセットする。

```js
$('div').html('');
// ▶ 
```

参考サイト
http://www.task-notes.com/entry/20141009/1412787352


## .val();「SELECTタグ等のユーザが入力する要素を取得する」

```html:html
<select id="select-button">
  <option value="1">選択1</option>
  <option value="2">選択2</option>
</select>
```

```js:js
$("#button").click(function () {
  var text = $(this).text();
  $("#select-button").val(text);
});
```

参考サイト
http://qiita.com/kazu56/items/36b025dac5802b76715c

## .find();「指定した親要素の中の全ての子要素を取得する」

```html:html
<div id="element">
  <p>一番上のpです</p>
  <div>
    <p>次のpです</p>
  </div>
</div>
```

```js:js
$('#element').find('p').text('全部変わるよ');
```

```text:出力結果
全部変わるよ

全部変わるよ
```

参考サイト
http://www.jquerystudy.info/reference/traversing/find.html

## .children();「指定した親要素の中のひとつ下の子要素を取得する」

```html:html
<div id="element">
  <p>一番上のpです</p>
  <div>
    <p>次のpです</p>
  </div>
</div>
```

```js:js
$('#element').children('p').text('一番上だけ変わるよ');
```

```text:出力結果
一番上だけ変わるよ

次のpです
```

参考サイト
http://www.jquerystudy.info/reference/traversing/children.html


## .addClass();「要素にクラスを追加する」
クラスを追加する際に``#``や``.``は不要です。

```html:html
<p>クラスを追加してないよ</p>
<button>クラスの追加</button>
```

```css:css
.color{
  color: #ff0000;
}
```

```js:js
$('button').click(function(){
  $('p').addClass('color');
  $('p').text('クラスを追加して赤字になったよ');
})
```
参考サイト
http://www.jquerystudy.info/reference/attributes/addClass.html

## .removeClass();「要素のクラスを削除する」
クラスを削除する際に``#``や``.``は不要です。

```html:html
<p class='color'>colorクラスが付いてるよ</p>
<button>クラスの削除</button>
```

```css:css
.color{
  color: #ff0000;
}
```

```js:js
$('button').click(function(){
  $('p').removeClass('color');
  $('p').text('クラスを削除して黒字になったよ');
})
```

参考サイト
http://www.jquerystudy.info/reference/attributes/removeClass.html

## .hasClass();「クラスがアタッチされているかを判定する」

```html:html
<p>colorクラスを付けるよ</p>
<button>クラスの操作</button>
```

```css:css
.color{
  color: #ff0000;
}
```

```js:js
$('button').click(function(){
  if($('p').hasClass('color')){
    $('p').removeClass('color');
    $('p').text('クラスを削除して黒字になったよ');
  }else{
    $('p').addClass('color');
    $('p').text('クラスを追加して赤字になったよ');
  }
});
```