获取JQuery

引入到HTML

从文大师的藏经阁CDN服务引入:

# 引入开发环境的JQuery
<script src="https://030399.xyz/upload/CDN/jquery-3.7.0.js" defer></script>
# 引入生产环境的JQuery
<script src="https://030399.xyz/upload/CDN/jquery-3.7.0.min.js" defer></script>

百度CDN:

<head>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>

如何使用JQuery

$(选择器).事件(执行代码)

例子: 点击 “点我” 就会弹出一个弹窗

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="a">
    <a href="" id="aa">点我</a>
</div>

<script src="https://030399.xyz/upload/CDN/jquery-3.7.0.js"></script>
<script>

    $('#aa').click(function () {

        alert("A")
    })
</script>
</body>
</html>

选择器的类型

选择器允许您通过特定的方式来选择HTML文档中的元素，然后对这些元素进行操作。这使得操作DOM元素和处理页面内容变得更加方便和简洁。

jQuery选择器的语法基本上类似于CSS选择器，因此如果您熟悉CSS选择器，那么学习jQuery选择器会非常容易。下面是一些常用的jQuery选择器：

元素选择器：
- 选择所有<p>元素：$('p')
- 选择所有<a>元素：$('a')
ID选择器：
- 选择id属性为"myElement"的元素：$('#myElement')
类选择器：
- 选择class属性为"myClass"的元素：$('.myClass')
属性选择器：
- 选择所有<input>元素中type属性为"text"的元素：$('input[type="text"]')
后代选择器：
- 选择所有<span>元素中的<a>元素：$('span a')
子元素选择器：
- 选择所有<div>元素的直接子元素<p>：$('div > p')
过滤选择器：
- 选择第一个<li>元素：$('li:first')
- 选择最后一个<li>元素：$('li:last')
- 选择所有偶数位置的<tr>元素：$('tr:even')
- 选择所有奇数位置的<tr>元素：$('tr:odd')
表单选择器：
- 选择所有输入框：$(':input')
- 选择所有被选中的复选框：$('input[type="checkbox"]:checked')
内容过滤选择器：
- 选择包含文本"Hello"的元素：$(':contains("Hello")')
- 选择包含指定文本开头的元素：$('p:has(span)')

以上仅是一些常用的jQuery选择器，您可以根据需要组合使用它们。选择器是jQuery强大的功能之一，它使得在DOM结构中定位和操作元素变得非常方便，同时减少了大量冗余的JavaScript代码。

操作DOM

当使用jQuery操作DOM（文档对象模型）时，您可以轻松地选择HTML元素、添加、修改或删除它们，以及在页面中移动它们。jQuery提供了一系列简洁易用的方法来处理DOM元素。下面是一些常见的jQuery操作DOM的方法：

选择元素：
- $(selector): 使用选择器来选择一个或多个HTML元素，类似于CSS选择器的用法。例如：$('p') 选取所有 <p> 元素。
获取和设置元素内容：
- text(): 获取或设置元素的纯文本内容。
- html(): 获取或设置元素的HTML内容。
- val(): 获取或设置表单元素的值。
添加元素：
- append(content): 在选定元素的内部末尾添加内容。
- prepend(content): 在选定元素的内部开头添加内容。
- after(content): 在选定元素之后添加内容。
- before(content): 在选定元素之前添加内容。
移除元素：
- remove(): 移除选定元素及其所有子元素。
- empty(): 清空选定元素的所有子元素。
修改元素属性：
- attr(attributeName): 获取或设置元素的属性值。
- removeAttr(attributeName): 移除元素的指定属性。
修改元素样式：
- css(propertyName, value): 获取或设置元素的样式属性值。
添加和移除类：
- addClass(className): 向选定元素添加类。
- removeClass(className): 从选定元素移除类。
- toggleClass(className): 如果存在类，则移除它；如果不存在，则添加它。
遍历DOM树：
- parent(): 获取选定元素的直接父元素。
- children(): 获取选定元素的所有直接子元素。
- find(selector): 查找选定元素内部符合指定选择器的子元素。
事件绑定：
- on(eventName, handler): 绑定事件处理程序到选定元素。
- off(eventName, handler): 解绑事件处理程序。

下面是一个简单的示例，演示如何使用jQuery操作DOM：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>jQuery DOM 操作示例</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<div id="container">
  <p>This is a paragraph.</p>
</div>

<script>
  // 修改元素内容
  $('p').text('This paragraph has been modified.');

  // 添加元素
  $('#container').append('<p>This is a new paragraph added after the existing one.</p>');

  // 修改元素属性和样式
  $('p').attr('id', 'paragraph-id').css('color', 'blue');

  // 添加类
  $('p').addClass('highlight');

  // 绑定点击事件
  $('p').on('click', function() {
    alert('You clicked the paragraph!');
  });
</script>

</body>
</html>

上述示例中，我们使用jQuery来选择一个<p>元素，然后修改其内容、添加一个新的<p>元素、修改属性和样式，并为它们绑定了一个点击事件处理程序。

您可以使用jQuery的hide()方法来隐藏元素。hide()方法将隐藏选定的元素，使其在页面上不可见。下面是如何使用hide()方法隐藏元素的示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Hide Element using jQuery</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<p>This is a paragraph. Click the button below to hide it.</p>

<button id="hideButton">Hide Paragraph</button>

<script>
  $(document).ready(function() {
    // 绑定按钮点击事件
    $('#hideButton').click(function() {
      // 使用 hide() 方法隐藏元素
      $('p').hide();
    });
  });
</script>

</body>
</html>

在上述示例中，我们有一个<p>元素和一个按钮。当按钮被点击时，我们使用hide()方法来隐藏<p>元素。$('p').hide();这行代码会选择所有<p>元素并将它们隐藏。

运行该示例，当您点击按钮时，页面上的段落元素将被隐藏，不再显示在页面上。

如果您想要重新显示被隐藏的元素，可以使用show()方法。例如，您可以添加一个按钮来重新显示之前隐藏的段落元素：

<button id="showButton">Show Paragraph</button>

<script>
  $(document).ready(function() {
    $('#hideButton').click(function() {
      $('p').hide();
    });

    // 绑定按钮点击事件来显示元素
    $('#showButton').click(function() {
      $('p').show();
    });
  });
</script>

通过这样的方式，您可以隐藏和显示页面上的元素，从而实现一些动态效果和用户交互。

AJAX

为了使用Ajax从服务器获取数据并将其渲染到页面，您需要使用jQuery来发起Ajax请求，并在请求成功后更新页面的内容。下面是一个示例代码，展示如何通过Ajax从服务器获取数据并将其显示在页面上：

假设您的服务器端代码是类似这样的：

# 在服务器端 Flask 代码中的路由
from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/getinfo')
def getinfo():
    data = {
        "cpuusage": 2.1,
        "load": 0.0,
        "memusage": 30.5
    }
    return jsonify(data)

现在，让我们在客户端的HTML页面中添加一个用于显示数据的容器，并使用jQuery来发起Ajax请求并更新页面：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Ajax Data Retrieval and Rendering</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<div id="data-container">
  <p>Loading...</p>
</div>

<script>
  $(document).ready(function() {
    // 使用 $.get() 方法发起 Ajax 请求
    $.get('/getinfo', function(data) {
      // 请求成功后更新页面内容
      $('#data-container').html(`
        <p>CPU Usage: ${data.cpuusage}</p>
        <p>Load: ${data.load}</p>
        <p>Memory Usage: ${data.memusage}</p>
      `);
    })
    .fail(function() {
      // 请求失败时的处理
      $('#data-container').html('<p>Failed to retrieve data.</p>');
    });
  });
</script>

</body>
</html>

在上述示例中，我们在HTML页面中创建了一个id为data-container的容器，用于显示从服务器获取的数据。在页面加载完成后（$(document).ready()），我们使用$.get()方法发起Ajax请求到/getinfo路由。当请求成功后，我们使用html()方法将服务器返回的数据更新到data-container容器中。

如果请求失败，我们通过添加一个简单的错误信息来处理失败情况。

运行这个HTML页面，它将从服务器获取数据并将其渲染到页面上，显示CPU使用率、负载和内存使用率。请确保您的服务器正确响应了/getinfo路由，并返回了预期的JSON数据。

要实现实时刷新数据，您可以使用JavaScript的定时器（setInterval）来定期发起Ajax请求，从服务器获取最新数据，并更新页面内容。这样，页面中的数据将会定期刷新，显示最新的信息。

下面是一个示例代码，演示如何使用setInterval来实现数据的实时刷新：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Real-Time Data Refresh with Ajax</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>

<div id="data-container">
  <p>Loading...</p>
</div>

<script>
  // 定义一个函数来获取数据并更新页面内容
  function fetchDataAndUpdate() {
    $.get('/getinfo', function(data) {
      $('#data-container').html(`
        <p>CPU Usage: ${data.cpuusage}</p>
        <p>Load: ${data.load}</p>
        <p>Memory Usage: ${data.memusage}</p>
      `);
    })
    .fail(function() {
      $('#data-container').html('<p>Failed to retrieve data.</p>');
    });
  }

  // 页面加载后立即获取数据并更新内容
  fetchDataAndUpdate();

  // 设置定时器，每隔一段时间获取最新数据并更新内容
  setInterval(fetchDataAndUpdate, 5000); // 这里设置为每隔5秒刷新一次
</script>

</body>
</html>

在上述示例中，我们定义了一个名为fetchDataAndUpdate()的函数，用于获取数据并更新页面内容。在页面加载后，我们立即调用该函数来获取一次数据并更新内容。接着，我们使用setInterval来设置定时器，每隔一段时间（这里设置为5秒）调用一次fetchDataAndUpdate()函数，从服务器获取最新数据并更新页面内容。

这样，页面中的数据将每隔一段时间实时刷新，显示最新的信息。您可以根据需要调整定时器的时间间隔，使刷新频率符合您的需求。

新文大师的藏经阁

jQuery的使用