Maison > Article > interface Web > Résumé des exemples d'utilisation des sélecteurs jquery : first-child et :last-child

Résumé des exemples d'utilisation des sélecteurs jquery : first-child et :last-child

黄舟original: 2017-06-23 14:47:022670parcourir

Le sélecteur

:first-child est utilisé pour sélectionner la première balise enfant de la balise parent. Il s'agit d'une forme abrégée de :nth-child(1).

Par exemple :

$('li:first-child')—utilisé pour sélectionner la première balise enfant li de toutes les balises parents li.

$('tr:first-child')—similaire. Le sélecteur

:last-child est utilisé pour sélectionner le dernier enfant correspondant de leur balise parent.

Par exemple :

$('li:last-child')—sélectionne la dernière balise enfant li parmi toutes les balises parents li.

$('tr:last-child')—similaire.

<html>
<head>
<title>jquery first child and last child example</title>
<script type="text/javascript" src="../jquery-1.11.1.min.js"></script>
</head>
<body>
<h1> jquery first child and last child example</h1>
<ul>
	<li>li #1</li>
	<li>li #2</li>
	<li>li #3</li>
	<li>li #4</li>
	<li>li #5</li>
</ul>
		
		<button>li:first-child</button>
		<button>li:last-child</button>
		<script type="text/javascript">
			
			$("button").click(function(){
				var str=$(this).text();
			 
				$("li").css("background","white");
				$(str).css("background","coral");
				
				
				});
			
			
			</script>

</body>
</html>

Effet :

Cliquez sur le bouton 1 :

Cliquez sur le bouton 2 :

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：sélecteur jQuery : explication détaillée de l'utilisation du dernier enfantArticle suivant：sélecteur jQuery : explication détaillée de l'utilisation du dernier enfant

Articles Liés

Voir plus