jQuery 使用简明教程

什么是 jQuery？

jQuery 是一个快速、简洁的 JavaScript 库，它是目前网站开发中最受欢迎和使用最广泛的 JavaScript 库之一，可以协助开发者实现快速、简单的JavaScript编码。

如何引入 jQuery？

在 HTML 中引入 jQuery 库可以通过以下代码实现：

<!--从网上获取 jQuery 的最新版本-->
<script src="https://code.jquery.com/jquery-latest.min.js"></script>

<!--从本地引入-->
<script src="jquery.min.js"></script>

使用 jQuery 选择器

使用 jQuery 的选择器通常需要通过 $ 符号来调用：

// 通过标签名选择元素
$("p")

// 通过 class 名称选择元素
$(".my-class")

// 通过 id 名称选择元素
$("#my-id")

// 通过属性选择元素
$("input[type='text']")

jQuery 的基本操作

显示和隐藏元素

使用 jQuery 可以轻松操作元素的显示和隐藏：

// 隐藏元素
$("#my-element").hide();

// 显示元素
$("#my-element").show();

// 切换元素的显示状态
$("#my-element").toggle();

获取和设置元素的文本内容

获取元素的文本内容可以通过 .text() 方法来实现：

// 获取元素的文本内容
$("#my-element").text();

// 设置元素的文本内容
$("#my-element").text("这是新的文本内容");

获取和设置元素的属性值

获取元素的属性值可以通过 .attr() 方法来实现：

// 获取元素的属性值
$("#my-element").attr("src");

// 设置元素的属性值
$("#my-element").attr("src", "new-src.jpg");

jQuery 的事件处理

使用 jQuery 可以轻松处理各种页面事件，例如点击、移动鼠标、键盘按下等：

// 处理点击事件
$("button").click(function(){
  // 点击按钮后的操作
});

// 处理鼠标移入事件
$("button").mouseenter(function(){
  // 鼠标移入按钮后的操作
});

// 处理键盘按下事件
$(document).keydown(function(event){
  // 键盘按下后的操作
});

jQuery 插件

jQuery 还有很多插件可以扩展其功能。例如，可以使用 jQuery UI 来制作漂亮的 UI 组件：

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<script>
  // 使用 jQuery UI 的日期选择器
  $( function() {
    $( "#datepicker" ).datepicker();
  });
</script>

<!-- 在 HTML 中添加一个日期选择器 -->
<input type="text" id="datepicker">

这里介绍了 jQuery 的基本用法，包括引入 jQuery，使用选择器获取和操作元素，以及处理事件。另外还介绍了如何使用 jQuery UI 插件，制作漂亮的 UI 组件。

示例一：创建一个简单的按钮，点击按钮后隐藏一个元素

<!DOCTYPE html>
<html>
<head>
  <title>Hide Element using jQuery</title>
  <script src="https://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
  <h1>Click the button to hide the paragraph below:</h1>
  <p id="demo">This is a paragraph that can be hidden.</p>
  <button id="my-button">Hide Paragraph</button>
  <script>
    $( "#my-button" ).click(function() {
      $( "#demo" ).hide();
    });
  </script>
</body>
</html>

示例二：获取 checkbox 元素的选中状态

<!DOCTYPE html>
<html>
<head>
  <title>Check Checkbox using jQuery</title>
  <script src="https://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
  <input type="checkbox" id="my-checkbox"> Check me!
  <button id="my-button">Check State</button>
  <script>
    $( "#my-button" ).click(function() {
      var checked = $( "#my-checkbox" ).prop( "checked" );
      alert( "The checkbox is checked: " + checked );
    });
  </script>
</body>
</html>

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jquery 使用简明教程 - Python技术站

jquery 使用简明教程