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で行ってもいいです。

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

コロナの影響でみんな大変だから俺もなんかできること

僕は福井県に住んでいるのですが、戦時中に福井大空襲にあい、その直後に大震災にあってボロボロになった話をおばあちゃんに聞きました。

それでも復活することができ、不死鳥の町と言われるようになりました。

先人達には心から感謝し尊敬します。

リーマンショック、東日本大震災、コロナと数十年に一度と言われる被害が立て続けに起きていますが、僕たちは強いです。

今は苦しいかもしれませんがきっと復活できます。

僕は低学歴ですし小さな小さな粒でしかないですが、プログラミングに関しては必死に勉強し15年以上ごはんにありつけています。

プログラミングを勉強している人の役に立てるほどのスキルはあると思っています。

なので1人でもんもんと悩んでいる若手のエンジニア向けに質問を受け付けることにします。

自宅で待機されている間もパソコンとインターネットがあればプログラミングの勉強はできます。

  • PHP
  • SQL
  • HTML・CSS
  • jQuery

とは言ってもいきなり答えを聞いていたのではなかなか成長できないと思うのです。

なので質問の際には次のことをご連携ください。

  • 何をやりたいか
  • どんなことを調べたか、検索キーワードと参考にしたページのURL
  • 調べた結果どこが分からないか
  • できるなら試したコード

メッセージいはとりあえずTwitterにでもください。

質問はこちら

すぐに返事できないかもしれませんがご了承ください。

コメントを残す

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

CAPTCHA