また現れました野生のまりぞーです_(:3」∠)_
前回の第4回目【jQuery入門 4】イベントって何?on、offを使ってみように引き続き、
jQuery入門編、第5回目は要素の属性についてです。

またまた今回もデモを用意しています。

目次

属性とは

widthheighthreftitleなど、各要素で指定している設定などです。
今回はこの値を操作します。

  • .width()
    要素の幅を取得
  • .height()
    要素の高さを取得
  • .attr()
    要素の属性を取得
  • .removeAttr()
    要素の属性を削除
  • .prop()
    要素のプロパティを取得
  • .addClass()
    classを追加する
  • .removeClass()
    classを削除する
  • .toggleClass()
    classを切り替える
  • .hasClass()
    classを持っているか判定する

width()

公式ドキュメント : .width() | jQuery API Documentation

各要素の幅を取得する

DEMO 01

jQuery width

HTML

jQuery

height()

公式ドキュメント : .height() | jQuery API Documentation

各要素の高さを取得する

DEMO 02

jQuery height

HTML

jQuery

attr()

公式ドキュメント:.attr() | jQuery API Documentation

  1. class「demo03_trigger」を持つa要素「Googleへのリンク」のhref属性とtitle属性を取得
  2. class「demo03_target」へtitle属性、class「demo03_target2」へhref属性を表示

DEMO 03

jQuery attr

HTML

jQuery

removeAttr()

公式ドキュメント : .removeAttr() | jQuery API Documentation

class「demo04_trigger」をもつ要素「removeAttr(‘href’)」ボタンをクリックするとclass「demo04_target」のhref属性を削除

DEMO 04

jQuery removeAttr

HTML

jQuery

prop()

公式ドキュメント : .prop() | jQuery API Documentation

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

DEMO 05

jQuery prop

HTML

jQuery

addClass()

公式ドキュメント : .addClass() | jQuery API Documentation

class「demo06_target」を持つ要素のうち、3番目の要素にのみclass「demo06_class」を追加する

DEMO 06

jQuery addClass

HTML

jQuery

removeClass()

公式ドキュメント : .removeClass() | jQuery API Documentation

class「demo07_class」を持つ要素のうち、2番目の要素のみclass「demo07_class」を削除する

DEMO 07

jQuery removeClass

HTML

jQuery

toggleClass()

公式ドキュメント : .toggleClass() | jQuery API Documentation

クリックでclass「demo08_class」を切り替える

DEMO 08

jQuery toggleClass

HTML

jQuery

hasClass()

公式ドキュメント : .hasClass() | jQuery API Documentation

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

DEMO 09

jQuery hasClass

HTML

jQuery

次回もおたのしみにー。ぬふぬふ。

第6回目はこちら。
【jQuery入門 6】要素の書き換え、追加・削除

あわせて読みたい記事