jQuery 基本过滤选择器

卡尔特斯
159 阅读1分钟 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="jquery-3.4.1.js"></script>
  <script>
    $(function () {
      // 利用过滤选择器设置偶数位元素的背景颜色
      var jqLisOdd = $('ul li:odd');
      jqLisOdd.css('background', 'pink');

      // 奇数位元素
      var jqLisEven = $('ul li:even');
      jqLisEven.css('background', 'red');

      // 利用过滤器设置指定索引值元素的背景颜色
      // 获取第一个位置
      var jqLiFirst = $("ul li:eq(0)");
      jqLiFirst.css('background', 'yellow');

      // 获取最后一个位置
      var lis = $("li");
      var jqLiLast = $("ul li:eq("+(lis.length - 1)+")");
      jqLiLast.css('background', 'yellow');
    })
  </script>
</head>
<body>
  <ul>
    <li>DZMeBookRead-DZMeBookRead-DZMeBookRead-DZMeBookRead</li>
    <li>DZMeBookRead-DZMeBookRead-DZMeBookRead-DZMeBookRead</li>
    <li>DZMeBookRead-DZMeBookRead-DZMeBookRead-DZMeBookRead</li>
    <li>DZMeBookRead-DZMeBookRead-DZMeBookRead-DZMeBookRead</li>
    <li>DZMeBookRead-DZMeBookRead-DZMeBookRead-DZMeBookRead</li>
    <li>DZMeBookRead-DZMeBookRead-DZMeBookRead-DZMeBookRead</li>
    <li>DZMeBookRead-DZMeBookRead-DZMeBookRead-DZMeBookRead</li>
  </ul>
</body>
</html>
  • demo 效果：

avatar
文章
阅读
粉丝