📌  相关文章
📜  jQuery-基础(1)

📅  最后修改于: 2023-12-03 15:16:50.468000             🧑  作者: Mango

jQuery-基础

jQuery是一款Javascript库，最初由John Resig在2006年发布。它旨在简化Javascript在Web开发中的操作。

获取jQuery

你可以在官网上下载最新的jQuery版本，或者直接从CDN引入。

<script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
简单示例

以下是一个使用jQuery的简单示例。

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
    <script>
      $(document).ready(function() {
        $("button").click(function() {
          $("p").toggle();
        });
      });
    </script>
  </head>
  <body>
    <button>点击</button>
    <p>Hello, World!</p>
  </body>
</html>

上面的示例会在页面载入完成后，注册一个在按钮点击事件被触发时，隐藏或显示段落的方法。

常用方法

以下是jQuery中一些常用的方法。

选择器

jQuery选择器用于选取HTML元素，并可以对选取的元素进行操作。常用的选择器包括：

  • $(#id) 选择ID为id的元素。
  • $(.class) 选择类名为class的元素。
  • $(element) 选择名为element的元素。
  • $(selector1, selector2, selector3) 同时选取selector1、selector2和selector3的元素。
事件

jQuery的事件系统使得在HTML元素绑定事件处理程序变得相当简单。以下是一些常见的事件：

  • click() 当单击（鼠标左键）元素时触发。
  • dblclick() 当双击（鼠标左键）元素时触发。
  • mouseenter() 当鼠标进入元素时触发。
  • mouseleave() 当鼠标离开元素时触发。
方法

jQuery中有大量的方法帮助你操作DOM。以下是一些常见的方法：

  • addClass(class) 给元素添加类名。
  • removeClass(class) 移除元素的类名。
  • toggleClass(class) 切换元素的类名。
  • html(content) 设置或获取元素的HTML内容。
  • text(content) 设置或获取元素的文本内容。
  • attr(attribute, value) 获取或设置元素的属性。
  • css(property, value) 获取或设置元素的CSS属性。
结论

jQuery是一种非常流行的Javascript库，可以使Javascript在Web开发中的使用更加容易。它提供了丰富的选择器、事件和方法，用于操作DOM元素。让我们通过使用jQuery来创建更高效、更直观的网页体验。