東京本社 TEL : 03-5728-5580

支社連絡先一覧

mypage

フェローズe-ラーニングログイン

jQueryとは・・・

「きわめて多彩な機能を、とても簡潔な表記で実現できる。」

もので、ちょっとした「記述のコツ」さえ押さえれば、誰でもすぐに使うことができるのが魅力です。
正体は「JavaScript」で書かれたプログラムです。
プログラムを知らない人はもちろん、腕に覚えのある人間でも一から作って動かすには相当の労力を要します。
使えそうな、便利そうな機能を作り上げて、それらを「誰でも」が利用できるようにまとめたもの。
それが jQuery であると考えてください。

「誰でも」というのは「特にプログラムの知識が深くなくても」という意味に他なりません。
例えば

divの色替え(jQuery未使用)

<div class=”class1″>class1テキスト</div>
<div class=”class2″>class2テキスト</div>
<div class=”class1″>class1テキスト</div>
<script type=”text/javascript”>
var divArray = document.getElementsByTagName(“DIV”);
for(var i=0;i<divArray.length;i++){
if((divArray[i].getAttribute(“className”)||divArray[i].getAttribute(“class”))==”class1″){
divArray[i].style.color=”red”;
}
}
</script>

これはクラス名「class1」である「<div>ブロック」内のテキストを赤くするという機能の実装です。
ちょっとしたこととは言え、ある程度プログラムの知識が必要となってしまいます。
これを「jQuery」を使って実装すると

divの色替え(jQuery使用)

<script src=”../../js/jQuery/jquery-1.6.1.min.js” type=”text/javascript”>
<div class=”class1″></div>
<div class=”class1″></div>
<div class=”class1″></div>
<script type=”text/javascript”>
$(“DIV.class1″).css(“color”,”red”);
</script>

の様になります。

「if」「for」などの、いかにもプログラム的表現は不要となり、必要なのは

■jQuery のインクルード

<script src=”../../js/jQuery/jquery-1.6.1.min.js” type=”text/javascript”>

■jQuery による記述

<script type=”text/javascript”>
$(“DIV.class1″).css(“color”,”red”);
</script>

になります。
jQueryのインクルードは通常のJavaScriptの場合と同じですが、jQueryによる記述は初めての方には独特かもしれません。
ただ、この例でもわかると思いますが

class1 の DIV の color red にする。
$(“DIV.class1“).css(“color“,”red“);

と、とても直観的にわかりやすいですし、なんといってもたったの一行ですんでしまいます。

jQueryの入手

「jQueryのサイトからダウンロードします。」

インクルードするjQueryは下記サイトからダウンロードできます。

http://jquery.com/

画面右側に「Download (jQuery)」というボタンがありますので、そこからダウンロードしてください。
今現在執筆中ですとバージョンが 1.6.1 でしたが、これは適宜改版されますのでダウンロードファイル名はそれに応じて変わります。
jQueryを利用するには、ダウンロードした jsファイルをサイト内の適当な場所に置き、htmlLの<script>タグで読み込みます。
html文書のある場所のしたに「js」フォルダを作成し、そこに格納した場合の例が下記になります。

<script src=”js/jQuery/jquery-1.6.1.min.js” type=”text/javascript”></script>

では、簡単なサンプルから紹介していきたいと思います。

マウスオーバーサンプル1

「マウスオーバーエフェクトを実装します。」

 マウスオーバーサンプル(その1)

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>マウスオーバー(その1)</title>
<head>
<script src=”../../js/jQuery/jquery-1.6.1.min.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(function(){
$(“div”).hover(
function(){ this.style.backgroundColor = “red”; },
function(){ this.style.backgroundColor = “white”; }
);
});
</script>

</head>
<body>
<div>リンク1</div>
<div>リンク2</div>
<div>リンク3</div>
</body>
</html>

「$(“div”).hover()」という表記で、divタグのマウスオーバー(hover)に対する動作を定義します。
hover()に2つのパラメータを指定しますが、一つ目はマウスオーバー時の処理、二つ目はマウスアウト時の処理でが、ここではそれぞれ「背景色を赤に」「背景色を白に」というスタイルシート変更の処理としています。

プログラム的表現なして・・・と言いましたが、少々暗号の様な表記となってはいます。
これは定型文(おまじない)として覚えてしまってください。

マウスオーバーサンプル2

「画像ボタンのマウスオーバー処理です。」

 マウスオーバーサンプル(その2)

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>マウスオーバー(その2)</title>
<head>
<script src=”../../js/jQuery/jquery-1.6.1.min.js” type=”text/javascript”></script>
<script type=”text/javascript”>
$(function(){
$(‘a img’).hover(function(){
$(this).attr(‘src’, $(this).attr(‘src’).replace(‘_out’, ‘_over’));
}, function(){
$(this).attr(‘src’, $(this).attr(‘src’).replace(‘_over’, ‘_out’));
});
});
</script>

</head>
<body>
<a href=”#”><img src=”../../images/07/mouse_out.jpg” alt=”” /></a>
</body>
</html>

ボタン画像として通常用、マウスオーバー用をそれぞれ「mouse_out.jpg」と「mouse_over.jpg」として用意します。
この時、画像ファイル名に規則をつけるのがミソとなります。

 通常用
 mouse_out.jpg  ファイル名のうしろに「_out」をつける。
 マウスオーバー用
 mouse_over.jpg  ファイル名のうしろに「_over」をつける。

jQureyはこれらの名前をたよりに処理を行うのです。
さっきの例と同様「hover()」を使いますが、二つのパラメータそれぞれに指定する処理を「画像を変更する処理」にしています。

$(function(){
$(‘a img’).hover(function(){
$(this).attr(‘src’, $(this).attr(‘src’).replace(‘_out’, ‘_over’));
}, function(){
$(this).attr(‘src’, $(this).attr(‘src’).replace(‘_over’, ‘_out’));
});
});

さらに暗号っぽくなってはしまいますが、replace(‘_out’,’_over’) で直観的にわかるのではないかと思います。

一つ目のパラメータ (マウスオーバー) → _out を _over に置き換えてやる
二つ目のパラメータ (マウスアウト)   → _over を _out に置き換えてやる

もう一つ簡単なサンプルとして・・

ページ内リンクのスムーズスクロール

「ページトップ処理」

次の「ページトップへ」で確認してください。

 ページトップへ

<script type=”text/javascript”>
$(function () {
$(‘.toTop‘).click(function () {
$(this).blur();
$(‘html,body’).animate({ scrollTop: 0 }, ‘slow’);
return false;
});
});

</script>
<a class=”toTop” href=”#main2″>ページトップへ</a>

「ページトップへ」のページ内リンクの「<a>」タグのクラス「toTop」に対して click 処理を定義しています。

自分でスムーズスクロールを実装するのは、結構気がとおくなりますよね。
これなら簡単です。

たとえ JavaScript を全く知らなくても・・・。