jQuery入門~導入から基本の使い方まで~

    • このページをはてなブックマークに追加

    公開日:2019年02月20日 最終更新日:2019年09月25日

    JavaScriptライブラリの「jQuery」の導入方法から使い方まで、jQuery初心者向けに、簡単なサンプルコードと共に解説します。

    目次

    1. jQueryとは?

    「jQuery]」とは、短い記述でWebページに様々な効果を与える事ができるJavaScriptのライブラリです。「ライブラリ」とは特定の機能を持ったプログラムを集めたファイルです。ある機能をJavaScriptで一から書いた場合数十行になるようなプログラムを「jQuery」では数行で書く事ができます。また、JavaScriptで記述する場合には、ブラウザーごとの違いを考慮してたくさんのコードを記述する必要がありますが、「jQuery」を記述する際にはブラウザーの差異をきにする必要はありません。

    2. jQueryを使う準備

    「jQuery」のライブラリを使う方法は二通りあります。ダウンロードした「jQuery」のファイルをローカルPCやサーバーに配置して使う方法と、CDN(Content Delivery Network)を利用してjQueryライブラリを使う方法です。 手軽に「jQuery」ライブラリを使えるCDNの使い方について確認してみましょう。

    「jQuery」をダウンロードして使う方法については、以下のコラムでも解説していますので、ご参考下さい。

    関連記事:jQueryのダウンロードから使い方まで

    「jQuery」ライブラリをダウンロードしなくても、jQueryの公式サイトや、MicrosoftGoogle の提供するCDNをHTMLコード中に指定する事で「jQuery」を使う事ができます。

    jQuery CDN – Latest Stable Versions

    「jQuery」公式サイトのCDNを使う場合は、HTMLのheadタグ内にスクリプトタグを以下の様に指定します。

    <script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>

    「jQuery」を使う準備はこれだけです。次の章で実際のサンプルコードを元に簡単な「jQuery」を実装してみましょう。

    ▲ページトップへ戻る

    3. jQueryの使い方

    3.1. jQueryの基本文法

    「jQuery」ライブラリを読み込むコードを記述をしたら、その後に「jQuery」を書いていきます。

    ●jQueryの基本書式

    $(document).ready(function(){
     //ここにjQueryの処理を記述します。
    });

    jQueryの命令は「$(ドルマーク)」から始まります。jQueryの読み込みタイミングを制御する「$(document).ready() メソッド」に続き「(function(){ ... };」内にjQueryの処理を記述します。 jQueryはHTMLを全て読み込んだ後に実行されます。また、ready関数を省略した記述も可能です。

    ●jQueryの基本書式(省略形)

    $(function(){
     //ここにjQueryの処理を記述します。
    });

    ●jQueryの処理

    $("セレクタ").jQueryの命令

    jQueryの処理は、「$("セレクタ")」で処理対象の要素を指定し、ドット「.」で区切った後にどのような処理をするか「jQueryの命令(メソッド)」を記述します。

    ▲ページトップへ戻る

    3.2. jQueryでテキストの色を変更する方法

    それでは、実際に段落タグの色を変更するjQueryを記述してみましょう。サンプルコードの「jQuery_Sample1.html」をコピーして、任意の場所に保存して下さい。

    ●jQuery_Sample1.html --------------------

    <!DOCTYPE html>
    <html>
    <head>
    <title>Introduction to jQuery</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"
    integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous">
    </script>
    <script>
    $(document).ready(function(){
    $("p").css("color", "red");
    });
    </script>
    </head>
    <body>
    <p>段落タグのテキストをjQueryで赤にしています。</p>
    </body>
    </html>
    --------------------

    サンプルコードの「jQuery_Sample1.html」では、CSSを配置することなく、jQueryを実装する事で、段落タグのテキストの色を変更しています。処理の行の「$("p")」で段落タグに対して、スタイルを指定するcssメソッドを実行し、テキストの色(color)を赤(red)に変更しています。

    ▲ページトップへ戻る

    jQueryのスキルが活かせる最新求人情報をチェック!

    月額単価60万円〜75万円
    勤務地 東京都 港区
    月額単価50万円〜
    勤務地 東京都 渋谷区
    年収300万円〜
    勤務地 東京都 新宿区
    年収300万円〜
    勤務地 東京都 渋谷区
    • このページをはてなブックマークに追加

    おすすめ記事

  • ピックアップ

    フリーランス

    【Ruby】Web開発エンジニア★フォトスタジオサイトのリニューアル

    月額単価 :60万円〜75万円

    ウェディングフォトスタジオや衣装レンタルのWebサイトリニューアルしておりそちらにも携わっていただき...

    フリーランス

    【HTML/CSS/Git】コーダー ★金融系Webシステムの開発

    月額単価 :50万円〜

    3月より新規で金融系のWebサイトを受注するに伴いコーダーを募集します。 そこまで特殊なライブラリ...

    正社員

    【HTML/Java】プログラマー|一般・企業向けWebサイトの制作

    年収 :300万円〜

    ◎仕事内容 ◆9割が未経験からスタート ◆3ヶ月の自社内研修でキホンのキから学べる! 未経験から、人気...

    株式会社日本技研プロフェッショナルアーキテクト

    正社員

    【PHP/JavaScript】WEBエンジニア・プログラマー|Webシステムの開発

    年収 :300万円〜

    【システムエンジニア】 ・WEBシステム、スマートフォンアプリのシステム要件定義~設計までの上流工程...

    株式会社パーミッション