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
Code HTML
Bonjour tout le monde !
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
.
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.
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 $()
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
var text11_dom=$("#text11")[0];
3. C'est aussi un objet DOM lors de chaque boucle ou lorsqu'un événement est déclenché
$("#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
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()
$(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
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
var input_query=$("input");
2. Sélectionnez
en fonction de la valeur de l'identifiant
var text11_query=$("#text11");
3. Sélectionnez en fonction de la valeur de la classe
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
.
var text_query=$("#text11,.text12");
5. Sélectionnez tous les éléments DOM
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
var text11_query=$("tr #text11");
2. Obtenez tous les sous-éléments d'entrée directe
sous toutes les balises td
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
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
var bouton11_query=$("#text11~.button11");
3. Filtres de base
1. Obtenez le premier élément d'entrée
var input_query=$("input:first");
2. Obtenez le dernier élément d'entrée
var input_query=$("input:last");
3. Obtenez tous les éléments d'entrée non sélectionnés
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
var input_query=$("input:even");
5. À partir de la deuxième entrée, recherchez tous les éléments d'entrée pairs
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
var input_query=$("input:eq(1)");
7. Recherchez tous les éléments d'entrée dont l'indice est supérieur à 0
var input_query=$("input:gt(0)");
8. Recherchez tous les éléments d'entrée avec un indice inférieur à 2
var input_query=$("input:lt(2)");
9. Obtenez tous les éléments
title
sur la page
var h_query=$(":header");
10. Obtenez tous les éléments qui exécutent des effets d'animation
var animation_query=$(":animated");
4. Filtres de contenu
1. Recherchez tous les éléments h1 contenant "Hello World!" dans tout le contenu HTML
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
var td_query=$("td:vide");
3. Recherchez tous les éléments td contenant des sous-éléments d'entrée
var td_query=$("td:has(input)");
4. Recherchez tous les éléments td qui contiennent des sous-balises ou ont du contenu HTML
var td_query=$("td:parent");
5. Filtres de visibilité Filtres de visibilité
1. Trouver tous les éléments d'entrée masqués
var input_query=$("input:hidden");
2. Recherchez tous les éléments d'entrée visibles
var input_query=$("input:visible");
6. Filtres d'attributs
1. Recherchez tous les éléments d'entrée contenant l'attribut id
var input_query=$("input[id]");
2. Recherchez l'élément d'entrée dont la valeur du nom est text11
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
var input_query=$("input[name!='text11']");
4. Recherchez l'élément d'entrée dont la valeur du nom commence par du texte
var input_query=$("input[name^='text']");
5. Recherchez tous les éléments d'entrée dont la valeur du nom se termine par 11
var input_query=$("input[name$='11']");
6. Recherchez tous les éléments d'entrée dont la valeur de nom contient ext
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
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
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
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
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
var input_query=$("input:only-child");
8. Formulaires de sélection de formulaire
1. Rechercher tous les éléments d'entrée
var input_query=$(":input");
2. Recherchez tous les éléments de la zone de texte
var text_query=$(":text");
3. Trouvez tous les éléments de la boîte de mot de passe
var password_query=$(":mot de passe");
4. Trouvez toutes les cases à cocher
var checkbox_query=$(":checkbox");
5. Trouvez tous les éléments du bouton de soumission
var submit_query=$(":submit");
6. Trouvez tous les éléments du domaine d'image
var image_query=$(":image");
7.尋找所有重置按鈕元素
var reset_query=$(":reset");
8.找出所有按鈕元素
var button_query=$(":button");
9.尋找所有檔案域元素
var file_query=$(":file");
9.表單過濾器 Form Filters
1.找出所有可用的input元素
var input_query=$("input:enabled");
2.找出所有無法使用的input元素
var input_query=$("input:disabled");
3.尋找所有選取的單選複選框
var input_query=$("input:checked");
4.找出所有選取的下拉方塊
var option_query=$("option:selected");