Maison > Article > interface Web > Explication détaillée du sélecteur : has (selector) dans jQuery

Explication détaillée du sélecteur : has (selector) dans jQuery

黄舟original: 2017-06-23 11:26:561765parcourir

Aperçu

Correspond aux éléments qui contiennent l'élément correspondant par le sélecteur

Paramètres

selectorSelectorV1.1.4

Un sélecteur pour le filtrage

Exemple

Description :

Ajouter une classe de texte à tous les éléments div contenant des éléments p

Code HTML :

<div><p>Hello</p></div> <div>Hello again!</div>

jQuery Code :

$("div:has(p)").addClass("test");

Résultat :

[ <div class="test"><p>Hello</p></div> ]

La définition de ce sélecteur peut être un peu déroutante En termes simples, si un élément contient If l'élément. correspondant par le sélecteur (sélecteur), alors cet élément sera mis en correspondance. Par exemple :

$("div:has(p)")

Le sélecteur ci-dessus correspondra aux éléments div contenant des éléments p.
Ce sélecteur est généralement utilisé en conjonction avec d'autres sélecteurs, tels que le sélecteur de classe et le sélecteur d'élément, etc. Par exemple :

$("div:has(p)").css("color","blue")

Le code ci-dessus définit la couleur de la police dans l'élément div contenant l'élément p sur bleu.
S'il n'est pas utilisé avec d'autres sélecteurs, l'état par défaut est utilisé avec le sélecteur *, par exemple, $(":has") est équivalent à $("*:has").

Liste des paramètres :

Paramètre .

Exemple de code :

Exemple 1 :

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title></title>
<style type="text/css">
div 
{
  border:1px solid green;
  height:50px;
}
span{border:1px solid blue;}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("button").click(function(){ 
    $("div:has(span)").css("border","1px solid red") 
  }) 
}) 
</script>
</head>
<body>
<div>我不含span</div>
<div> <span>我是span</span></div>
<button>点击查看效果</button>
</body>
</html>

Le code ci-dessus peut définir la couleur de la bordure du div contenant l'élément span sur rouge.

Exemple 2 :

Puisque le code ci-dessus ne spécifie pas de sélecteur à utiliser avec le sélecteur :has , il est donc utilisé par défaut avec le sélecteur *, de sorte que le code ci-dessus peut définir la couleur de bordure de tous les éléments contenant tous les éléments span sur rouge.

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title></title>
<style type="text/css">
div 
{
  border:1px solid green;
  height:50px;
}
span{border:1px solid blue;}
</style>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("button").click(function(){ 
    $("*:has(span)").css("border","1px solid red") 
  }) 
}) 
</script>
</head>
<body>
<div>我不含span</div>
<div><span>我是span</span></div>
<p><span>我是span</span></p>
<button>点击查看效果</button>
</body>
</html>

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!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Explication détaillée des exemples de jQuery : sélecteur videArticle suivant：Explication détaillée des exemples de jQuery : sélecteur vide

Articles Liés

Voir plus