読者です 読者をやめる 読者になる 読者になる

はじめてのjQuery

jQuery

jQueryとは

https://jquery.com/

jQueryでできること
  • HTMLドキュメントの横断操作
  • イベントハンドリング
  • アニメーション
  • Ajax(通信処理)
  • 以上のことを簡単に使うことができるAPIApplication Programming Interface
1系と2系
読み込み方
  • ダウンロードしてHTMLドキュメントに読み込む記述をする
<script src="js/jquery-2.2.3.min.js"></script>
  • CDN(Contents Delivery Network)を利用する
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>

readyメソッド

  • DOMの準備が完了してから処理を行うメソッド
  • メソッドは、「. ドット」から始まる


.ready ( handler ) = DOMの準備が完了してから処理を行う

$( 'document' ) .ready( function() {
  //処理
});


非常によく利用するため、通常は省略形を利用します。

$( function() {
  //処理
});
HTMLの内容が全て読み込まれた後に処理を実行する
window.onload = function() {
  //処理
};

ただし、readyメソッドの方が先に実行されます。

セレクタ

  • DOMの操作
  • DOMの値の取得、設定
  • DOMの追加、削除、変更
捜査対象をセレクタで指定
  • セレクタで選択した要素は、「配列風のjQueryオブジェクト」になっています

f:id:web-design-lesson:20160517005820p:plain

配列ではない? → jQueryオブジェクト
  • 「Array.isArray();」で配列かどうかを調べる

f:id:web-design-lesson:20160517070155p:plain

f:id:web-design-lesson:20160517070304p:plain