コース: WebデザイナーのためのjQuery 実践講座

今すぐコースを受講しましょう

今すぐ登録して、23,700件以上登録されている、業界エキスパート指導のコースを受講しましょう。

jQueryでHTMLタグの属性をコントロールする

jQueryでHTMLタグの属性をコントロールする - jQueryのチュートリアル

コース: WebデザイナーのためのjQuery 実践講座

jQueryでHTMLタグの属性をコントロールする

このレッスンでは jQuery で既存の html タグの属性の値を取得― 変更する方法及び 新たに属性を追加する 方法について解説していきます まずは ダウンロードしてきたこちらの control-attribute ― というフォルダーの中に入っているこちらの index.html ファイルと― こちらの js フォルダーの中に入っている この javascript.js ― ファイルをエディッターで開いて下さい そして これがそのファイルを開いた状態です そして 右側にはこちらの index.html を― ブラウザで開いたものを表示させています これらのファイルを使って 今回のレッスンの 解説を進めていきたいと思います それでは 早速レッスンを始めていきましょう html タグの属性とは 例えば ID や クラス スタイル 他にも― read-only といったものが それに当たります 要するに html タグの中で何々 イコール何々と設定するものを指します 今回はその属性に対して jQuery で アクセスする方法についてみていきます まずは こちらの HTML ファイルをみてみましょう こちらには h1 タグがありますね この h1 タグには クラス blue が付いています こちらの h1 タグを利用して jQuery で― 属性にアクセスしてみたいと思います それでは こちらの javascript.js ファイルを開きます すると この様な画面になりましたね まず こちらの部分で h1 タグに対して クリックイベントを登録しています こうすることによって h1 タグを クリックした時に― この function の間にある この部分の処理が走るわけです それではまず 既存の属性の値を 取得する方法についてみていきます それがこちらの部分となります まずは変数を作ってあげます var cls と書いていますね これで cls という名前の変数が 出来上がりました そして = と書いて $this そして attr 括弧 括弧閉じるの セミコロン― と書いています そして こちらの attr の括弧の中― この部分は引数といいますが その引数に対してクラス― というものを指定しています 因みに この $this というのは ここでは h1…

目次