Heim > Web-Frontend > js-Tutorial > Hauptteil

Platzhalter [id^='code'] oder [name^='code'] im jQuery-Selektor und im jquery-Selektor summary_jquery

WBOY
Freigeben: 2016-05-16 15:23:49
Original
1364 Leute haben es durchsucht

Ich bin an diesen beiden Tagen auf ein Platzhalterproblem gestoßen, als ich ein spezielles Thema bearbeitet habe

//弹层操作
$(function(){
 //视频播放
 $("a[href^='#video']").each(function(index, element) {
 $(this).click(function(){
 $(".popDiv,#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);
 $(".popDiv,#picBox").show();
 $("#picBox img").animate({opacity:'1'},500)
 });
 });
 $(".close").click(function(){
 $(".popDiv,.popBox").hide();
 $(".box").css("margin","0 0 0 100%");
 $("#picBox img").css({opacity:'0'},1000)
 });
 })
Nach dem Login kopieren

Problem gelöst! Wenn Sie ein solches Problem haben, können Sie sich auf die detaillierte Verwendung unten beziehen:

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);
})
Nach dem Login kopieren

(2) Wählen Sie

entsprechend dem Index aus

$("tbody tr:even"); //Alle tr-Tags mit geraden Indizes auswählen
$("tbody tr:odd"); //Wähle alle tr-Tags mit ungeradem Index

aus

(3) Ermitteln Sie die Anzahl der Eingaben des Knotens der nächsten Ebene von jqueryObj

jqueryObj.children("input").length;
Nach dem Login kopieren

(4) Rufen Sie alle Beschriftungen unter den untergeordneten Knoten der Beschriftung mit der Hauptklasse

ab
$(".main > a");
Nach dem Login kopieren

(5) Wählen Sie die Beschriftung neben

aus
jqueryObj.next("div");//获取jqueryObj标签的后面紧邻的一个div,nextAll获取所有
Nach dem Login kopieren

2. Filter

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

3. Veranstaltung

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

4. Hilfsfunktionen

$('#someField').val($.trim($('#someField').val()));//消除空格,语法:$.trim(value)
Nach dem Login kopieren

ps: Zusammenfassung des jQuery-Selektors

Der Selektor von jQuery ist äußerst leistungsfähig. Hier finden Sie eine kurze Zusammenfassung häufig verwendeter Elementsuchmethoden

$("#myELement") Wählen Sie das Element aus, dessen ID-Wert gleich myElement ist. Der ID-Wert kann nicht wiederholt werden. Es darf nur ein ID-Wert myElement im Dokument vorhanden sein, sodass Sie das einzige Element
erhalten

$("div") Wählen Sie alle div-Tag-Elemente aus und geben Sie ein Array von div-Elementen zurück

$(".myClass") Wählen Sie alle Elemente mithilfe von CSS der myClass-Klasse
aus

$("*") Wählen Sie alle Elemente im Dokument aus. Sie können verschiedene Auswahlmethoden für die gemeinsame Auswahl verwenden: Zum Beispiel $("#myELement,div,.myclass")

Kaskadierungsselektor:

$("Formulareingabe") Wählen Sie alle Eingabeelemente in Formularelementen
aus $("#main > *") Wählen Sie alle untergeordneten Elemente mit dem ID-Wert von main
aus $("label input") Wählt den nächsten Eingabeelementknoten aller Etikettenelemente aus. Nach dem Test gibt der Selektor alle Eingabeetikettenelemente zurück, denen direkt eine Eingabebezeichnung
folgt $("#prev ~ div") Geschwisterselektor, dieser Selektor gibt alle div-Tags zurück, die zum selben übergeordneten Element

des Tag-Elements mit der ID prev gehören

Grundlegende Filterauswahl:

$("tr:first") Wählen Sie das erste aller tr-Elemente
aus $("tr:last") Wählen Sie das letzte
aller tr-Elemente aus $("input:not(:checked) span")

Herausfiltern: alle Eingabeelemente des überprüften Selektors

$("tr:even") Wählen Sie das 0., 2., 4. ... Element aller tr-Elemente aus (Hinweis: Da es sich bei den ausgewählten mehreren Elementen um Arrays handelt, beginnen die Sequenznummern bei 0)
$("tr:odd") Wählen Sie das 1., 3., 5.... Element aller tr-Elemente
aus $("td:eq(2)") Wählen Sie unter allen td-Elementen
das td-Element mit der Seriennummer 2 aus $("td:gt(4)") Wählen Sie alle td-Elemente mit Sequenznummern größer als 4 in den td-Elementen
aus $("td:ll(4)") Wählen Sie alle td-Elemente mit Sequenznummern kleiner als 4 in den td-Elementen
aus $(":header")
$("div:animated")

Inhaltsfilterauswahl:

$("div:contains('John')") wählt alle Elemente aus, die John-Text in divs
enthalten $("td:empty") Wählt ein Array aller td-Elemente aus, die leer sind (ohne Textknoten)
$("div:has(p)") Wählt alle div-Elemente aus, die p-Tags
enthalten $("td:parent") Wählen Sie alle Elementarrays mit td als übergeordnetem Knoten aus

Visuelle Filterauswahl:

$("div:hidden") Alle ausgeblendeten div-Elemente auswählen
$("div:visible") Wählt alle sichtbaren div-Elemente

aus

Attributfilterauswahl:

$("div[id]") Wählen Sie alle div-Elemente aus, die das ID-Attribut
enthalten $("input[name='newsletter']") Wählen Sie alle Eingabeelemente aus, deren Namensattribut gleich 'newsletter'
ist $("input[name!='newsletter']") wählt alle Eingabeelemente aus, deren Namensattribut nicht gleich 'newsletter'
ist $("input[name^='news']") Wählen Sie alle Eingabeelemente aus, deren Namensattribut mit 'news'
beginnt $("input[name$='news']") Wählen Sie alle Eingabeelemente aus, deren Namensattribut mit 'news'
endet $("input[name*='man']") Wählen Sie alle Eingabeelemente aus, deren Namensattribut 'news'
enthält $("input[id][name$='man']") Sie können mehrere Attribute für die gemeinsame Auswahl verwenden. Dieser Selektor ruft alle Elemente ab, die das id-Attribut enthalten, und das Attribut endet mit man

Filterauswahl für untergeordnete Elemente:

$("ul li:nth-child(2)"),$("ul li:nth-child(odd)"),$("ul li:nth-child(3n + 1)")
$("div span:first-child") 返回所有的div元素的第一个子节点的数组
$("div span:last-child") 返回所有的div元素的最后一个节点的数组
$("div button:only-child") 返回所有的div中只有唯一一个子节点的所有子节点的数组

表单元素选择器:

$(":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() 
Nach dem Login kopieren

名字以”S_”开始,并且不是以”_R”结尾的

$(”input[@ name ^='S_']“).not(”[@ name $='_R']“) 
Nach dem Login kopieren

一个名为 radio_01的radio所选的值

$(”input[@ name =radio_01][@checked]“).val(); 
Nach dem Login kopieren

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

Nach dem Login kopieren

jQuery 代码:

$("form input") 
Nach dem Login kopieren

结果:

[ <input name="name" />, <input name="newsletter" /> ] 
Nach dem Login kopieren
Nach dem Login kopieren

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" /> 
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

jQuery 代码:

$("form > input") 
Nach dem Login kopieren

结果:

[ <input name="name" /> ] 
Nach dem Login kopieren

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" /> 
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

jQuery 代码:

$("label + input") 
Nach dem Login kopieren

结果:

[ <input name="name" />, <input name="newsletter" /> ] 
Nach dem Login kopieren
Nach dem Login kopieren

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" /> 
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

jQuery 代码:

$("form ~ input") 
Nach dem Login kopieren

结果:

[ <input name="none" /> ] 
Nach dem Login kopieren

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage