JQueryDOM操作调用

逃离我推掉我的手 2024-04-18 11:06 74阅读 0赞

**1.什么是 JQuery？**  
\- js的脚本库  
**2.JQuery的作用有哪些？**  
\- 可以简便的实现jsDOM遍历，事件处理，动画，ajax等操作  
**3.JQuery的优势是什么？**  
\- 1.尺寸小，2.支持CSS3选择器，3.可以实现跨浏览器（但是需要注意的是：在引入JQuery后，全全局域会添加变量：$ ,(或者是：JQuery)）  
**4.调用 : $()**  
\-它的参数是选择器（CSS1~ CSS3，JQuery自己添加的选择器）  
\-它的返回值是一个：Object （JQuery对象）  
\-该对象中包含所查找到的所有的标签，以及标签的总数目等等。  
**5.链式调用：**  
\-JQuery 支持 链式调用，其实本质上还是调用方法，得到方法的返回值对象，该对象再去调用下一个方法。所以想要支持链式调用，方法必须要有返回值，返回值对象还要包含下一个方法，一般情况下，返回的都是 this  
**6.JQuery-calss操作**  
![在这里插入图片描述][20190905211926298.png]  
1.addclass：  
![在这里插入图片描述][2019090521190429.png]  
2.removeclass：  
![在这里插入图片描述][20190905212031738.png]  
3.toggleclass：  
![在这里插入图片描述][20190905212105465.png]  
4.hassclass：  
![在这里插入图片描述][20190905212144145.png]  
**7.JQuery-事件操作**  
![在这里插入图片描述][20190905212437150.png]  
1.change事件：  
![在这里插入图片描述][20190905212528256.png]  
2.input事件：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2wxOTM2NDQxNTU0_size_16_color_FFFFFF_t_70]  
3.ready事件：  
![在这里插入图片描述][20190905212633633.png]

[20190905211926298.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/50b1e4996d4543c39b6107bd0864588f.png
[2019090521190429.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/334e000c50094ae9b0325eadef188d55.png
[20190905212031738.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/85e3ca460bfa4ed0b76796180bafed0e.png
[20190905212105465.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/de19b659e76645c0b18d00c0a2d5a78a.png
[20190905212144145.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/19d0fa0de8984ef889fdb54846dad03a.png
[20190905212437150.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/db6e649f6f254e55afc2add9856d3056.png
[20190905212528256.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/1f7f01c4b7c24093a286d7120d8bab35.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2wxOTM2NDQxNTU0_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/2b365445dfdc40f996e006dff133c092.png
[20190905212633633.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/b5ea898b3e1c4a328b9fabd8325155ca.png