Sélecteurs et filtres JQuery organised

Après une nuit de recherche et de tri, j'ai finalement trouvé ce qui devrait être considéré comme l'ensemble le plus complet de méthodes de sélection de filtres JQuery. Tout le code est testé.

Premier code HTML

Copier le code Le code est le suivant :

Code HTML

Code JS

Objet 1.DOM et ensemble d'emballage JQuery

1. Ce que vous obtenez via document.getElementById(), document.getElementsByName(), etc. est l'objet DOM ou l'ensemble d'objets DOM. Le premier obtient l'objet et le second obtient l'ensemble d'objets DOM
.

Copier le code Le code est le suivant :

var text11_dom=document.getElementById("text11");

var text11_dom=document.getElementsByName("text11")[0];

var text11_dom=document.all.text11;//Ici, text11 peut être soit une valeur de nom, soit une valeur d'identifiant

var text11_dom=document.all[10];

2. Si vous souhaitez utiliser les fonctions fournies par JQuery, vous devez d'abord construire un ensemble d'empaquetage JQuery. Ce qui est renvoyé via $() est l'ensemble d'empaquetage JQuery.

Copier le code Le code est le suivant :

var text11_jquery=$("#text11");

2. Convertissez l'ensemble d'emballage JQuery et l'objet DOM l'un vers l'autre

1. Les objets DOM ne peuvent pas utiliser les méthodes d'attribut JQuery, mais les objets DOM peuvent être convertis en ensembles de wrapper JQuery via $()

Copier le code Le code est le suivant :

var text11_dom=document.getElementById("text11");

var text11_jquery=$(text11_dom);

2. L'ensemble de wrapper JQuery peut utiliser les méthodes d'attribut de certains objets DOM tels que .length, mais il existe également certaines méthodes d'attribut qui ne peuvent pas être utilisées telles que .value. Vous pouvez obtenir l'objet DOM correspondant en ajoutant des crochets et l'index. valeur après l'ensemble du wrapper JQuery

Copier le code Le code est le suivant :

var text11_dom=$("#text11")[0];

3. C'est aussi un objet DOM lors de chaque boucle ou lorsqu'un événement est déclenché

Copier le code Le code est le suivant :

$("#text11").click(function(){

var text11_dom_value=this.value;

alerte(text11_dom_value);

});

3. Le symbole $ représente une référence à l'objet JQuery dans JQuery. Il existe quatre méthodes principales de JQuery

1.jQuery(html[,ownerDocument]) : Créez dynamiquement des éléments Dom basés sur des chaînes HTML originales

Copier le code Le code est le suivant :

$("

Bonjour !

").appendTo("body");

2.jQuery ( elements ) : encapsulez un ou plusieurs objets Dom dans des ensembles d'empaquetage jQuery, qui est la conversion entre les objets DOM ci-dessus et les ensembles d'empaquetage JQuery

3.jQuery( callback ) : raccourci pour $(document).ready()

Copier le code Le code est le suivant :

$(fonction(){

alert("Bonjour !");

});

4.JQuery(selector[,context]) : recherchez les ensembles d'emballages JQuery qui répondent aux conditions dans la plage spécifiée. Le contexte est la plage de recherche. Le contexte peut être un ensemble d'objets DOM ou un ensemble d'emballages JQuery
. Recherchez l'ensemble de wrapper JQuery
pour l'élément avec l'identifiant text11 dans toutes les balises tr

Copier le code Le code est le suivant :

var text11_query=$("#text11","tr");

=================== Sélecteur jQuery ====================

1. Bases du sélecteur de base

1. Sélectionnez en fonction du nom de la balise

Copier le code Le code est le suivant :

var input_query=$("input");

2. Sélectionnez
en fonction de la valeur de l'identifiant

Copier le code Le code est le suivant :

var text11_query=$("#text11");

3. Sélectionnez en fonction de la valeur de la classe

Copier le code Le code est le suivant :

var text11_query=$(".text11");

4. Sélectionnez plusieurs ensembles d'emballages JQuery qui remplissent les conditions en même temps. Utilisez , pour séparer les conditions
.

Copier le code Le code est le suivant :

var text_query=$("#text11,.text12");

5. Sélectionnez tous les éléments DOM

Copier le code Le code est le suivant :

var all_query=$("*");

2. Hiérarchie

1. Obtenez tous les éléments avec la valeur d'identification text11 en dessous d'eux à partir de toutes les balises tr

Copier le code Le code est le suivant :

var text11_query=$("tr #text11");

2. Obtenez tous les sous-éléments d'entrée directe
sous toutes les balises td

Copier le code Le code est le suivant :

var input_query=$("td>input");

3. Obtenez l'élément de classe bouton11 derrière l'élément avec l'identifiant text11 et n'obtenez qu'un seul élément qui remplit les conditions. text11 et bouton11 sont au même niveau

Copier le code Le code est le suivant :

var bouton11_query=$("#text11 .button11");

4. Obtenez tous les éléments avec le bouton de classe11 derrière l'élément avec l'identifiant text11

Copier le code Le code est le suivant :

var bouton11_query=$("#text11~.button11");

3. Filtres de base

1. Obtenez le premier élément d'entrée

Copier le code Le code est le suivant :

var input_query=$("input:first");

2. Obtenez le dernier élément d'entrée

Copier le code Le code est le suivant :

var input_query=$("input:last");

3. Obtenez tous les éléments d'entrée non sélectionnés

Copier le code Le code est le suivant :

var input_query=$("input:not(:checked)");

4. Comptez le premier élément d'entrée comme un et recherchez tous les éléments d'entrée impairs

Copier le code Le code est le suivant :

var input_query=$("input:even");

5. À partir de la deuxième entrée, recherchez tous les éléments d'entrée pairs

Copier le code Le code est le suivant :

var input_query=$("input:odd");

6. Recherchez l'élément d'entrée avec l'index 1 et la valeur de l'index commence à 0

Copier le code Le code est le suivant :

var input_query=$("input:eq(1)");

7. Recherchez tous les éléments d'entrée dont l'indice est supérieur à 0

Copier le code Le code est le suivant :

var input_query=$("input:gt(0)");

8. Recherchez tous les éléments d'entrée avec un indice inférieur à 2

Copier le code Le code est le suivant :

var input_query=$("input:lt(2)");

9. Obtenez tous les élémentstitle
sur la page

Copier le code Le code est le suivant :

var h_query=$(":header");

10. Obtenez tous les éléments qui exécutent des effets d'animation

Copier le code Le code est le suivant :

var animation_query=$(":animated");

4. Filtres de contenu

1. Recherchez tous les éléments h1 contenant "Hello World!" dans tout le contenu HTML

Copier le code Le code est le suivant :

var h1_query=$("h1:contains('Bonjour tout le monde !')");

2. Obtenez tous les éléments td
qui ne contiennent pas de sous-balises ou qui ont un contenu HTML vide

Copier le code Le code est le suivant :

var td_query=$("td:vide");

3. Recherchez tous les éléments td contenant des sous-éléments d'entrée

Copier le code Le code est le suivant :

var td_query=$("td:has(input)");

4. Recherchez tous les éléments td qui contiennent des sous-balises ou ont du contenu HTML

Copier le code Le code est le suivant :

var td_query=$("td:parent");

5. Filtres de visibilité Filtres de visibilité

1. Trouver tous les éléments d'entrée masqués

Copier le code Le code est le suivant :

var input_query=$("input:hidden");

2. Recherchez tous les éléments d'entrée visibles

Copier le code Le code est le suivant :

var input_query=$("input:visible");

6. Filtres d'attributs
1. Recherchez tous les éléments d'entrée contenant l'attribut id

Copier le code Le code est le suivant :

var input_query=$("input[id]");

2. Recherchez l'élément d'entrée dont la valeur du nom est text11

Copier le code Le code est le suivant :

var input_query=$("input[name='text11']");

3. Recherchez tous les éléments d'entrée dont la valeur du nom n'est pas égale à text11

Copier le code Le code est le suivant :

var input_query=$("input[name!='text11']");

4. Recherchez l'élément d'entrée dont la valeur du nom commence par du texte

Copier le code Le code est le suivant :

var input_query=$("input[name^='text']");

5. Recherchez tous les éléments d'entrée dont la valeur du nom se termine par 11

Copier le code Le code est le suivant :

var input_query=$("input[name$='11']");

6. Recherchez tous les éléments d'entrée dont la valeur de nom contient ext

Copier le code Le code est le suivant :

var input_query=$("input[name*='ext']");

7. Recherchez tous les éléments d'entrée qui contiennent l'attribut id et la valeur du nom contient ext

Copier le code Le code est le suivant :

var input_query=$("input[id][name*='ext']");

7. Filtres enfants

1. Recherchez tous les éléments d'entrée classés en deuxième position parmi tous les éléments enfants de l'élément parent
Le paramètre dans nth-child() est facultatif, pair compte ici comme un nombre pair et impair compte ici comme un nombre impair. Tout nombre de n signifie que tous les éléments d'entrée avec les éléments parents sont sélectionnés. classé premier. Les éléments d'entrée comptent pour un

Copier le code Le code est le suivant :

var input_query=$("input:nth-child(2)");

2. Recherchez tous les éléments d'entrée qui se classent au premier rang parmi tous les éléments enfants de l'élément parent

Copier le code Le code est le suivant :

var input_query=$("input:first-child");

3. Recherchez tous les éléments d'entrée qui sont les derniers parmi tous les éléments enfants de l'élément parent

Copier le code Le code est le suivant :

var input_query=$("input:last-child");

4. Recherchez tous les éléments d'entrée qui sont les seuls éléments enfants de l'élément parent

Copier le code Le code est le suivant :

var input_query=$("input:only-child");

8. Formulaires de sélection de formulaire