Résumé du sélecteur jQuery wildcard [id^='code'] ou [name^='code']

J'ai rencontré un problème de caractère générique en travaillant sur un sujet spécial ces deux jours. Cet article présente principalement le caractère générique [id^='code'] ou [name^='code'] dans le sélecteur de jQuery et la sélection jquery Friends who. j'en ai besoin, je peux me référer aux informations pertinentes résumées par l'appareil. J'espère que cela pourra aider tout le monde.

//弹层操作
$(function(){
 //视频播放
 $("a[href^='#video']").each(function(index, element) {
 $(this).click(function(){
 $(".popp,#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);
 $(".popp,#picBox").show();
 $("#picBox img").animate({opacity:'1'},500)
 });
 });
 $(".close").click(function(){
 $(".popp,.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 suivante :

1 Sélecteur

(1) Wildcard. :

$("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électionner selon l'index

$("tbody tr:even") ; //Sélectionnez toutes les balises tr ​​avec des index pairs
$("tbody tr:odd"); //Sélectionnez toutes les balises tr ​​avec des index impairs

(3) Obtenez le entrée du nœud de niveau suivant de jqueryObj Number

jqueryObj.children("input").length;

(4) Obtenez toutes les étiquettes

sous les nœuds enfants de l'étiquette avec la classe main

$(".main > a");

(5) Sélectionnez l'étiquette immédiatement adjacente à

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

2. Filtre

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

3. Événements

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

4. Fonctions de l'outil

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

ps : Résumé des sélecteurs jQuery

Les sélecteurs jQuery sont extrêmement puissants 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, donc ce que vous obtenez est le seul élément <.>

$("p") Sélectionnez tous les éléments de balise p, retournez le tableau d'éléments p

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

$("*") Sélectionner le document Tous les éléments peuvent être sélectionnés conjointement en utilisant diverses méthodes de sélection : par exemple $("#myELement,p,.myclass")

Sélecteur en cascade : $("form input") Sélectionnez tous les éléments de saisie dans l'élément de formulaire

$("#main > *") Sélectionnez tout sous-éléments 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 ~ p") Sélecteur frère, ce sélecteur renvoie toutes les balises p appartenant au même élément parent de l'élément tag avec l'identifiant prev

Sélecteur de filtre de base :

$("tr:first")                                                                                peut sélectionner le premier de tous les éléments tr $("tr:last")                                      peut sélectionner 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 : comme les éléments sélectionnés sont des tableaux, le numéro de série commence à 0)
$("tr:odd ") Sélectionnez le premier, 3, 5... ... un élément

$ (" td : EQ (2) ") Sélectionnez l'élément TD avec le numéro de série 2 dans tous les éléments TD

$("td : gt(4)") Sélectionnez tous les éléments td avec des numéros de série supérieurs à 4 dans les éléments td
$(":header")
$("p:animated")



Sélecteur de filtre de contenu :

$("p:contains('John')") Sélectionne tous les éléments contenant le texte de John dans p
$("td:empty") Sélectionne tous les td vides (sans compter les nœuds de texte) Tableau d'éléments
$("p:has(p)") Sélectionnez tous les p éléments 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 :

$("p:hidden") Sélectionnez tous les éléments p masqués
$( "p:visible") Sélectionnez tout éléments visuels p

Sélecteur de filtre d'attribut :

$("p[id]" )                                                              ‐                                                     s s s ss 1   out out out out out out sur 5 - Sélection de tous les éléments p avec l'attribut id
$("input[name='newsletter']")                               out - sélection de tous les éléments d'entrée ayant un attribut de nom égal à 'newsletter' ']") Sélectionner tout é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 L'élément d'entrée de ' news'
$("input[id][name$='man']") peut utiliser plusieurs attributs pour la sélection conjointe. Ce sélecteur obtient tous les attributs id et les attributs commencent par l'élément de fin man

sélecteur de filtre d'élément enfant : $("ul li:nth-child(2)"),$( "ul li:nth-child(impair )"),$("ul li:nth-child(3n + 1)")

$("p span:first-child")                                                                                                                                                   Retour Un tableau de nœuds enfants

$("p span:last -child") Renvoie un tableau du dernier nœud de tous les p éléments
$("p button:only-child") Renvoie tous les p éléments Tableau de tous les nœuds enfants avec un seul nœud enfant

Sélecteur d'éléments de formulaire :
$(":input") Sélectionnez tous les éléments de saisie du formulaire, y compris l'entrée, la zone de texte, la sélection et le bouton

$(":text")   élément de saisie du mot de passe

$(":radio")                                                                                                                                                                                                                                                                           Sélectionne tous les éléments d'entrée radio. Élément $ (": IMAGE") Choisissez tous les éléments d'entrée d'image

$ (" : reset") Choisissez tous les éléments d'entrée de réinitialisation
$ (": Button") Sélectionnez tous les éléments d'entrée du bouton
$(":file") Sélectionnez tous les éléments d'entrée du fichier
$(":hidden") Sélectionnez tous les éléments de saisie de type champs cachés ou masqués du formulaire



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

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

相关推荐：

介绍有关jQuery的选择器中的通配符使用方法

jQuer选择器通配符及选择器实例用法总结

SQL中通配符、转义符与"["号的使用(downmoon)_PHP教程

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!