プログラミング、気楽な生き方を中心に発信しています。
  • twitter
  • instagram
  • facebook

【入門】jQueryの基礎講義【使い方と書き方を解説】

こんにちは、たつきです。
WEBエンジニアとしてWEB制作をして生活しています。

本記事ではjQueryの基礎講義として使い方と書き方を解説していきます。

本記事の内容

  • jQueryの使い方を解説
  • jQueryの書き方を解説
  • jQueryでよく使うメソッド
  • おまけ:jQueryでよく作るテンプレ素材を配布

これからjQueryを学習する方やjQueryの復習がしたいという方は参考にどうぞ。

jQueryの使い方を解説

WEB制作の現場でよく使われています。

jQueryとは

JavaScriptをより簡単に使用できるようにしたライブラリです。

WEB制作の現場でよく使われており、初心者の方も簡単に使う事ができるのでJavaScriptを軽く勉強したけど難しくて扱えないという方にも最適です。

jQueryの読み込み方

CDNを読み込むだけで使用できます。

HTML
<script type="text/javascript" src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

上記のタグをheadタグの中に書くだけで使用できます。

ルールはJSと同じです

JavaScriotをより使いやすく便利にしたライブラリであり、元のプログラムはJavaScriptなのでルールもJSと同じです。

  • jsファイルで使用できる
  • scriptタグの中でそのまま使える
  • 文字列はクォーテーションで囲む

コードの書き方が少し変わるだけで、その他はJavaScriptと同じように使う事ができます。

jQueryの書き方を解説

サクッと書き方を解説していきます。

iQueryの基本の書き方

基本的な書き方は下記の通りです。

jQuery
$(function(){ //ココに処理を書く });

上記が基本の形です。
jQueryを使う時は、まずはこの形をすぐに作れるようにしておくと覚えておきましょう。

「$」を付ける

jQueryの特徴として$マークを付けていますが、特に意味はないです。
この$マークがあったら、「jQueryを使っているな」って感じです。

WordPressでjQueryを使う場合は、$マークを「jQuery」にする必要があるので、そこだけ覚えておきましょう。

セレクターとメソッド使う

jQueryは基本的にはセレクターとメソッドを使っていくだけで完結します。

jQuery
$(function(){ $('セレクター').メソッド(引数); });

上記のような感じです。
セレクターでは対象の要素を選択して、メソッドで何かの動作を行なっていきます。

これを繰り返していくだけです。
とてもシンプルな作りになっているので、使いやすくて人気があるのが分かりますよね。

メソッド覚えていくだけです

jQueryではメソッドと呼ばれる、色々な機能が用意されているので、これらのメソッドを覚えていくだけでjQueryはマスターできます。

WEB制作向けの便利なメソッドばかりなので、WEB制作をメインでやっていく方はまずはjQueryがしっかりと使えれば問題なしかと。

後半ではよく使うメソッドを解説していきます。

jQueryでよく使うメソッド

本記事で紹介するのは下記のメソッドです。

  • addClass
  • removeClass
  • text
  • attr
  • change
  • click
  • hide
  • show
  • toggle

機能は違いますが、使い方はどれも似ているので覚えやすいです。
順番に解説していきます。

addClass

要素にクラスを追加するメソッドです。

jQuery
$(function(){ $('h1').addClass('title'); });

「h1タグにクラスtitleを追加する」という意味です。

removeClass

要素の特定のクラスを削除するメソッドです。

jQuery
$(function(){ $('h1').removeClass('title'); });

「h1タグのクラスtitleを削除する」という意味です。

text

要素内のテキストを取得して書き換えるメソッド。

jQuery
$(function(){ $('h1').text('これはタイトルですっ'); });

「h1タグのテキストを【これはタイトルですっ】に書き換える」という意味です。

※要素のテキストが空のの場合でも使用できます。

attr

属性を取得して、書き換えるというメソッドです。

jQuery
$(function(){ $('a').attr('href','https://www.apple.com/jp/'); });

「aタグのhref属性を取得して、【https://www.apple.com/jp/】に書き換える」という意味です。

change

要素の内容が変更されたら処理を実行するというメソッドです。

jQuery
$(function(){ $('input').change(function(){ $('h2').addClass('sub_title'); }); });

「inputタグの内容が変わったら、h2タグにクラスsub_titleを追加する」という意味です。

click

要素がクリックされたら処理を実行するというメソッドです。

jQuery
$(function(){ $('h2').click(function(){ $('this').addClass('open'); }); });

「h2タグがクリックされたら、そのタグにクラスopenを追加する」という意味です。

thisというのはh2タグの事を指しています。

hide

要素を非表示にするというメソッドです。

jQuery
$(function(){ $('h1').hide(); });

「h1タグを非表示にする」という意味です。

show

要素を表示するというメソッドです。

jQuery
$(function(){ $('h1').show(); });

「h1タグを表示にする」という意味です。

toggle

要素が非表示の場合は表示させて、要素が表示されている時は非表示にさせる事ができるメソッドです。

jQuery
$(function(){ $('h1').click(function(){ $('p').toggle(); }); });

「h1タグをクリックした時に、pタグを表示、または非表示にする」という意味です。

おまけ:jQueryでよく作るテンプレ素材を配布

WEB制作でよく使う素材をテンプレ化して配布しているので、サクッとWEB制作したい方はご自由にどうぞ。

ハンバーガーメニュー

アコーディオンパネル

スムーズスクロール