jQuery③


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

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

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

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

①jQueryの場合

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


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

②JavaScriptの場合

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


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

↓色が変わらない

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


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

jQueryが向いてること

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

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

下図のようなイメージです↓

jQueryオブジェクトの変数名

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

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

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

jQuery④

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

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

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

具体的な使い方は↓


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