新文大师的藏经阁 - jQuery完全指南

获取jQuery

引入到HTML

CDN引入方式

<!-- 使用文大师CDN -->
<script src="https://030399.xyz/upload/CDN/jquery-3.7.0.min.js" defer></script>

<!-- 使用百度CDN -->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<!-- 使用CDNJS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

jQuery基本语法

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

示例：点击弹出提示

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>jQuery示例</title>
</head>
<body>
    <a href="#" id="demo">点我</a>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $('#demo').click(function () {
            alert("Hello jQuery!");
        });
    </script>
</body>
</html>

选择器类型

jQuery选择器语法与CSS选择器类似，主要包括以下类型：

类型	语法	说明
元素选择器	`$('p')`	选择所有`<p>`元素
ID选择器	`$('#myElement')`	选择id为"myElement"的元素
类选择器	`$('.myClass')`	选择class为"myClass"的元素
属性选择器	`$('input[type="text"]')`	选择type属性为text的input
后代选择器	`$('span a')`	选择span内的所有a元素
子元素选择器	`$('div > p')`	选择div的直接子元素p

过滤选择器

$('li:first')           // 选择第一个li
$('li:last')            // 选择最后一个li
$('tr:even')            // 选择偶数行
$('tr:odd')             // 选择奇数行
$(':contains("Hello")') // 选择包含文本Hello的元素

表单选择器

$(':input')                              // 选择所有输入框
$('input[type="checkbox"]:checked')     // 选择已勾选的复选框

DOM操作

1. 选择元素

$(selector)  // 使用选择器选取元素

2. 获取和设置内容

$('p').text()      // 获取纯文本
$('p').text('新文本')  // 设置纯文本
$('p').html()      // 获取HTML内容
$('p').html('<b>新内容</b>') // 设置HTML内容
$('input').val()   // 获取表单值

3. 添加元素

$('#container').append('<p>添加到末尾</p>');  // 内部末尾添加
$('#container').prepend('<p>添加到开头</p>'); // 内部开头添加
$('#container').after('<p>添加到之后</p>');   // 外部之后添加
$('#container').before('<p>添加到之前</p>'); // 外部之前添加

4. 移除元素

$('#element').remove();  // 移除元素及其子元素
$('#element').empty();   // 清空子元素

5. 属性与样式操作

$('img').attr('src', 'image.jpg');  // 设置属性
$('img').removeAttr('alt');         // 移除属性
$('p').css('color', 'red');         // 设置样式

6. 类操作

$('p').addClass('highlight');     // 添加类
$('p').removeClass('highlight');  // 移除类
$('p').toggleClass('highlight');  // 切换类

7. 遍历DOM树

$('p').parent();        // 获取父元素
$('div').children();    // 获取所有直接子元素
$('div').find('p');     // 查找内部所有p元素

8. 显示与隐藏

$('p').hide();          // 隐藏元素
$('p').show();          // 显示元素
$('p').toggle();       // 切换显示状态

9. 事件绑定

$('#btn').on('click', function() {
    alert('点击了!');
});

$('#btn').off('click');  // 解绑事件

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>原始段落</p>
    </div>
    <button id="hideBtn">隐藏</button>
    <button id="showBtn">显示</button>

    <script>
        $(document).ready(function() {
            // 修改内容
            $('p').text('修改后的文本');
            
            // 添加元素
            $('#container').append('<p>新添加的段落</p>');
            
            // 修改样式和属性
            $('p').css('color', 'blue').attr('class', 'highlight');
            
            // 隐藏按钮
            $('#hideBtn').click(function() {
                $('p').hide();
            });
            
            // 显示按钮
            $('#showBtn').click(function() {
                $('p').show();
            });
        });
    </script>
</body>
</html>

AJAX请求

基本GET请求

$.get('/api/data', function(response) {
    console.log(response);
});

完整AJAX示例

服务端代码（Flask）：

from flask import Flask, jsonify

app = Flask(__name__)

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

客户端页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>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>加载中...</p>
    </div>

    <script>
        $(document).ready(function() {
            $.get('/getinfo', function(data) {
                $('#data-container').html(`
                    <p>CPU使用率: ${data.cpuusage}%</p>
                    <p>负载: ${data.load}</p>
                    <p>内存使用: ${data.memusage}%</p>
                `);
            }).fail(function() {
                $('#data-container').html('<p>获取数据失败</p>');
            });
        });
    </script>
</body>
</html>

实时数据刷新

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实时数据刷新</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div id="data-container">
        <p>加载中...</p>
    </div>

    <script>
        function fetchData() {
            $.get('/getinfo', function(data) {
                $('#data-container').html(`
                    <p>CPU: ${data.cpuusage}%</p>
                    <p>Load: ${data.load}</p>
                    <p>Memory: ${data.memusage}%</p>
                `);
            }).fail(function() {
                $('#data-container').html('<p>获取数据失败</p>');
            });
        }

        // 页面加载时获取数据
        fetchData();
        
        // 每5秒刷新一次
        setInterval(fetchData, 5000);
    </script>
</body>
</html>