こんにちは、たつきです。
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制作したい方はご自由にどうぞ。
ハンバーガーメニュー
アコーディオンパネル
スムーズスクロール
