Heim > Artikel > Web-Frontend > 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
(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
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: ODD") Wählen Sie das erste aus, 3, 5 ... ... 🎜 > $("td:eq(2)") ssssssssssssssssssssssssssssssssssss out 🎜>$("td:ll(4)") out out out out of t 🎜>
$("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
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!