*

属性値の変更・取得・削除、要素の置き換え

公開日: : 最終更新日:2015/08/03 jQuery , ,

jQueryはHTMLの要素だけではなく、属性に設定されている値を
変更したり、取得出来たりします。

属性値の変更

attr()命令を使うと、属性値を変更できます。attr()は、
変更したい属性名と、変更後の属性地を括弧内に「,」区切りで
指定します。

$(セレクター).attr(“属性名”,”属性値”);

例を挙げると、img要素のsrc属性の値を変更したい場合は
以下のように設定します。

$(“img”).attr(“src”,”kuroneko.jpg”);

サンプルコードを実行すると、HTMLファイル上では、
img要素のsrc=”shironeko.jpg”だったのが、”kuroneko.jpg”に
切り替わっているのは確認できます。

属性値の取得

属性値の取得もattr()命令を使用します。attr()の括弧内に
属性名のみを指定すると、指定した属性値を取得できます。

$(“p”).text($(“img”).attr(“src”) );

実行すると、空のp要素のテキストにimg要素のsrcの情報が
設定され、出力されるのが確認できます。

属性値の削除

セレクターで指定した要素に特定の属性が設定されいて、
それを削除したいときはremoveAttr()命令で削除できます。

サンプルコードでは
a要素のリンク先を示す href属性の削除しています。
その結果、画像に設定されたリンクが削除されているのが
確認できます。

実行結果はこちらです。

スポンサードリンク

関連記事

catejQuery

フォームの部品の値を取得したり変更する命令

フォームを操作する専用の命令がval()です。 この命令を使用すると、フォームに入力または、選択さ

記事を読む

jQuery

画像読込の進捗具合が分かるプログレスバーを作成

タイトルの通りです。読み込み中の画像を表示しないようにし、かつ画像読込の進捗度を表示してみます。

記事を読む

catejQuery

フォーム関連のイベント処理

フォーカスを感知する focus() focus()は、input要素などのフォーム部品が マウ

記事を読む

catejQuery

フォームの送信を感知する

フォームの送信ボタンがクリックされたときに発生する submitイベントの処理を設定します。Web

記事を読む

jQuery

Masonryのギャラリーにフィルター機能を追加する

Masonryのギャラリーにフィルターを付けてみました。実行結果を見て頂ければ分かりますが、画像のギ

記事を読む

jQuery

ついてくるヘッダーメニューを作成する

タイトルの通りです。画面をスクロールしてもついてくるメニューを今回作成します。 サンプルコードの実

記事を読む

catejQuery

設定されたイベント処理を消す

設定されているイベント処理を取り消すには off()命令を使います。 $( セレクター ).

記事を読む

catejQuery

水平方向のアコーディオンメニュー

今回紹介するのは横にスライドする アコーディオンメニューです。 実行結果はこちら

記事を読む

catejQuery

フォーカスが外れたことを感知する。

前の記事のfocus()とは逆に、フォーム部品から フォーカスが外れた(選択されていない状態になっ

記事を読む

catejQuery

jQueryのセレクター2 eq/lt/gt/headerセレクター

前回に引き続きjQuery独自の セレクターについて紹介します。 eq/lt/gtセレクター

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑