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

关于什么是jQuery:(下面是菜鸟里的介绍)

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 很容易学习。

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

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

思维导图

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

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

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

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

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

二维表

DOM对象和jQuery对象

|----------|-------------------------------------------------------------------------------------------|--------------------------------------------------------------|
| | 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()

|------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------|
| | ().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()

|-----------------|-------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------|
| | $.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的区别

|------|----------------------------------------------------------------------------|----------------------------------------------------|
| | append() | appendTo() |
| 定义 | 向匹配元素集合中的每个元素结尾插入由参数指定的内容。 | 向目标结尾插入匹配元素集合中的每个元素。 |
| 定义 | 在被选元素的结尾(仍然在内部)插入指定内容。 两种方法执行的任务相同。 ||
| 语法 | $(selector).append(content); $(selector).append(function(index,html)); | $(content).appendto(selector); (不能使用函数来附加内容) |
| 接收参数 | 一个或多个DOM元素,元素数组,HTML字符串,或jQuery对象或者回调函数。 | 一个选择符,元素,HTML字符串,DOM元素数组,或者jQuery对象 |
| 适用场景 | 在现有元素内部添加内容 方便的链式操作 | 移动元素位置 分离内容与目标选择逻辑 |

其实这个的区别不太大,当时感觉有点分不清就做了这个二维表,他们两个最显著的区别就是前后的参数不一样,而我认为他们最大的区别就是后面那个不能使用函数来附加内容

其他的一些小问题

1.就像是arguments是和event?因为当时在写事件的东西时,就想到了arguments,因为event是浏览器自带的一个事件对象,而arguments同样也是函数内置的一个对象

2.关于隐藏元素时,display:none和visibility:hidden有什么区别?

前端 - 隐藏元素 display:none 与 visibility:hidden 的区别你真的知道吗? - eveningwater - SegmentFault 思否

关于这位大佬写的我觉得很好,赞赞赞

3.还有在link导入css时未成功,发现是样式表的问题,其中包括三种样式表

但是查的时候看见了一个表,我觉的很清晰,但是忘了从哪找的了

4.thead、tbody、tfoot和平常写的表格有什么区别?其实就是应用了前面这些东西,让表格的定义更加有顺序,因为正常的表格都是有表头,身体,脚这三个部分的

5.关于变量提升和函数提升的问题?这个大家可以自己去查一下,我觉得大部分的讲解都很清楚

6.还有就是一个在写事件时又发现了一个event对象中的which属性:里面包含的大多数的鼠标事件或者是键盘事件等等,都有对应的返回值,我觉得这个可能对写用户事件触发的时候有一些帮助,大家可以去了解一下

7.另外还有一些,比如说注解啊,插件的写法之类的

还有就是一些在写最后的实例时用到的一些琐碎的知识点就不详细说了

总结来说jQuery很像当时学JavaScript一样,所以我觉得如果JavaScript学的差不多那么jQuery应该也问题不大,毕竟时封装的一个库嘛

最后附赠一个今天验收的实例

其实目的主要是,这几个div随着浏览器的移动始终保持在一定的位置,并且每一个div都有她自己的显示和隐藏方式。

如果有想找我要代码的,随时可以私信噢,大概就写这么多了,白白啦

相关推荐
m0_748255023 分钟前
头歌答案--爬虫实战
java·前端·爬虫
noravinsc1 小时前
python md5加密
前端·javascript·python
ac-er88881 小时前
Yii框架优化Web应用程序性能
开发语言·前端·php
cafehaus2 小时前
抛弃node和vscode,如何用记事本开发出一个完整的vue前端项目
前端·vue.js·vscode
HoneyMoose2 小时前
可以自己部署的微博 Mastodon
前端
国产化创客3 小时前
物联网网关Web服务器--CGI开发实例BMI计算
服务器·前端·物联网·web网关
微光无限3 小时前
Vue3 中使用组合式API和依赖注入实现自定义公共方法
前端·javascript·vue.js
GISer_Jing3 小时前
React+AntDesign实现类似Chatgpt交互界面
前端·javascript·react.js·前端框架
智界工具库3 小时前
【探索前端技术之 React Three.js—— 简单的人脸动捕与 3D 模型表情同步应用】
前端·javascript·react.js
璇璇吴4 小时前
vue3 el-form表格滚动
javascript·vue3·elementplus