Maison > interface Web > js tutoriel > Explication détaillée de l'utilisation spécifique du sélecteur jQuery [attribut ^ = valeur]

Explication détaillée de l'utilisation spécifique du sélecteur jQuery [attribut ^ = valeur]

黄舟
Libérer: 2017-06-23 13:31:21
original
1090 Les gens l'ont consulté

Valeur de retour :Tableau[attribute^=value]

Aperçu

Faire correspondre le attribut donné est un élément commençant par une valeur

paramètre

attributeStringV1.0
Copier après la connexion

nom de l'attribut

value StringV1.0
Copier après la connexion

valeur de l'attribut. Les devis sont facultatifs dans la plupart des cas. Mais il est utilisé pour éviter les conflits lorsque la valeur de l'attribut contient "]".

Exemple

Description :

Trouver tous les éléments d'entrée dont le nom commence par 'news'

Code HTML :

<input name="newsletter" /> <input name="milkman" /> <input name="newsboy" />
Copier après la connexion

jQuery Code :

$("input[name^=&#39;news&#39;]")
Copier après la connexion

Résultat :

[ <input name="newsletter" />, <input name="newsboy" /> ]
Copier après la connexion

Le sélecteur peut sélectionner des valeurs d'attribut qui commencent par certains éléments de valeurs.

Structure grammaticale :

$("[attribute^=value]")
Copier après la connexion

Liste des paramètres :

Explication détaillée de lutilisation spécifique du sélecteur jQuery [attribut ^ = valeur]

Exemple de code :

Exemple 1 :

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title></title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("button").click(function(){ 
    $("li[id^=s]").css("color","blue"); 
  })
})
</script>
</head>
<body>
<ul>
  <li id="first">html专区</li>
  <li id="second" title="jquery">Jquery专区</li>
</ul>
<button>点击查看效果</button>
</body>
</html>
Copier après la connexion

Le code ci-dessus peut définir la couleur du texte de l'élément li dont la valeur de l'attribut id commence par s dans l'élément li sur bleu.

Exemple 2 :

<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.jb51.net/" />
<title></title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){ 
  $("button").click(function(){ 
    $("li[id^=[s]").css("color","blue"); 
  }); 
}); 
</script>
</head>
<body>
<ul>
  <li id="first">html专区</li>
  <li id="[second" title="jquery">Jquery专区</li>
</ul>

<button>点击查看效果</button>
</body>
</html>
Copier après la connexion

À partir du code ci-dessus, nous pouvons voir comment lorsque le code contient "[" ou "]", il doit avoir des guillemets, sinon cela provoquera un erreur de correspondance.

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal