jquery选择器:first-child和:last-child的用法实例总结
程序员文章站
2022-04-18 14:25:41
...
:first-child 选择器被用来选择父标签的第一个子标签,此是:nth-child(1)的简便形式。
例如:
$(‘li:first-child’)—用来选择所有li的父标签的第一个li子标签。
$(‘tr:first-child’)—类似。
:last-child 选择器被用来选择它们父标签的中的最后一个匹配的子匹配。
例如:
$(‘li:last-child’)—选择所有li父标签中的最后一个li子标签。
$(‘tr:last-child’)—类似。
<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>
效果:
点击按钮1:
点击按钮2:
以上就是jquery选择器:first-child和:last-child的用法实例总结的详细内容,更多请关注其它相关文章!