自学如何去学习jQuery
学习JQ第一个demo:
制作一个轮播图,制作方法我前面写了一篇博客,传送门-->http://www.cnblogs.com/yewenxiang/p/6100206.html
需要的JQ知识点:
- JQ选择器 JQ的选择器非常强大,基本上CSS里面的选择器,用JQ都能非常方便的去实现
- JQ事件方法 .click() .mouseover() .mouseout() .hover(function(){},function(){})
- JQ css类 .css() .animate() .addClass() .removeClass() .eq()
- JQ的链式操作
- JQ遍历
然后需要点JS的基础知识,如变量 if语句 等,然后就可以去做一个简单的轮播图了。
第二个demo:
做一个小图变大图效果
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <script src="jq.js"></script> 8 <style> 9 .box img{10 float: left; 11 width: 300px; 12 } 13 .bigImg{14 position: absolute; 15 display: none; 16 } 17 </style> 18 <body> 19 <div class="box"> 20 <img src="img/1.jpg" alt=""> 21 <img src="img/2.jpg" alt=""> 22 <img src="img/3.jpg" alt=""> 23 <img src="img/4.jpg" alt=""> 24 </div> 25 <img src="" alt="" class="bigImg"> 26 <script> 27 $(".box img").mousemove(function(event){ 28 var x = event.pageX + 15+"px"; 29 var y = event.pageY + 15+"px"; 30 console.log(x,y) 31 var add=$(this).attr("src"); 32 $(".bigImg").attr("src",add).stop().fadeIn().css({"left":x,"top":y}); 33 }) 34 $(".box img").mouseout(function(){ 35 $(".bigImg").stop().fadeOut(); 36 }) 37 </script> 38 </body> 39 </html>
这里面包含新的事件方法 event.pageX和event.pageY. 需要理解$(this)指的是当前点击的元素对象.上面代码中指的是当前点击的$(".box img")元素
- x y为什么会加上15? 这个值可以随便定义,因为event.pageX和event.pageY 获取的是鼠标头顶部的位置,如果不加上一个值,后面的图片的左上角顶部就会位于鼠标顶部位置,向后拖动鼠标就会跑出$(".box img").mousemove() 事件,所以要加上一个值来使图片保持距离
- 变量不能添加引号,加上引号就成了字符串
- .stop()方法的理解,如果动画没有执行完毕,执行下个动画,则没执行完毕的动画效果立刻停止。
第三个demo:
添加删除操作
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <script src="jq.js"></script> 8 <body> 9 <input type="text"> 10 <input type="button" value="添加"> 11 <ul> 12 <li>第1个<button class="btn">删除</button></li> 13 <li>第2个<button class="btn">删除</button></li> 14 <li>第3个<button class="btn">删除</button></li> 15 </ul> 16 <script> 17 $("[type='button']").click(function(){ 18 var val=$("[type='text']").val(); 19 var content="<li>"+val+"<button class='btn'>删除</button>"+"</li>"; 20 $("ul").append(content); 21 $(".btn").click(function(){ 22 $(this).parent().remove(); 23 }) 24 }) 25 $(".btn").click(function(){ 26 $(this).parent().remove(); 27 }) 28 </script> 29 </body> 30 </html>
需要去学习-获取HTML元素.text() .html() .val() 添加元素.append() .prepend() .after() .before() 删除元素 .remove() .empty()。做完这个小demo后对这些属性有了较深的认识。
第四个demo:
滚动事件,点击中间按钮页面向下滑动一定距离,显示出回到顶部按钮,点击回到顶部的一个功能
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <script src="jq.js"></script> 7 <style> 8 img{ 9 width: 100%; 10 display: block; 11 } 12 body{ 13 padding: 0; 14 margin: 0; 15 } 16 ul{ 17 list-style: none; 18 position: fixed; 19 left: 0; 20 top: 50%; 21 transform: translate(0,-50%); 22 } 23 ul li{ 24 width: 10px; 25 height: 10px; 26 border-radius: 50%; 27 background-color: white; 28 margin-top: 10px; 29 cursor: pointer; 30 } 31 .active{ 32 background-color: red; 33 } 34 .top{ 35 width: 25px; 36 height: 125px; 37 background-color: #008090; 38 position: fixed; 39 right: 40px; 40 bottom: 20px; 41 font-size: 24px; 42 color: white; 43 padding-left: 20px; 44 padding-right: 20px; 45 border-radius: 10px; 46 cursor: pointer; 47 display: none; 48 } 49 .top p{ 50 margin: 0; 51 position: relative; 52 top: 50%; 53 transform: translate(0,-50%); 54 } 55 </style> 56 <script> 57 $(document).ready(function(){ 58 $("ul li").click(function(){ 59 var num=$(this).index(); 60 var height = $("img").css("height"); 61 var heightInt=parseInt(height); 62 var px=num*heightInt; 63 $("body").stop().animate({"scrollTop":px},200); 64 $(this).addClass("active").siblings().removeClass("active"); 65 }) 66 }) 67 $(document).ready(function(){ 68 $(".top").click(function(){ 69 $("body").scrollTop(0); 70 }) 71 }) 72 var timer=null; 73 $(document).scroll(function(){ 74 var px=$(document).scrollTop(); 75 var height = $("img").css("height"); 76 var heightInt=parseInt(height); 77 var index=px/heightInt; 78 var num=Math.round(index); 79 console.log(num); 80 if(px>400){ 81 $(".top").css("display","block"); 82 }else{ 83 $(".top").css("display","none"); 84 } 85 if(num==0||num==1||num==2||num==3||num==4){ 86 if(timer){ 87 clearTimeout(timer); 88 timer=null; 89 } 90 timer=setTimeout(function(){$("ul li").eq(num).addClass("active").siblings().removeClass("active"); 91 },200) 92 } 93 }) 94 </script> 95 </head> 96 <body> 97 <img src="img/1.jpg" alt=""> 98 <img src="img/2.jpg" alt=""> 99 <img src="img/3.jpg" alt=""> 100 <img src="img/4.jpg" alt=""> 101 <img src="img/5.jpg" alt=""> 102 <ul> 103 <li class="active"></li> 104 <li></li> 105 <li></li> 106 <li></li> 107 <li></li> 108 </ul> 109 <div class="top"><p>回到顶部</p></div> 110 </body> 111 </html>
需要知道几个事件scroll scrollTop(),注意这里的事件对象为document或者window,开始我写的body没有效果。
第五个demo
没有啥demo 哈哈就是学习了 JQuery隐藏显示 淡入淡出 滑动 动画 停止动画 把上面的方法自己随便练练
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script> 8 <style> 9 .box{10 width: 500px; 11 height: 500px; 12 background-color: #00635a; 13 } 14 </style> 15 <body> 16 <input type="button" id="hide" value="hide"> 17 <input type="button" id="show" value="show"> 18 <input type="button" id="toggle" value="toggle"> 19 <input type="button" id="fadeIn" value="fadeIn"> 20 <input type="button" id="fadeOut" value="fadeOut"> 21 <input type="button" id="fadeToggle" value="fadeToggle"> 22 <input type="button" id="fadeTo" value="fadeTo"> 23 <input type="button" id="slideDown" value="slideDown"> 24 <input type="button" id="slideUp" value="slideUp"> 25 <input type="button" id="slideToggle" value="slideToggle"> 26 <div class="box"></div> 27 <script> 28 $("#hide").click(function(){ 29 $(".box").hide(); 30 }) 31 $("#show").click(function(){ 32 $(".box").show(); 33 }) 34 $("#toggle").click(function(){ 35 $(".box").toggle(); 36 }) 37 $("#fadeIn").click(function(){ 38 $(".box").fadeIn(); 39 }) 40 $("#fadeOut").click(function(){ 41 $(".box").fadeOut(); 42 }) 43 $("#fadeToggle").click(function(){ 44 $(".box").fadeToggle(); 45 }) 46 $("#fadeTo").click(function(){ 47 $(".box").fadeTo("slow",0.5); 48 }) 49 $("#slideDown").click(function(){ 50 $(".box").slideDown(); 51 }) 52 $("#slideUp").click(function(){ 53 $(".box").slideUp(); 54 }) 55 $("#slideToggle").click(function(){ 56 $(".box").slideToggle(); 57 }) 58 </script> 59 </body> 60 </html>
第六个demo
百叶窗效果
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <style> 8 .box{ 9 margin: 0 auto; 10 position: relative; 11 width: 500px; 12 overflow: hidden; 13 height: 200px; 14 } 15 .box img{16 position: absolute; 17 width: 300px; 18 } 19 .box img:nth-child(1){20 left: 0; 21 } 22 .box img:nth-child(2){23 left: 100px; 24 } 25 .box img:nth-child(3){26 left: 200px; 27 } 28 .box img:nth-child(4){29 left: 300px; 30 } 31 .box img:nth-child(5){32 left: 400px; 33 } 34 </style> 35 <script src="jq.js"></script> 36 <body> 37 <div class="box"> 38 <img src="img/1.jpg" alt=""> 39 <img src="img/2.jpg" alt=""> 40 <img src="img/3.jpg" alt=""> 41 <img src="img/4.jpg" alt=""> 42 <img src="img/5.jpg" alt=""> 43 </div> 44 <script> 45 $(".box img").mouseover(function(){ 46 var index=$(this).index(); 47 var px=200/4; 48 for(var i=0;i<=4;i++){ 49 if(i<=index){ 50 $("img").eq(i).stop().animate({"left":px*i},500); 51 }else if(i>index){ 52 $("img").eq(i).stop().animate({"left":px*(i-1)+300},500); 53 } 54 } 55 }) 56 $(".box img").mouseout(function(){ 57 for(var i=0;i<=4;i++){ 58 $("img").eq(i).stop().animate({"left":100*i},500); 59 } 60 }) 61 </script> 62 </body> 63 </html>
这个需要用到JS的for循环,可以先不用循环写出一张悬浮时的效果,会发现一个规律,这张图片之前的图片移动有一个规律,之后又是一个规律,这就可以用for循环来解决了
最后做了一个表单验证输入判断的demo
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Document</title><script src="jq.js"></script><style>input{width: 150px;height: 24px;line-height: 24px;margin-left: 20px;}.password2{margin-top: 10px;}label{display: inline-block;width: 120px;line-height: 24px;text-align: right;}.erro{background-color:#590b05;color: #f66156;width: 150px;}.true{background-color:#2b3e14;color: #9bcb64;width: 100px;}.info{display: inline-block;height: 24px;margin-left: 20px;line-height: 24px;border-radius: 5px;text-align: center;}</style> </head> <body><label>密码:</label><input type="password" placeholder="请输入密码" class="password1"><br><label>再次输入密码:</label><input type="password" placeholder="请再次输入密码" class="password2"><span class="info"></span><br><script>$(".password2").blur(function(){var val1 = $(".password1").val();var val2 = $(".password2").val();if(val1==val2){$(".info").text("输入正确").addClass("true").removeClass("erro");}else{$(".info").text("两次密码输入不同").addClass("erro").removeClass("true");}})</script> </body> </html>
需要去知道焦点事件 .blur() ,获取Input输入的值做一个if判断。
通过这些个小的demo去学习JQ会发现学习的过程非常有趣,做出来一个demo都有种成就感,对这些demo中涉及的知识也加深了理解。上面的代码中用到的图片我是从慕课网上下载,自从用了这5张图片,腰不疼了,腿不酸了,写代码呗有劲。
附上下载地址:http://www.imooc.com/learn/18
右侧源码下载,img文件夹。
转载于:https://www.cnblogs.com/yewenxiang/p/6120366.html
自学如何去学习jQuery相关推荐
- 谈谈我的学习工作经历,自学linux去中兴上班
作为一个新人,怎样学习嵌入式Linux?被问过太多次,特写这篇文章来回答一下. 在学习嵌入式Linux之前,肯定要有C语言基础.汇编基础有没有无所谓(就那么几条汇编指令,用到了一看就会).C语言要学到 ...
- 想编程,是勤奋自学还是去培训班学习?
本文首发我的公众号 code小生 转载请简信 前言 截止目前,有很多同学向我咨询过以下问题: 现在正在读在校的最后一个学年,想毕业后从事编程,但是感觉自己技术太差,应该是培训呢?还是去找实习?亦或是有 ...
- 学习编程,要不要去IT培训机构?自学和去培训班哪种方法更合适?
随着互联网和IT行业的不断兴起,现在越来越多的人开始学习编程.在我们身边,我们随处可见一些少儿编程学校或者是IT教育培训机构,相比起传统的学校教育,在多数成年人的眼中,IT教育培训机构就是闲暇时间给自 ...
- 零基础转行web前端,如何高效的去学习web前端?
web前端开发要学的知识内容涉及的会很宽泛,虽然说主要是html.css和JavaScript这些基础知识点,但学前端开发除了要学这些基础知识外,学员还要在这之上进行延伸和深入的去学,而且互联网时代不 ...
- 学习jQuery之旅--使用炫酷的jQuery插件
前两篇文章中,介绍了jQuery中强大的Selectors (选择器)以及开发中比较常用的方法的使用.今天和大家一起体验一下jQuery另一个吸引人的地方--强大炫酷实用的jQuery插件. 做网站的 ...
- 从零开始学习jQuery (五) 事件与事件对象【转】
一.摘要 事件是脚本编程的灵魂. 所以本章内容也是jQuery学习的重点. 本文将对jQuery中的事件处理以及事件对象进行详细的讲解. 二.前言 本篇文章是至今为止本系列内容最多的一篇, 足以可见其 ...
- 从零开始学习jQuery (十) jQueryUI常用功能实战
本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...
- 从零开始学习jQuery (六) AJAX快餐
本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...
- 从零开始学习jQuery (五) 事件与事件对象
本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...
- 从零开始学习jQuery (二) 万能的选择器
本系列文章导航 从零开始学习jQuery (一) 开天辟地入门篇 从零开始学习jQuery (二) 万能的选择器 从零开始学习jQuery (三) 管理jQuery包装集 从零开始学习jQuery ( ...
最新文章
- 【libevent】libevent库学习总结(二)——编程步骤
- JavaScript 各种遍历方式详解
- Highmaps网页图表教程之图表配置项结构与商业授权
- SQL 模糊查询技术
- 10行代码AC——L1-018 大笨钟 (10分)(~解题报告~)
- MongoDB基本操作(增删改查)
- 【渝粤题库】陕西师范大学200271 微分几何 作业(专升本)
- 【渝粤题库】国家开放大学2021春1009离散数学(本)题目
- sql注入基于错误-单引号-字符型
- ROS-PCL读取pcd点云数据并在rviz中进行显示
- 新东方总裁俞敏洪在北京大学2008年开学典礼上的发言
- Linux主流架构运维工作简单剖
- 安装FlexPro和设置FlexPro许可证管理器
- 养肾=养命!这5个养肾方法,程序员都保存好了!
- 2018 UL国际皇冠杯将于10月4日-7日在仁川举行
- 电阻单位符号Ω怎么读?
- 面试题10:青蛙跳台阶
- QT中设置字体和更改字体颜色
- python的CUDA加速编程科普
- 计算机多媒体课程教师教学心得,多媒体教学的心得体会_多媒体教学教师心得...