Résumé de l'utilisation des sélecteurs Selector dans jQuery-js tutoriel-php.cn

Résumé du sélecteur JQuery

//jQuery 选择器 $ 
//$(expression,[context]) return jQuery 
//Unit One 
//expression 之 CSS 定义符 就是以CSS语法表示所要选择的元素 

// $("*"); // 表示页面所有元素标签 
// $("th, td") // 表示所有<th><td>元素标签 
// $("a") // 表示所有<a>元素标签 
// $("div#onlydiv"); // 表示CSS选择中id=onlyidv的元素 $("#ID")为全文档匹配 
// $("#rating"); // 表示id=rating的元素 
// $("#orderedlist > li"); // 表示id=orderedlist 所有子元素,但不包括子元素下的子元素 
// $("#orderedlist li:last"); // 表示id=orderedlist 中li最后一个元素 
// $("#orderedlist li:first"); // 表示id=orderedlist 中li第一个元素 
// $("#orderedlist li:nth- child(0)"); //表示id=orderedlist 中li第(N)个元素 n为数组下标 
// $("button:only-child"); //表示 css选择中的它为父容器唯一的元素 
// $(".stuff:empty"); // 表示css选择中的空元素 
// $(".buttons:enabled"); // 表示css选择中的正常启用的元素 
// $(".buttons:disabled"); // 表示css选择中的非启用元素 
// $("input:checked"); // 表示css选择中的选中的元素 
// $("button:not(.not)"); // 表示css选择中的去除not()中的元素 
// $("button.not"); // 表示css选择中的class=not的元素 $(".CLSS")为全文档匹配 
// $("#orderedlist2 li"); // 表示id=orderedlist 所有子元素且包括所有子元素的子元素 
// //alert($("#orderedlist ~ li").length); 
// $("#orderedlist,.buttons,li"); //匹配 css选择符的元素 



//expression 之 根据元素属性选择 
// alert($("button[@class]").length); // 表示有class属性的元素 
// alert($("button[@class=not").length); // 表示有class属性且值等于not的元素 
// alert($(&#39;button[@class^=not&#39;).length); // 表示有class属性且值开头匹配not的元素 
// alert($(&#39;button[@class$=not&#39;).length); // 表示有class属性且值结尾匹配not的元素 
// alert($(&#39;button[@class*=not&#39;).length); // 表示有class属性且值中匹配not的元素 
//expression 之 XPATH 过滤器 XPATH语法来表示需要选择的页面元素 
//$("ol[@id^=&#39;orderedlist&#39;]").find("li:contains(&#39;First&#39;)").each(function(i) { 
//// $(this).html( $(this).html() + " BAM! " + i ); 
// $(this).mouseover(function(){ 
// $(this).css("color","red"); 
// }); 
// $(this).mouseout(function(){ 
// $(this).css("color","#000"); 
// }); 
// }); 
//查找ol标签且属性 id=orderedlist的所有元素,这里有两种写法 
//ol[@id=&#39;orderedlist&#39;] 定位父元素 直接用each 迭代 
//ol[@id=&#39;orderedlist&#39;]/* 所有父元素下的子元素 使用find(&#39;child- element&#39;).each()迭代 

//Unit two 
///$( html, [ownerDocument]) return jQuery 
//这个函数允许传入html元素文本,构造器会产生这个HTML文本所创造的jQuery对象,这个对象可以是原本没有的,也可是原本页面上存在的 
//$(&#39;<p>hello</p>&#39;).appendTo("h2"); //生成一个标记文本 并追加到页面h2标签内 
//也可以 将原本页面元素取出追加 
//$("input",this).appendTo("h2"); //注意,这里取出的页面元素,是移动!而不是复制 

///$(elements) return jQuery 
//这个函数允许直接传入DOM 
//$(document.forms[0].elements).appendTo("h2"); // 可以参考DOM文档 
//$(callback) return jQuery 



//以下是selector一些说明 
/*

Copier après la connexion

Bases :

#id : obtenez l'objet en fonction de son attribut id.
element : Tous les objets qui correspondent à une certaine balise HTML
.class : Récupère l'objet en fonction de l'attribut de classe de l'objet
* : Récupère tous les objets
selector1, selector2, selectorN : Obtenez une collection de plusieurs sélecteurs sans supprimer les doublons

Sélecteur de niveau :
ancêtre descendant : Ce sélecteur est un espace, ce qui signifie que tous les objets du premier sélecteur sont trouvés en premier, puis Rechercher tous les objets qui correspondent au deuxième sélecteur parmi les nœuds descendants de .
parent > enfant : ce sélecteur est le signe supérieur à, ce qui signifie qu'il faut d'abord rechercher tous les objets du premier sélecteur, puis rechercher tous les objets qui correspondent au deuxième sélecteur dans ses nœuds enfants (pas de grands nœuds).
prev + next : Ce sélecteur est le signe plus, ce qui signifie rechercher d'abord tous les objets du premier sélecteur, puis rechercher les objets qui suivent le nœud suivant du même niveau et correspondent également au deuxième sélecteur.
prev ~ frères et sœurs : Ce sélecteur est le symbole ~, ce qui signifie qu'il faut d'abord trouver tous les objets du premier sélecteur, puis trouver les objets qui correspondent au deuxième sélecteur dans tous les nœuds suivants au même niveau.

Caractères de filtre de base :
:first : fait correspondre le premier objet parmi plusieurs objets
:last : fait correspondre le dernier objet parmi plusieurs objets
:not(selector) : fait correspondre les éléments avec le contenu dans le sélecteur après non-suppression
:even : correspond au nombre pair parmi tous les objets
:odd : correspond au nombre impair parmi tous les objets
:eq(index) : correspond à un certain Un seul élément dans ce qui suit table
:gt(index) : correspond à tous les éléments supérieurs à un certain indice
:lt(index) : correspond à tous les éléments inférieurs à un certain indice
:header : correspond à tous les éléments d'en-tête, par exemple, h1 , h2, h3, h4, h5, h6
:animated : correspond à tous les éléments avec des effets animés

filtre de texte :
:contains(text) : correspond à l'élément de texte qui a le contenu interne. Objets , y compris les situations utiles indirectes
:empty : correspond à tous les objets sans éléments enfants
:has(selector) : correspond à tous les objets qui contiennent au moins un sélecteur enfant
:parent : correspond à tous les objets parents, l'objet parent contient les objets qui contiennent uniquement du texte

Filtre de visibilité :
:hidden : correspond à tous les objets cachés, ou le type masqué dans l'entrée
:visible : correspond à tous les objets visibles

Filtre d'attribut :
[attribut] : correspond à tous les objets avec un certain attribut
[attribute=value] : correspond aux objets avec un certain attribut et une certaine valeur
[attribute!= value] : correspond aux objets qui ont un certain attribut et n'ont pas une certaine valeur
[attribute^=value] : correspond aux objets qui ont un certain attribut et commencent par une certaine valeur
[attribute$=value] : correspond aux objets qui ont un certain attribut et se terminent par une certaine valeur
[attribute*=value] : faire correspondre les objets qui ont un certain attribut et contenir une certaine valeur
[selector1] [selector2][selectorN] : faire correspondre les objets qui correspondent à plusieurs sélecteurs d'attribut en même temps

sous-filtre :
:nth- child(index/even/odd/equation) : correspond à un certain indice /even/odd/ dans l'élément enfant Pour les objets équation, :eq(index) ne peut que faire correspondre les caractéristiques d'un élément enfant d'un seul objet, tandis que cette méthode peut faire correspondre les caractéristiques communes d'un certain élément enfant de plusieurs objets
:first-child : faire correspondre le premier élément enfant
:last- child : matcher le dernier élément enfant
Ces deux comparateurs peuvent également correspondre à tous les éléments enfants de plusieurs objets parents
:only-child : If Si un élément parent n'a qu'un seul élément enfant, faire correspondre cet élément enfant
🎜>
filtre de formulaire
Type de nom