ではさっそくjqueryの基本中の基本をやっていきます。javascriptのところでは教材をダウンロードしませんでしたが、jQueryに関しては結構複雑なことをしますので、教材をダウンロードしながら行っていきましょう。
https://tacmic-atr.info/jssample/9-1.zip
こちらのファイルをダウンロードして展開してください。ファイル構造は
このようになっています。
また、index.htmlは以下のようなソースとなっています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQuery練習1</title>
<script src="js/jquery-3.7.1.min.js"></script>
<script src="js/main.js"></script>
<link rel="stylesheet" href="css/style.css">
<script>
$(function(){
})
</script>
</head>
<body>
<h1 id="title">タイトル</h1>
<p class="sample">
本文はここに入ります。<br />
<span class="red">赤い文字</span>
</p>
<p class="sample">
二つ目の段落です。
</p>
<p id="sanban">
三番目の段落です。
</p>
<p>
<div id="danraku">
<ul id="ichi">
<li>箇条書き１</li>
<li><a href="#">箇条書き２</a></li>
<li>箇条書き３
<ul id="ni">
<li>こども１</li>
<li><a href="#">こども２</a></li>
<li>こども３</li>
</ul>
</li>
<li>箇条書き４</li>
</ul>
</div>
<div id="tsuika"></div>
<p>
<input type="text" id="text1" name="text1">
<input type="button" id="button1" name="button1" value="ボタン１">
<input type="button" id="button2" name="button2" value="ボタン２">
<input type="button" id="button3" name="button3" value="ボタン３">
<input type="submit" id="button4" name="button4" value="ボタン４">
</p>
<p>最後の段落</p>
</body>
</html>
head部分に、jqueryライブラリの読み込みを行っているのはわかりますでしょうか。さらに、scriptタグの中に、こんな表記がされていますね。
<script>
$(function(){
});
</script>
これがjQueryの一番の基本です。jQueryは、scriptタグの中で、「
$(function(){」 と「
})」 の間に様々なjQueryならではのスクリプトの記述をします。
このテキスト以外のjQueryの本では「
$(function(){」のところが、
「
$(document).ready(function(){ 」だったり、「
jQuery(document).ready(function(){」だったりと書かれていることがありますが、同じことを書いていることになります。
jQueryでは、HTMLファイルから描画に必要なファイル（CSSや画像、スクリプトなど）を読み込んだ後、$(function(){ と })の間のスクリプトを実行するというのが約束事です。
次にjQueryの様々な処理の基本は以下のようになっています
$('要素').メソッド();
となっています。要素は要素ノード・属性ノードを含むDOMです。CSSのときの書き方を同じ書き方をします。
例えば、ドキュメントの中のすべての<p>タグのの処理を行う場合は、
$('p')
と書きますし、idがtitleの要素の処理を行う場合は
$('#title')
classがsampleの要素の処理を行う場合は、
$('.sample')
と記述します。
気をつける点としては、
- 要素の記述方式はCSSの記述方式と同じであること
- 必ず要素名はシングルコーテーションまたはダブルコーテーションで囲ってあげること
です。
jQueryはjavascriptの一つののライブラリなので、javascriptの制約を受けます。
$(p)みたいにコーテーション（ダブルコーテーション）で囲わない場合は変数pとして判断してしまい、正常に動作しません。
