Zusammenfassung der Verwendung von jQuer-Selektor-Wildcards und -Selektorinstanzen

Das Platzhalterzeichen im jquery-Selektor wird häufig verwendet. Das Platzhalterzeichen ist sehr nützlich bei der Steuerung des Eingabe-Tags

. Die allgemeine Verwendung wird wie folgt zusammengefasst:

1. Selektor

(1) Platzhalter:

$("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);
})

( 2) Index basierend auf Select

$("tbody tr:even"); //Wählen Sie alle tr-Tags mit einer geraden Zahl aus

$("tbody tr:odd"); //Wählen Sie den Index für alle ungeraden tr-Tags aus

(3) Erhalten Sie die Eingabenummer des Knotens der nächsten Ebene von jqueryObj

jqueryObj.children("input").length;

(4) Rufen Sie die Klasse als Hauptklasse ab. Alle Beschriftungen unter den untergeordneten Knoten der Beschriftung

$(".main > a");

(5) Wählen Sie die Beschriftung direkt neben

< aus 🎜>

jqueryObj.next("p");//获取jqueryObj标签的后面紧邻的一个p，nextAll获取所有

2. Filtergerät

//not
$("#code input:not([id^='code'])");//id为code标签内不包含id以code开始的所有input标签

3. Ereignis

//处理文本框上的键盘操作
jqueryObj.keyup(function(event){
var keyCode = event.which;//获取当前按下键盘的键值，回车键为13
}

4. Hilfsfunktion

$('#someField').val($.trim($('#someField').val()));//消除空格，语法：$.trim(value)

ps: Zusammenfassung des jQuery-Selektors

JQuerys Selektor kann als äußerst leistungsfähig bezeichnet werden. Hier liegt die Einfachheit. Fassen wir die häufig verwendeten Elementsuchmethoden zusammen

$("#myELement") Wählen Sie das Element aus, dessen ID-Wert lautet gleich myElement. Der ID-Wert kann nicht wiederholt werden. Es kann nur einen ID-Wert im Dokument geben, der myElement ist, daher erhalten wir Is the only element

$("p") Select all p Tag-Elemente und Rückgabe des p-Elements array

$(".myClass ") Alle Elemente von CSS in der MyClass-Klasse auswählen

$ (" *") Wählen Sie alle Elemente im Dokument aus. myELement,p,.myclass")

Kaskadierender Selektor:

$("form input") Alle Formularelemente auswählen Eingabeelement
$("#main > *") Alle Unterelemente auswählen, deren ID-Wert main ist
$("label + input") Wählen Sie den nächsten Eingabeelementknoten von aus Alle Label-Elemente, nach dem Testen Der Selektor gibt alle Label-Eingabeelemente zurück, denen direkt ein Input-Label folgt
$("#prev ~ p") Der Geschwisterselektor gibt alle Label-Elemente zurück, deren ID prev p-Tags ist das gleiche übergeordnete Element

Basisfilterauswahl:

$("tr:first")                      a
$("tr:last ")                                                                                                                                 kann das letzte aller tr-Elemente auswählen

$("tr:even") Wählen Sie das 0., 2., 4.... Element aus tr-Elemente (Hinweis: Da alle von Ihnen ausgewählten Mehrfachelemente Arrays sind, beginnt die Seriennummer bei 0)

$ ("tr: ODD") Wählen Sie das erste aus, 3, 5 ... ... 🎜 > $("td:eq(2)")                                                                                                      ssssssssssssssssssssssssssssssssssss out 🎜>$("td:ll(4)")                                                                                                                                                                                                       out out out out of t 🎜>

Inhaltsfilterauswahl:

$("p:contains('John')") Wählt alle Elemente aus, die John-Text in p enthalten.
$("td:empty") Wählt alle Arrays von td-Elementen aus die leer sind (ohne Textknoten)
$("p:has(p)") Wählt alle p-Elemente aus, die p-Tags enthalten

$("td:parent") Wählt alle Elementarrays mit td als übergeordnetem Element aus Knoten

Visuelle Filterauswahl:

$("p:hidden") 选择所有的被hidden的p元素
$("p:visible") 选择所有的可视化的p元素

属性过滤选择器：

$("p[id]") 选择所有含有id属性的p元素
$("input[name='newsletter']") 选择所有的name属性等于'newsletter'的input元素
$("input[name!='newsletter']") 选择所有的name属性不等于'newsletter'的input元素
$("input[name^='news']") 选择所有的name属性以'news'开头的input元素
$("input[name$='news']") 选择所有的name属性以'news'结尾的input元素
$("input[name*='man']") 选择所有的name属性包含'news'的input元素
$("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中只有唯一一个子节点的所有子节点的数组

表单元素选择器：

$(":input") 选择所有的表单输入元素，包括input, textarea, select 和 button

$(":text") 选择所有的text input元素
$(":password") 选择所有的password input元素
$(":radio") 选择所有的radio input元素
$(":checkbox") 选择所有的checkbox input元素
$(":submit") 选择所有的submit input元素
$(":image") 选择所有的image input元素
$(":reset") 选择所有的reset input元素
$(":button") 选择所有的button input元素
$(":file") 选择所有的file input元素
$(":hidden") 选择所有类型为hidden的input元素或表单的隐藏域

表单元素过滤选择器：

$(":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" /> ]

Das obige ist der detaillierte Inhalt vonZusammenfassung der Verwendung von jQuer-Selektor-Wildcards und -Selektorinstanzen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!