JQ-列表选择器

最新推荐文章于 2021-03-27 02:56:50 发布

原创最新推荐文章于 2021-03-27 02:56:50 发布 · 462 阅读

0 ·

CC 4.0 BY-SA版权

本文通过具体的HTML代码示例介绍了如何使用jQuery选择器来选取列表中的特定元素，并为这些元素应用样式。示例包括选择第一个、最后一个、指定位置的元素等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQ-列表选择器</title>
<script src="jquery.min.js" type="text/javascript"></script>

</head>

<body>
    <ul id="test1">
     <li>我是第一个</li>
     <li>我是第二个</li>
     <li>我是第三个</li>
     <li>我是第四个</li>
    </ul>
    <ul id="test2">
     <li>我是第一个</li>
     <li>我是第二个</li>
     <li id="Third">我是第三个</li>
     <li>我是第四个</li>
    </ul>
    <ul id="test3">
     <li>我是第一个</li>
     <li>我是第二个</li>
     <li>我是第三个</li>
     <li>我是第四个</li>
     <li>我是第五个</li>
     <li>我是第六个</li>
     <li>我是第七个</li>
     <li>我是第八个</li>
    </ul>
<script>
    //选择第一个子元素
    $("#test1 li:first-child").css("background","red");
    //选择最后一个子元素
    $("#test1 li:last-child").css("background","red");
    //选择第三个子元素
    $("#test1 li:nth-child(3)").css("background","red");
    //选择倒数第三个子元素
    $("#test3 li:nth-last-child(3)").css("background","red");
    //选择正数第二个子元素
    $("#test3 li:nth-of-type(2)").css("background","red");
</script>
</body>
</html>