JS与jQuery网页源码有何区别？-网页设计-锦华智联科技

示例 1：基础交互（待办事项列表 - To-Do List）

这是一个非常经典且简单的示例，展示了如何使用 JS 和 jQuery 来动态地添加、删除和标记列表项。

（图片来源网络，侵删）

功能说明：

在输入框中输入任务，点击“添加”按钮,任务会出现在下方列表中。
点击列表项中的“删除”按钮,该项会被移除。
点击列表项本身，该项会被标记为“已完成”（文本变灰，有删除线）。

源码 (`index.html`)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">JS & jQuery To-Do List</title>
    <!-- 1. 引入 jQuery 库 (从 CDN 获取) -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        body { font-family: sans-serif; max-width: 600px; margin: 40px auto; }
        #todo-input { width: 70%; padding: 8px; }
        #add-btn { padding: 8px 15px; }
        #todo-list { list-style: none; padding: 0; margin-top: 20px; }
        #todo-list li { 
            padding: 10px; 
            border-bottom: 1px solid #ccc; 
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .completed { 
            text-decoration: line-through; 
            color: #888; 
        }
        .delete-btn { 
            color: red; 
            cursor: pointer; 
            background: none;
            border: none;
        }
    </style>
</head>
<body>
    <h1>我的待办事项</h1>
    <div>
        <input type="text" id="todo-input" placeholder="输入新任务...">
        <button id="add-btn">添加</button>
    </div>
    <ul id="todo-list">
        <!-- 列表项将在这里动态生成 -->
    </ul>
    <script>
        // =================================================================
        //                    原生 JavaScript 部分
        // =================================================================
        document.addEventListener('DOMContentLoaded', function() {
            const todoInput = document.getElementById('todo-input');
            const addBtn = document.getElementById('add-btn');
            const todoList = document.getElementById('todo-list');
            // 添加任务
            addBtn.addEventListener('click', addTask);
            // 回车键也可以添加任务
            todoInput.addEventListener('keypress', function(event) {
                if (event.key === 'Enter') {
                    addTask();
                }
            });
            function addTask() {
                const taskText = todoInput.value.trim();
                if (taskText === '') {
                    alert('请输入任务内容！');
                    return;
                }
                // 创建列表项元素
                const li = document.createElement('li');
                li.textContent = taskText;
                // 创建删除按钮
                const deleteBtn = document.createElement('button');
                deleteBtn.className = 'delete-btn';
                deleteBtn.textContent = '删除';
                // 将删除按钮添加到列表项
                li.appendChild(deleteBtn);
                // 将列表项添加到列表
                todoList.appendChild(li);
                // 清空输入框
                todoInput.value = '';
            }
            // 使用事件委托来处理动态生成的删除和点击事件
            todoList.addEventListener('click', function(event) {
                // 如果点击的是删除按钮
                if (event.target.classList.contains('delete-btn')) {
                    event.target.parentElement.remove(); // 移除父元素 <li>
                }
                // 如果点击的是列表项 <li>
                if (event.target.tagName === 'LI') {
                    event.target.classList.toggle('completed');
                }
            });
        });
    </script>
    <script>
        // =================================================================
        //                    jQuery 部分
        // =================================================================
        $(document).ready(function() {
            const $todoInput = $('#todo-input');
            const $addBtn = $('#add-btn');
            const $todoList = $('#todo-list');
            // 添加任务
            $addBtn.on('click', addTask);
            $todoInput.on('keypress', function(event) {
                if (event.key === 'Enter') {
                    addTask();
                }
            });
            function addTask() {
                const taskText = $todoInput.val().trim();
                if (taskText === '') {
                    alert('请输入任务内容！');
                    return;
                }
                // 创建列表项
                const $li = $('<li></li>').text(taskText);
                // 创建删除按钮
                const $deleteBtn = $('<button></button>', {
                    'class': 'delete-btn',
                    'text': '删除'
                });
                // 将删除按钮追加到列表项
                $li.append($deleteBtn);
                // 将列表项追加到列表
                $todoList.append($li);
                // 清空输入框
                $todoInput.val('');
            }
            // 使用事件委托处理动态元素的事件
            $todoList.on('click', '.delete-btn', function() {
                // $(this) 指向被点击的元素（这里是.delete-btn）
                // .parent() 指向其父元素（这里是 <li>）
                // .remove() 移除该元素
                $(this).parent().remove();
            });
            $todoList.on('click', 'li', function() {
                // $(this) 指向被点击的元素（这里是 <li>）
                // .toggleClass() 如果类存在则移除，不存在则添加
                $(this).toggleClass('completed');
            });
        });
    </script>
</body>
</html>

代码对比与讲解

功能	原生 JavaScript	jQuery	优势对比
等待DOM加载	`document.addEventListener('DOMContentLoaded', ...)`	`$(document).ready(function() { ... })` 或简写为 `$(function() { ... })`	jQuery 的写法更简洁，是专门为此设计的。
获取元素	`document.getElementById('todo-input')`	`$('#todo-input')`	jQuery 使用CSS选择器，代码更短，功能更强大（可获取一组元素）。
绑定事件	`element.addEventListener('click', handler)`	`$element.on('click', handler)`	语法非常相似，jQuery的`.on()`方法更灵活，支持事件委托。
创建元素	`document.createElement('li')`	`$('<li></li>')`	jQuery 直接用HTML字符串创建，更直观。
	`element.textContent = '新文本'`	`$element.text('新文本')`	jQuery方法名清晰易读。
添加类名	`element.classList.add('completed')`	`$element.addClass('completed')`	语义清晰。
切换类名	`element.classList.toggle('completed')`	`$element.toggleClass('completed')`	同上，非常方便。
移除元素	`element.remove()`	`$element.remove()`	语法几乎一样，但jQuery可以处理一组元素。
事件委托	`parent.addEventListener('click', function(e) { if(e.target.matches('.delete-btn')) { ... } })`	`$parent.on('click', '.delete-btn', function() { ... })`	jQuery的优势所在，语法极其简洁，无需手动判断`e.target`，可读性极高。

示例 2：AJAX 数据请求（从API获取并显示用户列表）

这个示例展示了如何使用原生 JS 和 jQuery 的 AJAX 功能从公共API获取数据,并将其渲染到页面上。

功能说明：

页面加载时，自动向 https://jsonplaceholder.typicode.com/users 发送请求。
获取到用户数据后，遍历数据,将每个用户的姓名和邮箱显示在页面上。

源码 (`index.html`)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">JS & jQuery AJAX 示例</title>
    <!-- 引入 jQuery -->
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
        body { font-family: sans-serif; padding: 20px; }
        #user-list { list-style: none; padding: 0; }
        #user-list li { background: #f4f4f4; margin-bottom: 10px; padding: 10px; border-radius: 5px; }
        .loading { color: #666; font-style: italic; }
    </style>
</head>
<body>
    <h1>用户列表</h1>
    <ul id="user-list">
        <li class="loading">正在加载用户数据...</li>
    </ul>
    <script>
        // =================================================================
        //                    原生 JavaScript (Fetch API)
        // =================================================================
        document.addEventListener('DOMContentLoaded', function() {
            const userListElement = document.getElementById('user-list');
            // 使用 Fetch API (现代JS的标准)
            fetch('https://jsonplaceholder.typicode.com/users')
                .then(response => {
                    // 检查响应是否成功
                    if (!response.ok) {
                        throw new Error('网络响应错误');
                    }
                    // 将响应体解析为 JSON
                    return response.json();
                })
                .then(users => {
                    // 清空加载提示
                    userListElement.innerHTML = '';
                    // 渲染用户列表
                    users.forEach(user => {
                        const li = document.createElement('li');
                        li.innerHTML = `<strong>${user.name}</strong> (${user.email})`;
                        userListElement.appendChild(li);
                    });
                })
                .catch(error => {
                    console.error('获取数据失败:', error);
                    userListElement.innerHTML = '<li class="error">加载失败，请稍后重试。</li>';
                });
        });
    </script>
    <script>
        // =================================================================
        //                    jQuery (AJAX)
        // =================================================================
        $(document).ready(function() {
            const $userList = $('#user-list');
            // jQuery 的 $.ajax 方法
            $.ajax({
                url: 'https://jsonplaceholder.typicode.com/users',
                method: 'GET', // 也可以是 'GET', 'POST' 等
                dataType: 'json', // 预期服务器返回的数据类型
                success: function(users) {
                    // 清空加载提示
                    $userList.empty();
                    // 渲染用户列表
                    $.each(users, function(index, user) {
                        const $li = $('<li></li>');
                        $li.html(`<strong>${user.name}</strong> (${user.email})`);
                        $userList.append($li);
                    });
                },
                error: function(jqXHR, textStatus, errorThrown) {
                    console.error('获取数据失败:', textStatus, errorThrown);
                    $userList.html('<li class="error">加载失败，请稍后重试。</li>');
                }
            });
            // // 更简洁的写法: $.get
            // $.get('https://jsonplaceholder.typicode.com/users', function(users) {
            //     $userList.empty();
            //     $.each(users, function(index, user) {
            //         $userList.append(`<li><strong>${user.name}</strong> (${user.email})</li>`);
            //     });
            // }).fail(function() {
            //     $userList.html('<li class="error">加载失败，请稍后重试。</li>');
            // });
        });
    </script>
</body>
</html>

代码对比与讲解

功能	原生 JavaScript (Fetch API)	jQuery (AJAX)	优势对比
发起请求	`fetch(url)`	`$.ajax({ url: url, ... })` 或 `$.get(url, ...)`	Fetch 是现代浏览器标准，基于Promise，链式调用清晰，jQuery的AJAX封装了更多兼容性细节，并提供简写方法（如`$.get`, `$.post`），对初学者更友好。
成功回调	`.then(response => response.json())`	`success: function(data) { ... }`	Fetch 使用Promise链，代码流程更线性，jQuery使用回调函数，但在处理多个异步操作时，容易陷入“回调地狱”。
错误处理	`.catch(error => { ... })`	`error: function(...) { ... }`	Fetch的`.catch`统一处理所有阶段的错误，jQuery的`error`回调专门处理请求失败的情况。
遍历数组	`users.forEach(user => { ... })`	`$.each(users, function(index, user) { ... })`	`forEach`是标准数组方法。`$.each`更通用，可以遍历数组和对象。

总结与建议

jQuery 的核心优势：
- 简洁性：选择器、事件绑定、DOM操作等常用代码量更少。
- 浏览器兼容性：在旧版浏览器上表现更好,无需额外处理兼容性问题。
- 易用性：封装了复杂的底层操作,让开发者能更专注于业务逻辑。
- 强大的生态：拥有海量的插件,可以轻松实现各种复杂功能。
现代原生 JS 的优势：
- 性能：原生API通常比jQuery的封装层有更好的性能。
- 无需库：不依赖任何外部库，减少了HTTP请求,页面加载更快。
- 标准与未来：Fetch API、class语法、let/const等是现代JS的标准,是未来发展的方向。
- 学习曲线：直接学习标准API,能让你更深入地理解JS的底层机制。

给您的建议：

（图片来源网络，侵删）

学习目的：如果是为了学习JS基础，请优先使用原生JS,它能帮你打好坚实的基础。
快速开发/项目维护：如果你在一个需要兼容旧浏览器或追求快速开发的项目中，jQuery 依然是一个非常强大和高效的选择。
现代项目：对于绝大多数新的Web项目，推荐使用原生JS + 现代框架（如Vue, React, Svelte）的组合,它们在性能和开发体验上都超越了jQuery。

希望这两个详细的示例能帮助您理解JS和jQuery在实际应用中的区别和联系！

（图片来源网络，侵删）

JS与jQuery网页源码有何区别？

示例 1：基础交互（待办事项列表 - To-Do List）

功能说明：

源码 (index.html)

代码对比与讲解

示例 2：AJAX 数据请求（从API获取并显示用户列表）

功能说明：

源码 (index.html)

代码对比与讲解

总结与建议

源码 (`index.html`)

源码 (`index.html`)