超初心者向けの jQuery 講座も9回目となりました。これは超初心者である自分が勉強した記録としてアウトプットしているものになります。
今回は attr() メソッドを使って、要素内の属性を変更したり取得したりといった命令をしてみましょう。
コンテンツ
【attr()】要素の属性値を設定または変更できる
See the Pen
attr() by taichi (@taichi_na)
on CodePen.
ここではわかりやすくするために、画像を表示する<img>要素の src 属性を変更して、表示させる画像を変える操作をしています。
指定した要素内の属性値であれば何でも変えることができます。
上の例では、ただ変えたのでは変化がわかりにくいので、クリックしたら変わるというスクリプトになっています。
クリックしたら～する、という記述の仕方は以下を参考にしてください。
【jQuery-3】メソッドに対して引数ではなく関数を指定する
ちょっと画像のパスが長くなってしまってわかりづらいかもしれませんが、とりあえずクリックをすると、<img>内の src 属性値が変わって画像が切り替わるのが理解できたと思います。
【attr()】要素の属性値を取得する
See the Pen
attr()2 by taichi (@taichi_na)
on CodePen.
同じ attr() メソッドを使用して、今度は指定したセレクタの属性の値を取得して表示させてみましょう。
上の例では、<img>要素の alt 属性の中身を取得して <p> に出力させています。
先ほどは引数を二つ使って属性値を変更しましたが、引数を一つにして属性のみ記述すると、その属性の値を取得できるということです。
ということで、今回は以上になります。
