LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

@gyu_outputs(サーバーサイドエンジニア ぎゅう)

jQueryの理解を深める

Last updated at Posted at 2020-10-22

基本的な考え方

JQueryの基本的な考え方は、イベント発生時に、要素を指定して、変更を加える。
なので、イベント系メソッド、要素取得系メソッド、変更を加えるメソッドを把握しておけば、自在に操ることができる。

基本的な公式

jQueryの公式
対象要素.on( イベント名, 要素, データ ,関数 )
append後でも処理可能
$(document).on(イベント名, '要素', function ()
 {
 // 何かの処理
});

関数

関数名を定義

関数を定義
// 関数を定義
function 関数名 () {
  //処理を記述する
}

//関数を呼び出す・使う
関数名（）
例
function add () {
  //処理を記述
}
add()

関数に引数を使う

引数を使う
function 関数名 (引数1, 引数2...) {
    //処理を記述
}

関数名( 引数1, 引数2 ...);
例
function add (num1, num2) {
    return num1 + num2;
}

add(1,2);

function(e){}

e = eventの略
eventの情報を確認できる

eの情報を確認する
$("#sample").click(function(e){
  console.log(e);
});

jQuery.eventをクリックして、中身を確認

eの情報
altKey: false
bubbles: true
button: 0
buttons: undefined
cancelable: true
clientX: 99 //座標: x軸
clientY: 47 //座標: y軸
ctrlKey: false
currentTarget: input#sample
data: null
delegateTarget: input#sample
...(省略)

eから情報を取得するなら

eの情報を取得
e.取得したい項目

//例
alert(e.clientX);

読み込み

redy と loadの２つの方法がある。

redy

ready: DOMツリーの構築が完了したら実行される。
readyは画像などが表示されるより前に実行され、loadは画像などが表示された後に実行されます。

読み込み
$(function(){
    alert('Hello');
});

//または
$(document).ready(function() {
    alert('Hello');
});

//または
jQuery(function() {
    alert('Hello');
});

//または
jQuery(document).ready(function(){
    alert('Hello');
});

//JavaScript
document.addEventListener('DOMContentLoaded', function(){
    alert('Hello');
}, false);

jQueryの書き方は、省略しているだけなので、どの書き方をしても同じです。

使い道

  • htmlを置き換えるものや、表示するかしないかを制御するもの ex)ラジオボタンが選ばれていたら、表示する など
  • ウインドウサイズによって決まるもの ex)スムーススクロールのコンテンツのポジション取得 など(場合によっては、rezsizeイベントも必要)
  • 読み込み時間をカモフラージュするためのアニメーションなど

load

load: 画像、動画などの関連データの全ての読み込みが完了したら実行される。

$(window).on('load',function(){
    alert('Hello');
});

//または
$(window).load(function(){
    alert('Hello');
});

//JavaScript
window.onload = function(){
    alert('Hello');
}

使い道

  • 画像の大きさを取得するものや、画像の大きさによって可変するもの
  • ページ遷移時に表示するアニメーション(特にスマホは、readyにしてしまうと、ページが表示されたときにはもう終わっていたりする…)

イベントの順番

イベントの順番は下記のようになる。

  1. ページの読み込みが始まる
  2. HTMLの読み込みが終わる
  3. $(document).readyが実行
  4. 画像など含めすべてのコンテンツの読み込みが終わる
  5. $(window).loadが実行

イベント一覧

click クリックされた時
dblclick ダブルクリックされた時
blur 要素がフォーカスを失った時に発生
focus 要素がフォーカスを得た時に発生
load ドキュメント内の全リソースの読み込みが完了したときに発生
resize windowの大きさが変更された時に発生
scroll ドキュメントがスクロールした時に発生
mousedown 要素上でマウスが押された時に発生
mouseup 要素上でマウスが押され、上がった時に発生
mousemove 要素上でマウスが移動している時に発生
mouseover マウスが要素に入った時に発生。子要素でも発生
mouseout マウスが要素から外れた時に発生。子要素でも発生
mouseenter マウスが要素に入った時に発生。子孫要素に入った時には発生しない
mouseleave マウスが要素から外れた時に発生。子孫要素から外れた時には発生しない
change 要素がフォーカスを得て値の修正が完了した時に発生
select type属性値が”text”のinput要素、textarea要素のテキストが選択された時に発生
submit フォームが送信された時に発生
keydown キーが押し下げられた時に発生
keypress キーが押された時に発生
keyup キーが上がった時に発生
error javascriptのエラーが発生した時に発生

keypress

エンターを押した際に処理
$(document).keypress(function(event){
    var key = (event.key ? event.key : event.which);
    // もしも入力したkeyがエンター（13)だった場合
    if(keycode == '13'){
        alert('You pressed a "enter" key in somewhere');
    }

});

キーコード一覧

対応キー キーコード
1 49
2 50
3 51
4 52
5 53
6 54
7 55
8 56
9 57
0 48
A 65
B 66
C 67
D 68
E 69
F 70
G 71
H 72
I 73
J 74
K 75
L 76
M 77
N 78
O 79
P 80
Q 81
R 82
S 83
T 84
U 85
V 86
W 87
X 88
Y 89
Z 90
- 173
^ 160
\ 220
@ 64
[ 219
] 221
; 59
: 58
, 188
. 190
/ 191
テンキー1 97
テンキー2 98
テンキー3 99
テンキー4 100
テンキー5 101
テンキー6 102
テンキー7 103
テンキー8 104
テンキー9 105
テンキー0 96
テンキー/ 111
テンキー* 106
テンキー- 109
テンキー+ 107
テンキー. 110
テンキーEnter 13
F1 112
F2 113
F3 114
F4 115
F5 116
F6 117
F7 118
F8 119
F9 120
F10 121
F11 122
F12 123
↑ 38
↓ 40
← 37
→ 39
Enter 13
Shift 16
Ctrl 17
Alt 18
Space 32
BackSpace 8
Esc 27
Tab 9
CapsLock 20
NumLock 144
Insert 45
Delete 46
Home 36
End 35
PageUp 33
PageDown 34
ScrollLock 145
Windows 91
英数 240
半角/全角 243
漢字 244
無変換 29
変換 28
カタカナ/ひらがな/ローマ字 242

メソッド

メソッド一覧

メソッド 意味 パラメータ追加時
.css() CSSの値を取得or書き換え 指定のCSSスタイルに変更
.html() 要素の値をHTMLとして取得or書き換え 指定のhtmlに書き換える
.text() 要素の値をテキストとして取得or書き換え 指定のテキストに書き換える
.prepend() 要素内の先頭にHTMLを挿入 【必須】 挿入するhtmlの指定
.append() 要素内の末尾にHTMLを挿入 【必須】 挿入するhtmlの指定
.prependTo() 要素内の先頭にHTMLを挿入 【必須】 移動先の指定
.appendTo() 要素内の末尾にHTMLを挿入 【必須】 移動先の指定
.before() 指定した要素の前にHTMLを挿入 【必須】 挿入するhtmlの指定
.after() 指定した要素の後にHTMLを挿入 【必須】 挿入するhtmlの指定
.insertBefore() 指定した要素を、任意の要素の前に移動 【必須】 移動先の指定
.insertAfter() 指定した要素を、任意の要素の後に移動 【必須】 移動先の指定
.wrap() 指定した要素を、任意の要素で包む 【必須】 包む要素の指定
.unwrap() 指定した要素を囲んでいるタグを削除する
.wrapAll() 指定した要素が複数ある場合に、任意の要素で包む 【必須】 包む要素の指定
.wrapInner() 指定した要素の子要素やテキストを、任意の要素で包む 【必須】 包む要素の指定
.replaceWith() 指定した要素そのものを、任意の要素に置き換える 【必須】置き換える要素を指定
.replaceAll() 指定した要素そのものを、任意の要素に置き換える 【必須】置き換える対象をセレクタで指定
.remove() 指定した要素を削除
.attr() 属性値の取得or設定 指定の値に設定・変更
.vall() 指定した要素のvalueの値を取得or設定する 指定の値に設定・変更
.prop() 指定した要素のプロパティを取得or設定する 指定の値に設定・変更
.removeAttr() 指定した要素の任意の属性を削除 【必須】削除する属性を指定
.addClass() クラスを追加 【必須】追加するクラスを指定
.removeClass() クラスの削除 【必須】削除するクラスを指定
.toggleClass() クラスの追加・削除を切り替える
.reverse() 指定した配列の順序を逆順にする
.makeArray() jQueryオブジェクトを配列に変換する 【必須】変換するjQueryオブジェクトを指定
.has() 指定した要素が子要素を持っているかを判定する 【必須】判定する子要素を指定
length 指定した要素の数を取得する
.parent()
.parents() 		親要素を取得する
.find() 指定した要素の子要素をすべて取得する
.children() 指定した要素の直下の子要素を取得する
.clone() 指定した要素のコピーを作成する
.eq() 指定した要素において、その順番で指定して取得する 要素の順番を０から始まる数字で指定
.get() 指定した要素をDOMオブジェクトとして取得する 指定した順番の要素を取得
.prev() 指定した要素の直前の兄弟要素を取得 さらに限定して要素の条件を指定
.prevAll() 指定した要素の前にある兄弟要素を全て取得する
.prevUntil() 指定した要素の前にある兄弟要素から、パラメータで指定した条件に一致する要素が出てくるまでを選択して取得 どこまで取得するかの条件を指定
.next() 指定した要素の直後の兄弟要素を取得
.nextAll() 指定した要素の後にある兄弟要素を全て取得する
.nextUntil() 指定した要素の後にある兄弟要素から、パラメータで指定した条件に一致する要素が出てくるまでを選択して取得 どこまで取得するかの条件を指定
.siblings() 指定した要素の兄弟要素を全て取得

さらに限定して要素の条件を指定
.closest() 指定した要素から最も近い指定の親要素を取得 【必須】要素の条件を指定
.contents() 指定した要素の子要素・テキストノードを全て取得
.hide() 要素を非表示にする ミリ秒でスピードを指定
.show() 非表示要素を表示する ミリ秒でスピードを指定
.fadeTo() 透明度を変更する 【必須】ミリ秒でスピードを指定、変更する透明度を指定
.sildeUp() スライドアップさせて非表示にする ミリ秒でスピードを指定
.slideDown() スライドダウンさせて表示させる ミリ秒でスピードを指定
.slideToggle() スライドアップ・ダウンを切り替えて表示・非表示させる ミリ秒でスピードを指定

要素取得系

上の階層（親要素）を取得

.parent()
.parents('指定')
.closest()

メソッド 意味
.parent() 1階層上の親要素を取得する
.parents() 複数階層上の親要素を取得する。取得したい要素引数で指定する
.closest() ----

同じ階層（兄弟要素）を取得

メソッド 意味
.siblings() 指定した要素の兄弟要素を全て取得
.prev() 指定した要素の直前の兄弟要素を取得
.prevAll() 指定した要素の前にある兄弟要素を全て取得する
.prevUntil() 指定した要素の前にある兄弟要素から、パラメータで指定した条件に一致する要素が出てくるまでを選択して取得
.next() 指定した要素の直後の兄弟要素を取得
.nextAll()) 指定した要素の後にある兄弟要素を全て取得する
.nextUntil() 指定した要素の後にある兄弟要素から、パラメータで指定した条件に一致する要素が出てくるまでを選択して取得

下の階層（子要素）を取得

メソッド 意味
.find() 指定した要素の子要素をすべて取得する
.children() 指定した要素の直下の子要素を取得する
.wrapInner() 指定した要素の子要素やテキストを、任意の要素で包む

要素追加・削除系

メソッド 意味 パラメータ追加時
.prepend() 要素内の先頭にHTMLを挿入 【必須】 挿入するhtmlの指定
.append() 要素内の末尾にHTMLを挿入 【必須】 挿入するhtmlの指定
.prependTo() 要素内の先頭にHTMLを挿入 【必須】 移動先の指定
.appendTo() 要素内の末尾にHTMLを挿入 【必須】 移動先の指定
.before() 指定した要素の前にHTMLを挿入 【必須】 挿入するhtmlの指定
.after() 指定した要素の後にHTMLを挿入 【必須】 挿入するhtmlの指定
.insertBefore() 指定した要素を、任意の要素の前に移動 【必須】 移動先の指定
.insertAfter() 指定した要素を、任意の要素の後に移動 【必須】 移動先の指定
.wrap() 指定した要素を、任意の要素で包む 【必須】 包む要素の指定
.unwrap() 指定した要素を囲んでいるタグを削除する
.wrapAll() 指定した要素が複数ある場合に、任意の要素で包む 【必須】 包む要素の指定
.wrapInner() 指定した要素の子要素やテキストを、任意の要素で包む 【必須】 包む要素の指定
.replaceWith() 指定した要素そのものを、任意の要素に置き換える 【必須】置き換える要素を指定
.replaceAll() 指定した要素そのものを、任意の要素に置き換える 【必須】置き換える対象をセレクタで指定
.remove() 指定した要素を削除
.attr() 属性値の取得or設定 指定の値に設定・変更
.vall() 指定した要素のvalueの値を取得or設定する 指定の値に設定・変更
.prop() 指定した要素のプロパティを取得or設定する 指定の値に設定・変更
.removeAttr() 指定した要素の任意の属性を削除 【必須】削除する属性を指定
.addClass() クラスを追加 【必須】追加するクラスを指定
.removeClass() クラスの削除 【必須】削除するクラスを指定
.toggleClass() クラスの追加・削除を切り替える
.reverse() 指定した配列の順序を逆順にする
.makeArray() jQueryオブジェクトを配列に変換する 【必須】変換するjQueryオブジェクトを指定
.clone() 指定した要素のコピーを作成する

form系

form系あれこれ

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?