jQuery选择器之基本选择器

听海边涛声

已于 2024-09-05 15:58:29 修改

阅读量581

点赞数 10

文章标签： jquery 前端 javascript

于 2024-09-05 15:53:15 首次发布

本文链接：https://blog.csdn.net/panghuangang/article/details/141930759

版权

说明

标签选择器（也叫元素选择器）：语法为$(‘标签名称’) ，获得所有匹配标签名称的元素。
id选择器：语法为$(‘#id的属性值’) ，获得与指定id属性值匹配的元素。
类选择器：语法为$(‘.class的属性值’) ，获得与指定的class属性值匹配的元素。

示例

使用dom对象获取元素

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="one" style="width: 200px; height: 200px; background-color: skyblue;">这是div中的内容</div>
  <input type="button" id="b1" value="点击此按钮，改变div的背景色">

  <script>
    // 使用dom对象
    const b1Ele = document.getElementById('b1')
    b1Ele.onclick = function () {
      document.getElementById('one').style.backgroundColor = 'pink'
    }
  </script>
</body>

</html>

在这里插入图片描述

点击按钮：
在这里插入图片描述

使用jQuery的id选择器

<!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="js/jquery-3.7.1.js"></script>
</head>

<body>
  <input type="button" id="b1" value="点击此按钮，改变div的背景色"><br><br>
  <div id="one" style="width: 200px; height: 200px; background-color: skyblue;">这是div中的内容</div>

  <script>
    const $b1Ele = $('#b1')
    // 绑定鼠标点击事件
    $b1Ele.click(function () {
      $('#one').css('background-color', 'red')
    })
  </script>
</body>

</html>

在这里插入图片描述

点击按钮：
在这里插入图片描述

使用jQuery的标签选择器

<!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="js/jquery-3.7.1.js"></script>
</head>

<body>
  <input type="button" id="b1" value="点击此按钮，改变div的背景色"><br><br>
  <div style="width: 200px; height: 200px; background-color: skyblue;">这是div中的内容</div>
  <div style="width: 200px; height: 200px; background-color: pink;">这是div中的内容</div>

  <script>
    const $b1Ele = $('#b1')
    // 绑定鼠标点击事件
    $b1Ele.click(function () {
      $('div').css('background-color', 'red')
    })
  </script>
</body>

</html>

在这里插入图片描述

点击上面的按钮：
在这里插入图片描述

使用jQuery的类选择器

<!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="js/jquery-3.7.1.js"></script>
</head>

<body>
  <input type="button" id="b1" value="点击此按钮，改变div的背景色"><br><br>
  <div class="one" style="width: 200px; height: 200px; background-color: skyblue;">这是div中的内容</div>
  <div style="width: 200px; height: 200px; background-color: pink;">这是div中的内容</div>

  <script>
    const $b1Ele = $('#b1')
    // 绑定鼠标点击事件
    $b1Ele.click(function () {
      $('.one').css('background-color', 'red')
    })
  </script>
</body>

</html>

在这里插入图片描述

点击上面的按钮：
在这里插入图片描述

使用jQuery的多选择器

<!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="js/jquery-3.7.1.js"></script>
</head>

<body>
  <input type="button" id="b1" value="点击此按钮，改变特定元素的背景色"><br><br>
  <div id="one" style="width: 200px; height: 200px; background-color: skyblue;">这是div中的内容</div>
  <div style="width: 200px; height: 200px; background-color: pink;">这是div中的内容</div>
  <span style="display: inline-block; width: 200px; height: 200px; background-color: green;">这是span元素中的内容</span>

  <script>
    const $b1Ele = $('#b1')
    // 绑定鼠标点击事件
    $b1Ele.click(function () {
      $('span, #one').css('background-color', 'red')
    })
  </script>
</body>

</html>