CSSQuery (): interrogez le DOM avec les sélecteurs CSS

(From Planet Web 2.0) CSSQuery () est une nouvelle bibliothèque JavaScript développée par Dean Edwards (un développeur bien connu de Scripts IE7). Dom est une API puissante et efficace pour lire, écrire et modifier les documents HTML et XML. Lorsqu'il est utilisé conjointement avec JavaScript, il est la base de l'effet DHTML. Cependant, il peut parfois nécessiter beaucoup de code. Considérez ce petit extrait, qui vient du script de tri de table que nous utilisons sur SitePoint:

function sortables_init() {
    // 查找所有具有 sortable 类的表格并使其可排序
    if (!document.getElementsByTagName) return;
    tbls = document.getElementsByTagName("table");
    for (ti=0; ti < tbls.length; ti++) {
        thistbl = tbls[ti];
        ts_makesortable(thistbl);
    }
}

Ce code est bon, mais il appelle en fait la fonction TS_Makesortable à chaque élément de table qui applique la classe triable. Voici le code utilisant CSSQuery ():

function sortables_init() {
    // 查找所有具有 sortable 类的表格并使其可排序
    tbls = cssQuery("table.sortable");
    for (ti=0; ti < tbls.length; ti++) {
        ts_makesortable(tbls[ti]);
    }
}

Dans les scripts DHTML typiques, les économies de code résultantes sont incroyables. Bien sûr, vous sacrifierez des performances, car votre sélecteur CSS doit être analysé et interprété en JavaScript pur, mais jusqu'à présent, peu d'applications JavaScript ont submergé le navigateur.

CSSQuery () prend en charge tous les sélecteurs CSS1 et CSS2, ainsi que de nombreux sélecteurs CSS3. C'est encore mieux que la plupart des navigateurs Web actuels - et il est entièrement écrit en JavaScript pur!

Mise à jour:

Simon Willison a créé une bibliothèque similaire en mars 2003 GetElementsBySelector (). Il ne prend pas en charge autant de types de sélecteurs CSS, mais il peut contenir la plupart des fonctionnalités dont vous avez besoin dans votre utilisation quotidienne. Par conséquent, il peut être plus léger.

FAQ sur la requête CSS

Qu'est-ce que la requête CSS et comment cela fonctionne-t-il?

La requête CSS, également connue sous le nom de sélecteur CSS, est un outil puissant du développement Web pour sélectionner et manipuler des éléments HTML basés sur l'ID, la classe, le type, l'attribut, etc. Il fonctionne en appliquant un style spécifique aux éléments qui correspondent au sélecteur spécifié. Cela permet aux développeurs de créer facilement des pages Web dynamiques et interactives. La requête CSS est largement utilisée en JavaScript pour les opérations DOM et pour trouver des éléments dans des outils de test tels que le sélénium.

Comment utiliser la requête CSS pour sélectionner des éléments en fonction des attributs?

La requête CSS vous permet de sélectionner en fonction des attributs de l'élément à l'aide de crochets []. Par exemple, pour sélectionner tous les éléments avec un attribut spécifique, vous pouvez utiliser la syntaxe: élément [attribut]. Pour sélectionner un élément avec une valeur d'attribut spécifique, vous pouvez utiliser la syntaxe: élément [attribut = "value"]. Cette fonctionnalité est particulièrement utile lorsque vous souhaitez styliser des éléments avec des attributs spécifiques de différentes manières.

Puis-je sélectionner plusieurs éléments en utilisant la requête CSS à la fois?

Oui, la requête CSS vous permet de sélectionner plusieurs éléments à la fois en utilisant une virgule. Par exemple, la syntaxe: H1, H2, H3 {Color: Red} sélectionnera tous les éléments H1, H2 et H3 et leur appliquera une couleur rouge. Cette fonctionnalité est utile lorsque vous souhaitez appliquer le même style à plusieurs éléments.

Comment utiliser la requête CSS pour sélectionner les éléments enfants?

La requête CSS vous permet de sélectionner des éléments enfants à l'aide de l'opérateur & gt; Par exemple, la syntaxe: div & gt; P sélectionnera tous les éléments P en tant qu'éléments enfants directs de l'élément div. Ceci est utile lorsque vous souhaitez distinguer le style d'un élément enfant du style d'un élément parent.

Puis-je utiliser la requête CSS pour sélectionner en fonction de l'état d'un élément?

Oui, la requête CSS vous permet d'utiliser des pseudo-classes pour sélectionner en fonction de l'état d'un élément. Par exemple, la syntaxe: A: Hover {Color: Red} les sélectionnera lors de la survol de tous les éléments et leur appliquera une couleur rouge. Cette fonctionnalité est très utile pour créer des pages Web interactives.

Comment utiliser la requête CSS pour sélectionner des éléments de frère?

La requête CSS vous permet de sélectionner des éléments de frère à l'aide de l'opérateur. Par exemple, la syntaxe: Div P sélectionnera l'élément P immédiatement suivant l'élément div. Cette fonctionnalité est utile lorsque vous souhaitez styliser des éléments en fonction de l'endroit où ils se trouvent dans un document HTML.

Puis-je utiliser la requête CSS pour sélectionner en fonction de l'endroit où se trouve l'élément dans le document HTML?

Oui, la requête CSS vous permet d'utiliser des pseudo-classes telles que: First-Child ,: Last-Child, et: Nth-Child (n) pour sélectionner en fonction de l'endroit où l'élément se trouve dans le document HTML. Par exemple, Syntaxe: P: Premier-enfant {Color: Red} sélectionnera le premier élément P et y appliquera une couleur rouge. Cette fonctionnalité est utile pour créer des pages Web dynamiques et interactives.

Comment utiliser la requête CSS pour sélectionner en fonction du type d'élément?

La requête CSS vous permet d'utiliser les types d'éléments comme sélecteurs à sélectionner en fonction du type d'élément. Par exemple, la syntaxe: p {couleur: rouge} sélectionnera tous les éléments P et leur appliquera une couleur rouge. Cette fonctionnalité est utile lorsque vous souhaitez styliser tous les éléments d'un type spécifique de la même manière.

Puis-je utiliser la requête CSS pour sélectionner en fonction de la classe ou de l'ID de l'élément?

Oui, la requête CSS vous permet d'utiliser l'opérateur. Par exemple, Syntaxe: .Class {Color: Red} sélectionnera tous les éléments avec la classe "classe" et y appliquera une couleur rouge. De même, Syntaxe: #id {Color: Red} sélectionnera l'élément avec ID "ID" et y appliquera une couleur rouge. Cette fonctionnalité est utile lorsque vous souhaitez distinguer le style d'un élément spécifique du style d'autres éléments.

Comment utiliser la requête CSS pour sélectionner des éléments qui ne correspondent pas à un sélecteur spécifique?

La requête CSS vous permet d'utiliser la pseudo-classe: non () pour sélectionner des éléments qui ne correspondent pas à un sélecteur spécifique. Par exemple, la syntaxe: P: Not (.class) {Color: Red} sélectionnera tous les éléments P qui n'ont pas de classe "classe" et y appliquent une couleur rouge. Cette fonctionnalité est utile lorsque vous souhaitez styliser tous les éléments à l'exception des éléments qui correspondent à un sélecteur spécifique.

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!