Quelle est la différence entre les sélecteurs jquery et les sélecteurs CSS ?
- 青灯夜游original
- 2020-11-13 15:03:495797parcourir
Différences : 1. Les deux ont des fonctions différentes. Une fois que le sélecteur CSS a trouvé l'élément, il définit le style de l'élément et le sélecteur jQuery ajoute un comportement après avoir trouvé l'élément ; capacités multi-navigateurs Compatibilité : 3. L'efficacité des sélecteurs CSS et des sélecteurs jQuery est différente.
Nous savons que les sélecteurs jQuery et les sélecteurs CSS sont écrits de manière très similaire, les deux ont les caractéristiques d'une itération implicite, et il n'est pas nécessaire de parcourir chaque sélection qui répond aux exigences du sélecteur. Ce qui est relativement pratique à utiliser. Habituellement, envelopper le sélecteur CSS avec $("") devient un sélecteur jQuery, tel que
| CSS选择器 | jQuery选择器 | |
| ID选择器 | #myID | $("#myID") |
| 类选择器 | .myClass | $(".myClass") |
| 标签选择器 | p | $("p") |
| 层次选择器 | p > strong | $("p>strong") |
| css称为伪类选择器 jQuery称之为过滤选择器 |
p:nth-child(3) | $("p:nth-child(3)") |
Voir l'exemple ci-dessous. pour chaque paragraphe. Le texte est défini sur 14 pixels et la couleur est rouge. Dans jQuery, le texte est défini sur 16 pixels et la couleur est bleue. Parce que jquery définit le comportement après le chargement du DOM, tous les paragraphes apparaissent en bleu. mots
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>选择器</title>
<style type="text/css">
p { font-size: 14px; color:#F00 }
p:nth-child(3){color:#690}
</style>
<script src="jquery/jquery-1.11.3.js"></script>
<script>
$(document).ready(function() {
$("p").css({"color":"#00f","font-size":"16px"});
$("p:nth-child(3)").css({"font-size":"24px"});
});
</script>
</head>
<body>
<p>第一段</p>
<p>第二段</p>
<p>第三段</p>
<p>第四段</p>
</body>
</html>Alors quelle est la différence entre les deux ?
1. Les deux ont des fonctions différentes. Une fois que le sélecteur CSS a trouvé l'élément, il définit le style de l'élément et le sélecteur jQuery ajoute le comportement après avoir trouvé l'élément.
2. Le sélecteur jQuery a une meilleure compatibilité entre navigateurs.
3. L'efficacité du sélecteur.
Efficacité des sélecteurs CSS
1. Sélecteur d'identifiant (#myid)
2. Sélecteur de classe (.myclassname)
3. , h1, p)
4. Sélecteur adjacent (h1+p)
5. Sous-sélecteur (ul > li)
6, sélecteur descendant (li a )
7, sélecteur de caractère générique (*)
8, sélecteur d'attribut (a[rel="external"])
9 , sélecteur de pseudo-classe (a:hover , li:ntième enfant)
L'efficacité des neuf sélecteurs ci-dessus est classée de haut en bas. L'efficacité du sélecteur d'ID dans la base est la plus élevée, tandis que l'efficacité du sélecteur de pseudo-classe est. le plus élevé. L’efficacité des sélecteurs de classe est la plus faible. Pour une introduction détaillée, vous pouvez également consulter Écriture de sélecteurs CSS efficaces (adresse : http://csswizardry.com/2011/09/writing-efficient-css-selectors/).
Efficacité du sélecteur jQuery
1. Sélecteur d'ID $('#id') et sélecteur de balise d'élément $('form')
2. .className')
3. Sélecteur d'attribut $('[attribute=value]') et sélecteur de pseudo-classe $(':hidden')
Plus de programmation Pour des connaissances connexes, veuillez visiter : Cours de programmation ! !
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!