https://blog.csdn.net/hanhanwanghaha一个超级无敌可爱的人鸭欢迎您的关注！
欢迎关注微信公众号：宝藏女孩的成长日记
如有转载，请注明出处（如不注明，盗者必究）

前言

有人说现在前后端分离，都不用jQuery了，但是目前大量网站在用jQuery，我看到一篇比较好的文章，学习jQuery很有必要！https://blog.csdn.net/weixin_44747933/article/details/107373570
在这里插入图片描述

在这里插入图片描述

刚刚用手机实习僧app随便点了一个，因此学习jQuery还是很有必要的。

专业老师说了一句话：打基础的时候是很枯燥的，要耐得住寂寞。
哈哈哈哈，其实我的感觉是这样，每天坐在电脑前面一天就过去了，希望对待学习我们有这样的态度：我自是年少，韶华倾负。
下面给的这些模板，哈哈哈哈其实不一定只会这个，要学会举一反三，当遇到类似的时候就可以用上哈哈哈。

好了，我们一起在jquery的世界里飞趴！
在这里插入图片描述

引入库

首先我们要引入jquery库，在js文件夹右键新建，js文件
在这里插入图片描述
更改名字 ——> 选择jquery ——> 创建

后面的代码中需要引入这个库，例如：
在这里插入图片描述

一个简单的自定义动画模板

实现效果，当我自己把它做出来的时候，可爱到化了哈哈哈哈
在这里插入图片描述
上代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin:0 ;padding: 0;}#box1{width: 210px;height: 110px;background-color: salmon;position: absolute;left: 0;top: 0;background-image: url(img/pig.jpg);}</style></head><body><div id="box1"></div><script src="js/jquery.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">aa();function aa(){$("#box1").animate({"left":"500px"},2000).animate({"top":"300px"},2000).animate({"left":"0px"},2000).animate({"top":"0px"},2000,function(){aa();    //这一句是循环的意思});}//$("#box1").animate({"left":"600px","top":"300px"},2000);</script></body>
</html>

弹出窗口模板

先上效果图
在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin:0 ;padding: 0;}html{width: 100%;}body{width: 100%;overflow: hidden;/* 多出的部分隐藏 */background-color: pink;}.box1{width: 400px;height: 360px;background-color: salmon;position: absolute;right: -400px;top: 200px;border-top-left-radius:5px; /* 左上的圆角显示 */border-bottom-left-radius:5px; /* 左下的圆角显示 */background-image: url(./img/me.png);}.box1 span{width: 20px;height: 60px;display: block;background-color:salmon ;position: absolute;left:-20px;top: 150px;border-top-left-radius: 3px;/* 左上的圆角显示 */border-bottom-left-radius:3px; /* 左下的圆角显示 */}</style></head><body><div class="box1"><span>悟空鸭</span></div><script src="js/jquery.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(".box1").mouseenter(function(){$(".box1").stop(true,true).animate({"right":"0px"},600);});$(".box1").mouseleave(function(){$(".box1").stop(true,true).animate({"right":"-400px"},600);});</script></body>
</html>

哈哈哈 img你可以自己找奥哈哈哈，然后再自己调格式哈哈哈

其实我们可以举一反三，比如位置，比如里面可能是表格，都可以切换哈哈哈

显示和隐藏元素模板

这个我们直接上效果哈哈哈
（这边只演示了隐藏和显示，剩下的你可以自己玩玩）
在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">body{background-color: pink;}#box1{margin-top: 20px;width: 100%;height: 1100px;background-image: url(img/xiaoxue.jpg);}</style></head><body><input type="button" name="btn1" id="btn1" value="显示小雪" /><input type="button" name="btn2" id="btn2" value="隐藏小雪" /><input type="button" name="btn3" id="btn3" value="显示和隐藏小雪" /><input type="button" name="btn4" id="btn4" value="淡入小雪" /><input type="button" name="btn5" id="btn5" value="淡出小雪" /><input type="button" name="btn6" id="btn6" value="淡入淡出到(这个可以设置透明度)" /><input type="button" name="btn7" id="btn7" value="展开" /><input type="button" name="btn8" id="btn8" value="折叠" /><input type="button" name="btn9" id="btn9" value="展开和折叠" /><div id="box1"></div><script src="js/jquery.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$("#btn1").click(function(){$("#box1").show();});$("#btn2").click(function(){$("#box1").hide();//document.getElementById("box1").style.display="none";});$("#btn3").click(function(){$("#box1").toggle();});$("#btn4").click(function(){$("#box1").fadeIn(2000);});$("#btn5").click(function(){$("#box1").fadeOut(2000)});$("#btn6").click(function(){$("#box1").fadeTo(1000,0.5);});$("#btn7").click(function(){$("#box1").slideDown()});$("#btn8").click(function(){$("#box1").slideUp();});$("#btn9").click(function(){$("#box1").slideToggle();});</script></body>
</html>

夯实基础

1.script放在body和放在head的区别

放在body中：在页面加载的时候被执行

放在head中：在被调用时被执行

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="js/jquery.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$(function(){ //表示页面加载完毕之后执行此处的代码。（这里的加载完毕是指整个页面的html标签全部加载到浏览器中）$("#box1").css({"color":"red"});	});</script></head><body><div id="box1">我是仙女</div><img src="img/fariy.jpg"/ id="myimg"></body>
</html>

效果图
在这里插入图片描述

2.滚动效果

上效果图
在这里插入图片描述

代码在此

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1{height: 950px;background-image: url(img/fariy.jpg);}#box2{height: 1000px;background-image: url(img/shaohan.jpg);}</style></head><body><input type="button" name="btnopt" id="btnopt" value="点击我滚动到张韶涵" /><div id="box1"></div><div id="box2"></div><script src="js/jquery.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">$("#btnopt").click(function(){$("html,body").animate({scrollTop:"1200px"},3000);});</script></body>
</html>

3.事件的合成

先上效果图
在这里插入图片描述

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#box1{width: 1000px;height: 600px;background-color: salmon;}</style></head><body><div id="box1">鼠标移上来魔法开始</div><script src="js/jquery.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">
//			$("#box1").mouseenter(function(){
//				$("#box1").css({"background-color":"red"});
//			});
//			$("#box1").mouseleave(function(){
//				$("#box1").css({"background-color":"salmon"});
//			});$("#box1").hover(function(){				$("#box1").css({"background-image":"url(img/haomin.jpg)"});},function(){$("#box1").css({"background-image":"url(img/poter.jpg)"});})</script></body>
</html>

4.事件的绑定

这个可以直接上代码啦，具体效果拿去运行就知道了

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title></head><body><input type="button" name="btn1" id="btn1" value="添加元素" /><ul><li>成都</li><li>重庆</li><li>上海</li><li>北京</li></ul><script src="js/jquery.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">// 添加一个深圳  append是追加的意思$("#btn1").click(function(){$("ul").append("<li>深圳</li>");});  // 在控制台输出鼠标一上去的文本// $("li").on("mouseenter",function(){// 	var x=$(this).text();// 	console.log(x);// });//在网页开发过程中，有些元素是直接写在html中，有的元素是通过js动态添加到文档中的。如果绑定事件的时候，都直接绑定到元素上，那么通过js添加的元素就不会绑定对应的事件。
//此时可以通过事件委托的方式，不把事件直接绑定到元素上，而把事件绑定到元素的父元素上，通过父元素委派给子元素，这样，子元素不管是写在html中的，还是后面通过js添加的，都会有对应的事件了。// 在控制台输出鼠标点击发生的文本,与上面那个不同的是这个追加的可以显示,而上面那个不可以$("ul").on("click","li",function(){var x=$(this).text();console.log(x);});</script></body>
</html>

5.获取元素偏移的距离

这个直接拿代码去溜溜，在控制台就可以看到元素偏移的距离，运行一下就知道啦！

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">*{margin: 0;padding: 0;}#box1{width: 200px;height: 200px;background-color: pink;margin-top: 200px;margin-left: 300px;position: relative;}#box2{width: 50px;height: 50px;background-color: green;position: absolute;left: 50px;top: 30px;}</style></head><body><div id="box1"><div id="box2"></div></div><script src="js/jquery.js" type="text/javascript" charset="utf-8"></script><script type="text/javascript">// 在控制台打印输出box1向下偏移的距离,打印输出box2向右偏移的距离var pybox1=$("#box1").offset();var pybox2=$("#box2").position();console.log(pybox1.top,pybox2.left);</script></body>
</html>