1. セレクター
(1) ワイルドカード:
$("input[id^='code']");//id 属性が code で始まるすべての入力タグ
$("input[id$='code']");//id 属性がコードで終わるすべての入力タグコード付き input タグ
$("input[id*='code']");//id 属性にコードが含まれるすべての入力タグ
$("input[name^='code']");//name 属性は次で始まりますcode すべての入力タグ
$("input[name$='code']");//name 属性が code で終わるすべての入力タグ $
("input[name*='code']");//name 属性コードを含む すべての入力タグ
$("input[name*='code']").each(fuction(){
var sum=0;
if($(this).val()!=""){
sum=parseInt ( sum)+parseInt($(this).val());
}
$("#").text(sum);
})
(2)指標から選ぶ
$("tbody tr:even"); //偶数のインデックスを持つすべての tr タグを選択
$("tbody tr:odd"); //奇数のインデックスを持つすべての tr タグを選択
(3) jqueryObjの次段ノードの入力数を取得
jqueryObj.children("input").length;
(4) mainクラスのラベルの子ノード配下のラベルをすべて取得する
$(".main > a");
(5)その横のラベルを選択します
jqueryObj.next("div");//jqueryObj タグのすぐ後ろにある div を取得し、nextAll はすべてを取得します
2. フィルター
//not
$("#code input:not([id^='code'])");//ID はコード タグであり、ID が code で始まるすべての入力タグが含まれるわけではありません
3.イベント
//テキスト ボックスのキーボード操作を処理します。
jqueryObj.keyup(function(event){
var keyCode =event.that;//現在押されているキーボードのキー値を取得します。Enter キーは 13
}
4. ツールの機能
$('#someField').val($.trim($('#someField').val()));//スペースを削除します。構文: $.trim(value)
ps: jQuery セレクターの概要
jQuery のセレクターは非常に強力なので、一般的に使用される要素の検索方法を簡単にまとめます。
$("#myELement") は、id 値が myElement と等しい要素を選択します。id 値を繰り返すことはできません。ドキュメント内には id 値 myElement が 1 つだけ存在できるため、取得されるのは唯一の要素です。
$("div") はすべての div タグ要素を選択し、div 要素の配列を返します。
$(".myClass") は、myClass クラスの CSS を使用してすべての要素を選択します
$("*") はドキュメント内のすべての要素を選択します。結合選択にはさまざまな選択方法を使用できます。たとえば、$("#myELEment,div,.myclass")
カスケードセレクター:
$("form input") すべてのフォーム要素の入力要素を選択します
$("#main > *") メインの ID 値を持つすべてのサブ要素を選択します
$("label + input") すべてのラベル要素の下部を選択します入力要素ノード。テスト後、セレクターは、入力ラベルが直接後に続くすべての入力ラベル要素を返します。
$("#prev ~ div")。兄弟セレクター。このセレクターは、prev の ID を持つラベル要素を返します。すべて同じ親要素に属する div タグ
基本的なフィルターセレクター:
$("tr:first") はすべての tr 要素の最初の要素を選択します
$("tr:last") はすべての tr 要素の最後の要素を選択します
$("input:not(:checked) + scan")
フィルターアウト: チェックされたセレクターのすべての入力要素
$("tr:even") は、すべての tr 要素の 0 番目、2 番目、4 番目... の要素を選択します (注: 選択された複数の要素は配列であるため、シリアル番号は 0 から始まります) $("tr:odd
" ) すべての tr 要素の 1 番目、3 番目、5 番目... 要素を選択
$("td:eq(2)") すべての td 要素のうち、通し番号 2 の td を選択 要素
$("td:gt(4) ") td 要素内でシリアル番号が 4 より大きいすべての td
要素を選択します $("td:ll(4)") td 要素内でシリアル番号が 4 より小さいすべての td 要素を選択します
$(": header")
$("div :アニメーション")
コンテンツフィルターセレクター:
$("div:contains('John')") は、John テキストを含むすべての div 要素を選択します
$("td:empty") は、空の td 要素の配列をすべて選択します (テキスト ノードは含まれません)
$(" div:has( p)") p タグを含むすべての div 要素を選択します
$("td:parent") td を親ノードとするすべての要素配列を選択します
ビジュアルフィルターセレクター:
$("div:hidden") はすべての非表示の div 要素を選択します
$("div:visible") はすべての表示されている div 要素を選択します
属性フィルターセレクター:
$("div[id]") id 属性を持つすべての div 要素を選択します
$("input[name='newsletter']") 'newsletter' に等しい name 属性を持つすべての入力要素を選択します
$("input[name!= ' newsletter']") name 属性が 'newsletter' と等しくない入力要素をすべて選択します
$("input[name^='news']") name 属性が 'news' で始まる入力要素をすべて選択します
$("input [ name$='news']") name 属性が 'news' で終わるすべての入力要素を選択
$("input[name*='man']") name 属性に 'news' が含まれるすべての入力要素を選択
$("input [id][name$='man']") 共同選択には複数の属性を使用できます。このセレクターは、id 属性を含み、属性が man で終わるすべての要素を取得します。
子要素フィルターセレクター:
$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)") $("
div scan:first-child") すべての div 要素の最初の子ノードの配列を返します
$("div span:last-child") すべての div 要素の最後のノードの配列を返します
$("div button:only-child ") すべての div に子ノードが 1 つだけあるすべての子ノードの配列を返します。
フォーム要素セレクター:
$(":input") は、input、textarea、select、button を含むすべてのフォーム入力要素を選択します。
$(":text") すべてのテキスト入力要素を選択します
$(":password") すべてのパスワード入力要素を選択します
$(":radio") すべてのラジオ入力要素を選択します
$(":checkbox") すべてのチェックボックスを選択します 入力要素
$( ":submit") すべての送信入力要素を選択します
$(":image") すべての画像入力要素を選択します
$(":reset") すべてのリセット入力要素を選択します
$(":button") すべてを選択します ボタン入力要素
$(" :file") すべてのファイル入力要素を選択します
$(":hidden") タイプが非表示またはフォームの非表示フィールドのすべての入力要素を選択します
フォーム要素フィルターセレクター:
$(":enabled") 操作可能なフォーム要素をすべて選択します
$(":disabled") 操作できないフォーム要素をすべて選択し
ます $(":checked") チェックされたフォーム要素をすべて選択します
$("select option :selected") 選択された要素を次から選択しますすべての選択された子要素
「S_03_22」という名前の入力テキスト ボックスの前の td のテキスト値を選択します。
$(”input[@ name =S_03_22]”).parent().prev().text()
名前は「S_」で始まり「_R」で終わりません
$(”input[@ name ^='S_']”).not(”[@ name $='_R']”)
radio_01 という名前のラジオの選択された値
$(”input[@ name =radio_01][@checked]”).val();
$("A B") A 要素の下にあるすべての子ノード (間接的な子ノードを含む) を検索します。
$("A>B") A 要素の下にある直接の子ノードを検索します。
$("A+B") A の背後にある兄弟を検索します。 element ノード (間接的な子ノードを含む)
$("A~B") 間接的な子ノードを除く、A 要素の背後にある兄弟ノードを検索します
1. $("A B") は、間接的な子ノードを含む、A 要素の下のすべての子ノードを検索します。
例: フォーム内のすべての入力要素を検索する
HTMLコード:
<form> <label>名前:</label> <input name="name" /> <fieldset> <label>ニュースレター:</label> <input name="ニュースレター" /> </fieldset> </form> <入力名="なし" />
jQueryコード:
$("フォーム入力")
結果：
[ <input name="名前" />、<input name="ニュースレター" /> ]
2. $("A>B") は、A 要素の下の直接の子ノードを検索します。
例: フォーム内のすべての子入力要素と一致します。
HTMLコード:
<form> <label>名前:</label> <input name="name" /> <fieldset> <label>ニュースレター:</label> <input name="ニュースレター" /> </fieldset> </form> <入力名="なし" />
jQueryコード:
$("フォーム > 入力")
結果：
[ <input name="名前" /> ]
3. $("A+B") は、間接的な子ノードを含む、A 要素の背後にある兄弟ノードを検索します。
例: ラベルに続くすべての入力要素と一致する
HTMLコード:
<form> <label>名前:</label> <input name="name" /> <fieldset> <label>ニュースレター:</label> <input name="ニュースレター" /> </fieldset> </form> <入力名="なし" />
jQueryコード:
$("ラベル + 入力")
結果：
[ <input name="名前" />、<input name="ニュースレター" /> ]
4. $("A~B") は、間接的な子ノードを除く、A 要素の背後にある兄弟ノードを検索します。
例: フォームの兄弟であるすべての入力要素を検索します。
HTMLコード:
<form> <label>名前:</label> <input name="name" /> <fieldset> <label>ニュースレター:</label> <input name="ニュースレター" /> </fieldset> </form> <入力名="なし" />
jQueryコード:
$("フォーム ~ 入力")
結果：
[ <input name="none" /> ]