jQuery入門-サンプルプログラムを見て学ぼう

2019年8月3日2020年2月23日

JavaScriptのライブラリ「jQuery」の入門ページです。

当サイトの各種jQuery解説は、すべて「実行例を含むサンプルコード付」で解説しておりますので、コピーして実際に検証してみてください。

jQueryについて

「write less, do more」（「少ない記述で、もっと多くのことをする」。
そんなjQueryの基本的な仕様と使い方を知りたい方は、まずはjQueryとは？からお読みください。

1.jQueryとは？仕様と使い方について

2.セレクタの指定方法

3.$(this)の使い方

4.デバッグに必要なconsole.log

jQueryで扱えるメソッド（関数）一覧

jQueryで要素を操作するメソッドを種類別に解説しております。

1.テキストとhtmlの操作

text
html

2.ユーザー操作による各種イベントの実行

click
dblclick
mousedown
mouseup
mousemove
mouseover
mouseout
touchstart
touchend
touchmove
focus
change
input
keydown
keypress
keyup
scroll
resize
ready
load
error

3.要素の表示・非表示

show
hide
toggle

4.要素の削除

empty
remove

5.classの追加や削除

addClass
removeClass
hasClass
toggleClass

6.CSSの設定や削除

css

7.属性や状態の変更

attr
prop

8.要素の追加（挿入）

before
after
prepend
append

9.親要素の取得

parent
parents
closest

10.子要素の取得

find
children

11.兄弟要素の取得

next
nextAll
prev
prevAll
siblings

12.要素や配列の繰り返し

each

13.data属性の取得

data

14.Ajaxによる非同期通信

ajax

15.要素のアニメーション変化

animate

16.要素の横幅・高さの取得／変更

width
height
innerWidth
innerHeight
outerWidth
outerHeight

17.配列内の値の検索

inArray
each

jQueryによるフォームの操作

テキストボックスやセレクトボックスをjQueryで操作する方法をフォーム部品ごとにまとめました。

1.テキストボックス – 代入・削除・イベント・フォーカス操作など

2.チェックボックス – チェックの代入・判定・イベント・同時チェック制限など

3.セレクトボックス – 値の変更・選択肢の追加や削除・イベントなど

4.ラジオボタン – 値の変更・イベントなど

jQueryで出来ること

jQueryで作られたWEBの表現についてまとめました。

jQueryで作ったプラグイン

私がjQueryで作ったプラグインを紹介します。

1.入力補完「mysuggest.js」

2.スマホ向けセレクトボックス「selmodal.js」

オススメjQueryプラグイン

ネットで公開されているオススメのjQueryプラグインを紹介します。

1.テーブルにソート機能を追加する「tablesorter.js」