Résumé de l'utilisation du sélecteur querySelector dans jQuery

Cet article présente principalement les informations pertinentes sur le guide d'utilisation du sélecteur jQuery querySelector. Les amis qui en ont besoin peuvent se référer à

Introduction

HTML5 New to Web API. Deux méthodes, document.querySelector et document.querySelectorAll, sont introduites pour sélectionner plus facilement des éléments du DOM. Leurs fonctions sont similaires aux sélecteurs de jQuery. Cela rend l’écriture de code JavaScript natif beaucoup plus facile.
Utilisation

Les deux méthodes utilisent une syntaxe similaire. Elles reçoivent toutes deux un paramètre string, qui doit être une syntaxe de sélection CSS légale.

Le code est le suivant :

element = document.querySelector('selectors');
elementList = document.querySelectorAll('selectors');

Les sélecteurs de paramètres peuvent contenir plusieurs sélecteurs CSS, séparés par des virgules.

Le code est le suivant :

element = document.querySelector('selector1,selector2,...');
elementList = document.querySelectorAll('selector1,selector2,...');

L'utilisation de ces deux méthodes ne permet pas de trouver des éléments avec un statut pseudo-class, tels que querySelector(':hover ') ne produira pas les résultats escomptés.

querySelector

Le code est le suivant :

element = document.querySelector('p#container');//返回id为container的首个p
element = document.querySelector('.foo,.bar');//返回带有foo或者bar样式类的首个元素

querySelectorAll

Cette méthode renvoie tous ceux qui répondent aux éléments conditions, le résultat est une collection nodeList. Les règles de recherche sont les mêmes que celles décrites précédemment.

elements = document.querySelectorAll('p.foo');//Retourne tous les p avec le style de classe foo
Il convient de noter que les éléments de la collection nodeList renvoyée ne sont pas en temps réel.

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!