职高动漫设计毕业后干什么,贵港seo关键词整站优化,七牛云加速WordPress,百度商城购物https://blog.csdn.net/hanhanwanghaha一个超级无敌可爱的人鸭 欢迎您的关注#xff01; 欢迎关注微信公众号#xff1a;宝藏女孩的成长日记 如有转载#xff0c;请注明出处#xff08;如不注明#xff0c;盗者必究#xff09; 目录前言引入库一个简单的自定义动画模板弹… https://blog.csdn.net/hanhanwanghaha一个超级无敌可爱的人鸭 欢迎您的关注 欢迎关注微信公众号宝藏女孩的成长日记 如有转载请注明出处如不注明盗者必究 目录前言引入库一个简单的自定义动画模板弹出窗口模板显示和隐藏元素模板夯实基础1.script放在body和放在head的区别2.滚动效果3.事件的合成4.事件的绑定5.获取元素偏移的距离前言
有人说现在前后端分离都不用jQuery了但是目前大量网站在用jQuery我看到一篇比较好的文章学习jQuery很有必要https://blog.csdn.net/weixin_44747933/article/details/107373570 刚刚用手机实习僧app随便点了一个因此学习jQuery还是很有必要的。
专业老师说了一句话打基础的时候是很枯燥的要耐得住寂寞。 哈哈哈哈其实我的感觉是这样每天坐在电脑前面一天就过去了希望对待学习我们有这样的态度我自是年少韶华倾负。 下面给的这些模板哈哈哈哈 其实不一定只会这个要学会举一反三当遇到类似的时候就可以用上哈哈哈。
好了我们一起在jquery的世界里飞趴
引入库
首先我们要引入jquery库在js文件夹右键新建js文件 更改名字 —— 选择jquery —— 创建
后面的代码中需要引入这个库例如
一个简单的自定义动画模板
实现效果当我自己把它做出来的时候可爱到化了哈哈哈哈 上代码
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/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/headbodydiv idbox1/divscript srcjs/jquery.js typetext/javascript charsetutf-8/scriptscript typetext/javascriptaa();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
htmlheadmeta charsetUTF-8title/titlestyle typetext/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/headbodydiv classbox1span悟空鸭/span/divscript srcjs/jquery.js typetext/javascript charsetutf-8/scriptscript typetext/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
htmlheadmeta charsetUTF-8title/titlestyle typetext/cssbody{background-color: pink;}#box1{margin-top: 20px;width: 100%;height: 1100px;background-image: url(img/xiaoxue.jpg);}/style/headbodyinput typebutton namebtn1 idbtn1 value显示小雪 /input typebutton namebtn2 idbtn2 value隐藏小雪 /input typebutton namebtn3 idbtn3 value显示和隐藏小雪 /input typebutton namebtn4 idbtn4 value淡入小雪 /input typebutton namebtn5 idbtn5 value淡出小雪 /input typebutton namebtn6 idbtn6 value淡入淡出到(这个可以设置透明度) /input typebutton namebtn7 idbtn7 value展开 /input typebutton namebtn8 idbtn8 value折叠 /input typebutton namebtn9 idbtn9 value展开和折叠 /div idbox1/divscript srcjs/jquery.js typetext/javascript charsetutf-8/scriptscript typetext/javascript$(#btn1).click(function(){$(#box1).show();});$(#btn2).click(function(){$(#box1).hide();//document.getElementById(box1).style.displaynone;});$(#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
htmlheadmeta charsetUTF-8title/titlescript srcjs/jquery.js typetext/javascript charsetutf-8/scriptscript typetext/javascript$(function(){ //表示页面加载完毕之后执行此处的代码。这里的加载完毕是指整个页面的html标签全部加载到浏览器中$(#box1).css({color:red}); });/script/headbodydiv idbox1我是仙女/divimg srcimg/fariy.jpg/ idmyimg/body
/html
效果图
2.滚动效果
上效果图
代码在此
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css#box1{height: 950px;background-image: url(img/fariy.jpg);}#box2{height: 1000px;background-image: url(img/shaohan.jpg);}/style/headbodyinput typebutton namebtnopt idbtnopt value点击我滚动到张韶涵 /div idbox1/divdiv idbox2/divscript srcjs/jquery.js typetext/javascript charsetutf-8/scriptscript typetext/javascript$(#btnopt).click(function(){$(html,body).animate({scrollTop:1200px},3000);});/script/body
/html
3.事件的合成
先上效果图
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlestyle typetext/css#box1{width: 1000px;height: 600px;background-color: salmon;}/style/headbodydiv idbox1鼠标移上来魔法开始/divscript srcjs/jquery.js typetext/javascript charsetutf-8/scriptscript typetext/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
htmlheadmeta charsetUTF-8title/title/headbodyinput typebutton namebtn1 idbtn1 value添加元素 /ulli成都/lili重庆/lili上海/lili北京/li/ulscript srcjs/jquery.js typetext/javascript charsetutf-8/scriptscript typetext/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
htmlheadmeta charsetUTF-8title/titlestyle typetext/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/headbodydiv idbox1div idbox2/div/divscript srcjs/jquery.js typetext/javascript charsetutf-8/scriptscript typetext/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
