JQ选择器（常用的）

最新推荐文章于 2020-11-20 17:00:02 发布

&XYZ&

最新推荐文章于 2020-11-20 17:00:02 发布

阅读量275

点赞数

CC 4.0 BY-SA版权

分类专栏： jquery

本文链接：https://blog.youkuaiyun.com/JEFF_luyiduan/article/details/103944056

jquery 专栏收录该内容

19 篇文章

订阅专栏

本文通过一个HTML示例，展示了如何使用jQuery选择器来定位并修改页面元素的样式，包括按属性选择、按位置选择等技巧。

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

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>温故而知新</title>
  <style></style>
</head>

<body>
  <div name="xyz">xyz</div>

  <div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
    </ul>
  </div>

  <div>
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
      <li>6</li>
      <li>7</li>
    </ul>
  </div>

</body>

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
  // 选取所有 name 属性值等于 "xyz" 的 <div> 元素
  $("div[name='xyz']").css({ 'color': 'red', 'font-size': '70px' })

  //选取第一个 <div> 元素
  $("div:first").css({ 'background-color': '#0000ff' })
  $("div:eq(0)").css({ 'font-weight': '100' })

  //选取最后一个 <div> 元素
  $("div:last").css({ 'background-color': '#ff0000' })

  //所有奇数 <div> 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。
  $("div:odd").css({ 'padding-top': '70px' })

  //	所有偶数 <div> 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。
  $("div:even").css({ 'font-weight': '600' })
</script>

</html>

jQuery选择器详细讲解，链接地址：https://www.runoob.com/jquery/jquery-ref-selectors.html