jQueryで要素を指定する
jQueryは多くのセレクタをサポートしていて、セレクタに適合した要素が指定の対象となる。
これはCSSセレクタの例。CSSっぽく要素を指定することができる。
名称 | 指定の対象 | 書式など |
---|---|---|
型セレクタ | 同じ名前の要素 | $('div);とか$('a'); |
IDセレクタ | 同じID属性を持つ要素 | $('#main');とか$('div#main'); |
クラスセレクタ | class属性に指定した文字列を含む要素 | $('.header'),$('div.top')など |
属性セレクタ | 属性名と値 | label[for=""comment""] |
jQueryでtextareaの値やテキストボックスの値を取得する。
以下のサンプルで、テキストボックスの値を取得してコンソールに出力してみる。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQueryで属性を設定するサンプル</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> <script type="text/javascript"> $(function() { $('form').submit(function(e) { e.preventDefault(); textValue = $('textarea').val(); console.log('textareaの値↓'); console.log(textValue); console.log("------------") nameValue = $('#name').val(); console.log('名前は・・・↓'); console.log(nameValue); console.log('---------------'); console.log("valの一覧"); $(this).find('ul') .find(':input') .each(function() { var val = $(this).val(); var name = $(this).attr('name'); //console.log(name.text()); var li = $(this).attr('li'); console.log(val); }); console.log("-------"); }); $(this).unbind('submit'); }); </script> </head> <body> <h1>ご登録</h1> <form action="#" method="post"> <ul> <li>名前:<input type="name" type="text" id="name"></li> <li>選択してください。 <select name="select"> <option>男</option> <option>女</option> </select> </li> <br> <li> 何かメッセージを入れてね:<br> <textarea name="textarea" rows="3" cols="50"> </textarea> </li> </ul> <br> <input name="submit" type="submit" value="送信"> </form> </body> </html>
結果はこうなる。
textareaの値↓ hello world! ------------ 名前は・・・↓ sho322 --------------- valの一覧 sho322 男 hello world! -------
軽く読んだ本

- 作者: jQuery Community Experts,株式会社クイープ
- 出版社/メーカー: オライリージャパン
- 発売日: 2010/08/18
- メディア: 大型本
- 購入: 10人 クリック: 333回
- この商品を含むブログ (40件) を見る
感謝のプログラミング
今回で感謝のプログラミングは【565時間目】
10000時間まで、あと【9435時間】
久しぶりにjQueryを触るとけっこう忘れていた。
でも、一度やったことだから、思い出しやすくなっていた。
こうやって、一度忘れてしまったとしても感覚を取り戻せるように、一つ一つ経験を積み重ねて行きたい。
全てを記憶するのは無理だけど、思い出しやすくすることはできるはず。
明日から仕事!気合入れねば!