こんにちは、「BRANCH FOR PRO」の中の人です。
今回は、「jQuery」について解説したいと思います。
対象読者は、「JavaScriptは知っているけれど、jQueryは使ったことがない人」です。
jQueryを使うための準備
先ずは、jQueryを使うための前準備をご説明します。
HTMLファイルにscriptタグで入れている場合の例は、次の通りとなります。
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <!-- <link rel="stylesheet" href="css/style.css"> --> <title>jQueryの練習</title> </head> <body> <div id="wrapper"> <p>テストです</p> </div> <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <!-- ここが「jQuery」を使うための準備です! --> <script> <!-- // JavaScriptのコード --> </script> </body> </html>
普通のJavaScriptの前に、なんだか呪文めいた
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
が入っているのがお分かりかと思います。
これは、「jQueryをインターネットからダウンロードして、使う準備をします」という呪文です。
「src=”~~~”」と入っているので、「ローカルにダウンロードしておけばいいんじゃないの?」と思う方もいらっしゃると思います。
それでも動くのですが、色々なメリットがあるので(今回は深入りしませんが…)、敢えてインターネットからダウンロードする形にしています。
その次に現れている
<script>~</script>
には、通常のJavaScriptが書かれます。
「jQueryを準備した」とは言っても、普通の今までのJavaScriptが動かなくなるわけではないので、その点は大丈夫です。
jQueryを動かしていこう
では、次に簡単な例をお見せします。
<div id="wrapper">
内のpタグで囲まれたテキストの背景色を変更してみましょう。
先ず、普通のJavaScriptでは、次のようなコードになります。
<script> <!-- window.onload = function() { element = document.querySelector('#wrapper p'); element.style.backgroundColor = '#ff0000'; } --> </script>
では、jQueryで書き換えてみます。
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> <script> <!-- $(function() { $('#wrapper p').css('background-color', '#ff0000'); }); --> </script>
解説
JavaScriptは読み込まれた瞬間に実行されるので、どちらの例でもHTMLの読み込みが完了した時点で実行されるように指示しています。
通常のJavaScriptですと、
window.onload = function() {
となりますが、jQueryですと、もっと簡単に
$(function() {
となります。
これは、どちらも「おまじない」として覚えておきましょう。
次に、CSSのセレクタ形式で、要素(element)を選択しています。
通常のJavaScriptでは、「document.querySelector(‘#wapper p)」で要素を選択しますが、jQueryですと「$(‘#wapper p’)」とだけ書けば要素を選択できます。短いですね。
それからCSSでは、通常のJavaScriptでは「style.backgroundColor」というプロパティを操作しますが、jQueryではCSSでの書き方「background-color」を「ハイフンなし、ハイフンの次の文字列の最初の文字を大文字にする」という指定に書き換えなければなりません。
jQueryでは、「css()」メソッドで直接「(‘CSSので書き方’, ‘CSSの値’)」と素直に書けます。
あとは、対応するかっこを閉じて、プログラムを終了しています。
これだけですと、jQueryのありがたみが少ないのですが(かえって煩雑?)、「セレクタの指定が簡単」「CSSの指定が素直」という2点に注目してください。
次の記事では、JavaScriptの「textContent」をjQuery流に書き換える予定です。お楽しみに!