今週の学び 第10回

今週の学び

jQueryなど

• コードの短縮

  • 自分で関数を定義して、使うたびに呼び出すようにする

• data()

  • 「data()」を使うと HTML 要素内に付与された data 属性に対して、取得・設定・変更などが簡単に行えるようになる
    【 対象要素.data() 】のように取得しようと考えている要素に data()メソッドを実行する
    個別の id を取得するなら【 対象要素.data( 属性名 ) 】のように引数へ data 属性名を指定
    「data-name」「data-age」という 2 つの data 属性が付与されているなら、取得する方を「data('name')」などと記述する

• 三項演算子

  • JavaScript では唯一の、3 つのオペランドをとる演算子

• Number()

  • なんでも付ければ良いものではない
    電話番号などで「0」が表示されなかったりする

• .slice()

  • 文字列の先頭、末尾、それぞれから指定した数だけ文字を削除する
    先頭から 2 文字を削除
    let a = str.slice( 2 ) ;
    末尾から 2 文字を削除
    let b = str.slice( 0, -2 ) ;

• 変数

  • jquery では同じ処理は変数にできる

• .hide()

  • 各要素のうち、表示状態にあるものを非表示にする

• .show()

  • 各要素のうち、非表示状態にあるものを表示する

• attr()

  • attr()は CSS の関数で、選択された要素の属性の値を受け取りスタイルシートの中で使うために使用される

• .data()

  • 「data 属性」へ任意の値を保持させておくことで、あとから JavaScript や jQuery で取得・変更できる

• .slice

  • slice() メソッドは、start と end が配列の中の項目のインデックスを表している場合、start から end まで (end は含まれない) で選択された配列の一部の浅いコピーを新しい配列オブジェクトに作成して返す

まとめ

三項演算子の使い方や$(this)の使い方など難しいが、1つ1つ確実に覚えていく