photo by Johannes_wl
超久々の技術記事投稿
最近はダイエットやら、英語勉強やら、読んだ本のレビューとか色々やってしまい、果たしてこのブログはなんのジャンルだったっけ？と疑問にさせてしまう記事ばっかし。技術ブログですよ！ITの技術ブログ！
技術はまじで久しぶりですね。しかも久々の投稿がjQueryだとは・・・！（特に意味はありませんが）
一応やることはやっているんですけども、、、中々アウトプットできなかっただけですー。OSSのソースリーディングとかしているけど難しくて中々記事がまとまらないんですー。
それはさておき、今後の予定としてはそろそろDockerとか試してみようと思います。あとC++も触りたい触りたい！！
しかし、現実の欲求と実際やってみてからのモチベーションの維持は結構キツイ。わかりやすく言えば、数学が辛いときに勉強のやる気が起こらないのと一緒（わかりやすいかな？）とにかく、作りたいけどその道のり（勉強）にやる気が起きないというなんとも矛盾している状況になってしまいます。
結局俺が悪いんだけどね（´・ω・）ちゃっちゃと勉強しちゃいなよ。逃げられねぇぞ。俺。
TEDとか世界のスーパープログラマー達の記事を見ながらモチベーションを上げて今日も勉強して参ります。。。
さて、今回は最近頼まれたお仕事で使ったjQueryでHTMLのセレクタを指定して値を取ってくる方法を纏めましたのでメモ。
例えば、下記のようなHTMLのソースがあるとします。
<html> <head> <title>test</title> </head> <body> <div class="test"> <p>Test Format</p> <input type="text" id="text_test" name="text_test" value="test"> <input type="button" id="button_test" name="button_test" value="test"> <table class="test_table" border="1"> <tr> <th>test</th> <th>value</th> </tr> <tr> <td id="test_td">test test</td> <td id="value_td">value hogehoge</td> </tr> </table> <select class="select_test"> <option name="test1" value="test1">test1</option> <option name="test2" value="test2">test2</option> <option name="test3" value="test3">test3</option> </select> </div> </body> </html>
ブラウザ上ではこんな感じで表示されます（Google Chrome）
めっちゃ簡単なHTMLソースではありますが、これに対しjQueryを使ってそれぞれのセレクタに設定されている値を取得しましょう。
<title>の値を取得
$('title').text();
<div class="test">後の<p>の値を取得
$('div.test p:first').text();
"first"は<p>が複数存在していた場合、一番最初の<p>のtextを取得します。
<table>の<td id="tset_td">の値を取得
$('table.test_table td.test_td').val();
<input type="text">に入力された値の取得
$('input[name=text_test]').val();
<select>で選択されている値を取得
$('select[class=select_test]').val();
まとめ
少ないけど、これだけできれば後は応用がきくと思うのでこれだけメモしておこうと思う。個人的にだけどね。。。
jQueryめっちゃ便利だな。最初はjavascriptで書いていたんだけど、tableのcellの値を取得しようとするとtableをgetElementIdしてcellの一番最後の値とって・・・とか、<input type="text">はやりかたがまた別だしと、それらを繰り返してやることになった場合はメソッドをいくつか用意しなきゃと面倒くせーソースになりました。jQueryでやればその辺はすで用意されている関数を使えばいいので、めっちゃ便利ですね。ナイスです。
あとはこれらをさらに応用すれば、クローラーとか楽に作れそうだな。。。。。今度練習してみようかな。
