Maison > Article > interface Web > Sélecteur jQuery : cas d'utilisation détaillé du parent

Sélecteur jQuery : cas d'utilisation détaillé du parent

黄舟original: 2017-06-23 11:31:481252parcourir

: Définition et utilisation du sélecteur parent :

Ce sélecteur correspond aux éléments qui contiennent des éléments enfants ou du texte.
Remarque : les espaces sont également considérés comme des éléments contenus.

Structure grammaticale :

$(":parent")

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émentAttendez. Par exemple :

$("div:parent").animate({width:"300px"})

Le code ci-dessus peut définir la largeur d'un div contenant du texte ou des éléments à 300 px.
S'il n'est pas utilisé avec d'autres sélecteurs, l'état par défaut doit être utilisé avec le sélecteur *, par exemple, $(":parent") est équivalent à $("*:parent").

Exemple de code :

Exemple 1 :

 
 
 
 
 
蚂蚁部落 
 
 
 
 
 
我是文本

Le code ci-dessus peut définir la largeur d'un div contenant du texte ou des éléments dans une animation personnalisée 300. .

Exemple 2 :

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>蚂蚁部落</title> 
<style type="text/css"> 
div{ 
list-style-type:none; 
width:150px; 
height:30px; 
border:1px solid red; 
} 
span{border:1px solid green;} 
</style> 
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("button").click(function(){ 
$("*:parent").animate({width:"300px"}) 
}) 
}) 
</script> 
</head> 
<body> 
<div>我是文本</div> 
<div></div> 
<span>大家好</span> 
<button>点击查看效果</button> 
</body> 
</html>

Étant donné que le code ci-dessus ne spécifie pas de sélecteur à utiliser avec le sélecteur :parent, il est utilisé avec le sélecteur * par défaut, le code peut donc La largeur de l'élément contenant le texte et les éléments est définie sur 300 px dans une animation personnalisée.

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 du sélecteur : has (selector) dans jQueryArticle suivant：Explication détaillée du sélecteur : has (selector) dans jQuery

Articles Liés

Voir plus