Heim  >  Artikel  >  Web-Frontend  >  Zusammenfassung der Verwendung von jQuer-Selektor-Wildcards und -Selektorinstanzen

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

伊谢尔伦
伊谢尔伦Original
2017-06-17 15:02:361958Durchsuche

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

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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn