: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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
