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

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

jQueryの基本

jQueryの基本

  • テキストP.24〜141
jQueryでできること
  • セレクタを使ってDOMの要素を選択する
  • 選択したDOMの要素を操作する
  • 選択したDOMの要素に手軽にイベントを設定する
  • 選択したDOMの要素をアニメーションさせる
  • サーバーと手軽に通信する

jQueryでDOM要素の操作

  1. DOM要素を選択
  2. DOM要素を操作する関数(操作時のパラメータ)
  • 関数は「メソッド」と呼びます
$( '#id名' ).css( '文字色', '色指定' );
値の取得
  • $( '#id名' ).text( ):要素内の文字列を取得
  • $( '#id名' ).html( ):要素内のHTMLを取得
  • $( '#id名' ).val( ):要素内の値を取得(フォームの部品のみ)
値の操作
  • $( '#id名' ).text( '値' ):要素内の文字列を書き換え
  • $( '#id名' ).html( '値' ):要素内のHTMLを書き換え
  • $( '#id名' ).val( '値' ):要素内の値を書き換え(フォームの部品のみ)
$とjQuery

DOM要素の選択方法

  • 要素名で選択
  • id名で選択
  • class名で選択
  • 子孫セレクターで選択
  • セレクタ
  • 隣接セレクタ
  • first-child擬似クラス
  • 間接セレクタ
  • 否定擬似クラス
  • empty擬似クラス
  • nth-child擬似クラス
  • last-child擬似クラス

など

DOM読み込み後の処理

  • WebページのDOMの準備ができた直後に実行する















広告を非表示にする