JavaScript の中でなんで jQuery なのかと思われるでしょうが、 jQuery を使うことで JavaScript では記述が長い部分をコンパクトにできたり、 ブラウザ毎で動作の違いを吸収してくれます。 また、jQuery で記述されたプラグインを使うことで、ページに新しい機能が追加できます。
「JavaScript 何に使う」の記事の中で以下の様なソースがあります。 （ソースを少し変更しましたが）
<html>
<head>
<meta charset="utf-8">
<title>test 1-2</title>
</head>
<body>
<p id="msg1">テストメッセージ</p>
<p id="msg2">テストメッセージ</p>
<script>
var element = document.getElementById('msg1');
element.innerText = 'こんにちは１';
var element = document.getElementById('msg2');
element.innerText = 'こんにちは２';
</script>
</body>
</html>
■jQueyを使った簡単な例
document.getElementById の記述が少し冗長だと思いますので、 この部分に jQuery の記述を適用してみます。
$('#msg1') の部分が document.getElementById('msg1') の替わりで、 .text('こんにちは１') の部分が .innerText = 'こんにちは１' の替わりになります。
結構シンプルな記述になりました。 ここで $(function(){ ... }); の中で処理の記述がありますが、この関数の中身の実行は全ページの読込後に行われます。 $(document).ready(function(){ ... }); としても同じです。
<html>
<head>
<meta charset="utf-8">
<title>test jQuery</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<p id="msg1">テストメッセージ</p>
<p id="msg2">テストメッセージ</p>
<script>
$(function(){
$('#msg1').text('こんにちは１');
$('#msg2').text('こんにちは２');
});
</script>
</body>
</html>
$('#msg1') に注目して下さい。 msg1 は p タグの id として宣言されていますが、 id 属性のタグを参照するものしてとして #(シャープ) を使います。 この$('...') と記述するものをセレクタといいます。
セレクタとは全HTMLの中の、どの要素なのかを示すオブジェクトです。 このセレクタですが、 p タグの様なHTMLのタグそのものを示したり、 上のソースの様にID属性のタグや、Class属性のタグを示すことができます。
セレクタの方法はいっぱいありますので、下の方で説明したいと思います。
■jQueyのダウンロード
ところで jQuery の読込ですが、上の例では公式サイトに存在するスクリプトを読込んでいます。 このスクリプトファイルを自分のサイトにダウンロードしてそれを読込ことでもできます。 ダウンロードは以下の公式サイトからできます。
■jQueryのダウンロードサイト
公式サイトには jquery-3.2.1.min.js と min無しの jquery-3.2.1.js の2種類がありますが、 min無しの方はスクリプト内の空白を全て削除してあるため、ファイルサイズが小さいので ロード時間的には有利です。
<html> <head> <meta charset="utf-8"> <title>test jQuery</title> <script src="スクリプトを設置したアドレス/jquery-3.2.1.min.js"></script> </head> ...
■jQueyのセレクタ
セレクタの方法は HTMLの要素 , id名 , class名 等があり、またそれらを複合的に組み合わせたものがあります。
■HTMLの要素
最初にHTMLの要素のセレクタの例を以下に示します。 $("button") でボタン要素を指し示します。
さらに .(ドット) で繋ぐことでそのセレクタの示すプロパティ、メソッド等にアクセスできます。 $("button").click(function(){ ... }) はボタンのクリックイベントの関数宣言を行います。
この関数の中の $("p") は p タグの要素全てを示しますので、ボタンをクリックした時に全ての p タグの表示が「こんにちは」に変わります。
<html>
<head>
<meta charset="utf-8">
<title>test jQuery</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<p id="msg1">テストメッセージ</p>
<p id="msg2">テストメッセージ</p>
<button>変更</button>
<script>
$(function () {
//HTML要素<button>のクリックイベントの関数を宣言
$("button").click(function(){
//HTML要素<p>の全てを変更
$("p").text("こんにちは");
})
});
</script>
</body>
上の例を以下に実際のHTMLで示します。
⇒HTMLの要素の例
■id名
HTML要素に設定された id名 でセレクタを限定します。 セレクタの書式としては $("#id名") の様に id名 の前に #(シャープ) を付けます。 HTML要素の中に id名 が複数存在しても最初の要素が対象となります。 （jQuery の大元の getElementById 関数は最初の要素しか取得しないからです。）
2個のボタンはそれぞれ id名 が btn1 , btn2 と設定されているので、 それぞれのクリック時のイベント関数を宣言しています。 それぞれの関数の中では p タグの msg1 , msg2 に対応してテキストを変更しています。
<html>
<head>
<meta charset="utf-8">
<title>test jQuery</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<p id="msg1">テストメッセージ</p>
<p id="msg2">テストメッセージ</p>
<button id="btn1">変更1</button>
<button id="btn2">変更2</button>
<script>
$(function () {
//<button id="btn1">のクリックイベントの関数を宣言
$("#btn1").click(function(){
//<p id="msg1">のTEXTを変更
$("#msg1").text("１１１１１");
})
//<button id="btn2">のクリックイベントの関数を宣言
$("#btn2").click(function(){
//<p id="msg2">のTEXTを変更
$("#msg2").text("２２２２２");
})
});
</script>
</body>
上の例を以下に実際のHTMLで示します。
⇒id名の例
■class名
HTML要素に設定された class名 でセレクタを限定します。 セレクタの書式としては $(".class名") の様に class名 の前に .(ドット) を付けます。 HTML要素の中に class名 は複数存在する可能性があるので、それら全てが対象となります。
class名 が btn と設定されたボタンのクリック時のイベント関数を宣言しています。 関数の中では msg > と設定された全ての p タグに対してテキストを変更しています。 （以下の例では3個の p タグのテキストを変更しています。）
<html>
<head>
<meta charset="utf-8">
<title>test jQuery</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<p class="msg">テストメッセージ１</p>
<p class="msg">テストメッセージ２</p>
<p class="msg">テストメッセージ３</p>
<button class="btn">変更</button>
<script>
$(function () {
//<button class="btn">のクリックイベントの関数を宣言
$(".btn").click(function(){
//<p class="msg">の全てのTEXTを変更
$(".msg").text("ああああああああ");
})
});
</script>
</body>
上の例を以下に実際のHTMLで示します。
⇒class名の例
以上、セレクタの基本的な使い方でしたが、次回はこれらの複合的な使い方を説明したいと思います。
コメント