本サイトは記事内に広告を含む場合があります

HTML・CSS JavaScript

JavaScript初心者でも理解できる一番分かりやすいjQuery入門

Webサイトを作る勉強や仕事をしていると、どうしてもHTMLとCSSだけでは実現する事が難しい機能を実装する場面が出てくると思います。

例えば、サイトにスライダーの機能を付けたり、ユーザーの操作に応じて高度なアニメーションを発生させる時などは、場合によってはJavaScriptなどのプログラミング言語を使って組む必要が出てきます。

そんな場合、JavaScriptのことをそんなに理解していなくても、少し勉強すれば簡単にインタラクティブ(動的)なサイトを作る技術がります。

それが、jQueryと呼ばれるJavaScriptのライブラリです。

今回は、そんなjQueryを初心者でも理解しやすいように分かりやすく解説していきたいと思います。

JavaScriptを詳しく知りたいという方や『JavaScriptって何？』という方は下の記事をお読みください。

Javascriptとは？変数、配列、連想配列の基本的な使い方教えます
【初心者でも理解できる】JavaScriptの『変数』『配列』『連想配列』『関数』の使い方入門

WEBの勉強をしている方であれば、何度も『JavaScript』という言葉を聞いたことがあるのではないでしょうか？ 『いつか勉強しよう』『たぶん理解できないし』など何となく諦めていたり、勉強を先延ばし ...

続きを見る

 

 

jQueryとは何かJavaScriptとの違いを解説

jQueryとは何かJavaScriptとの違いを解説

jQueryとは簡単に言うと、JavaScriptの難しくて、普通に書くと長くなってしまうプログラムを分かりやすい記述方法で、短く書けるようにしたプログラムのことです。

jQueryはJavaScriptで書かれており、コーダーが書いたjQueryの構文を元にjQueryの中では、とても長いJavaScriptに置き換えられて処理が動いています。

jQueryはその書きやすさとライブラリ(機能追加)の多さからWebサイトを作る際はよくスライダーの実装やアニメーションの実装などに利用されています。

jQueryがJavaScriptで作られいることは分かっていただけたかと思いますが、JavaScriptじゃなくて何故jQueryで書く必要があるのか分かりにくい方もいるかと思います。

例えば以下のようにJavaScriptで記述する場合とjQueryで記述する場合では、その記述量に明確な違いが生まれてきます。

JavaScriptとjQueryの記述量の違い

例えばJavaScriptでHTMLのid名を指定して要素の取得を行いたい場合、下のようにjQueryとの記述量に大きな違いが出てきます。

  • JavaScriptの場合：document.getElementById('id名');
  • jQueryの場合：$('#id名');

 

jQueryのダウンロード方法 / CDNを使う方法

jQueryのダウンロード方法 / CDNを使う方法

jQueryをダウンロードする方法は、まずはこちらのサイトにアクセスして、『Download jQuery』というボタンを押してファイルをダウンロードします。

 

jQueryのダウンロード方法 / CDNを使う方法

ダウンロードボタンを押すと画面が遷移して、それぞれ種類の違うjQueryが表示されますが、一番上の『Download the compressed, production jQuery バージョン名』とあるボタンを押して表示されたソースコードをテキストエディターにコーピー＆ペーストすれば、利用することができます。

<!DOCTYPE html> 
<html lang="ja"> 
<head> 
    <meta charset="UTF-8"> 
    <title>jQueryテスト</title> 
    <script src="./jquery-3.5.1.min.js"></script> 
</head> 

<body> 
</body> 
</html>

 

ダウンロード手順と利用法

  1. jQueryのダウンロードサイトにアクセス
  2. jQueryのダウンロードボタンをクリックしてソースコードをコピーする
  3. jQueryのバージョン名に合わせて『.js』の拡張子でファイルを作成する
  4. HTMLファイルからjQueryのファイルを『script』タグで読み込む

 

jQueryのCDNを利用方法

jQueryのダウンロード方法 / CDNを使う方法

また、CDNを利用する際はこちらのサイトにアクセスして一番上の最新のjQueryの欄から『minified (圧縮版)』のリンクをクリックして表示されたscriptをHTMLにコピー＆ペーストしましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>jQueryテスト</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>
<body>
</body>
</html>

 

jQueryの書き方

jQueryの書き方

jQueryを書く場合、複数の書き方がありますので、ご自身の用途に合わせて使い分けるようにしましょう。

jQueryを使い始める前に、先に『index.html』を作成しておきscriptタグ(スクリプトタグ)で今回作成する『index.js』を読み込んでおきましょう。

『index.js』にこれから書くプログラムを実行するためには、必ず『jQuery』を読み込んだ下でスクリプトの読み書きをするようにしましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>jQueryテスト</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="./index.js"></script>
</head>

<body>
</body>
</html>

 

まずは、もっともシンプルな書き方を2種類ご紹介します。それが下のサンプルコードになります。

書き方は少し違いますが、どちらも同じように動きます。

$(function() {
    //これから行う処理
});
$(document).ready(function(){
    //これから行う処理
});

 

上のjQueryのプログラムが何を意味しているのかと言うとDOM(HTML)の読み込みが終わった段階で処理を実行することを意味しています。

また、上のプログラムの例以外の方法で下の例のように、さらに短く書くことも可能です。

 

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>jQueryテスト</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
</head>

<body>

<script src="./index.js"></script>
</body>
</html>
$('body').css('background-color', 'red');

 

お気づきになられた方もいるかと思いますが、スクリプトを読み込む位置とが変わっている点と、先ほど紹介した『$(function){}』と『$(document).ready(function(){}』の処理が無くなり、いきなり実行させたい処理を書いていることがお分かりになるかと思います。

ちなみにこの処理はHTMLのbody要素をCSSで背景色を赤色にしなさいという処理をjQuery側で行なっているものになります。

なぜ、この処理が動いてしまうのかと言うとHTMLはコードを上から順番に実行するという特徴があるので、『</body>』直前に書くことによって『<body></body>』を読み込むことが可能となっています。

 

WordPressでjQueryを使う方法

上の章で紹介したこと以外にも、jQueryには書き方が存在しておりWordPressでjQueryを記述する場合は普段の書き方と少し使い勝手が変わってきます。

具体的にどのようにして記述するのかというと、以下のような書き方をします。

jQuery(function($){ 
    //これから行う処理
});

 

jQueryでHTML要素を取得する方法

jQueryでHTML要素を取得する方法

まずは、jQueryで何かの処理を行いたい場合は、必ずHTML要素の取得から始まります。

jQueryを初めて使う方には、少し取っ付きにくいかもしれませんが書いている意味いを一行一行理解しながらサンプルコードを実行していくようにしましょう。

以前の例でも書いたようにJavaScriptとjQueryの記述の方法は、かなり違いがありますが、書き方に慣れてくればjQueryがどれほど優れたプログラムであるかを理解できるかと思います。

 

セレクタ名で取得する方法

まずは、jQueryでセレクタを指定して要素を取得してみたいと思います。

JavaScriptでセレクタを取得する場合は助長な書き方になってしまいますが、jQueryで記述することによって直感的で読みやすいコードにすることも可能です。

何はともあれ、実際の記述方法をみていきましょう。それが、以下の例になります。

$(function() {
    let $body = $('body');
});

 

上の例は、『body要素』を取得して変数『$body』に取得した値を代入しています。

基本的に、セレクタをjQueryを利用して取得したい場合は、『$('セレクタ名')』のような書き方をとり、取得した要素にたいして何かしたの処理をしていきます。

 

id名で取得する方法

次にHTMLのid名を指定して、jQueryで要素を取得する方法を紹介します。

JavaScriptのみを利用した場合は『document.getElementById('id名')』と少し長い記述になってしまいますが、jQueryを利用することによって記述量を大幅に削減することができる上に、ブラウザ間の記述の差分も吸収してくれるとう特徴もあります。

例としてjQueryでHTMLのid名を割り振った要素を取得する場合は以下のように記述します。

 

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>jQueryテスト</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="./index.js"></script>
</head>

<body>
<h1 class="siteName"></h1>
</body>
</html>
$(function() {
    let $siteName = $('#siteName');
});

 

上の例のように『index.html』のファイルに『h1タグ』で記述した『siteName』というid名を決めた要素を用意して、jQuery側で『$('#id名')』という形を取り、要素を取得していることが分かるかと思います。

 

class名で取得する方法

jQueryでクラス名を振られたHTML要素を取得するためには、下の例のように『$('.クラス名')』のように記述します。

jQueryでクラス名を取得した場合、返り値はは配列形式の値を得られますので、for文などと合わせて使われる場合が多いです。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>jQueryテスト</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="./index.js"></script>
</head>

<body>
<ul>
    <li class="list">リスト</li>
    <li class="list">リスト</li>
    <li class="list">リスト</li>
    <li class="list">リスト</li>
</ul>	
</body>
</html>
$(function() {
    let $list = $('.list');
    console.log($list); // => [li.list, li.list, li.list, li.list]
});
 
階層構造になっている要素を取得する方法
CSSでも何々の要素の中に属する要素を取得して操作をしたい場合があるかと思います。
jQueryにも当然そのような機能が備わっています。
例えば、下の例のようにCSSで『ul .list』と記述した時のようにjQueryでも似たように『$('ul .list')』と記述することによって先ほどのコードと同じ実行結果が得られます。
$(function() {
    let $list = $('ul .list');
    console.log($list); // => [li.list, li.list, li.list, li.list]
});
 
隣接する要素の取得方法
jQueryで隣接するHTMLの要素を取得する場合は下の例のように『$('隣接される要素').next('隣接する要素');』という形で記述します。
CSSで記述する場合は『隣接される要素 + 隣接する要素 {};』という記述の仕方をしますが、jQueryの場合は少し違うので注意するようにしましょう。
下の例では『mainCopy』というクラスに隣接する『p』タグを取得する処理を記述しています。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>jQueryテスト</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="./index.js"></script>
</head>

<body>
<div class="wrap">
    <h1 class="mainCopy">メインコピー</h1>
    <p>サブコピー</p>
</div>
</body>
</html>
$(function() {
    let $mainCopy = $('.mainCopy');
    let $subCopy = $mainCopy.next('p');
});
 
直下の子孫要素を取得方法
jQueryで親要素の直下に存在する要素を取得する場合は『$('親要素').children('直下の要素');』という形で記述します。
CSSの場合は『親要素 > 直下の要素 {};』という記述の仕方をしますが、jQueryの場合は少し違うので注意が必要です。
下の例では、『wrap』というクラスの直下に存在する『mainCopy』というクラスを取得する処理を記述しています。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>jQueryテスト</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="./index.js"></script>
</head>

<body>
<div class="wrap">
    <h1 class="mainCopy">メインコピー</h1>
</div>
</body>
</html>
$(function() {
    let $wrap = $('.wrap');
    let $mainCopy = $wrap.children('.mainCopy');
});
 
親要素の取得方法
jQueryで親要素を取得する場合は下の例のように『$('子要素').parents();』という形で記述します。
CSSで親要素を取得しようとした場合は、そのような仕様が存在しないため出来ませんがjQueryでは可能です。
下の例では『mainCopy』クラスの親要素である『wrap』クラスを取得するという処理になります。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>jQueryテスト</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="./index.js"></script>
</head>

<body>
<div class="wrap">
    <h1 class="mainCopy">メインコピー</h1>
</div>
</body>
</html>
$(function() {
    let $mainCopy = $('.mainCopy');
    let $wrap = $mainCopy.parents();
});
 
要素の番号を指定して取得する方法
jQueryで要素番号を指定してHTMLを取得する場合は、下の例のように『$('親要素').find('取得したい要素').eq('要素番号')』という形で記述します。
CSSで要素番号を指定して取得する場合は『親要素 取得したい要素:nth-child(要素番号)』か『親要素 取得したい要素:nth-of-type(要素番号)』という形で記述しますがjQueryの場合は少し違うので注意するようにしましょう。
下の例では『listWrap』というクラスの中に存在する『li要素』の3番目にあるリストを取得する処理を記述しています。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>jQueryテスト</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="./index.js"></script>
</head>

<body>
<ul class="listWrap">
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
    <li>リスト</li>
</ul>
</body>
</html>
$(function() {
    $listWrap = $('.listWrap');
    $list_03 = $listWrap.find('li').eq(2);
});
 
上の例で少し注意して欲しいのが、JavaScriptなどのプログラミング言語などで要素番号を指定する際は必ず番号が0(ゼロ)から始まるとうい事に注意するようにしましょう。
それをふまえた上で改めて上の例を見てみると3番目の要素を取得したいのに『2』と記述されていることが分かるかと思います。
これは0(ゼロ)から数えて3番目の要素だから数字の『2』が記述されているのです。
 
jQueryでCSSを操作する方法
jQueryでCSSを操作する方法
jQueryでCSSを操作する方法は、以前の章で少し触れましたが、ここではさらに詳しく解説したいと思います。
jQueryでCSSを操作すると言われても少しピンとこない方もいらっしゃると思いますが、スタイルシートを再編集しているわけではなく、HTMLのstyle属性をjQuery側で操作しているという形になります。
例えば以下の例は、『wrap』クラスの背景色を赤色にして横幅と縦幅を100pxにするという処理を記述しています。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>jQueryテスト</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="./index.js"></script>
</head>

<body>
<div class="wrap"></div>
</body>
</html>
$(function() {
    $wrap = $('.wrap');
    $wrap.css({
        'width': '100px',
        'height': '100px',
        'background-color': '#ff0000'
    });	
});
 
jQueryでHTMLの属性を操作する方法
jQueryでHTMLの属性を操作する方法
jQueryでHTMLの属性を操作したい場合は、下の例のように『$('操作したい要素').attr('操作する属性', '値');』という形で記述します。
この場合、元々HTMLの要素にセットされている属性以外にも、新しく属性を追加して操作することも可能です。
下の例ではjQueryで『list』クラスの中に存在する『a』要素のdata属性を操作して、新しい値を与えてる処理を記述しています。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>jQueryテスト</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="./index.js"></script>
</head>

<body>
<ul>
    <li class="list"><a href="#" data-src="">リスト</a></li>
    <li class="list"><a href="#" data-src="">リスト</a></li>
    <li class="list"><a href="#" data-src="">リスト</a></li>
    <li class="list"><a href="#" data-src="">リスト</a></li>
    <li class="list"><a href="#" data-src="">リスト</a></li>
</ul>
</body>
</html>
$(function() {
    $list = $('.list');
    $list.find('a').attr('data-src', 'httsp://yahoo.co.jp');
});
 
jQueryでHTMLのクラス属性を操作する方法
jQueryでHTMLのクラスを操作することによって、CSSをユーザーの操作に応じて動的に変化させることが出来ます。
例えばjQueryを使えば、新しくクラスの追加することや、すでにあるクラスを削除することなどが出来ます。
ここではjQueryでクラス名を変更したりする事によってCSSを変化させる方法について解説していきます。
 
jQueryでHTML要素にクラス名を追加する方法
jQueryでHTML要素に新しくクラスを追加する方法は『$(操作したい要素).addClass('追加したいクラス名');』の形で記述します。
例えば下の、記述は『wrap』クラスに『bg-red』というクラス名を追加する事によって、背景色を赤色に変更しています。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>jQueryテスト</title>
    <style>
    * {
        margin: 0px;
        padding: 0px;
    }
    .wrap {
        width: 100px;
        height: 100px;
    }
    .bg-red {
        background-color: red;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="./index.js"></script>
</head>

<body>
<div class="wrap"></div>
</body>
</html>
$(function() {
    $('.wrap').addClass('bg-red');
});
 
jQueryでHTML要素のクラス名を削除する方法
jQueryでHTML要素のクラス名を削除する方法は、下の例のように『$('操作したい要素').removeClass('削除したいクラス名');』の形で記述します。
例えば下の記述のように、『wrap』クラスから『bg-red』クラスを削除して背景色を黒色にする処理を行なっています。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>jQueryテスト</title>
    <style>
    * {
        margin: 0px;
        padding: 0px;
    }
    .wrap {
        width: 100px;
        height: 100px;
        background-color: #000;
    }
    .bg-red {
        background-color: red;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="./index.js"></script>
</head>

<body>
<div class="wrap bg-red"></div>
</body>
</html>
$(function() {
    $('.wrap').removeClass('bg-red');
});
 
jQueryでHTMLに要素を追加する方法
jQueryでHTMLに要素を追加する方法
jQueryでHTMLに要素を追加する方法は、下の例のように『$('追加される要素').append('追加する要素');』の形にして記述します。
jQueryで要素を追加する事によって、ユーザーの操作に応じて新しくHTML要素を追加したい場合などに使えます。
例えば下の記述では、『wrap』というクラスの要素に『inner』とうクラスの要素を追加しています。
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>jQueryテスト</title>
    <style>
    * {
        margin: 0px;
        padding: 0px;
    }
    </style>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
    <script src="./index.js"></script>
</head>

<body>
<div class="wrap"></div>
</body>
</html>
$(function() {
    let $wrap = $('.wrap');
    $wrap.append('<div class="inner"></div>');
});
 
まとめ
今回はJavaScript初心者でもjQueryが理解できるように分かりやすく解説してきましたが、いかがでしたでしょうか？
jQueryを使うことによって、今までCSSだけでは難しかった高度なアニメーション表現や、ユーザーの操作に応じた動的なHTML操作が、より直感的に書けることできることを理解していただけたかと思います。
JavaScript初心者にとっては少し慣れの必要な部分もあるかもしれませんが、色々なサンプルコードに触れているうちに自然と技術力が付いてきますので、とにかく手を動かしてコードを書いてみることをオススメします。
コードを書く際は、できるだけ写経するのではなくプログラムの意味を一行ずつ追ってみて少しづつ理解していきましょう。
   
 -HTML・CSS, JavaScript