jQuery部分总结

Dear 丶 2022-03-25 08:46 209阅读 0赞

## jQuery部分总结 ##

开发工具与关键技术： VS、jQuery部分总结
    作者：黄桂康
    撰写时间：2019.01.18

1、 jQuery是JavaScript库，是一个封装好的JavaScript框架，就是因为他可以“写的代码少，执行更多的功能”。  
2、 jQuery主要基础有5部分：1、样式篇：style  
2、事件篇：鼠标单击、鼠标双击、鼠标移出、鼠标移入、鼠  
标点击、鼠标松开。  
3、动画篇：animation。  
4、DOM篇：DOM。  
5、Ajax篇：Ajax。  
3、 jQuery也需要引入，从JQuery官网：[http://jquery.com/下载jQuery库，引入。][http_jquery.com_jQuery]  
jQuery引入与JavaScript引入是一样的，如下截图。  
![在这里插入图片描述][20190119200041557.png]  
然后可以在HTML页面代码中敲jQuery，基本与JavaScript差不多，然后就可以放一个script标签，里面开始你的jQuery代码。  
下截图为原生的jQuery，还有简写的jQuery。  
![在这里插入图片描述][20190119200058171.png]  
引入jQuery，script标签，创建一个jQuery事件，然后写代码。我们可以先验证下是否成功，如下截图。（切记美元符号 $ ()(\{\})。这样的一个格式。  
![在这里插入图片描述][20190119200111168.png]  
alert（‘123‘）这样就会在浏览器输出123.验证成功。  
4、 事件-鼠标事件  
1鼠标单击事件  
onclick事件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU3OTAxMg_size_16_color_FFFFFF_t_70]  
1美元符号 $。  
2获取元素记得标双引号或单引号 “” ‘’ 。  
3事件：click是单击事件、也可以双击事件dblclick、移入事件mouseover、移出事件mouseout······  
4格式先.click(function()\{\})。  
5、 HTML元素的获取  
\#id、class、\*、给定一个元素等元素选择器，  
上截图2中也说了括号里先给双引号或单引号然后再获取HTML元素。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU3OTAxMg_size_16_color_FFFFFF_t_70 1]  
先给button定义一个id，在jQuery里获取这个id，\#为id选择器-\#id,类选择器也有 .class  
这是要特别注意的一点，记得定义，写选择器符号，再写元素。  
6、jQuery添加新元素  
append（）在所选的元素结尾添加元素  
prepend（）在所选的元素开头添加元素  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU3OTAxMg_size_16_color_FFFFFF_t_70 2]  
如上截图，p标签文字为大树开发，要添加工作室在他结尾，大树开发工作室  
![在这里插入图片描述][2019011920024689.png]  
结尾添加用append（）方法，开头添加用prepend（）  
![在这里插入图片描述][20190119200258268.png]  
![在这里插入图片描述][20190119200312851.png]  
········

[http_jquery.com_jQuery]: http://jquery.com/%E4%B8%8B%E8%BD%BDjQuery%E5%BA%93%EF%BC%8C%E5%BC%95%E5%85%A5%E3%80%82
[20190119200041557.png]: /images/20220325/e1ddc44771b24bc1bf957ebef4b8b20d.png
[20190119200058171.png]: /images/20220325/d341f062e4044081b3f5fb903509ab6f.png
[20190119200111168.png]: /images/20220325/50fe58c676a1454da489266347b59264.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU3OTAxMg_size_16_color_FFFFFF_t_70]: /images/20220325/0357a6e818c242f1b20230e49a0a2315.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU3OTAxMg_size_16_color_FFFFFF_t_70 1]: /images/20220325/e4bde4be8bc643799b38c0f378dff534.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDU3OTAxMg_size_16_color_FFFFFF_t_70 2]: /images/20220325/50b4f0cc32ec400f84374815a7fb6d92.png
[2019011920024689.png]: /images/20220325/0c6db823286f4d95a076a3440381e70b.png
[20190119200258268.png]: /images/20220325/e74391f5654a4e1fbcb2e7167ed5c629.png
[20190119200312851.png]: /images/20220325/60ad1941b5fd4262a479b7a7e2d058eb.png