获取JQuery

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选择器：

  1. 元素选择器：

    • 选择所有<p>元素：$('p')
    • 选择所有<a>元素：$('a')

  2. ID选择器：

    • 选择id属性为"myElement"的元素：$('#myElement')

  3. 类选择器：

    • 选择class属性为"myClass"的元素：$('.myClass')

  4. 属性选择器：

    • 选择所有<input>元素中type属性为"text"的元素：$('input[type="text"]')

  5. 后代选择器：

    • 选择所有<span>元素中的<a>元素：$('span a')

  6. 子元素选择器：

    • 选择所有<div>元素的直接子元素<p>：$('div > p')

  7. 过滤选择器：

    • 选择第一个<li>元素：$('li:first')
    • 选择最后一个<li>元素：$('li:last')
    • 选择所有偶数位置的<tr>元素：$('tr:even')
    • 选择所有奇数位置的<tr>元素：$('tr:odd')

  8. 表单选择器：

    • 选择所有输入框：$(':input')
    • 选择所有被选中的复选框：$('input[type="checkbox"]:checked')

  9. 内容过滤选择器：

    • 选择包含文本"Hello"的元素：$(':contains("Hello")')
    • 选择包含指定文本开头的元素：$('p:has(span)')

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

操作DOM

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

  1. 选择元素：

    • $(selector): 使用选择器来选择一个或多个HTML元素，类似于CSS选择器的用法。例如：$('p') 选取所有 <p> 元素。

  2. 获取和设置元素内容：

    • text(): 获取或设置元素的纯文本内容。
    • html(): 获取或设置元素的HTML内容。
    • val(): 获取或设置表单元素的值。

  3. 添加元素：

    • append(content): 在选定元素的内部末尾添加内容。
    • prepend(content): 在选定元素的内部开头添加内容。
    • after(content): 在选定元素之后添加内容。
    • before(content): 在选定元素之前添加内容。

  4. 移除元素：

    • remove(): 移除选定元素及其所有子元素。
    • empty(): 清空选定元素的所有子元素。

  5. 修改元素属性：

    • attr(attributeName): 获取或设置元素的属性值。
    • removeAttr(attributeName): 移除元素的指定属性。

  6. 修改元素样式：

    • css(propertyName, value): 获取或设置元素的样式属性值。

  7. 添加和移除类：

    • addClass(className): 向选定元素添加类。
    • removeClass(className): 从选定元素移除类。
    • toggleClass(className): 如果存在类，则移除它；如果不存在，则添加它。

  8. 遍历DOM树：

    • parent(): 获取选定元素的直接父元素。
    • children(): 获取选定元素的所有直接子元素。
    • find(selector): 查找选定元素内部符合指定选择器的子元素。

  9. 事件绑定：

    • 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()函数，从服务器获取最新数据并更新页面内容。

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

演示Demo

常用操作

<script>
    // 弹窗
    alert(response);
    // 刷新
    location.reload()
</script>

从接口获得数据并添加到DOM

<div id="element" style="background-color: rgb{{ a|color }};">
    <div class="load" id="tiex2">None</div>
    <div class="mem" id="tiex2">None</div>
    <div class="cpu" id="tiex2">None</div>
    <div id="tiex">系统状态</div>
</div>

<script>
    // 定义一个函数来获取数据并更新页面内容
    function fetchDataAndUpdate() {
        $.get('/api/get_sys_stats', function (data) {
            $('.load').text('load:' + data.load)
            $('.mem').text('mem:' + data.memusage + '%')
            $('.cpu').text('cpu:' + data.cpuusage + '%')
        })
            .fail(function () {
                console.log('get_sys_stats err!')
            });
    }

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

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

获取表单和键盘监听

<textarea class="form-control" id="description" name="source" rows="5" required=""
              autocomplete="off" placeholder="原文......"></textarea>

    <select class="form-control" id="module" name="mode" required="" style="margin: 10px">
        <option value="ze">中译英</option>
        <option value="ez">英译中</option>
        <option value="jz">日译中</option>
        <option value="zj">中译日</option>
    </select>

    <textarea class="form-control" id="output" rows="5" name="output" autocomplete="off"></textarea>

    <button type="button" class="btn btn-primary" style="margin: 10px" id="translateButton">开始翻译</button>

{#
点击translateButton开始执行操作
获取sourceText和translationMode的值
通过post请求发送到/translate路由
取出JSON中的值存储到translatedText变量
将output的值设置为translatedText
#}

{#
键盘监听
当按下回车键时拦截回车键默认操作
替换为点击translateButton
#}

<script>
    $(document).ready(function() {
        // 监听输入框的键盘按下事件
        $("#description").keydown(function(event) {
            if (event.keyCode === 13) {
                event.preventDefault(); // 阻止默认回车行为
                $("#translateButton").click(); // 模拟点击翻译按钮
            }
        });

        $("#translateButton").click(function() {
            var sourceText = $("#description").val();
            var translationMode = $("#module").val();

            $.post("/translate", { source: sourceText, mode: translationMode }, function(data) {
                var translatedText = data.trans_result[0].dst;
                $("#output").val(translatedText);
            });
        });
    });
</script>

文件上传

<div>
    <div class="file_form" id="file-select-div">
        <div id="ico"><img class="appico" src="/static/images/upfile.png"
                           alt="S">
        </div>
    </div>
    <input type="hidden" name="hidden_rid" value="{{ rid }}" id="rid">
    <input type="hidden" name="up_name" value="{{ user.name }}" id="up_name">
    <input type="file" id="file-input" style="display: none;">
</div>

{#
将文件上传绑定到file-select-div点击事件
获取文件检查后缀名
获取 hidden_rid,up_name
发起Ajax请求,判断后端返回的结果是false还是true
#}

<script>
    $(document).ready(function () {
        const fileSelectDiv = $('#file-select-div');
        const fileInput = $('#file-input');

        const imagesSelectDiv = $('#images-select-div');
        const imagesInput = $('#images-input');

        fileSelectDiv.on('click', function () {
            fileInput.click();
        });

        imagesSelectDiv.on('click', function () {
            imagesInput.click();
        })


        fileInput.on('change', function () {
            const file = fileInput[0].files[0];
            if (file) {
                const allowedExtensions = ['.png', '.jpg', '.jpeg', '.zip', '.rar', '.pdf', '.txt', '.doc', '.docx', '.xls', '.xlsx', '.xlsm'];
                const fileExtension = file.name.split('.').pop().toLowerCase();

                if ($.inArray(`.${fileExtension}`, allowedExtensions) !== -1) {
                    const formData = new FormData();
                    formData.append('file', file);
                    formData.append('rid', $('#rid').val()); // 添加rid的值到formData中
                    formData.append('up_name', $('#up_name').val()); // 添加rid的值到formData中

                    // 使用jQuery的ajax方法将文件发送到后端
                    $.ajax({
                        url: '/upload_test',
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function (response) {
                            alert(response);
                            // 刷新
                            location.reload()


                            $('#file_list').append(tableRow);
                        },
                        error: function () {
                            alert('文件上传失败');
                        }
                    });
                } else {
                    alert("只能上传png,jpg,jpeg,zip,rar,pdf,txt,doc,docx,xls,xlsx,xlsm 格式的文件");
                }
            }
        });

    });

</script>