Maison > Article > interface Web > jQuery : définition du sélecteur parent et utilisation_jquery

jQuery : définition du sélecteur parent et utilisation_jquery

WBOYoriginal: 2016-05-16 16:42:421111parcourir

: 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 les sélecteurs de classe, les sélecteurs d'éléments, etc. 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 :

<!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; 
} 
</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:parent").animate({width:"300px"}) 
}) 
}) 
</script> 
</head> 
<body> 
<div>我是文本</div> 
<div></div> 
<button>点击查看效果</button> 
</body> 
</html>

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

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é par défaut avec le sélecteur *. Par conséquent, le code peut définir la largeur des éléments contenant du texte et des éléments dans une animation personnalisée. 300px.

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：Compréhension précise des différentes hauteurs des fenêtres, des documents et des pages Web jQuery_jqueryArticle suivant：Compréhension précise des différentes hauteurs des fenêtres, des documents et des pages Web jQuery_jquery

Articles Liés

Voir plus