デモ - 【jQuery入門 5】属性
DEMO 01 : width()
各要素の幅を取得する
80px
160px
240px
DEMO 02 : height()
各要素の高さを取得する
DEMO 03 : attr()
- class「demo03_trigger」を持つa要素「Googleへのリンク」のhref属性とtitle属性を取得
- class「demo03_target」へtitle属性、class「demo03_target2」へhref属性を表示
Googleへのリンク
- .demo03_trigger title
- .demo03_trigger href
DEMO 04 : removeAttr()
class「demo04_trigger」をもつ要素「removeAttr('href')」ボタンをクリックするとclass「demo04_target」のhref属性を削除
Googleへのリンク
DEMO 06 : addClass()
class「demo06_target」を持つ要素のうち、3番目の要素にのみclass「demo06_class」を挿入する
DEMO 07 : removeClass()
class「demo07_class」を持つ要素のうち、2番目の要素のみclass「demo07_class」を削除する
DEMO 08 : toggleClass()
クリックでclass「demo08_class」を切り替える
DEMO 09 : hasClass()
- 要素が「demo09_target」を持っているか判定
- class「demo09_target」を持つ要素にマウスオーバーしたとき、class「demo09_class」を切り替える