Explication détaillée du sélecteur : has (selector) dans jQuery-js tutoriel-php.cn

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

黄舟

Libérer： 2017-06-23 11:26:56

original

1808 Les gens l'ont consulté

Aperçu

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

Paramètres

selectorSelectorV1.1.4

Copier après la connexion

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>

Copier après la connexion

jQuery Code :

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

Copier après la connexion

Résultat :

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

Copier après la connexion

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)")

Copier après la connexion

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")

Copier après la connexion

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>

Copier après la connexion

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>

Copier après la connexion

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!