Résumé de l'utilisation du sélecteur jQuery Selector

Un résumé de l'utilisation de jQuery Selector. Les amis qui en ont besoin peuvent s'y référer. Ce sont des méthodes de contrôle de sélection couramment utilisées.

//jQuery selector$
//$(expression,[context]) return jQuery
//Unit One
//Le définisseur CSS d'expression consiste à exprimer le contenu souhaité dans Syntaxe CSS L'élément sélectionné

// $("*"); // 表示页面所有元素标签 
// $("th, td") // 表示所有<th><td>元素标签 
// $("a") // 表示所有<a>元素标签 
// $("p#onlyp"); // 表示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选择符的元素

//Sélectionnez l'expression en fonction des attributs de l'élément

// alert($("button[@class]").length); // 表示有class属性的元素 
// alert($("button[@class=not").length); // 表示有class属性且值等于not的元素 
// alert($('button[@class^=not').length); // 表示有class属性且值开头匹配not的元素 
// alert($('button[@class$=not').length); // 表示有class属性且值结尾匹配not的元素 
// alert($('button[@class*=not').length); // 表示有class属性且值中匹配not的元素 
//expression 之 XPATH 
过滤器
 XPATH语法来表示需要选择的页面元素 
//$("ol[@id^='orderedlist']").find("li:contains('First')").each(function(i) { 
//// $(this).html( $(this).html() + " BAM! " + i ); 
// $(this).mouseover(function(){ 
// $(this).css("color","red"); 
// }); 
// $(this).mouseout(function(){ 
// $(this).css("color","#000"); 
// }); 
// });

//Trouver l'ol tag et attribut id= Tous les éléments de la liste ordonnée, il existe deux manières d'écrire

//ol[@id='orderedlist'] 定位父元素 直接用each 迭代 
//ol[@id='orderedlist']/* 所有父元素下的子元素 使用find('child- element').each()迭代

//Unité deux
///$( html, [ownerDocument]) return jQuery
//Cette fonction permet de transmettre le texte élément HTML , et le constructeur générera un objet jQuery créé par ce texte HTML. Cet objet peut ne pas exister à l'origine, ou. il peut exister sur la page d'origine
//$('e388a4556c0f65e1904146cc1a846beehello94b3e26ee717c64999d7867364b1b4a3').appendTo("h2"); //Générer un texte de balisage et l'ajouter à la balise h2 de la page
//Vous pouvez également retirer les éléments de la page d'origine et les ajouter

//$("input",this).appendTo("h2"); //注意,这里取出的页面元素,是移动!而不是复制 
///$(elements) return jQuery 
//这个函数允许直接传入DOM 
//$(document.forms[0].elements).appendTo("h2"); // 可以参考DOM文档 
//$(callback) return jQuery

Voici quelques instructions pour le sélecteur

Bases :
#id : récupère 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 hiérarchique :
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 signe ~, ce qui signifie qu'il faut d'abord rechercher tous les objets avec le premier sélecteur, puis rechercher 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 : faire correspondre le premier objet parmi plusieurs objets
:last : faire correspondre le dernier objet parmi plusieurs objets
:not(selector) : faire correspondre les éléments avec le contenu dans le sélecteur après non supprimé
: pair : correspond au nombre pair parmi tous les objets
: impair : 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 animés

filtre de texte :
:contains(text) : correspond à l'élément de texte qui a le contenu interne des objets, y compris 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 ceux objets qui contiennent uniquement du texte

Filtre de visibilité :
:hidden : correspond à tous les objets cachés, ou au 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] : fait correspondre les objets qui ont un certain attribut et commencent par une certaine valeur
[attribute$=value] : fait correspondre les objets qui ont un certain attribut et se terminent par une certaine valeur value
[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 l'objet de l'équation, :eq(index) ne peut que faire correspondre les caractéristiques des sous-éléments d'un seul objet, tandis que cette méthode peut faire correspondre les caractéristiques communes d'un certain sous-élément de plusieurs objets
 : premier enfant : faire correspondre le premier élément enfant
: last- child : correspond au dernier élément enfant
Ces deux matchers 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, il correspondra à cet enfant element

filtre de formulaire
Type de nom

:input Renvoie : Tableau4794a3d50dd7c9f2878797b220eba240
formulaire correspondant Élément d'entrée interne

 : texte Renvoie : Array9b16383a6b05c463860f147704984eb4
Correspond aux éléments dont le type d'entrée est du texte sous la forme

: mot de passe Renvoie : Array
:radio Renvoie : Tableau4794a3d50dd7c9f2878797b220eba240
Faire correspondre les éléments du formulaire dont le type d'entrée est radio

 : case à cocher Renvoie : Tableau4794a3d50dd7c9f2878797b220eba240 ;
Faire correspondre les éléments du formulaire dont le type d'entrée est la case à cocher

:submit Renvoie : Tableau4794a3d50dd7c9f2878797b220eba240
Faire correspondre le type d'entrée dans le formulaire L'élément de soumission

:image Renvoie : Array9b16383a6b05c463860f147704984eb4
L'élément qui correspond à l'image sous la forme

:reset Renvoie : Array9b16383a6b05c463860f147704984eb4
Match les éléments avec type d'entrée réinitialisé sous la forme

:bouton Renvoie : Tableau4794a3d50dd7c9f2878797b220eba240
Faire correspondre les éléments avec le bouton de type d'entrée sous la forme

:fichier Renvoie : Tableaub795d0e9624604e165da77abffb79c85
correspond aux éléments dont le type d'entrée est un fichier dans le formulaire

:hidden Renvoie : Array9b16383a6b05c463860f147704984eb4 ou zone cachée

:enabled Renvoie : Array9b16383a6b05c463860f147704984eb4
correspond à tous les éléments activés

:disabled Renvoie : Array9b16383a6b05c463860f147704984eb4 tous les éléments non activés

:checked Renvoie : Array9b16383a6b05c463860f147704984eb4
Correspond à tous les éléments sélectionnés

:selected Renvoie : Array9b16383a6b05c463860f147704984eb4 >Correspond à tous les liste déroulante éléments sélectionnés

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!