Caractère générique [id^='code'] ou [name^='code'] dans le sélecteur jQuery et le sélecteur jquery summary_jquery

J'ai rencontré un problème de joker en travaillant sur un sujet spécial ces deux jours

//弹层操作
$(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)
 });
 })

Problème résolu ! Si vous rencontrez un tel problème, vous pouvez vous référer à l'utilisation détaillée ci-dessous :

1. Sélecteur

(1) Caractère générique :

$("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) Sélectionnez

en fonction de l'index

$("tbody tr:even"); //Sélectionne toutes les balises tr avec des index pairs
$("tbody tr:odd"); //Sélectionne toutes les balises tr avec un index impair

(3) Obtenir le nombre d'entrées du nœud de niveau suivant de jqueryObj

jqueryObj.children("input").length;

(4) Obtenez toutes les étiquettes sous les nœuds enfants de l'étiquette avec la classe principale

$(".main > a");

(5) Sélectionnez l'étiquette à côté de

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

2. Filtre

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

3. Événement

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

4. Fonctions utilitaires

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

ps : résumé du sélecteur jQuery

Le sélecteur de jQuery est extrêmement puissant. Voici un bref résumé des méthodes de recherche d'éléments couramment utilisées
.

$("#myELement") Sélectionnez l'élément dont la valeur id est égale à myElement. La valeur id ne peut pas être répétée. Il ne peut y avoir qu'une seule valeur id myElement dans le document, vous obtenez donc le seul élément
.

$("div") Sélectionnez tous les éléments de balise div et renvoyez un tableau d'éléments div

$(".myClass") Sélectionnez tous les éléments en utilisant le CSS de la classe myClass

$("*") Sélectionnez tous les éléments du document. Vous pouvez utiliser diverses méthodes de sélection pour la sélection conjointe : par exemple, $("#myELement,div,.myclass")

Sélecteur en cascade :

$("form input") Sélectionnez tous les éléments d'entrée dans les éléments de formulaire
$("#main > *") Sélectionnez tous les éléments enfants avec la valeur id de main
$("label input") Sélectionne le nœud d'élément d'entrée suivant parmi tous les éléments d'étiquette. Après le test, le sélecteur renvoie tous les éléments d'étiquette d'entrée qui sont directement suivis d'une étiquette d'entrée
. $("#prev ~ div") Sélecteur frère, ce sélecteur renvoie toutes les balises div appartenant au même élément parent

de l'élément tag avec l'identifiant prev

Sélecteur de filtre de base :

$("tr:first") Sélectionnez le premier de tous les éléments tr
$("tr:last") Sélectionnez le dernier
de tous les éléments tr $("input:not(:checked) span")

Filtrer : tous les éléments d'entrée du sélecteur coché

$("tr:even") Sélectionnez les 0ème, 2ème, 4ème... éléments de tous les éléments tr (Remarque : étant donné que les multiples éléments sélectionnés sont des tableaux, les numéros de séquence proviennent de 0 Début)
$("tr:odd") Sélectionnez le 1er, le 3ème, le 5ème... éléments de tous les éléments tr
$("td:eq(2)") Sélectionnez l'élément td avec le numéro de série 2 parmi tous les éléments td
$("td:gt(4)") Sélectionnez tous les éléments td avec des numéros de séquence supérieurs à 4 dans les éléments td
$("td:ll(4)") Sélectionnez tous les éléments td avec des numéros de séquence inférieurs à 4 dans les éléments td
$(":en-tête")
$("div:animé")

Sélecteur de filtre de contenu :

$("div:contains('John')") sélectionne tous les éléments contenant le texte de John dans les divs
$("td:empty") Sélectionne un tableau de tous les éléments td vides (sans compter les nœuds de texte)
$("div:has(p)") Sélectionnez tous les éléments div contenant des balises p
$("td:parent") Sélectionnez tous les tableaux d'éléments avec td comme nœud parent

Sélecteur de filtre visuel :

$("div:hidden") Sélectionnez tous les éléments div masqués
$("div:visible") Sélectionnez tous les éléments div visibles

Sélecteur de filtre d'attribut :

$("div[id]") Sélectionnez tous les éléments div contenant l'attribut id
$("input[name='newsletter']") Sélectionnez tous les éléments d'entrée dont l'attribut name est égal à 'newsletter'
$("input[name!='newsletter']") sélectionne tous les éléments d'entrée dont l'attribut name n'est pas égal à 'newsletter'
$("input[name^='news']") Sélectionnez tous les éléments d'entrée dont l'attribut name commence par 'news'
$("input[name$='news']") Sélectionnez tous les éléments d'entrée dont l'attribut name se termine par 'news'
$("input[name*='man']") Sélectionnez tous les éléments d'entrée dont l'attribut name contient 'news'
$("input[id][name$='man']") Vous pouvez utiliser plusieurs attributs pour une sélection conjointe. Ce sélecteur récupère tous les éléments qui contiennent l'attribut id et l'attribut se termine par man

.

Sélecteur de filtre d'élément enfant :

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

名字以”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" /> ]