当前位置： 首页 > news >正文

从新手到高手：jQuery 全面进阶之路

news 2025/7/4 8:39:26

在当今的前端开发领域，JavaScript 无疑占据着举足轻重的地位。而在众多 JavaScript 工具与框架中，jQuery 凭借其独特的优势，成为了开发者们不可或缺的得力助手。它以 “Write Less, Do More”（写更少的代码，做更多的事情）为设计宗旨，极大地简化了 HTML 文档操作、事件处理、动画设计以及 Ajax 交互等常见前端开发任务，显著提升了开发效率。接下来，让我们一同开启从 jQuery 入门到深入学习的精彩旅程。

一、jQuery 基础入门

（一）认识 jQuery

jQuery 本质上是一个快速、简洁的 JavaScript 框架，自 2006 年由 John Resig 等人创建并发布第一个稳定版本以来，便迅速风靡全球。它封装了大量 JavaScript 常用功能代码，为开发者提供了一套更为便捷、高效的编程模式。在传统的 JavaScript 开发中，操作 DOM 元素、处理事件等往往需要编写冗长复杂的代码，而借助 jQuery，开发者能够用更简洁的语法实现相同甚至更强大的功能。例如，在原生 JavaScript 中获取一个 id 为 “myDiv” 的元素，需要使用document.getElementById('myDiv')，而在 jQuery 中，只需使用$('#myDiv')，代码量大幅减少，可读性却大大增强。

（二）引入 jQuery

在项目中使用 jQuery，首先要将其引入到 HTML 文件中。常见的引入方式主要有以下两种：

  1. 通过 CDN 链接引入：内容分发网络（CDN）能够快速提供 jQuery 库文件。在 HTML 文件的<head>标签内添加如下<script>标签即可：
<script src="https://code.jquery.com/jquery - 3.7.1.min.js"></script>

这种方式无需在本地存储库文件，浏览器会从 CDN 服务器加载最新版本的 jQuery，并且 CDN 服务器通常在全球各地都有节点，能有效提升加载速度。

  1. 下载并本地引入：访问 jQuery 官方网站（jQuery），在官网首页即可找到下载链接，选择适合项目需求的版本（如开发阶段可选用未压缩的版本，便于调试查看源码；生产环境则建议使用压缩后的.min 版本，以减小文件体积，加快加载速度）。下载完成后，将文件放置在项目的合适目录下，然后通过本地路径在 HTML 文件中引入，例如：
<script src="js/jquery - 3.7.1.min.js"></script>

这里假设将下载的 jQuery 文件存放在项目根目录下的 “js” 文件夹中。

（三）$ 符号与文档就绪事件

  1. **\(符号**：\)符号在 jQuery 中扮演着至关重要的角色，它实际上是全局变量jQuery的别名。所有 jQuery 的功能和方法都通过这个别名来调用，之所以使用\(，是因为它简洁易记，能极大地提高代码编写效率。例如`\)('selector')，这是使用$调用选择器功能，用于选取HTML文档中的元素，等同于jQuery ('selector')`。同时，$ 本身也是一个函数对象，可以像调用普通函数一样使用它来执行各种操作。

  2. 文档就绪事件：在编写 jQuery 代码时，经常需要确保页面的 DOM（文档对象模型）已经完全加载完毕后再执行相关操作，否则可能会因为 DOM 元素尚未加载而导致代码执行出错。文档就绪事件就是用于解决这个问题的。它有两种常见的写法： 写法一：

$(document).ready(function () {// 在这里编写你的jQuery代码
});

写法二（简洁写法）：

$(function () {// 在这里编写你的jQuery代码
});

这两种写法的作用完全相同，都是在文档加载完成后才执行花括号内的代码。例如，当我们想要在页面加载完成后，将所有<h1>标签的文本颜色设置为红色，可以这样写：

$(function () {$('h1').css('color','red');
});

（四）选择器基础

选择器是 jQuery 的核心功能之一，通过选择器可以精准地选取 HTML 文档中的元素，进而对这些元素执行各种操作。jQuery 提供了丰富多样的选择器，以下是一些常见的基本选择器：

  1. 标签选择器：通过 HTML 标签名来选取元素。例如，$('p')会选取页面中所有的<p>标签元素。如果我们有一个包含多个段落的 HTML 页面：
<p>这是第一段。</p>
<div><p>这是第二段，位于div内部。</p>
</div>
<p>这是第三段。</p>

使用$('p').css('color', 'blue')，则页面中所有段落的文本颜色都会被设置为蓝色。

  1. ID 选择器：根据元素的 id 属性值来选取唯一的元素。在 HTML 中，id 具有唯一性，因此通过 ID 选择器选取的元素是唯一的。语法为$('#id值')，例如，假设有一个<div>元素的 id 为 “myDiv”：
<div id="myDiv">这是一个具有特定id的div。</div>

使用$('#myDiv').html('内容已被修改')，则 id 为 “myDiv” 的<div>元素内部的内容会被替换为 “内容已被修改”。

  1. 类选择器：依据元素的 class 属性值选取具有相同类名的一组元素。语法为$('.类名')。例如，有多个元素都应用了 “highlight” 类：
<p class="highlight">这是一个有highlight类的段落。</p>
<span class="highlight">这是一个有highlight类的span。</span>

使用$('.highlight').addClass('newClass')，会为所有具有 “highlight” 类的元素再添加一个 “newClass” 类。

  1. 组合选择器：可以同时使用多种选择器来选取多个不同类型的元素。例如，$('p, .highlight, #myDiv')，这个选择器会选取页面中的所有<p>标签元素、所有具有 “highlight” 类的元素以及 id 为 “myDiv” 的元素。假设我们想要给这些元素都添加一个 1 像素宽的黑色边框，可以这样写：
$('p, .highlight, #myDiv').css('border', '1px solid black');

二、深入学习 jQuery

（一）DOM 操作进阶

在掌握了基本选择器选取元素后，接下来深入了解如何使用 jQuery 对 DOM 元素进行丰富多样的操作。

  1. 元素内容操作：

    • text () 方法：用于获取或设置所选元素的文本内容（不包含 HTML 标签）。例如，$('p').text()会返回所有<p>标签元素的文本内容（将多个<p>元素的文本内容拼接在一起返回）；$('p').text('新的文本内容')则会将所有<p>标签元素的文本内容设置为 “新的文本内容”。
    • html () 方法：与text()方法类似，但html()方法可以获取或设置所选元素的 HTML 内容，包括标签。例如，有一个<div>元素：<div id="myDiv"><p>这是一个段落</p></div>，使用$('#myDiv').html()会返回<p>这是一个段落</p>；$('#myDiv').html('<h2>新的标题</h2>')会将<div>元素内部的 HTML 内容替换为<h2>新的标题</h2>。
    • val () 方法：主要用于获取或设置表单元素（如<input>、<textarea>、<select>等）的值。对于<input>元素，$('input[type="text"]').val()会返回所有文本输入框的值；$('input[type="text"]').val('默认值')会将所有文本输入框的值设置为 “默认值”。对于<select>元素，$('select').val()会返回当前选中项的值，$('select').val('选项值')会将值为 “选项值” 的选项设置为选中状态。

  2. 元素属性操作：

    • attr () 方法：用于获取或设置元素的属性。例如，获取<img>元素的src属性：$('img').attr('src')；设置<a>元素的href属性：$('a').attr('href', 'https://www.example.com')。当需要同时设置多个属性时，可以传递一个对象作为参数，如$('a').attr({ 'href': 'https://www.example.com', 'target': '_blank' })，这会为所有<a>元素设置href属性为 “https://www.example.com”，并将链接在新窗口中打开。
    • removeAttr () 方法：用于移除元素的指定属性。例如，要移除所有<a>元素的target属性，可以使用$('a').removeAttr('target')。

  3. 元素的添加与删除：

    • 创建新元素：使用$('<元素标签>')的方式可以创建新的 DOM 元素。例如，var newDiv = $('<div>');创建了一个新的<div>元素。还可以在创建时同时设置元素的属性和内容，如var newP = $('<p class="newPara">这是新创建的段落</p>');。
    • 添加元素到文档中：
      • append () 方法：将指定元素添加到所选元素的内部末尾。例如，$('body').append(newDiv)会将前面创建的newDiv添加到<body>标签内部的末尾。
      • prepend () 方法：与append()方法相反，将指定元素添加到所选元素的内部开头。例如，$('ul').prepend('<li>新的列表项</li>')会在<ul>元素内部的开头添加一个新的列表项。
      • after () 方法：在所选元素的后面添加新元素。例如，$('p:last').after('<p>这是添加在最后一个p后面的段落</p>')会在页面中最后一个<p>元素的后面添加一个新的<p>元素。
      • before () 方法：在所选元素的前面添加新元素。例如，$('img:first').before('<span>图片前的说明</span>')会在页面中第一个<img>元素的前面添加一个<span>元素。
    • 删除元素：
      • remove () 方法：用于移除所选元素及其所有子元素。例如，$('p').remove()会移除页面中所有的<p>元素。
      • empty () 方法：只移除所选元素内部的所有子元素，但保留该元素本身。例如，$('div').empty()会清空所有<div>元素内部的内容，但<div>标签依然存在于页面中。

（二）事件处理高级应用

事件处理是网页交互性的重要体现，jQuery 提供了简洁且强大的方式来处理各种事件。

  1. 常见事件绑定：
    • click () 方法：绑定点击事件。例如，当点击一个按钮时执行某些操作：
<button id="myButton">点击我</button>
<script>$('#myButton').click(function () {alert('按钮被点击了！');});
</script>
  • mouseenter () 和 mouseleave () 方法：mouseenter()方法绑定鼠标进入元素事件，mouseleave()方法绑定鼠标离开元素事件。例如，当鼠标进入一个<div>元素时改变其背景颜色，离开时恢复原来的颜色：
<div id="myDiv" style="width: 200px; height: 200px; background - color: lightgray;"></div>
<script>$('#myDiv').mouseenter(function () {$(this).css('background - color', 'yellow');}).mouseleave(function () {$(this).css('background - color', 'lightgray');});
</script>
  • submit () 方法：用于表单提交事件。例如，当用户提交一个表单时进行数据验证：
<form id="myForm"><input type="text" name="username" /><input type="submit" value="提交" />
</form>
<script>$('#myForm').submit(function () {var username = $('input[name="username"]').val();if (username === '') {alert('用户名不能为空');return false; // 阻止表单提交}return true;});
</script>
  1. 事件委托：事件委托是一种高效的事件处理方式，它利用事件冒泡的原理，将事件绑定到父元素上，通过判断事件源来处理子元素的事件。这样可以减少事件绑定的数量，提高性能，尤其是在处理动态生成的元素时非常有用。例如，有一个动态生成列表项的<ul>元素：
<ul id="myList"></ul>
<button id="addItem">添加列表项</button>
<script>$(document).ready(function () {$('#addItem').click(function () {$('#myList').append('<li>新的列表项</li>');});$('#myList').on('click', 'li', function () {$(this).remove();});});
</script>

在这个例子中，我们将点击事件委托给<ul>元素，当点击<ul>内部的任何<li>元素时，都会执行删除该<li>元素的操作，即使<li>元素是动态添加的也同样有效。如果不使用事件委托，为每个动态生成的<li>元素单独绑定点击事件会非常繁琐，且在性能上也会有较大损耗。

  1. 自定义事件：除了处理常见的 DOM 事件外，jQuery 还允许开发者自定义事件。通过$.Event()方法创建自定义事件对象，然后使用trigger()方法触发该事件。例如：
$(document).ready(function () {// 创建自定义事件var customEvent = $.Event('myCustomEvent');// 绑定自定义事件处理函数$(document).on('myCustomEvent', function () {alert('自定义事件被触发了！');});// 触发自定义事件$(document).trigger(customEvent);
});

自定义事件在一些复杂的交互场景中非常有用，比如在多个模块之间进行通信，当某个特定的业务逻辑完成时，触发自定义事件，其他相关模块可以监听并响应这个事件，从而实现更灵活的代码架构。

（三）动画与特效

jQuery 内置了丰富的动画和特效方法，能够轻松为网页增添生动有趣的交互效果，提升用户体验。

  1. 基本动画方法：
    • show () 和 hide () 方法：show()方法用于显示隐藏的元素，hide()方法用于隐藏显示的元素。可以指定动画执行的速度，如slow（慢速，约 600 毫秒）、fast（快速，约 200 毫秒）或具体的毫秒数。例如，有一个初始隐藏的<div>元素：
<div id="myDiv" style="display: none; width: 200px; height: 200px; background - color: blue;"></div>
<button id="showButton">显示</button>
<button id="hideButton">隐藏</button>
<script>$('#showButton').click(function () {$('#myDiv').show('slow');});$('#hideButton').click(function () {$('#myDiv').hide(300);});
</script>
  • toggle () 方法：toggle()方法可以在元素的显示与隐藏状态之间切换。例如，$('#myDiv').toggle('fast')，每次调用该方法，<div>元素的显示状态都会发生改变，如果当前是显示状态则隐藏，如果当前是隐藏状态则显示，且动画速度为快速。
  1. 淡入淡出动画：
    • fadeIn () 和 fadeOut () 方法：fadeIn()方法用于使元素淡入显示，fadeOut()方法用于使元素淡出隐藏。同样可以指定动画速度。例如，让一个图片淡入显示：
<img id="myImage" src="image.jpg" style="display: none;" />
<button id="fadeInButton">淡入图片</button>
<script>$('#fadeInButton').click(function () {$('#myImage').fadeIn('slow');});
</script>
  • fadeToggle () 方法：与toggle()方法类似，fadeToggle()方法用于在元素的淡入与淡出状态之间切换。例如，$('#myDiv').fadeToggle(500)会使<div>元素在淡入显示和淡出隐藏之间以 500 毫秒的速度切换。
  • fadeTo () 方法：fadeTo()方法可以将元素淡入或淡出到指定的不透明度。语法为$(selector).fadeTo(speed, opacity)，其中speed为动画速度，opacity为目标不透明度（取值范围为 0 - 1）。例如，将一个<div>元素淡入到不透明度为 0.5：
<div id="myDiv" style="width: 200px; height: 200px; background - color: green; opacity: 0;"></div>
<button id="fadeToButton">淡入到0.5</button>
<script>$('#fadeToButton').click(function () {$('#myDiv').fadeTo('slow', 0.5);});
</script>
    1. 滑动动画：
      • slideDown () 和 slideUp () 方法：slideDown()方法用于使元素以滑动的方式显示，slideUp()方法则让元素以滑动的方式隐藏。同样支持指定动画速度，例如：
    <div id="myContent" style="display: none; width: 300px; height: 200px; background-color: lightcoral;">这里是滑动显示的内容
</div>
<button id="slideDownBtn">滑下显示</button>
<button id="slideUpBtn">滑上隐藏</button>
<script>$('#slideDownBtn').click(function () {$('#myContent').slideDown('fast');});$('#slideUpBtn').click(function () {$('#myContent').slideUp(500);});
</script>
    • slideToggle () 方法：slideToggle()方法能够在元素的滑动显示和滑动隐藏之间切换，在实际应用中，常用于实现导航菜单的展开与收起效果。比如：
    <nav id="navMenu"><ul><li><a href="#">首页</a></li><li><a href="#">产品</a></li><li><a href="#">关于</a></li></ul>
</nav>
<button id="toggleBtn">切换菜单</button>
<script>$('#toggleBtn').click(function () {$('#navMenu').slideToggle('slow');});
</script>
    1. 自定义动画：除了上述预设的动画方法，animate()方法允许开发者创建高度定制化的动画效果。它通过指定 CSS 属性的变化来实现动画，语法为$(selector).animate({properties},duration,easing,callback)，其中properties是一个包含 CSS 属性和目标值的对象，duration为动画持续时间，easing指定动画的缓动效果（如swing、linear），callback是动画完成后执行的回调函数。例如，让一个元素在水平方向移动并改变大小和颜色：
    <div id="animateDiv" style="width: 100px; height: 100px; background-color: blue; position: relative;"></div>
<button id="animateBtn">开始动画</button>
<script>$('#animateBtn').click(function () {$('#animateDiv').animate({left: '300px',width: '200px',height: '200px',backgroundColor:'red'}, 1000,'swing', function () {console.log('动画完成');});});
</script>
    1. 动画队列：当对一个元素连续调用多个动画方法时，这些动画会按照调用顺序依次执行，形成动画队列。例如：
    <div id="queueDiv" style="width: 100px; height: 100px; background-color: green; position: relative;"></div>
<button id="queueBtn">启动动画队列</button>
<script>$('#queueBtn').click(function () {$('#queueDiv').animate({ left: '200px' }, 500).animate({ top: '200px' }, 500).animate({ width: '300px', height: '300px' }, 500);});
</script>

    在上述代码中，div元素会先水平移动，接着垂直移动，最后改变大小，依次完成三个动画。如果想要中断动画队列，可以使用stop()方法，$('#queueDiv').stop()会立即停止当前正在执行的动画，并清除队列中未执行的动画。

    （四）AJAX 交互

    AJAX（Asynchronous JavaScript and XML）即异步的 JavaScript 和 XML，它能够在不重新加载整个网页的情况下，与服务器进行数据交换和更新部分页面内容，极大地提升了用户体验。jQuery 对 AJAX 操作进行了高度封装，提供了一系列简洁易用的方法。

    1. \(.get()和\).post () 方法：
      • **\(.get()方法**：用于通过HTTP GET请求从服务器获取数据。语法为`\).get(url,data,success,dataType)，其中url是请求的地址，data是发送到服务器的数据（可选），success是请求成功后的回调函数，dataType指定返回数据的类型（如html、json、xml` 等）。例如，从服务器获取一个 JSON 格式的数据：
    $.get('data.json', function (data) {console.log(data);// 假设data是一个包含用户信息的JSON对象，可将其展示在页面上$('#userInfo').html(`姓名：${data.name}，年龄：${data.age}`);
}, 'json');
    • **\(.post()方法**：与`\).get()类似，但使用HTTP POST请求发送数据到服务器。语法为\(.post(url,data,success,dataType)`。在向服务器提交表单数据等场景中，`\).post ()` 方法更为常用，因为 POST 请求相对 GET 请求更安全，且能传输大量数据。例如：
    <form id="userForm"><input type="text" name="username" placeholder="用户名"><input type="password" name="password" placeholder="密码"><input type="submit" value="提交">
</form>
<script>$('#userForm').submit(function (e) {e.preventDefault();var formData = $(this).serialize();$.post('login.php', formData, function (response) {if (response.success) {alert('登录成功');} else {alert('登录失败：' + response.message);}}, 'json');});
</script>
    1. **\(.ajax()方法**：`\).ajax()是最底层、最强大的AJAX方法，它可以对AJAX请求进行全面的配置和控制。其语法格式为$.ajax({options})，其中options` 是一个包含众多参数的对象，常用参数如下：
      • url：请求的地址。
      • type：请求类型，如GET、POST、PUT、DELETE等。
      • data：发送到服务器的数据。
      • dataType：预期服务器返回的数据类型。
      • success：请求成功后的回调函数。
      • error：请求失败时的回调函数。
      • beforeSend：在请求发送之前执行的函数。
      • complete：请求完成后（无论成功或失败）执行的函数。 例如，使用$.ajax()方法实现一个文件上传功能：
    <form id="uploadForm" enctype="multipart/form-data"><input type="file" name="uploadFile"><input type="submit" value="上传">
</form>
<script>$('#uploadForm').submit(function (e) {e.preventDefault();var formData = new FormData(this);$.ajax({url: 'upload.php',type: 'POST',data: formData,processData: false,contentType: false,success: function (response) {alert('文件上传成功');},error: function (error) {alert('文件上传失败');}});});
</script>
    1. load () 方法：load()方法是一个简单的 AJAX 方法，它能够从服务器加载数据，并将返回的 HTML 内容直接插入到指定的元素中。语法为$(selector).load(url,data,callback)，例如：
    <div id="content"></div>
<button id="loadBtn">加载内容</button>
<script>$('#loadBtn').click(function () {$('#content').load('content.html', function () {console.log('内容加载完成');});});
</script>

    上述代码点击按钮后，会从content.html文件中加载内容，并将其插入到id为 “content” 的<div>元素中。

    三、学习资源推荐

    （一）官方文档

    jQuery 官方文档（jQuery API Documentation）是学习 jQuery 最权威、最全面的资料。它详细介绍了每个方法、属性和事件的用法，提供了丰富的示例代码，并且随着 jQuery 版本的更新不断完善。无论是查找某个特定功能的使用方式，还是深入理解框架的原理，官方文档都是不可或缺的参考。此外，官方文档还提供了在线测试环境，方便开发者即时验证代码效果，快速掌握知识。

    （二）在线学习平台

    1. W3School：提供了简洁易懂的 jQuery 教程，从基础语法到高级应用都有详细讲解，同时配备了大量的实例和在线练习，非常适合初学者快速入门。其界面简洁明了，知识点分类清晰，便于随时查阅和复习。
    2. 菜鸟教程：与 W3School 类似，菜鸟教程的 jQuery 教程同样注重基础知识的讲解，并且有丰富的案例和代码演示。网站还提供了移动端适配，方便开发者在手机、平板等设备上随时随地学习。
    3. Codecademy：以交互式学习模式著称，通过一步步引导用户编写代码并实时反馈结果，让学习者在实践中掌握 jQuery。对于那些希望通过实际操作加深理解的开发者来说，Codecademy 是一个不错的选择。

    （三）视频教程

    1. B 站：B 站上有众多优质的 jQuery 教学视频，涵盖了从入门到进阶的各个阶段。这些视频教程风格多样，有的注重理论讲解，有的侧重实战项目演示，并且可以通过弹幕与其他学习者交流互动，增加学习的趣味性和积极性。
    2. 慕课网：提供了许多由行业资深开发者制作的 jQuery 课程，课程内容不仅包含基础知识，还结合了实际项目案例，讲解深入浅出，适合有一定基础并希望进一步提升的开发者深入学习。
    http://www.xdnf.cn/news/342991.html

    相关文章：

  1. 数字电子技术基础（五十六）——JK触发器
  2. crawl4ai能替代scrapy等传统爬虫框架吗？
  3. windows 部署 Kafka3.x KRaft 模式 不依赖 ZooKeeper
  4. FPGA_Verilog实现QSPI驱动，完成FLASH程序固化
  5. 学习黑客 MAC 地址深入了解
  6. 解决社区录音应用横屏状态下,录音后无法播放的bug
  7. 信息学奥赛一本通 1511：【SCOI2011】糖果 | 洛谷 P3275 [SCOI2011] 糖果
  8. ProfiNet与CANopen：新能源时代的“语言翻译官”
  9. Kotlin与Java企业级开发实战：从零到一掌握最新语法与技术精髓
  10. Office宏病毒钓鱼-打点突破
  11. ROS2基本操作1
  12. js常用的数组遍历方式
  13. HypotMAX7705771077157720HIPOT美国ASSOCIATEDRESEARCH耐压测试仪
  14. 1分区 1-113 多线不起总线启
  15. 使用pytorch保存和加载预训练的模型方法
  16. Spring Boot 中 MongoDB @DBRef注解适用什么场景？
  17. 深入理解软件测试覆盖率：从概念到实践
  18. SpringBoot的自动配置和起步依赖原理
  19. Java 文件监听与热更新机制封装
  20. 【LeetCode 42】接雨水（单调栈、DP、双指针）
  21. 日拱一卒 | RNA-seq数据质控（1）
  22. ERC-20与ERC-721：区块链代币标准的双星解析
  23. Spring MVC 中Model, ModelMap, ModelAndView 之间有什么关系和区别？
  24. Spring AI Alibaba-04- Spring AI + RAG + ToolCalling 智能对话应用开发全流程
  25. # 如何使用 PyQt5 创建一个简单的警报器控制界面
  26. Linux基础(最常用基本命令)
  27. 用kompose将docker-compose文件转换为K8S资源清单
  28. WHAT - ahooks vs swr 请求
  29. Qt获取CPU使用率及内存占用大小
  30. 基于STM32、HAL库的CP2104 USB转UART收发器 驱动程序设计