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>
