js实战代码系列—带你玩jQuery带你飞
程序员文章站
2022-11-29 16:10:46
有人说现在前后端分离，都不用jQuery了，但是目前大量网站在用jQuery，我看到一篇比较好的文章，学习jQuery很有必要！比如我们可以在招聘网上面看，很多公司都要求会jQuery。专业老师说了一句话：打基础的时候是很枯燥的，要耐得住寂寞。哈哈哈哈，其实我的感觉是这样，每天坐在电脑前面一天就过去了，希望对待学习我们有这样的态度：我自是年少，韶华倾负。下面给的这些模板，哈哈哈哈 其实不一定只会这个，要学会举一反三，当遇到类似的时候就可以用上哈哈哈。好了，我要开始带你在jquery的世界里飞了！...
目录
前言
有人说现在前后端分离，都不用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>
期待与你的一起学习
https://blog.csdn.net/hanhanwanghaha
一个敲极无敌可爱的人欢迎你的关注。
不懂随时留言，评论也可，私信也可，看见必回。Come on baby
本文地址：https://blog.csdn.net/hanhanwanghaha/article/details/109343106