自学如何去学习jQuery
Posted 叶文翔
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了自学如何去学习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"如何去学习 如何去自学