jQuery 基礎
jQueryを学ぶ
これまでちゃんとやってこなかったjQueryをまとめてみた。
JSONデータを扱いたいので、それに使ってみようと思う。羅列的な記事になってしまった。
jQueryとは
【JQuery】
ジャバスクリプトを便利に使うためのライブラリ
【使用方法】
</body>の直前に<script src="https://code.jquery.com/jquery-3.4.1.js"></script>
これ以下に<script></script>を設置し内に記述
※railsの場合はapplication.js内に//= require jquery＋gemファイル gem ‘jquery-rails’
【記述方法】
まずは、//$(document).ready(function({});これを省略
【記述例】
■セレクタ：処理対象となるDOM要素を指定する記法 $(“ここに記載”)
例）heml要素 h1, p, …
id要素 #
class要素 .
”>” 直下の要素
”空白” それ以下の要素
”,” 複数の要素
”＋” 隣接する要素
※セレクタ記述例
■属性セレクタ：要素の[属性=” ”]、!=、*=(含まれる)、^=、$=
※属性セレクタ
■フィルタ：
:eq() イコール、()内は配列のインデックス番号
:gt(), :lt()グレーターザンとレスザン
:even, :odd
:contains(‘ ’)
:first, :last
※フィルタ記述例
■メソッドを使ったDOM要素の指定
partent(), children()
next(), prev()
siblings() -兄弟要素（この要素と同列にある要素）
※メソッドを使ったDOM要素の指定
■メソッド：処理
設定だけでなく取得もできる
addClass head内でstyleを定義して一度につける
.removeClass styleを外す
attr HTMLの属性の値を取得したり変更したりできる
data カスタム属性をつける
text 要素の中身のテキストを変更
html 要素の中身をhtmlに変更
val formなどの中身を取得や変更
empy その要素はあるが表示しなくなる
remove その要素そのものをなくする
before 要素の前に追加 →insertBefore
after 要素の後に追加 →insertAfter
prepend その要素の子要素の先頭に追加→prependTo()
append その要素の子要素の末尾に追加→appendTo()
hide オブジェクトを消す
show オブジェクトを表示する
fadeOut ふわっと消える
fadeIn ふわっと現れる
toggle 今表示されていたら消す、消されていたら表示する
alert(“ ”) アラートを表示する
click クリックしたときのイベントリスナー
mouseover, mouseremove マウス関連のイベントリスナー
fucus インプットで入力欄にカーソルを入れる
blue インプットで入力欄からカーソルを外す
change セレクトなど項目をチェンジした際
on 読み込まれたときに存在しない要素に対してイベントを付ける
イベントオブジェクト：e 下記のようなオブジェクトを取得できる
target・relatedTarget・pageX・pageY・which・metaKey
※メソッド取得
※addClass
※attr
※data
※text
※html
※val
※remove , empty
※before (afterも同じ記法）
※insertBefore
※prepend
※append
※appendTo
※hide
※fadeOut、※fadeIn
※toggle
※click
※mouseover
※mouseout //チェーンをつなぐ
※mousemove ＋ イベントオブジェクト:e
※fucus, blur, change
※on
※loadメソッド
※コールバック関数の設定
■Ajax：サーバと通信 + ページの書き換え
非同期通信：処理が終わる前に次の処理に移る
非同期通信のため続けて処理をする場合はコールバック関数を使用
loadメソッド ページを読み込むことなく指定したものを読み込む
postメソッド データを書き換える
getメソッド データを表示する
■JSONデータの取得
GETでインプットした情報をもとにphpからJsonデータを取得して表示する
