24日目(JavaScript2)
jQueryとは？
- JavaScript用のライブラリ
- jQuery経由の方が記述が簡単(CSSのセレクタが使えるなど)
- ブラウザに依存しない処理の記述ができる ・以下の処理の記述が楽になる
－イベント処理
－HTML要素やCSSの操作
－エフェクト／アニメーション
－Ajax
- プラグインによる拡張ができる
jQueryによる要素の操作
CSSの取得ゲッター・セッターみたいな、値取得/値セット
値を取得する
値をセットする
$("h1").css("background-color", "#0f0");
引数2つとる 引数①がプロパティ、引数②が値
- 引数ひとつだと値の取得
- 引数ふたつだと値のセット
値のセットを行うとh1タグにstyleタグがつく
ディベロッパーツールで確認可能
<h1 style="background-color: rgb(0, 255, 0);">⇐こんな感じ
属性値の取得
.attr(属性名)
テキストの変更
.text()
.html()も似ている
違い
.htmlメソッドは<h1>をh1タグとして扱える。
.textメソッドは<h1>をタグとして認識できない
※タグを含めることができるのかできないのか、の差
通常は.html()メソッドで問題ない
ある要素の文字列を取得する
.html()
※引数の指定をしないことで文字列の取得になる
class属性の付与
.addClass()
class属性の削除
.removeClass()
addClass()とremoveClass()両方を兼ねるようなメソッド
.toggleClass()
イベント処理
マウスイベント処理
クリックした時
.click()
マウスオーバー
.hover()
引数を2つ取る(マウスオーバー時処理、マウスアウト時処理)
thisを使えば、複数の内容が１つの記述にまとめられる
オリジナル属性の定義
data-で始める
フォームイベント処理
.change(関数)
フォーム内の値の取得
.val()メソッド
フォームの送信ボタンが押された場合
.submit()メソッド
今日の内容は以上。
進みが早い。早いよ。
タイポが見つからなくてマジで焦った。
今後は検索と置換とか、もしくは一度コメントにセレクタとかタグを書いといて、正しいことを確認してからコピペして使い回すか検討
黒本は2周目半分終わりました
