jQuery③


## jQueryオブジェクト ---- セレクタ指定で取得した要素のこと

jQueryでセレクタを指定して取得した要素を「jQueryオブジェクト」と言います。

ここではJavaScriptの「NodeList」と「jQueryオブジェクト」の違いからまとめてみる。

それでは「div要素のテキスト色を赤くする」という処理をこれまでの「JavaScript」と「jQueryオブジェクト」の2つに与えてみよう

①jQueryの場合

`css()`はjQueryで取得したjQueryオブジェクトだから使う事が出来る機能です。

```html

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<title>jQuery-test02</title>
</head>
<body>

<div id="div1">
美浜ちよです
</div>

<div id="div2">
滝野ともです
</div>

<script type="text/javascript">

$(function(){
    // div要素すべての取得
    var div1 = $('div');
    div1.css('color', 'red');
});

</script>

</html>

```

![jqオブジェクト01.png](https://qiita-image-store.s3.amazonaws.com/0/35975/bac4fffd-14a9-a8e4-663c-ad59c69fff16.png "jqオブジェクト01.png")




②JavaScriptの場合

従ってした様な例はエラーとなります。

```html

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<title>jQuery-test02</title>
</head>
<body>

<div id="div1">
美浜ちよです
</div>

<div id="div2">
滝野ともです
</div>

<script type="text/javascript">

$(function(){
    // div要素すべての取得
    var div1 = document.getElementsByTagName('div');
    div1.css('color', 'red'); //=> Error: css()という機能はありません。
});

</script>

</html>

```

↓色が変わらない

![jqオブジェクト02.png](https://qiita-image-store.s3.amazonaws.com/0/35975/daf14703-aa55-4b2f-f1f1-3da835f7fcc8.png "jqオブジェクト02.png")

JavaScriptの場合は以下の様に書く必要があります。

```html

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<title>jQuery-test02</title>
</head>
<body>

<div id="div1">
美浜ちよです
</div>

<div id="div2">
滝野ともです
</div>

<script type="text/javascript">

$(function(){
    // div要素すべての取得
    var div1 = document.getElementsByTagName('div');
    // for文を使ってすべてのdiv要素に対して処理をする。
    for (var i = 0, len = div1.length; i < len; i++) {
        div1[i].style.color = 'red';
    };
});

</script>

</html>

```

![jqオブジェクト03.png](https://qiita-image-store.s3.amazonaws.com/0/35975/216a7beb-474c-efc9-a28f-2a933861dd0f.png "jqオブジェクト03.png")


## jQueryが向いてること

* CSSを変更する
* 取得した要素のHTMLを変更する
* アニメーションさせる
* 簡単にイベントを設定する

などを簡単に書く事ができます。

下図のようなイメージです↓
![jqオブジェクト04.png](https://qiita-image-store.s3.amazonaws.com/0/35975/1ff1f8d7-5e4d-4b0f-c688-e612f78dcb7b.png "jqオブジェクト04.png")

## jQueryオブジェクトの変数名

jQueryオブジェクトを格納する変数の先頭に$をつける事があります。

```js
var $box = $('#box');
```

これは決まりではなく、習慣です。$をつける決まりはないけど、$boxという変数がjQueryオブジェクトだと一目で分かる様にしているものです。

jQuery④

## メソッド ---- jQueryオブジェクトに処理を行う関数

記述のしかたは次の様になります。

```js
jQueryオブジェクト.メソッド名(引数, 引数, ...);
```

具体的な使い方は↓

```html

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<title>jQuery-test02</title>
</head>
<body>

<div id="box" class="content">This is box</div>


<script type="text/javascript">

$(function(){
    // div要素すべての取得
    var $box = $('#box');
    // 要素のCSSを変更
    $box.css('color', 'red');
    // 要素の中身のHTMLを変更
    $box.html('<p>content</p>');
    // 要素のclassNameを取得
    var className = $box.attr('class');
    console.log(className); //=> content
});

</script>

</html>

```

![jqメソッド01.png](https://qiita-image-store.s3.amazonaws.com/0/35975/810bfec9-364b-519c-0573-b47bf2932c4e.png "jqメソッド01.png")