search

Home >Web Front-end >JS Tutorial >Summary of usage examples of jquery selectors: first-child and :last-child

Summary of usage examples of jquery selectors: first-child and :last-child

黄舟
黄舟Original
2017-06-23 14:47:022728browse

:first-child The selector is used to select the first child tag of the parent tag. This is a short form of :nth-child(1).

For example:

$(‘li:first-child’)—used to select the first li child tag of all li parent tags.

$(‘tr:first-child’)—similar.

:last-child selector is used to select the last matching child match in their parent tag.

For example:

$(‘li:last-child’)—Select the last li child tag among all li parent tags.

$(‘tr:last-child’)—similar. 

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


Effect:


Click the button1:


Click button 2:


The above is the detailed content of Summary of usage examples of jquery selectors: first-child and :last-child. For more information, please follow other related articles on the PHP Chinese website!

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：jQuery selector: detailed explanation of the use of last-childNext article：jQuery selector: detailed explanation of the use of last-child

Related articles

See more