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

关于什么是jQuery：（下面是菜鸟里的介绍）

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 很容易学习。

而jQuery对我的感受就是，链式运用的很形象，隐式迭代还有一些兼容性强的优点，由于上面说了jQuery是JavaScript的一个库，因此jQuery相对js来说，书写会更简单。因此jQuery可以更简单的操作DOM树。

下面来看一看我的jQuery总结吧，主要是一些思维导图和二维表，还有一些我练习时出现的问题

这里是大多数内容的总结，这是第一版

上面这是第二版，专门挑出事件的原因是，其实jQuery的使用大多是要写一些可以让静态页面动起来的代码，而这些情况下，事件的使用尤为重要。

第三版也是目前的最新版，基础内容中一些语法就像是$符号的使用或者是jQuery中的each，map等循环都包含在的其中，优势的话就是上面提到的一些兼容性，使用简洁等等，而特征就是最明显的链式调用了

第二个分支中的DOM操作，也算是一些函数的使用吧，包括属性样式内容的操作，而第一版的选择器，过滤器，还有我后来了解到的筛选器也都包含到了内容操作里，因为这些的使用其实就是为了筛选出自己想要的内容。

第三个分支，还是最重要的事件了，而事件的开始到结束大概就包含这三个步骤，事件捕获，然后监听，然后就是操作或委派等

	DOM 对象	jQuery 对象
实质	文档对象模型是 web 上构成文档结构和内容的对象的数据表示。	通过 jQuery 函数对 DOM 对象进行包装后得到的对象，本质是包含零个或多个 DOM 对象的集合
方法和属性	属性如 `innerHTML、style、tagName` 等，方法如 `appendChild、removeChild、getAttribute、setAttribute` 等	属性如 `length`，方法如 `text ()、css ()、hide ()、show ()、click ()` 等
使用场景和便捷性	适用于底层、性能要求极高或需紧密结合浏览器原生功能场景。用于直接对网页文档的结构和内容进行操作，如动态加载内容、修改页面布局等	适用于快速开发、简化常见 DOM 操作和事件处理场景，语法简洁，可链式调用，减少代码量
兼容性和性能	几乎所有现代浏览器支持，部分旧版本可能不支持高级 DOM 特性，操作不当易引发重排重绘影响性能	处理了浏览器兼容性问题，在多数浏览器可用，内部对 DOM 操作有优化，简单操作时可能稍慢于直接用 DOM 对象

我认为在学习jQuery时，最主要的就是要区分好jQuery对象和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对象
适用场景	在现有元素内部添加内容方便的链式操作	移动元素位置分离内容与目标选择逻辑