デモ - 【jQuery入門 5】属性

公式のドキュメントを見ながらどうぞ。

jQuery API Documentation

英語ですが、だいたいの単語がわかれば(ぐぐれば)問題ないです。

DEMO 01 : width()

各要素の幅を取得する

80px
160px
240px

DEMO 02 : height()

各要素の高さを取得する

DEMO 03 : attr()

  1. class「demo03_trigger」を持つa要素「Googleへのリンク」のhref属性とtitle属性を取得
  2. 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 05 : prop()

  1. class「demo05_trigger」を持つinput要素「CHECK」のchecked属性を取得
  2. class「demo05_target」へcheckedが有効か無効かを表示

.demo05_trigger prop

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()

  1. 要素が「demo09_target」を持っているか判定
  2. class「demo09_target」を持つ要素にマウスオーバーしたとき、class「demo09_class」を切り替える