jQuery は主にクライアント用に作られているので、FORM を使用した入力コントロールの参照方法に少し工夫が必要です。( ソースコードの例では id を記述していますが、name のみで参照する事ができます ) "#親ID [属性='値']" ソースコードでは、二つの FORM の下側のフォームの中にあるコントロールの name が "test_name" であるものを参照しています![]()
この場合セレクタは "#test_unit2 [name='test_name']" となっており、test_unit2 内でかつ、name が "test_name" であるように記述されています。
属性値にスペースが含まれて無い場合は、"#test_unit2 [name=test_name]" も動作します。つまり、value 属性で使用する場合は、値を引用符で囲む必要があります。さらに、[name='test_name'] の前にスペース無しの要素名を書くと、指定した要素のみ対象にする事もできます 例) "#test_unit2 textarea[name='test_name']" また、指定できるのは、要素名だけでは無く、id や クラスでも有効です 例) "#test_unit2 .test_in[name='test_name']"
<input type="button" id="test_button" value="実行"> <form id="test_unit1"> <input type="text" id="test_id" name="test_name" style='width:300px;'> </form> ▲ と ▼は別々の FORM です <form id="test_unit2"> <input type="text" id="test_id" name="test_name" class="test_in" style='width:300px;'> <br> <textarea name="test_name" style='width:298px;'> </textarea> </form> <script type="text/javascript"> $("#test_button").click( function(){ $("#test_unit2 [name='test_name']").css("background-color", "#00ff00"); }); </script>
▲ と ▼は別々の FORM です
"[属性!='値']" 属性セレクタには他にもたくさん指定方法があります。他のセレクタとの組み合わせは『一致した場合』と同じですが、[] 内に書く演算子として、『一致 : =』に対して、『一致しない : !=』となります。( Attribute Not Equal Selector ) "[属性^='値']" と "[属性$='値']" これは、プログラミングで昔から使われる『最初と最後』を示す記号を使った一致方法です。指定した属性の値の先頭または最後に一致する場合に jQuery が実行されます。 以下のソースコードは、jQuery のドキュメントページにあるものですが、"letter" が 最後にある場合に実行されます( Attribute Ends With Selector )
<input name="newsletter"> <input name="milkman"> <input name="jobletter"> <script> $( "input[name$='letter']" ).val( "a letter" ); </script>
"[属性*='値']" これはもっとも解りやすいワイルドカードに通じる演算子 * を使用したものです。意味ももちろんそのままで、『含まれる』です。( Attribute Contains Selector ) "[属性~='値']" これは直感的には解らないセレクタです。名前は、『Attribute Contains Word Selector』と言って、スペースで区切られたワードに対して文字列が一致した場合に jQuery が実行されます。 通常、属性の値にスペースが含まれるのは、value 属性なので、あまり使うことは無いと思います。
|
【jQueryの最新記事】
- jQuery の $.get を使用した ajax のテンプレート
- jquery.balloon.js を使用した簡単なバルーン( マウスオーバーで表示する追加説明用 )の作り方
- jQuery による link 要素の追加と削除を bootstrap.css でリアルタイムチェック
- FileReader で、ローカルの CSV を読み込んで(shift_jis)、jQuery でテーブルを作成して表示する
- jQuery + bootstrap.js で ajax の GET と POST を使用した DB テーブルを更新する UI テンプレート
- jQuery : 貼り付けるだけで、ページ右下にページ先頭にジャンプするリンクを表示させる( アニメーションは無し )
- STYLE 要素を追加して、CSS テキストをセットして、jQuery で CSS に important 指定を追加する。
- ページの右下に、ページの先頭へ移動するボタンを追加する(ページの先頭から 200px までは、スクロールボタンを表示しない)
- テーブルのTDをクリックしたら、INPUT で値を変更可能にして、元の値と違うものにはフラグを立てる処理を絵で書いて説明してみました
- jQuery を使用してサーバから取得した JSON データを元にテーブルを作成し、その後から列を加工する
- JSON 配列を WEB より読み出して jQuery で動的にテーブルを作成して表示する
- jQuery UI の Datepicker Widget のオプション
- FormData を使用して、jQuery で配列として PHP に送る
- 必要なデータを隠しリストボックス( multiple ) に jQuery で追加して配列として PHP に送る
- Android Studio の追加日本語化用に、キャラクタセットに依存しないコード文字列を作成するツールを作成しました
- 画像ファイルが存在した時のみ、表示する jQuery の記述
- jQuery で mobile(スマホ) かどうかのチェックをしたくて調べたら、Stack Overflow の記事でいろんな方法が答えられていました。
- jQuery と FileReader オブジェクトによる、ローカルの複数画像ファイルのプレビュー表示
- とても面白くて簡単な jQuery のクリックしたコンテンツ以外を暗転(Blackout) するサンプル
- jQuery で、左右に並んだリストボックスの右側のデーターをダブルクリックしたら左へ転送してソートする処理