no-image

【jQuery基本まとめ】読み込み方法と基本構文一覧(セレクター、命令、イベント、アニメーション)

jQueryの基本構文をすべてまとめました。

jQuery本体を読み込む方法

jQueryを使うときは、jQuery本体を読み込んだあとに、実装したい記述をするだけです。
jQuery本体の読み込みにはCDNを使ってインターネットで読み込む方法と、ダンロードして読み込む方法の二通りあります。

1.CDNで読み込む

インターネット経由でjQuey本体を読み込むことができます。
一度読み込んだライブラリはブラウザがキャッシュしてくれるために高速化が可能です。しかし、インターネットが使用できない状態では作動しないデメリットがあります。

2.ダウンロードして読み込む

公式ホームページからダウンロードして読み込みます。
https://jquery.com/download/

 

基本構文

 

jQueryのセレクター一覧

要素セレクター

IDセレクター

クラスセレクター

子孫セレクター

ユニバーサルセレクター

グループセレクター

子セレクター

隣接セレクター

first-child擬似クラス

間接セレクター

否定擬似クラス

empty擬似クラス

nth-child擬似クラス

last-child擬似クラス

only-child擬似クラス

nth-last-child擬似クラス

nth-of-type擬似クラス

nth-last-of-type擬似クラス

first-of-type擬似クラス

last-of-type擬似クラス

only-of-type擬似クラス

lang擬似クラス

CSSの属性セレクター

jQuery独自のセレクター

firstセレクター

lastセレクター

evenセレクター

oddセレクター

eqセレクター

ltセレクター

gtセレクター

headerセレクター

containsセレクター

hasセレクター

parentセレクター

jQueryは簡単にWebサイトに動きをつけるのに大変便利なJavaScriptライブラリです。

 

命令一覧

prepend

append

before

after

 

prependTo

appendTo

insertBefore

insertAfter

指定した要素で包む

指定した要素で包む(全ての要素)

別の要素で包む(指定した要素の子要素)

親要素を取り除く

要素の置き換え

セレクターで指定した要素の削除

属性値の変更

属性値の取得

属性値の削除

class属性の追加

class属性の削除

CSSプロパティの変更

CSSプロパティの取得

 

イベント一覧

HTMLが読み込まれたとき

コンテンツ全体が読み込まれたとき

 

イベントの順番

1.HTMLの読み込み開始
2.HTMLの読み込み終了
3.$(document).ready実行
4.コンテンツ(画像含む)の読み込み終了
5.$(window).load実行

click クリック

 

click クリック(aタグの場合)

eq 順番を指定

this イベントが発生した要素

 

マウスイベント

 

on 発生するイベントを指定

on 発生するイベントを指定(要素を指定)

off イベント処理を取りける

 

アニメーション一覧

表示する速度一覧

コールバック関数