ポンコツエンジニアのごじゃっぺ開発日記。

いろいろポンコツだけど、気にするな。プログラム&ロボット大好きなポンコツが日々の記録を残していきます。 自動で収入を得られるサービスやシステムを作ることが目標!!

【連載】jQueryでDOMを取得しよう – 3日目「idやclassを指定して取得する」

今回もjQueryの基本となるところになると思います。今回は要素についているidやclassを取得する方法を紹介したいと思います。

DOM構成

こちらは毎度おなじみのものになります。

[code lang="html"] <table border=1> <tbody> <tr> <td class="cls001" id="id001"><a href="./gyudon">牛丼</a></td> <td class="cls002" id="id002"><a href="./cheese">とろーり3種のチーズ牛丼</a></td> <td class="cls003" id="id003"><a href="./mentai">高菜明太マヨ牛丼</a></td> </tr> <tr> <td class="cls004" id="id004"><a href="./negi">ねぎ玉牛丼</a></td> <td class="cls005" id="id005"><a href="./kimuchi">ねぎキムチ牛丼</a></td> <td class="cls006" id="id006"><a href="./okura">かつぶしオクラ牛丼</a></td> </tr> <tr> <td class="cls007" id="id007"><a href="./onisara">シャキッと和風オニサラ牛丼</a></td> <td class="cls008" id="id008"><a href="./ponzu">おろしポン酢牛丼</a></td> <td class="cls009" id="id009"><a href="./sanma">さんま牛丼</a></td> </tr> </tbody> </table> [/code]

 

idを指定して取得してみる

まずはidを指定して取得します。idを指定するときは最初に"#"をつけて指定してます。

とろーり3種のチーズ牛丼が食べたいので、それを取得してみます。

[code lang="js"]

$('#id002')

init [td#id002.cls002, context: document, selector: "#id002"]

[/code]

[code lang="js"]

$('#id002')[0]

<td class="cls002" id="id002"><a href="./cheese">とろーり3種のチーズ牛丼</a></td>

[/code]

このように、idを指定して取得することができます。もちろん以下のような取得の仕方もできます。

[code lang="js"]

$('td#id002')[0]

<td class="cls002" id="id002"><a href="./cheese">とろーり3種のチーズ牛丼</a></td>

[/code]

このようにタグを指定しつつidを指定することもできます。

classを指定して取得してみる

classを指定する方法は、最初に"."をつけて指定します。idでは#でしたがclassは.なだけです。それだけの違いです。それ以外は同じだと思って使えば使えます。

さんま牛丼の取得の仕方は以下のようになります。

[code lang="js"]

$('.cls009')[0]

<td class="cls009" id="id009"><a href="./sanma">さんま牛丼</a></td>

[/code]

 

まとめ

今回の記事をまとめると、idは#、classは.を頭につけてあげると取得できる。です。