我的第一个jQuery项目:制作个人档案

47 阅读2分钟

源码我搞到gitee中了,明明我在VScode里运行是正常的,可是开源在那里不知道为什么会报错,我对于这个的操作与制作还有一点欠缺,十分抱歉,如果有相关建议,请批评指正。这是我的链接 code.juejin.cn/api/raw/757…

Snipaste_2025-11-19_08-58-04.png

学习背景

我觉得仅用JavaScript有点复杂,于是学习了jQuery相关内容

学习清单

jquery的安装

Snipaste_2025-11-19_09-15-27.png

jquery修改内容

Snipaste_2025-11-19_09-17-06.png

修改样式

Snipaste_2025-11-19_09-17-54.png

修改属性

Snipaste_2025-11-19_09-18-41.png

jquery选择器

Snipaste_2025-11-19_09-19-10.png

链式操作

Snipaste_2025-11-19_09-21-01.png

jquery事件

Snipaste_2025-11-19_09-21-51.png

jquery操作节点

Snipaste_2025-11-19_09-22-29.png 不难发现,在里面都有jquery与JavaScript的对比,可见jQuery更简便一点,但是要注意,要提前安装jQuery文件,否则检查就会报错“$ is not defined”

项目实战

制作个人档案,点击图片就可以形成图片切换,将其分为四个部分,利用CSS与HTML知识将图片与文字定位好之后, 在安装了jQuery的基础上,由于是三个图片(多个图片也可以完成),点击图片时,图片要展现一个缓慢切换的效果,因此,要有一个transition:all 1s的过渡效果最佳。 而对于三张照片,可以先设置index=0,0是索引,代表第一个元素,先搞index++,在jQuery中,搞一个index除以3的余数,余数为0就是第一个图片在上,图片顺序为1,2,3;若余数为2,则顺序为2,3,1;若余数为2,则顺序为3,1,2。 源码已经开源,实现这个效果:

Snipaste_2025-11-19_09-52-13.png

下期我会学习的内容

Python的基础语法及相关项目

我的收获

通过前端基础的学习,我学会了制作网页,至少也感受到生活的很多地方离不开前端,今后我也会继续努力的。