jQueryという名のライブラリー
pythonでもでてきた「ライブラリー」と似ています。
コードを省略してかける「呪文書」です。
ライブラリーを「取り込み」、ライブラリーで指定された書き方で「書け」ば、呪文が発動します。
さっそく取り込みましょう。
compressedとuncompressedがあります。どちらでも、といいたいところですが compressedをつかいましょう。（そちらの方がコンピューターにとっては負担が少ないのです）
違いをみるために両方インストールしてみてください。
テキストエディターで開けます。
中味、みてみましたか？
違いが、わかりますか？
コンピューターにとって読みやすいのは、compressedの方です。
downloadされたファイル名をみるとminがついています。minimize されているのがわかりますか。
ファイル名に書かれている数字派、jqueryのヴァージョンです。日々、新しくなっています。
ではさっそく、つかってみる。
つぎのコードをHTMLファイルに書き込みます。
場所は、、、<head>の中か<body>の中といわれています。
今までにコードの順番、読み込む順番のせいでコンピューターに指示が伝わらないことが多々ありました。問題がでないように、<head>内に書いた方がいのかな？などと思っていっます。
書き込むコードは以下のよう。
<script src=" downloadしたjqueryのファイルのある場所/jqueryのファイルの名前"></script>
です。
実は、ダウンロードしたものではなく、ネット経由でコンピューターにjqueryを参照してもらうこともできます。jquery CDNと検索すると、出てきます。
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
では、実際に呪文を唱えてみます。
<!DOCTYPE html>
<html>
<head>
<title>JSのライブラリーを使う</title>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>
<body>
<p id="jq">こっちと</p>
<p id="js">こっちで表示が変わるかな？</p>
<script>
$(document).ready(function() { //HTML文書が読み込まれたら、準備ができたら（準備ができるまで待ってから）この関数を発動させる
$("#jq").html("<p>jqueryを使えるかな？</p>") //jsのinnerHTMLに対応
});
let j = document.getElementById("js");
j.innerHTML = "<p>jqueryを使わないでもこれくらいならかけるけどね！</p>";
</script>
</body>
</html>
getElementByIdと打ち込まなくてももよいのは気が楽ですね。
jqueryの構文の使い方はネットで調べられます。
$("#jq1").html("<p>jqueryを使えるかな？</p>")は
jQuery("#jq1").html("<p>jqueryを使えるかな？</p>")を省略した表現です。省略して使いましょう。
突然出てきましたが#はidを表します。CSSでの使い方と同じです。
処理をする対象を表すものをセレクタと呼びます。
jqueryでは .class や#idといった書き方はCSSと同じです。（同じな気がする）
$(document).ready(function() {関数の中身}も次のように略記されます。
$(function() {関数の中身})HTML文書が読み込まれたら、準備ができたら（準備ができるまで待ってから）この関数を発動させるコードです。
jqueryの方が使いやすい？
だとしたら・・・
jqueryは「ライブラリー」なのに大元よりも使いやすい？としたら・・・
JavaScriptって何なんだ？と思い調べてみたら。
プログラミング言語は時代時代で変わっていくもの。
これからJavaScript, jqueryはどうなっていくのかわかりません。
ただいまはとりあえずこの言語（JavaScript）、このライブラリー（jQuery）は便利に使われている、ということのようです。
jQueryではないライブラリーを推奨する声もありました。
jqueryの便利さを体験して終わりにしよう
便利なものがあるのです。
昔ならHTML、CSSをきちんと勉強しないと作れなかったHPが今ではお手軽に作れる。
動画編集だってスマホでできちゃう。
誰もが簡単に・・・
そんな流れでjqueryでできることを体験してみましょう。
<!DOCTYPE html>
<html>
<head>
<title>JSとJQを比較</title>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>
<body>
<p id="btnJq">こっちと</p>
<p id="btnJs">こっちのどちらを押す？</p>
<script>
$("#btnJq").click(function() {
alert("へへーんjQueryだよ")
});
let j = document.getElementById("btnJs");
j.addEventListener("click", () => alert("こっちがJSだ！"))
</script>
</body>
</html>
最初からjQueryを学べばよっかった・・・・
都思いたくなるほど、単純にコードがかける、と感じるのは私だけでしょうか。
国語の授業で「古典」を勉強するのと同じでしょうか。
jqueryにはjqueryのメソッドの書き方、使い方があり、構文、文法がJavaScriptとは違います。
jquery リファレンス
と調べると、いろいろな呪文の詠唱方法とその効果がでてきます。
一瞬で・・・・それが・・・・
<!DOCTYPE html>
<html>
<head>
<title>JSとJQを比較</title>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
</head>
<body>
<style>
#menu dd {
display: none;
}
</style>
<dl id="menu">
<dt>当店のメニューはこちらです</dt>
<dd>ライスカレー</dd>
<dd>カレーライス</dd>
<dd>ライス</dd>
<dd>カレー</dd>
</dl>
<script>
$(function (){
$("#menu dt").click(()=> { //$("#btn").click(function() {でも同じ
$("#menu dd").slideToggle();
});
});
</script>
</body>
</html>
こんなことが・・・・
ここで使われたのはslideToggleメソッドです。
使い方、もっと細かい設定は調べたらでてきます。
どうでしたか？
JavaScriptのライブラリー、jQueryの体験でした。
さらにjQueryのプラグインなるものが存在します。
jQueryの表現が広がる！
スライドショー、アニメーション、ウェブサイトがより「動く」とおもったら、このサイトはjqueryを使っているのかな？と思ってください。
メールフォームや「トップに戻る」も、もしかしたらjqueryで書かれているかもしれません。
伝え方はいろいろ。
コメント