jQuery总结(思维导图 二维表 问题)

DOM 对象

jQuery 对象

实质

文档对象模型是 web 上构成文档结构和内容的对象的数据表示。

通过 jQuery 函数对 DOM 对象进行包装后得到的对象，本质是包含零个或多个 DOM 对象的集合

方法和属性

属性如 innerHTML、style、tagName 等，方法如 appendChild、removeChild、getAttribute、setAttribute 等

属性如 length，方法如 text ()、css ()、hide ()、show ()、click () 等

使用场景和便捷性

适用于底层、性能要求极高或需紧密结合浏览器原生功能场景。用于直接对网页文档的结构和内容进行操作，如动态加载内容、修改页面布局等

适用于快速开发、简化常见 DOM 操作和事件处理场景，语法简洁，可链式调用，减少代码量

兼容性和性能

几乎所有现代浏览器支持，部分旧版本可能不支持高级 DOM 特性，操作不当易引发重排重绘影响性能

处理了浏览器兼容性问题，在多数浏览器可用，内部对 DOM 操作有优化，简单操作时可能稍慢于直接用 DOM 对象

$().each()

$.each()

forEach()

所属库

jQuery（用于 jQuery 对象）

jQuery（用于数组和对象）

JavaScript 原生（用于数组）

语法

对于数组：$.each(array, function(index, currentValue) {... });

，对于对象：$.each(object, function(key, value) {... });

array.forEach(function(currentValue, index, array) {... });

作用对象

主要用于遍历 jQuery 对象（DOM 元素集合）

可以遍历数组和对象

仅用于遍历数组???/对象？？看情况（再说吧）

返回值

返回 jQuery 对象本身，允许链式调用

返回被遍历的原始对象（数组或对象）

无返回值（为undefined），主要用于对数组元素执行操作

使用场景

在操作 DOM 元素集合

例如对一组<div>元素进行样式修改、事件绑定等操作时使用

用于遍历和操作JavaScript 数组或对象

在纯 JavaScript 代码中遍历数组，执行例如打印元素、修改元素属性等操作

$.each()

$.map()

默认返回值

当前遍历的数组值（之前的）

返回空数组（新创建的）

主要使用对象

主要用于遍历jquery对象。

主要用来遍历操作数组和对象

在回调函数中return新的值

不支持

支持

使用方式

$.each(array/object,function(index/key,value){ code })。

index指遍历对象成员的索引，value指成员的内容。如果需要退出循环可使回调函数返回 false，其它返回值将被忽略。

$.map(array/object,function(value,index/key){ code })，

index指遍历对象成员的索引，value指成员的内容。如果需要退出循环可使回调函数返回 false，其它返回值将被忽略。

共同点

不支持对在回调函数中对当前正在遍历的数组值进行修改

append()

appendTo()

定义

向匹配元素集合中的每个元素结尾插入由参数指定的内容。

向目标结尾插入匹配元素集合中的每个元素。

在被选元素的结尾（仍然在内部）插入指定内容。 两种方法执行的任务相同。

语法

$(selector).append(content);

$(selector).append(function(index,html));

$(content).appendto(selector);

（不能使用函数来附加内容）

接收参数

一个或多个DOM元素，元素数组，HTML字符串，或jQuery对象或者回调函数。

一个选择符，元素，HTML字符串，DOM元素数组，或者jQuery对象

适用场景

在现有元素内部添加内容
方便的链式操作

移动元素位置
分离内容与目标选择逻辑