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

Webデザインの勉強 ハロートレーニング 受講生のためのWebデザインの勉強補足ブログ

jQuery基礎 - まとめ(セレクタ)

jQuery

jQueryの概念

  • 「何かをとってくる」→「それに何かをする」
  • 画面の表示の書き換え(DOMの操作)
jQueryオブジェクトとインスタンス
  • jQueryオブジェクト → jQuery{ }
  • 「$()」は「 jQuery{ }」のインスタンス
  • 「$()」は、何かをとってきて、jQueryオブジェクトを作るということをします
  • jQueryオブジェクト化すると、記述がシンプルになります

jQueryを使うための準備

  • ダウンロードしたjQueryを記述する
<script src="js/jquery-3.1.1.min.js"></script>
CDN(Contents Delivery Network)を記述する

developers.google.com

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
どこに記述するか
  • body閉じ直前で実行(演習時)
  • 外部JSファイルとして読み込む(サイト制作時)

「何かをとってくる」機能

  • セレクタ
  • とってきたところからさらに探す
セレクタ
  • 要素を取ってくる役目

セレクタの種類 記述
idセレクタ #idValue
クラスセレクタ .className
タイプセレクタ element
子孫セレクタ ancestor descendant
全称セレクタ *
セレクタ parent > child
隣接(兄弟)セレクタ prev + next
複数(グループ)セレクタ selector, selector
否定セレクタ :not(selector)
属性セレクタ [name="value"]
順番に関するセレクタ :nth-child()
状態に関するセレクタ :checked
フォームに関するセレクタ :text

idセレクタ
  • idセレクタの弱点は、1ページに一度しか使えないこと
クラスセレクタ
  • クラスセレクタは、1ページに一度しか使わなくても問題ありません(idセレクタのような使い方ができる)
タイプセレクタ
  • 実際には、タイプセレクタのみで使うことはありません
子孫セレクタ
  • 実際には、子孫がとってくる要素までの記述が長くなることを避けて使います

とってきたところからさらに探す

  • 変数に保存して何回も使う
  • DOMの記述と同じように使います

「それに何かする」機能

  • メソッド(準備された機能)
  • jQueryオブジェクトが持っているメソッドを実行する
スタイルを変更する
  • CSS
  • show / hide
  • width / height
内容や属性を変更する
  • text / html
  • attr
  • val
  • addClass / removeClass
アニメーションさせる
  • fadeIn / fadeOut
  • slideDown / slideUp
  • animate
動かす・消す・新しく要素を作る
  • append / appendTo
  • prepend / prependTo
  • remove
それぞれについて処理する
  • each