今回は「属性を選択する」について紹介したいと思います。
DOM構成
まずは今回使用するDOMについてです。
<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>
取得してみる
リンクが./kimuchiのねぎキムチ牛丼を取得してみます。
$('a[href="./kimuchi"]')[0] <a href="./kimuchi">ねぎキムチ牛丼</a>
このようにhrefという属性の値を指定して検索することができます。
これを応用すると、input[type=submit]のようにしてformの送信ボタンを取得して、これに対してclick()メソッドを呼ぶことでフォームの送信をすることができます。