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

jQuery的系统性总结

article 2025/1/31 1:28:23

前言

        jQuery是一个快速、小型且功能丰富的 JavaScript 库（实际上就是一堆JS代码）。其目的在于：write less do more。

优点：

写得少做得多；兼容性；体积小；链式编程；隐式迭代、插件丰富（Bootstrap）、开源、免费。

jQueryAPI：

jQuery API Documentation

http://api.jquery.com

http://api.jquery.com/api

        在学习jQuery的时候，对比了一下jQuery与Ajax的代码，jQuery简化了HTML文档遍历、事件处理、动画和AJAX交互。jQuery对JavaScript进行了轻量级的封装，使得开发者可以更方便地使用JavaScript。jQuery对AJAX进行了封装，使得使用AJAX变得更加简单和直观。

JavaScript、Ajax、jQuery三者关系

1、JS是一门前端语言。

2、Ajax是一门技术，它提供了异步更新的机制，使用客户端与服务器间交换数据而非整个页面文档，实现页面的局部更新。

3、jQuery是一个框架，它对JS进行了封装，使其更方便使用。jQuery使得JS与Ajax的使用更方便

DOM对象和JQuery对象

DOM对象

jQuery对象

是什么

页面上的标签节点等，使用javascript的语法创建的对象叫做dom对象,也就是js对象.

将DOM封装后得到的jQuery对象（数组可以转化成jQuery对象吗？）

使用jquery语法表示对象叫做jquery对象

注意:jquery表示的对象都是数组.

语法

var obj = document.getElementById(“txt1”);

obj就是一个dom对象,也叫作js对象

var jobj = $("#txt1")

jobj就是使用jquery语法所表示的对象.也就是jquery对象.

是一个数组,数组中就一个值.

如何获取

document.getElement...()

获取页面上的元素，jQuery中多方法少属性，便于链式编程

$(选择器)

如何转换

DOM对象—>jQuery对象

如何变成很强的人，先有钱后有权，用钱砸

$(dom对象)

jQuery对象—>DOM对象

隐式迭代（不知道的时候循环了。jQuery可能是对象集合）

如果是一个对象：

jq对象[0]或jq对象.get(0)来获得DOM对象的jQuery对象

如果是多个对象：

jq对象.get(0) 得到DOM数组

var obj = $("#txt")[0]; or var obj = $("#txt").get(0);

为什么要进行dom对象和jquery的转换:目的是要使用对象的党发,或者方法。

dom对象可以使用dom对象的属性和方法,如果你想要使用jq提供的函数没必须是jq的对象才行。

第一版思维导图：

 第一版总结出jQuery的功能，地位，联系三类。其中选择器、事件处理、动画效果体现了jQuery代码的主要功能。

事件冒泡与事件委托

特性

事件冒泡

事件委托

定义

事件从子元素逐层向上传播到父元素的过程。

利用事件冒泡机制，将事件监听器绑定到父元素上。

作用对象

所有DOM元素（事件的传播过程）。

父元素（事件的捕获和处理）。

核心目的

事件传播机制，确保事件可以被多个层级捕获。

减少事件绑定数量，支持动态元素。

实现方式

自然发生的DOM行为，无需手动实现。

通过绑定事件监听器到父元素，并检查event.target。

区别

自然发生的DOM

手动利用事件冒泡实现优化

是否需要手动实现

不需要，浏览器自动处理。

需要开发者手动实现逻辑。

应用场景

处理多层嵌套元素的事件。

处理动态生成的元素事件，优化性能。

第二版思维导图：

 第二版思维导图，将功能进行抽象，分为表层的样式、属性、元素等一些操作，和体现其页面运动机制即选择器、动态效果与事件操作。

jQuery最重要的特点就是链式编程与隐式迭代，这些操作简化了css、html等代码。

有增加了其他的方法：jQuery拷贝、多库共存、Ajax交互操作。

显示迭代与隐式迭代

隐式迭代

显式迭代

迭代方式

自动完成，无需手动编写迭代代码

需要手动编写迭代逻辑（如.each()

或for循环）

代码简洁性

代码更简洁，减少冗余

代码冗余较多，需要显式迭代每个元素

灵活性

较低，适用于通用操作

较高，可以在迭代中执行复杂逻辑

链式调用

支持链式调用（返回jQuery对象）

不支持链式调用（返回值为undefined

或this）

适用场景

适用于对一组元素执行相同操作（如设置样式、绑定事件）

适用于需要对每个元素执行不同操作的复杂场景

性能

内部优化，性能较高

性能与隐式迭代相当，但代码执行逻辑更复杂时可能稍慢

内部实现

基于.each()

方法，但对开发者透明

使用.each()

方法或原生JavaScript的迭代方法

// 隐式迭代
$(".box").click(function() {
    console.log("Box clicked!");
});


// 显式迭代
$(".box").each(function(index, element) {
    if (index % 2 === 0) {
        $(element).css("color", "red");
    } else {
        $(element).css("color", "blue");
    }
});

map循环与each循环

map循环

each循环

是什么

map一个高阶函数，对数组中的每个元素执行一个提供的函数，返回一个新的数组，新数组的元素是原始数组元素调用函数后的结果

是用于遍历数组的方法，它对数组中的每个元素执行一个提供的函数，没有返回值（返回值undefined）

干什么

主要用于数据转换，将一个数组转换为另一个具有相同长度但元素经过某种变化的数组。2->2*2

重点在于对数组中的每个元素执行某种操作，如打印数组元素、更新元素的某些属性等，而不是生成一个新的数组。

返回值

会返回一个新的数组，新数组的长度与原数组相同。新数组的每个元素都是原数组对应元素经过映射函数处理后的结果。

不返回新的数组。它的返回值是undefined。其主要价值在于对数组元素逐个执行操作产生的副作用。

对原数组的影响

不改变原数组，生成新的数组

回调函数直接作用于原数组

终止条件

完整遍历数组，没有内置方法终止循环

可能会根据回调函数中的返回值或者其他条件来提前终止循环

性能

需要创建一个新的数组来存储结果，可能会占用更多的内存空间

不需要创建新的数组来存储结果

map函数与each函数

map函数

each函数

目的

在一定程度上都是用于对集合（如数组或对象）中的元素进行遍历操作。

使用

依赖回调函数来定义对每个元素的具体操作

返回值

对集合中的每个元素进行转换，并返回一个新的集合，新集合的长度通常和原集合相同（除非在回调函数中有过滤掉某些元素的操作，例如返回undefined）

通常不返回一个新的集合，它的主要目的是对集合中的每个元素执行某种操作，如打印、修改元素状态等，重点在于操作过程而不是生成新的集合。它一般返回undefined或者不返回任何有意义的值（除非在回调函数中有自定义的返回值，但这个返回值通常不是用于构建新的集合）。

控制遍历

不受回调函数内部逻辑的影响而中途停止遍历

可以根据回调函数的返回值来决定是否提前终止遍历。

应用场景

根据原始集合生成一个经过转换的新集合的场景

对集合中的每个元素执行副作用操作，如更新 DOM 元素、向服务器发送数据（每个元素对应一个请求）、打印调试信息等。

第三版思维导图

 在前几版的基础上进行抽象、调整。从总体上又分为常用的API、jQuery的事件、jQuery其他的方法。

类操作与className

类操作

className

实现方式

jQuery

原生JavaScript

方法

通过jQuery提供的方法

.addClass()、.removeClass()、.toggleClass()和.hasClass()

动态地添加、移除、切换或检查元素的CSS类

支持链式调用

用于访问和修改HTML元素class属性的属性。

直接获取或设置元素的class值。

如果需要检查类是否存在或动态添加/移除类，需要额外编写代码。

性能

基于原生JavaScript封装，性能略低

原生方法性能高

兼容性

内部处理兼容性问题

兼容性较好，但可能需要额外处理

使用场景

使用jQuery，动态操作类

简单获取或设置类名，对于更复杂的类操作，建议使用classList（如classList.add()、classList.remove()等），它提供了类似jQuery的功能，但性能更高。

var hasClass = $("#myElement").hasClass("class1");
$("#myElement").toggleClass("class1");
$("#myElement").addClass("class1 class2");
$("#myElement").removeClass("class1 class2");
// 获取类名
var classList = document.getElementById("myElement").className;
console.log(classList); // 输出元素的类名字符串
// 设置类名
document.getElementById("myElement").className = "class1 class2";
// 动态修改类名
var elem = document.getElementById("myElement");
elem.className += " class3"; // 添加新类
// className 是一个字符串，直接操作它可能会覆盖原有的类名
elem.className = "class1"; // 会移除原有类名，只保留"class1"

操作css方法

方法

功能描述

示例代码

返回值

.css()

获取或设置单个/多个CSS属性

$("#elem").css("color", "red");

<br>$("#elem").css({"color": "red", "font-size": "16px"});

返回值为undefined

获取单个CSS属性值

var color = $("#elem").css("color");

返回CSS属性值（字符串）

.addClass()

为元素添加一个或多个CSS类

$("#elem").addClass("class1 class2");

返回jQuery对象（链式调用）

.removeClass()

移除元素的一个或多个CSS类

$("#elem").removeClass("class1 class2");

<br>$("#elem").removeClass();

返回jQuery对象（链式调用）

.toggleClass()

切换元素的CSS类（存在则移除，不存在则添加）

$("#elem").toggleClass("class1 class2");

返回jQuery对象（链式调用）

.hasClass()

检查元素是否包含指定的CSS类

var hasClass = $("#elem").hasClass("class1");

返回布尔值

（true/false）

.attr()

设置或获取HTML属性（也可用于style属性）

$("#elem").attr("style", "color: red;");

<br>

var style = $("#elem").attr("style");

返回属性值

或undefined

.removeAttr()

移除HTML属性（也可移除style属性）

$("#elem").removeAttr("style");

返回jQuery对象（链式调用）

.prop()

设置或获取元素的属性值（较少用于样式操作）

$("#elem").prop("style", "color: blue;");

返回属性值或undefined

css()：

用于直接操作CSS样式，适合动态修改样式属性。

可以设置单个属性多个属性（通过对象形式）。

也可以用于获取单个属性的值。

addClass()、.removeClass()、.toggleClass()、.hasClass()：

这些方法主要用于操作CSS类，适合通过预定义的样式类动态改变元素的外观。

支持链式调用，方便与其他jQuery方法组合使用。

attr() 和 .removeAttr()：

主要用于操作HTML属性，但也可以通过style属性操作样式。

attr()可以设置或获取属性值，.removeAttr()用于移除属性。

prop()用于操作元素的属性值，功能与.attr()类似，但在某些情况下（如布尔属性）表现不同。较少用于样式操作，但可以用于动态设置style属性。

jQuery中的Ajax方法

jQuery AJAX是jQuery库提供的一种简化AJAX操作的工具。

使用$.ajax方法来发送Ajax请求。通过传递一个包含请求参数的对象，我们可以指定请求的URL、类型、数据类型以及成功和失败的处理函数。在成功回调函数中，我们可以处理服务器返回的数据。

load（）

$.get()

$.post()

干什么

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

$.get() 方法通过 HTTP GET 请求从服务器上请求数据。

$.post() 方法通过 HTTP POST 请求向服务器提交数据。

语法·

$(selector).load(URL,data,callback);

$.get(URL,callback);

或

$.get( URL [, data ] [, callback ] [, dataType ] )

$.post(URL,callback);

或

$.post( URL [, data ] [, callback ] [, dataType ] )

参数

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

URL：发送请求的 URL字符串。

data：可选的，发送给服务器的字符串或 key/value 键值对。

callback：可选的，请求成功后执行的回调函数。

dataType：可选的，从服务器返回的数据类型。默认：智能猜测（可以是xml, json, script, 或 html）。

URL：发送请求的 URL字符串。

data：可选的，发送给服务器的字符串或 key/value 键值对。

callback：可选的，请求成功后执行的回调函数。

dataType：可选的，从服务器返回的数据类型。默认：智能猜测（可以是xml, json, script, 或 html）。

原生JavaScript AJAX与jQuery AJAX的用法比较-百度开发者中心 (baidu.com)

 

总结

        通过jQuery的验收，纪老师向我们传达了很多的信息，我们学习代码与理论真正要把握的是他们的本质，从看得懂，到技术的发展起源与进化。在学习的角度上，还是以人的角度去思考问题，包括遇到的jQuery引用的位置，head和body都有哪些内容，为什么？我们致力于做一名designer。

        全局观+带着问题去学习，不怕不知道就怕不知道，如何能够把枯燥的知识看得进去，就涉及到学习的步骤，即三遍读书法。前几天搜到的一个介于舒适区与未知领域的，有一部分叫做甜头区域，为什么会觉得难，是因为很多背景知识不理解，理解了背景知识，学起来也就不难了。

        又学到了一个新典故，“小鸡吃石子”，小鸡吃石子，对于个人成长而言，需要自食其力，掌握生存本领。对于教育体制而言，摆脱养殖场，掌握养殖场想要控制的变量，或者根据变量要求锻炼、发展自己。


http://www.kler.cn/a/525335.html

相关文章：

  • 生成模型：扩散模型（DDPM, DDIM, 条件生成）
  • FortiOS 存在身份验证绕过导致命令执行漏洞(CVE-2024-55591)
  • 网络工程师 （7）进程管理
  • CTF从入门到精通
  • Java 大视界 -- Java 大数据在生物信息学中的应用与挑战（67）
  • 使用Redis生成全局唯一ID示例
  • 梯度提升用于高效的分类与回归
  • 55. 常用UDP端口号及其功能
  • lanqiaoOJ 2145：求阶乘 ← 二分法
  • 10.6.1 文本文件读、写和追加
  • Vue.js组件开发-使用Vue3如何实现上传word作为打印模版
  • webAPI -DOM 相关知识点总结（非常细）
  • 常用符号的英语表达
  • MATLAB提供的颜色映射表colormap——伪彩色
  • ES2021+新特性、常用函数
  • 【Qt】06－对话框
  • 人口增长（信息学奥赛一本通-1070）
  • sudoers文件修改格式错误恢复
  • 《机器学习数学基础》补充资料：贝叶斯分类器
  • R语言统计分析——ggplot2绘图3——分组
  • 18.Word：数据库培训课程❗【34】
  • 无心剑七绝《经纬岁华》
  • llama.cpp LLM_ARCH_DEEPSEEK and LLM_ARCH_DEEPSEEK2
  • Tailwind CSS - Tailwind CSS 引入（安装、初始化、配置、引入、构建、使用 Tailwind CSS）
  • DeepSeek-R1：通过强化学习激励大型语言模型（LLMs）的推理能力
  • 代码随想录算法训练营第34天| 动态规划：01背包理论基础（二维和一维）、416. 分割等和子集