Résumé de l'utilisation du caractère générique du sélecteur jQuer et de l'instance du sélecteur

Le caractère générique

dans le sélecteur jquery est souvent utilisé. Le caractère générique est très utile lors du contrôle de la balise d'entrée . L'utilisation générale est résumée comme suit :

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) Basé sur un index on Select

$("tbody tr:even"); //Sélectionne toutes les balises tr avec un nombre pair

$("tbody tr:odd" ); //Sélectionnez l'index pour toutes les balises tr impaires

(3) Obtenez le numéro d'entrée du nœud de niveau suivant de jqueryObj

jqueryObj.children("input").length;

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

$(".main > a");

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

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

2. Appareil de filtrage

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

3. 4. Fonction utilitaire

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

ps : résumé du sélecteur jQuery

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

Le sélecteur de jQuery peut être considéré comme extrêmement puissant, voici la simplicité Résumons les 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 dans le document qui est myElement, nous obtenons donc Is the only element

$("p") Sélectionnez tous les éléments de la balise p et retournez. élément p

tableau

$(".myClass ")                                                                                                             " myELement,p,.myclass")

Sélecteur en cascade :

$("form input") Sélectionnez tous les éléments du formulaire Élément d'entrée

$("#main > *") Sélectionnez tous les sous-éléments dont la valeur d'identification est principale

$("label + input") Sélectionnez 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") Le le sélecteur frère renvoie tous les éléments d'étiquette dont l'identifiant est p balises précédentes du même élément parent

Sélecteur de filtre de base :

$(" tr:first")                       A

$("tr:last")                                                                                                              pour sélectionner le dernier de tous les éléments tr ​​Tous les éléments d'entrée du sélecteur

$("tr:even. ") Sélectionnez les 0ème, 2ème, 4ème... éléments de tous les éléments tr (Remarque : Parce que tous Le nombre d'éléments sélectionnés est un tableau, donc le numéro de série commence à 0) $ ("tr : ODD ") Sélectionnez 1,3,5 ... ... 🎜> $ (" TD: Eq (2) ") SSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSSS 🎜>

Sélecteur de filtre de contenu :

$("p:contains('John')") Sélectionne tous les éléments avec le texte John dans p

$("td:empty") Sélectionne tous les tableaux d'éléments td qui sont vides (sans compter les nœuds de texte)
$("p:has(p)") Sélectionne 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")        选择所有的被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" /> ]

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!