jQuery基础教程：零基础学习

2025-1-21

jQuery 基础教程：零基础学习

在当今的 Web 开发领域，JavaScript 已经成为构建动态和交互式网页不可或缺的一部分。然而，直接使用原生 JavaScript 进行开发，往往会面临浏览器兼容性问题、代码冗长繁琐等挑战。为了简化 JavaScript 开发，jQuery 应运而生。

jQuery 是一个快速、简洁、特性丰富的 JavaScript 库，它封装了大量常用的 JavaScript 操作，提供了易于使用的 API，极大地简化了 HTML 文档遍历、事件处理、动画制作和 Ajax 交互等操作。凭借其“Write Less, Do More” 的理念，jQuery 迅速赢得了广大开发者的青睐，成为 Web 开发中最受欢迎的 JavaScript 库之一。

本教程将带领你从零开始学习 jQuery，无需任何 JavaScript 基础，我们将一步步深入浅出地讲解 jQuery 的核心概念和常用方法，帮助你快速掌握 jQuery 的使用，并将其应用于实际的 Web 开发项目中。

一、 什么是 jQuery？

简单来说，jQuery 就是一个 JavaScript 文件，里面包含了一系列预先编写好的 JavaScript 函数和对象，这些函数和对象可以帮助我们更轻松地操作网页元素、处理用户交互、创建动画效果以及进行异步数据交互。

jQuery 的优势：

  • 跨浏览器兼容性： jQuery 解决了不同浏览器之间 JavaScript 实现的差异，让你的代码能够在各种主流浏览器中一致地运行。
  • 简洁的语法： jQuery 提供了简洁易懂的语法，可以用更少的代码实现更复杂的功能。
  • 强大的选择器： jQuery 提供了强大的选择器机制，可以轻松地选取 HTML 文档中的任何元素。
  • 丰富的插件： jQuery 拥有庞大的插件生态系统，可以轻松扩展其功能，满足各种开发需求。
  • 完善的文档： jQuery 拥有详细的官方文档和丰富的社区资源，方便学习和解决问题。

二、 如何引入 jQuery？

使用 jQuery 非常简单，只需要将 jQuery 库文件引入到你的 HTML 文档中即可。你可以选择以下两种方式引入 jQuery：

1. 本地引入：

  • 首先，你需要从 jQuery 官网（https://jquery.com/）下载 jQuery 库文件。通常情况下，我们会选择下载压缩版（Minified）的 jQuery 文件，因为它的体积更小，加载速度更快。
  • 下载完成后，将 jQuery 文件保存到你的项目文件夹中，例如 js/jquery.min.js。
  • 然后，在你的 HTML 文档的 <head> 标签或 <body> 标签的底部，使用 <script> 标签引入 jQuery 文件：

```html




jQuery 基础教程




```

2. CDN 引入：

CDN（Content Delivery Network，内容分发网络）是一种分布式网络架构，可以更快地将静态资源（如 JavaScript 文件）分发给用户。使用 CDN 引入 jQuery，可以加快页面加载速度，并减轻你的服务器的负担。

常用的 jQuery CDN 有：

  • Google CDN：
    html
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  • Microsoft CDN：
    html
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.6.4.min.js"></script>
  • cdnjs：
    html
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
  • jsDelivr：
    html
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>
  • Staticfile：
    html
    <script src="https://cdn.staticfile.org/jquery/3.6.4/jquery.min.js"></script>

选择其中一个 CDN 地址，将其添加到你的 HTML 文档的 <script> 标签中即可：

```html




jQuery 基础教程



```

三、 jQuery 的基本语法

jQuery 的核心思想是 “选择元素，然后对其执行操作”。

1. 选择器（Selectors）：

jQuery 选择器用于选取 HTML 文档中的元素。它们类似于 CSS 选择器，可以根据元素的标签名、ID、类名、属性等条件来选取元素。

  • 基本选择器：

    • $("*")：选取所有元素。
    • $("#myId")：选取 ID 为 myId 的元素。
    • $(".myClass")：选取所有类名为 myClass 的元素。
    • $("p")：选取所有 <p> 元素。
    • $("div, p, span"): 选取所有 <div>、<p> 和 <span> 元素。

  • 层级选择器：

    • $("div p")：选取所有 <div> 元素内部的 <p> 元素（后代元素）。
    • $("div > p")：选取所有 <div> 元素下的直接子元素 <p> 元素。
    • $("div + p")：选取所有紧邻在 <div> 元素后的 <p> 元素（下一个兄弟元素）。
    • $("div ~ p")：选取所有 <div> 元素之后的同级 <p> 元素（所有跟随的兄弟元素）。

  • 属性选择器：

    • $("[href]")：选取所有带有 href 属性的元素。
    • $("a[target='_blank']")：选取所有 target 属性值为 _blank 的 <a> 元素。
    • $("input[type='text']")：选取所有 type 属性值为 text 的 <input> 元素。

  • 表单选择器：

    • $(":input")：选取所有表单元素，如 <input>、<textarea>、<select>、<button>。
    • $(":text")：选取所有 type="text" 的 <input> 元素。
    • $(":password")：选取所有 type="password" 的 <input> 元素。
    • $(":radio")：选取所有 type="radio" 的 <input> 元素。
    • $(":checkbox")：选取所有 type="checkbox" 的 <input> 元素。
    • $(":submit")：选取所有 type="submit" 的 <input> 或 <button> 元素。
    • $(":reset")：选取所有 type="reset" 的 <input> 或 <button> 元素。
    • $(":button")：选取所有 type="button" 的 <input> 或 <button> 元素。
    • $(":file")：选取所有 type="file" 的 <input> 元素。

2. $() 函数：

$() 函数是 jQuery 的核心函数，它主要有两个作用：

  • 选择元素： 当你向 $() 函数传递一个选择器字符串时，它会返回一个包含匹配元素的 jQuery 对象。例如：

    javascript
    let myParagraphs = $("p"); // 选择所有 <p> 元素
    let myDiv = $("#myDiv"); // 选择 ID 为 myDiv 的元素

  • 创建 HTML 元素： 当你向 $() 函数传递一个 HTML 字符串时，它会创建相应的 HTML 元素，并返回一个包含这些元素的 jQuery 对象。例如：

    javascript
    let newParagraph = $("<p>这是一个新的段落。</p>");
    let newDiv = $("<div><p>这是一个新的 div。</p></div>");

3. 方法（Methods）：

jQuery 提供了大量的方法，用于操作选取的元素。这些方法可以链式调用，使代码更加简洁高效。

四、 常用的 jQuery 方法

接下来，我们将介绍一些常用的 jQuery 方法，并结合示例代码进行说明。

1. 操作 HTML 内容：

  • text()：获取或设置元素的文本内容。

    ```javascript
    // 获取 ID 为 myDiv 的元素的文本内容
    let divText = $("#myDiv").text();
    console.log(divText);

    // 设置 ID 为 myDiv 的元素的文本内容
    $("#myDiv").text("这是新的文本内容。");
    ```

  • html()：获取或设置元素的 HTML 内容。

    ```javascript
    // 获取 ID 为 myDiv 的元素的 HTML 内容
    let divHtml = $("#myDiv").html();
    console.log(divHtml);

    // 设置 ID 为 myDiv 的元素的 HTML 内容
    $("#myDiv").html("

    这是一个新的段落。

    ");
    ```

  • val()：获取或设置表单元素的值。

    ```javascript
    // 获取 ID 为 myInput 的输入框的值
    let inputValue = $("#myInput").val();
    console.log(inputValue);

    // 设置 ID 为 myInput 的输入框的值
    $("#myInput").val("新的输入值");
    ```

2. 操作 CSS 样式：

  • css()：获取或设置元素的 CSS 样式。

    ```javascript
    // 获取 ID 为 myDiv 的元素的背景颜色
    let backgroundColor = $("#myDiv").css("background-color");
    console.log(backgroundColor);

    // 设置 ID 为 myDiv 的元素的背景颜色和字体大小
    $("#myDiv").css({
    "background-color": "red",
    "font-size": "16px"
    });
    ```

3. 操作属性：

  • attr()：获取或设置元素的属性值。

    ```javascript
    // 获取 ID 为 myImage 的图片的 src 属性值
    let imgSrc = $("#myImage").attr("src");
    console.log(imgSrc);

    // 设置 ID 为 myLink 的链接的 href 属性值
    $("#myLink").attr("href", "https://www.example.com");
    ```

  • removeAttr()：移除元素的属性。

    javascript
    // 移除 ID 为 myLink 的链接的 target 属性
    $("#myLink").removeAttr("target");

  • prop()：获取或设置元素的属性值，通常用于处理布尔属性，如 checked、selected、disabled。
    ```javascript
    // 获取复选框是否被选中
    let isChecked = $("#myCheckbox").prop("checked");

    // 设置复选框为选中状态
    $("#myCheckbox").prop("checked", true);
    * `removeProp()`：移除元素的属性。javascript
    // 移除复选框的 checked 属性
    $("#myCheckbox").removeProp("checked");
    ```

4. 添加和删除元素：

  • append()：在元素的末尾添加内容。

    javascript
    // 在 ID 为 myDiv 的元素的末尾添加一个新的段落
    $("#myDiv").append("<p>这是追加的段落。</p>");

  • prepend()：在元素的开头添加内容。

    javascript
    // 在 ID 为 myDiv 的元素的开头添加一个新的段落
    $("#myDiv").prepend("<p>这是前置的段落。</p>");

  • after()：在元素之后插入内容。

    javascript
    // 在 ID 为 myParagraph 的段落之后插入一个新的段落
    $("#myParagraph").after("<p>这是插入的段落。</p>");

  • before()：在元素之前插入内容。

    javascript
    // 在 ID 为 myParagraph 的段落之前插入一个新的段落
    $("#myParagraph").before("<p>这是插入的段落。</p>");

  • remove()：删除元素。

    javascript
    // 删除 ID 为 myParagraph 的段落
    $("#myParagraph").remove();

  • empty()：清空元素的内容。

    javascript
    // 清空 ID 为 myDiv 的元素的内容
    $("#myDiv").empty();

5. 事件处理：

  • on()：绑定事件处理函数。

    ```javascript
    // 当点击 ID 为 myButton 的按钮时，弹出一个警告框
    $("#myButton").on("click", function() {
    alert("按钮被点击了！");
    });

    // 绑定多个事件
    $("button").on({
    mouseenter: function(){
    $(this).css("background-color", "lightgray");
    },
    mouseleave: function(){
    $(this).css("background-color", "lightblue");
    },
    click: function(){
    $(this).css("background-color", "yellow");
    }
    });
    ```

  • off()：解绑事件处理函数。

    javascript
    // 解绑 ID 为 myButton 的按钮的 click 事件
    $("#myButton").off("click");

6. 动画效果：

  • show()：显示元素。
    javascript
    $("#myDiv").show(); // 立即显示
    $("#myDiv").show(1000); // 在 1 秒内逐渐显示
  • hide()：隐藏元素。
    javascript
    $("#myDiv").hide(); // 立即隐藏
    $("#myDiv").hide("slow"); // 缓慢隐藏
    $("#myDiv").hide(2000); // 在 2 秒内逐渐隐藏
  • toggle()：切换元素的显示和隐藏状态。
    javascript
    $("#myDiv").toggle(); // 如果元素是显示的，则隐藏它；如果是隐藏的，则显示它
    $("#myDiv").toggle(500); // 以 0.5 秒的过渡效果切换显示和隐藏
  • fadeIn()：淡入元素。
    javascript
    $("#myDiv").fadeIn(); // 立即淡入
    $("#myDiv").fadeIn("fast"); // 快速淡入
    $("#myDiv").fadeIn(3000); // 在 3 秒内逐渐淡入
  • fadeOut()：淡出元素。
    javascript
    $("#myDiv").fadeOut(); // 立即淡出
    $("#myDiv").fadeOut(1500); // 在 1.5 秒内逐渐淡出
  • fadeToggle()：切换元素的淡入和淡出状态。
    javascript
    $("#myDiv").fadeToggle(); // 如果元素是显示的，则淡出它；如果是隐藏的，则淡入它
  • slideUp()：向上滑动隐藏元素。
    javascript
    $("#myDiv").slideUp(); // 立即向上收起隐藏
    $("#myDiv").slideUp("slow"); // 缓慢向上收起隐藏
  • slideDown()：向下滑动显示元素。
    javascript
    $("#myDiv").slideDown(); // 立即向下滑动显示
    $("#myDiv").slideDown(2500); // 在 2.5 秒内向下滑动显示
  • slideToggle()：切换元素的向上滑动和向下滑动状态。
    javascript
    $("#myDiv").slideToggle(); // 如果元素是显示的，则向上滑动隐藏它；如果是隐藏的，则向下滑动显示它

  • animate()：创建自定义动画效果。

    javascript
    // 在 1 秒内将 ID 为 myDiv 的元素的宽度变为 300px，高度变为 200px，透明度变为 0.5
    $("#myDiv").animate({
    width: "300px",
    height: "200px",
    opacity: 0.5
    }, 1000);

7. 工具方法:

  • $.trim()：去除字符串两端的空白字符。
    javascript
    let str = " Hello World! ";
    let trimmedStr = $.trim(str);
    console.log(trimmedStr); // 输出 "Hello World!"
  • $.isArray()：判断一个对象是否为数组。
    javascript
    let arr = [1, 2, 3];
    let isArr = $.isArray(arr);
    console.log(isArr); // 输出 true
  • $.isFunction()：判断一个对象是否为函数。
    javascript
    function myFunction() {}
    let isFunc = $.isFunction(myFunction);
    console.log(isFunc); // 输出 true

  • $.each()：遍历数组或对象。
    ```javascript
    // 遍历数组
    let arr = ["apple", "banana", "orange"];
    $.each(arr, function(index, value) {
    console.log("Index: " + index + ", Value: " + value);
    });

    // 遍历对象
    let obj = {name: "John", age: 30, city: "New York"};
    $.each(obj, function(key, value) {
    console.log("Key: " + key + ", Value: " + value);
    });
    ```

五、 文档就绪函数

为了确保 jQuery 代码在 HTML 文档加载完成后再执行，我们需要将代码包裹在文档就绪函数中。

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

简写形式：

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

六、 示例：创建一个简单的待办事项列表

以下是一个简单的待办事项列表示例，演示了如何使用 jQuery 创建交互式网页应用：

```html




待办事项列表


待办事项列表




    ```

    在这个示例中，我们使用了 jQuery 的以下功能：

    • $(function() { ... });：文档就绪函数。
    • $("#addBtn").on("click", function() { ... });：给“添加”按钮绑定点击事件。
    • $("#newTodo").val();：获取输入框的值。
    • $("#todoList").append("<li>" + newTodoText + "</li>");：向待办事项列表中添加新的列表项。
    • $("#newTodo").val("");：清空输入框。
    • $("#todoList").on("click", "li", function() { ... });：给列表项绑定点击事件，使用事件委托。
    • $(this).toggleClass("completed");：切换列表项的 completed 类，实现划线效果。

    七、 总结

    本教程介绍了 jQuery 的基础知识，包括 jQuery 的概念、优势、引入方式、基本语法以及常用方法。通过学习本教程，你应该已经对 jQuery 有了一个初步的了解，并能够使用 jQuery 编写简单的 JavaScript 代码来操作网页元素、处理事件、创建动画效果等。

    jQuery 是一个非常强大的 JavaScript 库，它极大地简化了 Web 开发的复杂性。然而，jQuery 只是 Web 开发的众多工具之一。随着 Web 技术的不断发展，新的框架和库层出不穷。建议你在掌握 jQuery 的基础上，继续学习其他的 JavaScript 框架和库，例如 React、Vue、Angular 等，以及现代的 JavaScript 语法（ES6+），以不断提升自己的 Web 开发技能。

    希望本教程能够帮助你入门 jQuery，开启你的 Web 开发之旅！记住，实践是最好的老师，多动手编写代码，才能更好地掌握 jQuery 的应用。加油！

    版权声明：
    作者：admin
    链接：https://hostlocvps.com/2025/01/21/jquery%e5%9f%ba%e7%a1%80%e6%95%99%e7%a8%8b%ef%bc%9a%e9%9b%b6%e5%9f%ba%e7%a1%80%e5%ad%a6%e4%b9%a0/
    文章版权归作者所有，未经允许请勿转载。
    THE END
    OpenCV图像处理：resize函数的原理与应用
    <<上一篇
    探索Z-Library(Zlib)：Reddit社区的力量
    下一篇>>
    相关推荐
    jQuery基础教程：零基础学习