jQuery 初学者入门教程

淡淡的烟草味﹌ 2023-10-07 18:14 9阅读 0赞

jQuery 是什么，它能为我们做什么？如果你是一名 Web 开发人员，写过 JavaScript 程序，那么你很可能正在使用 jQuery，即使没有试用过，至少也听说过，事实上 jQuery 可以说是现阶段最流行的 JavaScript 库。据有关部门统计，全球网站上面，约有 28% 的网站在使用 jQuery，这个数字可能有些夸张，但足见 jQuery 受欢迎的程度。本文仅对 jQuery 的使用方法作简单介绍，且作为一个入门教程吧。

**jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。**

![在这里插入图片描述][watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5piv5LiA5Y-q6JCo5pGp6IC2_size_20_color_FFFFFF_t_70_g_se_x_16]  
jQuery的使用十分简单，只需引入 jQuery 文件就可以执行下一步操作。下面来看三种jQuery基本使用方法。

**jQuery 的入口函数**  
·  
jQuery加载DOM函数有以下两种方法:  
![在这里插入图片描述][8fd4275bfd7640488f2d759324c510b1.png]

1.等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。

2.相当于原生 js 中的 DOMContentLoaded。

3.不同于原生 js 中的 load 事件是等页面文档、外部的 js 文件、css文件、图片加载完毕才执行内部代码。

4.更推荐使用第一种方式。

**jQuery 的顶级对象 $**

1.$ 是 jQuery 的别称，在代码中可以使用 jQuery 代替 $，但一般为了方便，通常都直接使用 $ 。

2.$ 是jQuery 的顶级对象， 相当于原生JavaScript中的 window。把元素利用$包装成jQuery对象，就可以调用jQuery 的方法。

DOM 对象与 jQuery 对象之间是可以相互转换的

因为原生js 比 jQuery 更大，原生的一些属性和方法 jQuery没有给我们封装. 要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

**1.DOM 对象转换为 jQuery 对象： $(DOM对象)**  
![在这里插入图片描述][3440a5c250d342f29535db4349a84489.png]  
2. jQuery 对象转换为 DOM 对象(两种方式)  
![在这里插入图片描述][d0214e20c5384747be6074f95b01af0e.png]

[**web前端基础教程\_4天从零玩转jQuery**][web_4_jQuery]

[**前端基础必备教程|jQuery网页开发案例精讲**][jQuery]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA5piv5LiA5Y-q6JCo5pGp6IC2_size_20_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/584f657e01b74ac8912d5f3ef7351cd1.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5piv5LiA5Y-q6JCo5pGp6IC2,size_20,color_FFFFFF,t_70,g_se,x_16
[8fd4275bfd7640488f2d759324c510b1.png]: https://img-blog.csdnimg.cn/8fd4275bfd7640488f2d759324c510b1.png
[3440a5c250d342f29535db4349a84489.png]: https://img-blog.csdnimg.cn/3440a5c250d342f29535db4349a84489.png
[d0214e20c5384747be6074f95b01af0e.png]: https://img-blog.csdnimg.cn/d0214e20c5384747be6074f95b01af0e.png
[web_4_jQuery]: https://www.bilibili.com/video/BV1pt411H7D6?spm_id_from=333.999.0.0
[jQuery]: https://www.bilibili.com/video/BV1a4411w7Gx?spm_id_from=333.999.0.0