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

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

全333コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
jQueryで既存のHTMLタグ属性の値を取得・変更する方法、及び新たに属性を追加する方法について解説致します。
講師:
05:36

字幕

このレッスンでは 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 のことを指します このように書く事で h1 タグのクラス 属性の値を取得するという意味になって― その値がこちらの変数 cls に 格納されます そして こちらのアラート文で その cls の変数の中に入った値を― 表示させるといった形になっています それでは こちらのブラウザの方で 確認してみたいと思います こちらの h1 タグの 枠の中をクリックすると― このように blue と 表示されてきましたね このように既存のクラス属性の値を 取得できているのが分ります それでは 次に既存の値を変更していく 方法についてみていきたいと思います まずは こちらの部分をコメントアウトして 無効化して そして― こちらのコメントアウトを 外して有効化します そして この状態で保存をしておきます 既存の値を変更する場合もほとんど同じです ただ一点違うところはこちらの attr の 括弧の中 要するに引数ですね 引数にもう一つ追加してあげます そして こちらの二つ目の引数に変更後の値を 書いてあげれば大丈夫です 今回は空白のものをセットしています こうすることで 既存のクラスに 設定されている値を無くすことができます それでは この状態でこちらのブラウザで その動作を確認してみましょう 更新ボタンを押してそして こちらの h1 タグの括弧の中をクリックしてみます すると このように色が消えましたね こうすることで 元々 h1 タグに 付いていた blue ― というクラスが取り除かれたので それに紐付いていたスタイルも取り除かれて― このようなデザインになっている といったかたちになります それでは 最後に新たに html タグの 属性を設定する方法について― みていきたいと思います まずは こちらの部分をコメントアウトして そして こちらの部分のコメントアウトを― 外しておきます そして 保存をしておきましょう 元々設定されていないクラス以外の属性を html タグに追加する場合でも― やり方は同じです 今回は ID 属性を新たに h1 タグに付けてみましょう 同じように attr と書いて 括弧 括弧閉じる と書きます そして 第一引数には追加したい属性 そして 第二引数には追加したい属性― 今回は ID ですね ID の値をセットしてあげます こうすることによってこの h1 タグ に対して新たに― ID = companyName という 属性が付くことになります 以上でレッスンは終了です 今回は jQuery で 既存の html タグ属性の値を― 取得 変更する方法及び 新たに 属性を追加する方法について解説致しました 以降のレッスンからは jQuery を使って機能を実装していく― 対象となるウェブサイトの準備と 機能を追加していくに当たって便利な― jQuery プラグインを ご紹介していきますので― そちらも合わせてご覧下さい

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

jQueryとはJavaScriptを簡単かつ便利に扱えるJavaScriptライブラリです。このコースではプログラミングの知識はそれほどないけれど日々仕事でHPを制作しているWebデザイナーの方や趣味で自分のサイトを運営している方などを対象に、jQueryとプラグインを利用してさまざまな機能や効果を手軽にサイトに実装する方法を学びます。

2時間04分 (34 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 2,990
発売日:2015年06月29日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。