JavaScript转jQuery实战教程从原生代码到高效库应用的完全指南掌握简化DOM操作与事件处理的核心技巧提升开发效率

威震华夏关云长 · 发表于 2025-10-6 17:20:30

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

x

引言：为什么需要从JavaScript转向jQuery？

在Web开发领域，JavaScript是不可或缺的编程语言，但原生JavaScript的DOM操作和事件处理往往需要编写冗长且复杂的代码。jQuery作为一个快速、小型且功能丰富的JavaScript库，极大地简化了HTML文档遍历、事件处理、动画和Ajax交互等操作。本教程将带你从原生JavaScript平滑过渡到jQuery，掌握简化DOM操作与事件处理的核心技巧，从而显著提升开发效率。

jQuery简介与优势

jQuery由John Resig于2006年创建，其核心理念是”Write Less, Do More”（写得更少，做得更多）。jQuery的主要优势包括：

1. 简洁的语法：用更少的代码完成相同的功能
2. 跨浏览器兼容性：处理不同浏览器之间的差异
3. 强大的选择器：使用CSS选择器语法轻松定位元素
4. 链式操作：可以在一行代码中执行多个操作
5. 丰富的插件生态：大量现成的插件可供使用

环境搭建：引入jQuery

在开始使用jQuery之前，需要先在HTML文档中引入jQuery库。有两种主要方式：

1. 下载jQuery库

从jQuery官网下载jQuery文件，然后在HTML中引入：

<!DOCTYPE html>
<html>
<head>
<title>jQuery Tutorial</title>
<script src="jquery-3.6.0.min.js"></script>
</head>
<body>
</body>
</html>

复制代码

2. 使用CDN链接

推荐使用CDN（内容分发网络）方式引入jQuery，这样可以利用缓存并加快加载速度：

<!DOCTYPE html>
<html>
<head>
<title>jQuery Tutorial</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
</body>
</html>

复制代码

DOM操作：原生JavaScript vs jQuery

DOM（文档对象模型）操作是Web开发中最常见的任务之一。让我们对比一下原生JavaScript和jQuery在DOM操作上的差异。

选择元素

原生JavaScript：

// 通过ID选择元素
const elementById = document.getElementById('myId');
// 通过类名选择元素
const elementsByClass = document.getElementsByClassName('myClass');
// 通过标签名选择元素
const elementsByTag = document.getElementsByTagName('div');
// 通过CSS选择器选择元素（现代浏览器支持）
const elementByQuery = document.querySelector('#myId .myClass');
const elementsByQueryAll = document.querySelectorAll('.myClass');

复制代码

jQuery：

// 通过ID选择元素
const $elementById = $('#myId');
// 通过类名选择元素
const $elementsByClass = $('.myClass');
// 通过标签名选择元素
const $elementsByTag = $('div');
// 通过CSS选择器选择元素
const $elementByQuery = $('#myId .myClass');

复制代码

可以看到，jQuery使用美元符号$作为函数名，通过CSS选择器语法选择元素，更加简洁直观。

修改元素内容和属性

原生JavaScript：

// 获取元素
const element = document.getElementById('myElement');
// 修改文本内容
element.textContent = '新的文本内容';
// 修改HTML内容
element.innerHTML = '<p>新的HTML内容</p>';
// 修改属性
element.setAttribute('class', 'newClass');
element.id = 'newId';
// 修改样式
element.style.color = 'red';
element.style.backgroundColor = '#f0f0f0';

复制代码

jQuery：

// 获取元素
const $element = $('#myElement');
// 修改文本内容
$element.text('新的文本内容');
// 修改HTML内容
$element.html('<p>新的HTML内容</p>');
// 修改属性
$element.attr('class', 'newClass');
$element.prop('id', 'newId');
// 修改样式
$element.css({
'color': 'red',
'background-color': '#f0f0f0'
});

复制代码

jQuery的方法更加直观，特别是修改多个CSS属性时，可以一次性传入一个对象，代码更加清晰。

创建和插入元素

原生JavaScript：

// 创建新元素
const newDiv = document.createElement('div');
newDiv.className = 'box';
newDiv.textContent = '这是一个新元素';
// 获取父元素
const container = document.getElementById('container');
// 插入元素
container.appendChild(newDiv); // 在末尾插入
container.insertBefore(newDiv, container.firstChild); // 在开头插入
// 替换元素
const oldElement = document.getElementById('oldElement');
container.replaceChild(newDiv, oldElement);
// 删除元素
container.removeChild(oldElement);

复制代码

jQuery：

// 创建新元素
const $newDiv = $('<div class="box">这是一个新元素</div>');
// 获取父元素
const $container = $('#container');
// 插入元素
$container.append($newDiv); // 在末尾插入
$container.prepend($newDiv); // 在开头插入
$newDiv.appendTo($container); // 将新元素添加到容器末尾
$newDiv.prependTo($container); // 将新元素添加到容器开头
// 替换元素
$('#oldElement').replaceWith($newDiv);
// 删除元素
$('#oldElement').remove();

复制代码

jQuery提供了更多样化的插入方法，并且方法名称更加直观，代码可读性更高。

遍历元素

原生JavaScript：

// 获取元素列表
const items = document.getElementsByClassName('item');
// 遍历元素
for (let i = 0; i < items.length; i++) {
const item = items[i];
// 对每个元素执行操作
item.style.color = 'blue';
}
// 使用forEach（需要将HTMLCollection转换为数组）
Array.from(items).forEach(item => {
item.style.color = 'blue';
});

复制代码

jQuery：

// 获取元素列表
const $items = $('.item');
// 遍历元素
$items.each(function() {
$(this).css('color', 'blue');
});
// 或者直接操作所有元素
$items.css('color', 'blue');

复制代码

jQuery的each方法使得遍历元素集合更加简单，而且很多操作可以直接应用到整个集合上，无需显式遍历。

事件处理：原生JavaScript vs jQuery

事件处理是Web交互的核心，让我们看看jQuery如何简化事件处理。

添加事件监听器

原生JavaScript：

// 获取元素
const button = document.getElementById('myButton');
// 添加点击事件
button.addEventListener('click', function() {
alert('按钮被点击了！');
});
// 添加多个事件
button.addEventListener('mouseover', function() {
this.style.backgroundColor = 'lightblue';
});
button.addEventListener('mouseout', function() {
this.style.backgroundColor = '';
});

复制代码

jQuery：

// 获取元素
const $button = $('#myButton');
// 添加点击事件
$button.click(function() {
alert('按钮被点击了！');
});
// 或者使用on方法（推荐）
$button.on('click', function() {
alert('按钮被点击了！');
});
// 添加多个事件
$button.on({
'mouseover': function() {
$(this).css('background-color', 'lightblue');
},
'mouseout': function() {
$(this).css('background-color', '');
}
});

复制代码

jQuery提供了更简洁的事件绑定方法，特别是on方法，可以一次性绑定多个事件，代码更加整洁。

事件委托

事件委托是一种利用事件冒泡机制的技术，可以减少事件监听器的数量，提高性能。

原生JavaScript：

// 获取父元素
const list = document.getElementById('myList');
// 添加事件委托
list.addEventListener('click', function(event) {
// 检查点击的是否是列表项
if (event.target && event.target.tagName === 'LI') {
console.log('列表项被点击:', event.target.textContent);
}
});

复制代码

jQuery：

// 获取父元素
const $list = $('#myList');
// 添加事件委托
$list.on('click', 'li', function() {
console.log('列表项被点击:', $(this).text());
});

复制代码

jQuery的事件委托语法更加简洁，直接在on方法中指定选择器即可。

事件触发与移除

原生JavaScript：

// 获取元素
const button = document.getElementById('myButton');
// 定义事件处理函数
function handleClick() {
console.log('按钮被点击了');
}
// 添加事件监听器
button.addEventListener('click', handleClick);
// 触发事件
button.click(); // 不适用于所有浏览器
const event = new Event('click');
button.dispatchEvent(event);
// 移除事件监听器
button.removeEventListener('click', handleClick);

复制代码

jQuery：

// 获取元素
const $button = $('#myButton');
// 定义事件处理函数
function handleClick() {
console.log('按钮被点击了');
}
// 添加事件监听器
$button.on('click', handleClick);
// 触发事件
$button.click(); // 简写
$button.trigger('click'); // 完整写法
// 移除事件监听器
$button.off('click', handleClick);

复制代码

jQuery提供了统一的事件触发方法，兼容所有浏览器，使事件处理更加可靠。

实战案例：从原生JavaScript到jQuery的转换

让我们通过一个实际的案例来展示如何将原生JavaScript代码转换为jQuery代码。假设我们要创建一个简单的待办事项应用，用户可以添加、删除和标记完成任务。

原生JavaScript实现

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>待办事项应用 - 原生JavaScript</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.todo-container {
margin-top: 20px;
}
.todo-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border-bottom: 1px solid #eee;
}
.todo-item.completed {
text-decoration: line-through;
color: #888;
}
.delete-btn {
background-color: #ff4d4d;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
border-radius: 3px;
}
.add-todo {
display: flex;
margin-bottom: 20px;
}
.add-todo input {
flex: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 3px 0 0 3px;
}
.add-todo button {
padding: 10px 15px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
border-radius: 0 3px 3px 0;
}
</style>
</head>
<body>
<h1>待办事项应用</h1>
<div class="add-todo">
<input type="text" id="todoInput" placeholder="添加新的待办事项...">
<button id="addBtn">添加</button>
</div>
<div class="todo-container" id="todoContainer">
</div>
<script>
// 获取DOM元素
const todoInput = document.getElementById('todoInput');
const addBtn = document.getElementById('addBtn');
const todoContainer = document.getElementById('todoContainer');
// 添加待办事项
function addTodo() {
const todoText = todoInput.value.trim();
if (todoText === '') {
alert('请输入待办事项内容');
return;
}
// 创建新的待办事项元素
const todoItem = document.createElement('div');
todoItem.className = 'todo-item';
// 创建文本元素
const todoTextElement = document.createElement('span');
todoTextElement.textContent = todoText;
// 创建删除按钮
const deleteBtn = document.createElement('button');
deleteBtn.className = 'delete-btn';
deleteBtn.textContent = '删除';
// 将元素添加到待办事项中
todoItem.appendChild(todoTextElement);
todoItem.appendChild(deleteBtn);
// 添加到容器
todoContainer.appendChild(todoItem);
// 清空输入框
todoInput.value = '';
// 添加事件监听器
todoTextElement.addEventListener('click', function() {
this.parentElement.classList.toggle('completed');
});
deleteBtn.addEventListener('click', function() {
this.parentElement.remove();
});
}
// 添加按钮点击事件
addBtn.addEventListener('click', addTodo);
// 输入框回车事件
todoInput.addEventListener('keypress', function(event) {
if (event.key === 'Enter') {
addTodo();
}
});
</script>
</body>
</html>

复制代码

jQuery实现

现在，让我们将上面的原生JavaScript代码转换为jQuery代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>待办事项应用 - jQuery</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 600px;
margin: 0 auto;
padding: 20px;
}
.todo-container {
margin-top: 20px;
}
.todo-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border-bottom: 1px solid #eee;
}
.todo-item.completed {
text-decoration: line-through;
color: #888;
}
.delete-btn {
background-color: #ff4d4d;
color: white;
border: none;
padding: 5px 10px;
cursor: pointer;
border-radius: 3px;
}
.add-todo {
display: flex;
margin-bottom: 20px;
}
.add-todo input {
flex: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 3px 0 0 3px;
}
.add-todo button {
padding: 10px 15px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
border-radius: 0 3px 3px 0;
}
</style>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<h1>待办事项应用</h1>
<div class="add-todo">
<input type="text" id="todoInput" placeholder="添加新的待办事项...">
<button id="addBtn">添加</button>
</div>
<div class="todo-container" id="todoContainer">
</div>
<script>
$(document).ready(function() {
// 获取DOM元素
const $todoInput = $('#todoInput');
const $addBtn = $('#addBtn');
const $todoContainer = $('#todoContainer');
// 添加待办事项
function addTodo() {
const todoText = $todoInput.val().trim();
if (todoText === '') {
alert('请输入待办事项内容');
return;
}
// 创建新的待办事项元素
const $todoItem = $('<div class="todo-item"></div>');
// 创建文本元素
const $todoTextElement = $('<span></span>').text(todoText);
// 创建删除按钮
const $deleteBtn = $('<button class="delete-btn">删除</button>');
// 将元素添加到待办事项中
$todoItem.append($todoTextElement, $deleteBtn);
// 添加到容器
$todoContainer.append($todoItem);
// 清空输入框
$todoInput.val('');
}
// 添加按钮点击事件
$addBtn.on('click', addTodo);
// 输入框回车事件
$todoInput.on('keypress', function(event) {
if (event.key === 'Enter') {
addTodo();
}
});
// 使用事件委托处理动态添加的元素
$todoContainer.on('click', 'span', function() {
$(this).parent().toggleClass('completed');
});
$todoContainer.on('click', '.delete-btn', function() {
$(this).parent().remove();
});
});
</script>
</body>
</html>

复制代码

代码对比分析

通过对比两种实现，我们可以看到jQuery版本的代码有以下优势：

1. 更简洁的选择器语法：$('#todoInput')比document.getElementById('todoInput')更简洁
2. 更直观的DOM操作：$todoItem.append($todoTextElement, $deleteBtn)比原生JavaScript的appendChild更直观
3. 更简单的事件委托：使用$todoContainer.on('click', 'span', function() {...})可以轻松处理动态添加的元素
4. 链式操作：可以连续调用多个方法，如$('<span></span>').text(todoText)
5. 统一的方法名：如val()方法既可以获取值也可以设置值，比原生JavaScript的value属性和setAttribute方法更统一

jQuery高级特性与最佳实践

除了基本的DOM操作和事件处理，jQuery还提供了许多高级特性，可以进一步提升开发效率。

链式操作

jQuery最强大的特性之一是链式操作，可以在一个语句中执行多个方法：

$('#myElement')
.css('color', 'red')
.addClass('highlight')
.fadeIn(500)
.on('click', function() {
$(this).toggleClass('active');
});

复制代码

动画效果

jQuery提供了简单的动画方法：

// 淡入淡出
$('#element').fadeIn(1000); // 1秒内淡入
$('#element').fadeOut(500); // 0.5秒内淡出
$('#element').fadeToggle(800); // 切换淡入淡出状态
// 滑动
$('#element').slideDown(600); // 向下滑动显示
$('#element').slideUp(400); // 向上滑动隐藏
$('#element').slideToggle(700); // 切换滑动状态
// 自定义动画
$('#element').animate({
'width': '500px',
'height': '300px',
'opacity': 0.5
}, 1000, function() {
console.log('动画完成');
});

复制代码

Ajax请求

jQuery简化了Ajax请求的处理：

// GET请求
$.get('https://api.example.com/data', function(data) {
console.log('获取数据成功:', data);
});
// POST请求
$.post('https://api.example.com/data', {
name: 'John',
age: 30
}, function(response) {
console.log('提交数据成功:', response);
});
// 更通用的Ajax方法
$.ajax({
url: 'https://api.example.com/data',
method: 'GET',
dataType: 'json',
success: function(data) {
console.log('请求成功:', data);
},
error: function(xhr, status, error) {
console.error('请求失败:', error);
}
});

复制代码

插件使用与开发

jQuery拥有丰富的插件生态系统，可以轻松扩展功能：

// 使用插件示例（假设使用了jQuery UI）
$('#datepicker').datepicker();
// 开发简单的jQuery插件
(function($) {
$.fn.highlight = function(color) {
// 默认颜色为黄色
color = color || 'yellow';
// 遍历所有匹配的元素
this.each(function() {
$(this).css('background-color', color);
});
// 返回this以支持链式调用
return this;
};
})(jQuery);
// 使用自定义插件
$('.important').highlight('lightblue');

复制代码

性能优化

使用jQuery时，也需要注意性能优化：

1. 缓存jQuery对象：避免重复选择相同的元素

// 不好的做法
$('#myElement').css('color', 'red');
$('#myElement').addClass('highlight');
$('#myElement').on('click', function() {...});
// 好的做法
const $myElement = $('#myElement');
$myElement.css('color', 'red');
$myElement.addClass('highlight');
$myElement.on('click', function() {...});

复制代码

1. 使用事件委托：对于动态添加的元素，使用事件委托而不是直接绑定事件

// 不好的做法
$('.item').on('click', function() {...}); // 只对已存在的元素有效
// 好的做法
$('#container').on('click', '.item', function() {...}); // 对现在和未来的元素都有效

复制代码

1. 避免过度使用jQuery：对于简单的操作，原生JavaScript可能更快

// 使用jQuery
const width = $('#element').width();
// 使用原生JavaScript（更快）
const width = document.getElementById('element').offsetWidth;

复制代码

常见陷阱与解决方案

在使用jQuery时，开发者可能会遇到一些常见问题，下面是一些陷阱及其解决方案：

1. 文档就绪处理

问题：在DOM完全加载之前尝试操作元素会导致错误。

解决方案：使用$(document).ready()或其简写形式：

// 完整写法
$(document).ready(function() {
// 在DOM完全加载后执行的代码
});
// 简写形式
$(function() {
// 在DOM完全加载后执行的代码
});

复制代码

2. 选择器性能

问题：复杂的选择器可能导致性能问题。

解决方案：使用更具体、更高效的选择器：

// 不好的做法
$('div.container ul li.item a');
// 好的做法
$('.item-link'); // 直接使用类选择器

复制代码

3. 冲突处理

问题：当多个JavaScript库使用$符号时，可能导致冲突。

解决方案：使用jQuery的noConflict()方法：

// 释放$符号的控制权
$.noConflict();
// 使用jQuery代替$
jQuery(document).ready(function() {
jQuery('div').hide();
});
// 或者自定义别名
const j = jQuery.noConflict();
j(document).ready(function() {
j('div').hide();
});

复制代码

4. 上下文问题

问题：在事件处理函数中，this的引用可能不符合预期。

解决方案：使用jQuery的$.proxy()或箭头函数（ES6+）：

// 使用$.proxy
$('#myButton').on('click', $.proxy(function() {
// 这里的this指向预期的对象
}, this));
// 使用箭头函数（ES6+）
$('#myButton').on('click', () => {
// 箭头函数继承外部作用域的this
});

复制代码

5. 内存泄漏

问题：不当的事件处理可能导致内存泄漏。

解决方案：在元素移除前解绑事件：

// 绑定事件
$('#myElement').on('click', handleClick);
// 在移除元素前解绑事件
$('#myElement').off('click', handleClick).remove();

复制代码

结论：从JavaScript到jQuery的转变之路

从原生JavaScript转向jQuery是一个明智的选择，特别是对于需要快速开发、处理复杂DOM操作和确保跨浏览器兼容性的项目。jQuery提供了简洁的语法、强大的功能和丰富的生态系统，可以显著提高开发效率。

然而，值得注意的是，随着现代浏览器和JavaScript框架（如React、Vue和Angular）的发展，jQuery的使用场景正在发生变化。对于新的单页应用程序，现代框架可能是更好的选择。但对于传统的网站、小型项目或需要快速原型开发的场景，jQuery仍然是一个强大而实用的工具。

通过本教程的学习，你应该已经掌握了从原生JavaScript到jQuery的基本转换技巧，包括DOM操作、事件处理、动画效果和Ajax请求等核心功能。继续实践和探索，你将能够更加熟练地运用jQuery，构建高效、优雅的Web应用程序。

记住，学习jQuery不仅是学习一个新的库，更是学习一种简化问题、提高效率的思维方式。无论你最终选择使用什么工具，这种思维方式都将对你的开发工作产生积极的影响。

版权声明

1、转载或引用本网站内容(JavaScript转jQuery实战教程从原生代码到高效库应用的完全指南掌握简化DOM操作与事件处理的核心技巧提升开发效率)须注明原网址及作者(威震华夏关云长)，并标明本网站网址(https://pixtech.cc/)。

2、对于不当转载或引用本网站内容而引起的民事纷争、行政处理或其他损失，本网站不承担责任。

3、对不遵守本声明或其他违法、恶意使用本网站内容者，本网站保留追究其法律责任的权利。

本文地址: https://pixtech.cc/thread-41674-1-1.html

	通知：是的！我们正在计划一个大动作！	11-02 12:46
	通知：Telegram 推送频道https://t.me/+2tB3a7aKXlw2YjA1 及时接收第一手论坛帖子信息～	10-23 09:32
	通知：本站资源由网友上传分享，如有违规等问题请到版务模块进行投诉，将及时处理！	10-23 09:31
	通知：加入QQ社群吧 https://qm.qq.com/q/QZibQd1hiq	10-23 09:28
	通知：签到时间调整为每日4:00（东八区）	10-23 09:26

活动公告

JavaScript转jQuery实战教程从原生代码到高效库应用的完全指南掌握简化DOM操作与事件处理的核心技巧提升开发效率

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

版权声明

浏览过的版块

三倍冰淇淋

无人之境【一阶】

财Doro

小樱（小丑装）

立华奏

以外的星空【二阶】

⑨的冰沙

友情链接

频道订阅

加入社群