jQueryでDOM操作(基礎)

前回の記事「DOM (Document Object Model)とは」でJavaScriptを使ってHTMLの要素の操作を行いました。

しかし、今はJavaScriptをそのまま書く人は少ないと思います。

それはjQueryを使うほうが圧倒的に簡単だからです。

 

今回はjQueryを使った色々な要素の取得方法や、要素の操作方法について抜粋してお伝えします。

jQueryについてイメージしてもらえたら幸いです。

IDを指定してHTML要素を取得する

jQueryを使いIDを指定して、HTML要素を取得する方法です。

IDは1ページ内に1つしか出現しないというルールがあるので、これで取得できるタグは1つだけということになります。

クラスを指定してHTML要素を取得する

jQueryを使いクラス名を指定してHTML要素を取得する方法です。

クラスは1ページ内に複数存在する可能性があり、JavaScriptの getElementsByName では配列で取得しました。

jQueryの場合は配列では無いため、ループをするときには下のように書きます。

上の例はループして各要素のタグ内のテキストを変更する処理ですが、それだけでしたら以下のようにも書けます。

名前を指定してHTML要素を取得する

※名前というのは、name プロパティで指定した名前のことです。

名前を指定する場合には、[name=btnname] のように [ ] をつけないといけません。

[type=text] と書けば、type が text の要素を全て取得します。

* はタグ名で、* と書くと全てが対象になります。

input タグだけで name が btnname を取得したい場合は ‘input[name=btnname]’ と書きます。

タグ名を指定してHTML要素を取得する

タグ名を指定してHTML要素を取得する方法です。

タグももちろん複数存在します。

ループの仕方などは「クラスを指定してHTML要素を取得する」をご参考ください。

親要素を取得する

jQueryを使い親要素の取得方法です。

上の方法は #idname の1つ上の階層の要素を取得します。

子要素を取得する

jQueryを使い子要素の取得方法です。

上の例だったら下のように書いてもOKです。

CSSのようにセレクタで子要素を指定することが出来ます。

スタイルを変更する

jQueryを使いスタイルを変更する方法です。

css() の引数の左にプロパティ名を入れ、右に値を入れます。

値の取得・変更

val() を使って値を取得することが出来ます。

変更する場合は引数に値を入れることで変更できます。

まとめ

jQueryを使えば簡単にHTML要素にアクセスでることが分かると思います。

もちろんJavaScriptで行ってもいいです。

ただ、ここまではまだ基礎なのでこういった技術を応用して様々なものを作ります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA