jQuery 选择器

选择器是 jQuery 中最重要的特性之一，它允许我们使用类似于 CSS 选择器的语法来查找 DOM 元素。以下是一些常见的选择器：

基本选择器

$(element)：根据元素名称选取元素
$(#id)：根据 ID 名称选取元素
$(.class)：根据类名称选取元素

层次选择器

$(parent > child)：选择某个元素的子元素
$(ancestor descendant)：选择某个元素下的子孙元素
$(prev + next)：选择相邻的两个同级元素中的后一个元素
$(prev ~ siblings)：选择相邻的两个同级元素之后的所有同级元素

过滤选择器

$(selector:first)：选择第一个匹配的元素
$(selector:last)：选择最后一个匹配的元素
$(selector:not(selector))：选择不满足某个条件的元素
$(selector:even)：选择索引为偶数的元素
$(selector:odd)：选择索引为奇数的元素

示例 1：

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
  <div id="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
  </div>

  <script>
    // 选中所有 class 为 box 的元素，然后设定它们的文本内容为 Hello World
    $('.box').text('Hello World');
  </script>
</body>
</html>

示例 2：

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <style>
    .hidden {
      display: none;
    }
  </style>
</head>
<body>
  <div class="container">
    <button>显示内容</button>
    <p class="hidden">这是要隐藏的内容</p>
  </div>

  <script>
    // 当点击按钮时，将 class 为 hidden 的元素显示出来
    $('button').click(function() {
      $('.hidden').show();
    });
  </script>
</body>
</html>

DOM 操作

jQuery 也提供了许多便捷的 DOM 操作方法，以下是一些示例：

添加元素和内容

$('<p>...</p>')：创建一个新的元素
$(selector).append(content)：在元素内部添加内容
$(selector).prepend(content)：在元素内部前置添加内容
$(selector).after(content)：在元素后面添加内容
$(selector).before(content)：在元素前面添加内容

示例 1：

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
  <div id="container"></div>

  <script>
    // 在 id 为 container 的元素内部添加一个 h1 元素，并将其内容设定为 Hello World
    $('#container').append($('<h1>').text('Hello World'));
  </script>
</body>
</html>

示例 2：

<html>
<head>
  <style>
    div {
      border: 1px solid black;
      margin: 10px;
      padding: 10px;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
  <div>
    <p>段落1</p>
  </div>
  <div>
    <p>段落2</p>
  </div>

  <script>
    // 在 class 为 container 的元素内部添加一个 p 元素，并将其内容设定为 Hello World
    $('.container').prepend($('<p>').text('Hello World'));
  </script>
</body>
</html>

删除元素

$(selector).remove()：删除元素

示例：

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
  <div id="container">
    <div class="box">Box 1</div>
    <div class="box">Box 2</div>
    <div class="box">Box 3</div>
    <button>移除 Box 2</button>
  </div>

  <script>
    // 当点击按钮时，将 class 为 box 的第2个元素删除
    $('button').click(function() {
      $('.box:eq(1)').remove();
    });
  </script>
</body>
</html>

事件

事件是 jQuery 的另一个重要特性，通过触发事件可以响应用户的操作并进行相应的处理。以下是一些常见的事件：

点击事件

$(selector).click(function)：点击元素时触发的事件
$(selector).dblclick(function)：双击元素时触发的事件

示例：

<html>
<head>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
  <button>Hello World</button>

  <script>
    // 当点击按钮时，弹出提示框
    $('button').click(function() {
      alert($(this).text());
    });
  </script>
</body>
</html>

鼠标事件

$(selector).hover(function1, function2)：鼠标经过元素时触发的事件
$(selector).mousedown(function)：鼠标按下时触发的事件
$(selector).mouseup(function)：鼠标松开时触发的事件

示例：

<html>
<head>
  <style>
    div {
      border: 1px solid black;
      margin: 10px;
      padding: 10px;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
  <div></div>

  <script>
    // 当鼠标经过 div 元素时改变其背景颜色
    $('div').hover(
      function() { $(this).css('background-color', 'yellow'); },
      function() { $(this).css('background-color', 'white'); }
    );
  </script>
</body>
</html>

动画

动画是 jQuery 中的另一个强大的特性，它可以让我们实现许多炫酷的动态效果。以下是一些常见的动画方法：

显示和隐藏

$(selector).show()：显示元素
$(selector).hide()：隐藏元素
$(selector).toggle()：切换可见性

示例：

<html>
<head>
  <style>
    div {
      border: 1px solid black;
      margin: 10px;
      padding: 10px;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
  <div>点击我可以显示或隐藏</div>

  <script>
    // 当点击 div 元素时，切换其可见性
    $('div').click(function() {
      $(this).toggle();
    });
  </script>
</body>
</html>

淡入淡出

$(selector).fadeIn()：淡入元素
$(selector).fadeOut()：淡出元素
$(selector).fadeToggle()：切换淡入/淡出

示例：

<html>
<head>
  <style>
    div {
      border: 1px solid black;
      margin: 10px;
      padding: 10px;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
  <div>点击我可以淡入或淡出</div>

  <script>
    // 当点击 div 元素时，切换其淡入/淡出
    $('div').click(function() {
      $(this).fadeToggle();
    });
  </script>
</body>
</html>

滑动

$(selector).slideDown()：向下滑动元素
$(selector).slideUp()：向上滑动元素
$(selector).slideToggle()：切换滑动方向

示例：

<html>
<head>
  <style>
    div {
      border: 1px solid black;
      margin: 10px;
      padding: 10px;
    }
  </style>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>
<body>
  <div>点击我可以向上或向下滑动</div>

  <script>
    // 当点击 div 元素时，切换其向上/向下滑动
    $('div').click(function() {
      $(this).slideToggle();
    });
  </script>
</body>
</html>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery 选择器、DOM操作、事件、动画 - Python技术站

jQuery 选择器、DOM操作、事件、动画