過去 2 日間、特別なトピックに取り組んでいるときにワイルドカードの問題に遭遇しました。この記事では主に jQuery のセレクターのワイルドカード文字 [id^='code'] または [name^='code'] と jQuery の概要を紹介します。 selector 必要な方は関連情報を参照していただければ幸いです。
問題は解決しました!このような問題がある場合は、以下の詳細な使用法を参照してください:
1. セレクター
(1) ワイルドカード:
//弹层操作
$(function(){
//视频播放
$("a[href^='#video']").each(function(index, element) {
$(this).click(function(){
$(".popp,#videoBox1").show();
});
});
//图片
$(".imgs a:not([href^='#video'])").each(function(){
$(this).children("img").click(function(){
var src=$(this).attr("attr");
//alert(src);
$("#picBox img").attr("src","images/" + src);
$(".popp,#picBox").show();
$("#picBox img").animate({opacity:'1'},500)
});
});
$(".close").click(function(){
$(".popp,.popBox").hide();
$(".box").css("margin","0 0 0 100%");
$("#picBox img").css({opacity:'0'},1000)
});
})(2) インデックスに基づいて選択します
$(" tbody tr:even"); //偶数の tr タグをすべて選択します
$("tbody tr:odd") //奇数の tr タグをすべて選択します
(3) jqueryObj の次レベルのノードを取得 入力の数
$("input[id^='code']");//id属性以code开始的所有input标签
$("input[id$='code']");//id属性以code结束的所有input标签
$("input[id*='code']");//id属性包含code的所有input标签
$("input[name^='code']");//name属性以code开始的所有input标签
$("input[name$='code']");//name属性以code结束的所有input标签
$("input[name*='code']");//name属性包含code的所有input标签
$("input[name*='code']").each(fuction(){
var sum=0;
if($(this).val()!=""){
sum=parseInt(sum)+parseInt($(this).val());
}
$("#").text(sum);
})(4) main クラスのラベルの子ノード配下のすべてのラベルを取得
jqueryObj.children("input").length;(5) 隣接するラベルを選択
$(".main > a");2. フィルター
jqueryObj.next("p");//获取jqueryObj标签的后面紧邻的一个p，nextAll获取所有3. イベント
//not
$("#code input:not([id^='code'])");//id为code标签内不包含id以code开始的所有input标签4. ツール機能
//处理文本框上的键盘操作
jqueryObj.keyup(function(event){
var keyCode = event.which;//获取当前按下键盘的键值，回车键为13
}ps : jQuery セレクターの概要
jQuery のセレクターは非常に強力です。よく使用される要素の検索方法を簡単にまとめます。
$("#myELEment") id 値が myElement と等しい要素を選択することはできません。ドキュメント内に存在できる ID は 1 つだけなので、取得されるのは要素
$("p") だけです。アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウト アウトthrough through through through through through through through through through through through out through ''s' ‐ through ‐ ‐‐‐‐‐‐ to to
$("*") ドキュメント内のすべての要素を選択することができます。ジョイント選択のためのさまざまな選択方法: 例: $("#myELEment,p,.myclass")
$("form input") フォーム要素内のすべての入力要素を選択します $ ("#main > *") main の ID 値を持つすべてのサブ要素を選択します
$("label + input") すべて選択 ラベル要素の次の入力要素ノード テスト後、セレクターはすべての入力ラベルを返します。$("#prev ~ p") 同胞セレクター、このセレクターは次の値を返します: ID prev を持つタグ要素のすべての p タグは同じ親要素に属します
$("tr:first")同じ親要素に属するすべての tr 要素の最初の $(" を選択できます
基本フィルターセレクター:
$("tr :first") tr:last") すべての tr 要素の最後の tr 要素を選択します
$("input:not(:checked) + span")
フィルターアウト: チェックされたセレクターのすべての入力要素
$("tr :even") すべてのtr要素の0番目、2番目、4番目…の要素を選択します(注:選択された複数の要素は配列のため、連番は0から始まります)
$("tr : ODD ") 最初、3、5 ... ... ... 個人
$(" td:gt(4)") 4 より大きいシリアル番号を持つすべての td 要素を選択できます $("t d:ll(4)") を選択できます。 :header") $("p:animated")
$("p:contains('John')") John テキストを含む p のすべての要素を選択します
$("td:empty") 空の td 要素の配列をすべて選択します (テキスト ノードは含まれません)
$( "p:has(p)") p 個のタグを含むすべての p 要素を選択します
$("td:parent") td を親ノードとするすべての要素配列を選択します
ビジュアルフィルターセレクター:
$( "p:hidden") 非表示の p 要素をすべて選択します
$("p:visible") 表示されている p 要素をすべて選択します
属性フィルター セレクター:
$( "p[id]") すべての p 要素を選択しますid 属性を含む
$("input[name='newsletter']") name 属性が 'newsletter' に等しいすべての入力要素を選択します
$("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)")
$("p span:first-child") すべての p 要素の最初の子ノードの配列を返します
$("p span:last-child") すべての p 要素の最初の子ノードの配列を返します 最後のノードの配列
$ ("p button:only-child") すべての p に子ノードが 1 つだけあるすべての子ノードの配列を返します
フォーム要素セレクター:
$(" :input") すべてのフォーム入力を選択しますinput、textarea、select、button を含む要素
$(":text") すべてのテキスト入力要素を選択
$(":password") すべてのパスワード入力要素を選択
$ (": Radio") すべての無線入力を選択要素
$ (": Checkbox") チェックボックス入力要素をすべて選択
$ (": submit") 入力要素をすべて選択 送信入力要素
$ (": Image") 画像入力要素をすべて選択
$(":reset") すべて選択入力要素をリセット
$(":button") すべてのボタン入力要素を選択します
$(":file") すべてのファイル入力要素を選択します
$( ":hidden") すべての入力要素またはフォームの非表示フィールドを選択します非表示タイプ
フォーム要素フィルターセレクター:
$(":enabled") 选择所有的可操作的表单元素
$(":disabled") 选择所有的不可操作的表单元素
$(":checked") 选择所有的被checked的表单元素
$("select option:selected") 选择所有的select 的子元素中被selected的元素
选取一个 name 为”S_03_22″的input text框的上一个td的text值
$(”input[@ name =S_03_22]“).parent().prev().text()
名字以”S_”开始，并且不是以”_R”结尾的
$(”input[@ name ^='S_']“).not(”[@ name $='_R']“)
一个名为 radio_01的radio所选的值
$(”input[@ name =radio_01][@checked]“).val();
$("A B") 查找A元素下面的所有子节点，包括非直接子节点
$("A>B") 查找A元素下面的直接子节点
$("A+B") 查找A元素后面的兄弟节点，包括非直接子节点
$("A~B") 查找A元素后面的兄弟节点，不包括非直接子节点
1. $("A B") 查找A元素下面的所有子节点，包括非直接子节点
例子：找到表单中所有的 input 元素
HTML 代码:
<form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" />
jQuery 代码:
$("form input")结果:
[ <input name="name" />, <input name="newsletter" /> ]
2. $("A>B") 查找A元素下面的直接子节点
例子：匹配表单中所有的子级input元素。
HTML 代码:
<form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" />
jQuery 代码:
$("form > input")结果:
[ <input name="name" /> ]
3. $("A+B") 查找A元素后面的兄弟节点，包括非直接子节点
例子：匹配所有跟在 label 后面的 input 元素
HTML 代码:
<form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" />
jQuery 代码:
$("label + input")结果:
[ <input name="name" />, <input name="newsletter" /> ]
4. $("A~B") 查找A元素后面的兄弟节点，不包括非直接子节点
例子：找到所有与表单同辈的 input 元素
HTML 代码:
<form> <label>Name:</label> <input name="name" /> <fieldset> <label>Newsletter:</label> <input name="newsletter" /> </fieldset> </form> <input name="none" />
jQuery 代码:
$("form ~ input")结果:
[ <input name="none" /> ]
相关推荐：
SQL中通配符、转义符与"["号的使用(downmoon)_PHP教程
以上がjQuery ワイルドカード [id^='code'] または [name^='code'] セレクターの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
