jQuery的系统性总结

前言

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）。