またこれを見つつのメモ
半分以上見たところで字幕があることに気づいた
いつも調べつつ実装しているので、知っているつもりでも案外頭に定着していないのだなぁ
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(既にそのクラスがある場合は無くし、まだ無い場合はクラスを追加)
など。