Developing in HTML5 with JavaScript and CSS3 Jump Startのメモ(2)

mva.microsoft.com

またこれを見つつのメモ
半分以上見たところで字幕があることに気づいた

いつも調べつつ実装しているので、知っているつもりでも案外頭に定着していないのだなぁ

CSSセレクタおさらい

属性セレクタ

セレクタ 説明
要素名[属性名] 属性値は関係なくその属性のものを取得
要素名[属性名="属性値"]
要素名[属性名~="属性値"] 属性名に属性値の値が指定されている要素。
要素名[属性名^="属性値のはじめ"] 属性名の属性値が属性値のはじめで始まる要素。
要素名[属性名$="属性値の終わり"] 属性名の属性値が属性値の終わりで終わり要素。
要素名[属性名*="属性値の一部"] 属性名の属性値が属性値の一部を含む要素

結合子

セレクタ 説明
セレクタA + セレクタB 共通の親要素のなかで、Aの直後にあわられるB
セレクタA 〜 セレクタB 共通の親要素のなかで、AのあとにあわられるB

配列のメソッドおさらい

配列自身を変更する

メソッド 説明
push 最後に要素を追加
pop 最後の要素を削除
shift 最初の要素を削除
unshift 最初に要素を追加
splice 範囲指定して要素を削除し、新しい要素を追加する

配列にアクセスして結果が返ってくる

メソッド 説明
concat 結合された新しい配列を返す
join すべての要素を繋いで文字列にする
slice 配列の一部を取り出して新しい配列を返す
メソッド 説明
map 与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成
forEach 与えられた関数を、配列の各要素に対して一度ずつ実行
every 与えられた関数によって実行されるテストに配列のすべての要素が合格するかどうか
some 1つでも条件を満たす要素が存在するかどうか

classListのこと

HTML要素のclass属性を扱うもの

メソッド

  • contains(ある文字列が含まれるかどうか)
  • add(classListに文字列を追加)
  • remove(classListから文字列を削除)
  • toggle(既にそのクラスがある場合は無くし、まだ無い場合はクラスを追加)

など。

あとで確認したいこと

  • querySelectorAll
  • jQuery.param( )(配列やオブジェクトをURLクエリ文字列などにシリアライズする)
  • jQuery.serialize()(formの内容をurlエンコード)
  • addEventlistenerで追加したイベントを削除したあと、もう一度追加したときの表示を確認(5−2 20min)
  • Promise
  • Web ワーカー
  • webソケット
  • cssのグリッド表記