自学如何去学习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：

做一个小图变大图效果

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <script src="jq.js"></script>

 <style>

     .box img{

         float: left;

         width: 300px;

     }

     .bigImg{

         position: absolute;

         display: none;

     }

 </style>

 <body>

     <div class="box">

         <img src="img/1.jpg" alt="">

         <img src="img/2.jpg" alt="">

         <img src="img/3.jpg" alt="">

         <img src="img/4.jpg" alt="">

     </div>

     <img src="" alt="" class="bigImg">

     <script>

         $(".box img").mousemove(function(event){

             var x = event.pageX + 15+"px";

             var y = event.pageY + 15+"px";

             console.log(x,y)

             var add=$(this).attr("src");

             $(".bigImg").attr("src",add).stop().fadeIn().css({"left":x,"top":y});

         })

         $(".box img").mouseout(function(){

             $(".bigImg").stop().fadeOut();

         })

     </script>

 </body>

 </html>

这里面包含新的事件方法 event.pageX和event.pageY. 需要理解$(this)指的是当前点击的元素对象.上面代码中指的是当前点击的$(".box img")元素

x y为什么会加上15？这个值可以随便定义，因为event.pageX和event.pageY 获取的是鼠标头顶部的位置，如果不加上一个值，后面的图片的左上角顶部就会位于鼠标顶部位置，向后拖动鼠标就会跑出$(".box img").mousemove() 事件，所以要加上一个值来使图片保持距离
变量不能添加引号，加上引号就成了字符串
.stop()方法的理解，如果动画没有执行完毕，执行下个动画，则没执行完毕的动画效果立刻停止。

第三个demo：

添加删除操作

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <script src="jq.js"></script>

 <body>

     <input type="text">

     <input type="button" value="添加">

     <ul>

         <li>第1个<button class="btn">删除</button></li>

         <li>第2个<button class="btn">删除</button></li>

         <li>第3个<button class="btn">删除</button></li>

     </ul>

     <script>

         $("[type='button']").click(function(){

             var val=$("[type='text']").val();

             var content="<li>"+val+"<button class='btn'>删除</button>"+"</li>";

             $("ul").append(content);

             $(".btn").click(function(){

             $(this).parent().remove();

             })

         })

         $(".btn").click(function(){

             $(this).parent().remove();

         })

     </script>

 </body>

 </html>

需要去学习-获取HTML元素.text() .html() .val() 添加元素.append() .prepend() .after() .before() 删除元素 .remove() .empty()。做完这个小demo后对这些属性有了较深的认识。

第四个demo：

滚动事件，点击中间按钮页面向下滑动一定距离，显示出回到顶部按钮，点击回到顶部的一个功能

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

     <script src="jq.js"></script>

     <style>

         img{

             width: 100%;

             display: block;

         }

         body{

             padding: 0;

             margin: 0;

         }

         ul{

             list-style: none;

             position: fixed;

             left: 0;

             top: 50%;

             transform: translate(0,-50%);

         }

         ul li{

             width: 10px;

             height: 10px;

             border-radius: 50%;

             background-color: white;

             margin-top: 10px;

             cursor: pointer;

         }

         .active{

             background-color: red;

         }

         .top{

             width: 25px;

             height: 125px;

             background-color: #008090;

             position: fixed;

             right: 40px;

             bottom: 20px;

             font-size: 24px;

             color: white;

             padding-left: 20px;

             padding-right: 20px;

             border-radius: 10px;

             cursor: pointer;

             display: none;

         }

         .top p{

             margin: 0;

             position: relative;

             top: 50%;

             transform: translate(0,-50%);

         }

     </style>

     <script>

         $(document).ready(function(){

             $("ul li").click(function(){

                 var    num=$(this).index();

                 var height = $("img").css("height");

                 var heightInt=parseInt(height);

                 var px=num*heightInt;

                 $("body").stop().animate({"scrollTop":px},200);

                 $(this).addClass("active").siblings().removeClass("active");

             })

         })

         $(document).ready(function(){

             $(".top").click(function(){

             $("body").scrollTop(0);

         })

         })

         var timer=null;

         $(document).scroll(function(){

             var px=$(document).scrollTop();

             var height = $("img").css("height");

             var heightInt=parseInt(height);

             var    index=px/heightInt;

             var num=Math.round(index);

             console.log(num);

             if(px>400){

                 $(".top").css("display","block");

             }else{

                 $(".top").css("display","none");

             }

             if(num==0||num==1||num==2||num==3||num==4){

                 if(timer){

                     clearTimeout(timer);

                     timer=null;

                 }

                 timer=setTimeout(function(){$("ul li").eq(num).addClass("active").siblings().removeClass("active");

             },200)

             }

         })

     </script>

 </head>

 <body>

     <img src="img/1.jpg" alt="">

     <img src="img/2.jpg" alt="">

     <img src="img/3.jpg" alt="">

     <img src="img/4.jpg" alt="">

     <img src="img/5.jpg" alt="">

     <ul>

         <li class="active"></li>

         <li></li>

         <li></li>

         <li></li>

         <li></li>

     </ul>

     <div class="top"><p>回到顶部</p></div>

 </body>

 </html>

需要知道几个事件scroll scrollTop(),注意这里的事件对象为document或者window，开始我写的body没有效果。

第五个demo

没有啥demo 哈哈就是学习了 JQuery隐藏显示淡入淡出滑动动画停止动画把上面的方法自己随便练练

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

 <style>

     .box{

         width: 500px;

         height: 500px;

         background-color: #00635a;

     }

 </style>

 <body>

     <input type="button" id="hide" value="hide">

     <input type="button" id="show" value="show">

     <input type="button" id="toggle" value="toggle">

     <input type="button" id="fadeIn" value="fadeIn">

     <input type="button" id="fadeOut" value="fadeOut">

     <input type="button" id="fadeToggle" value="fadeToggle">

     <input type="button" id="fadeTo" value="fadeTo">

     <input type="button" id="slideDown" value="slideDown">

     <input type="button" id="slideUp" value="slideUp">

     <input type="button" id="slideToggle" value="slideToggle">

     <div class="box"></div>

     <script>

         $("#hide").click(function(){

             $(".box").hide();

         })

         $("#show").click(function(){

             $(".box").show();

         })

         $("#toggle").click(function(){

             $(".box").toggle();

         })

         $("#fadeIn").click(function(){

             $(".box").fadeIn();

         })

         $("#fadeOut").click(function(){

             $(".box").fadeOut();

         })

         $("#fadeToggle").click(function(){

             $(".box").fadeToggle();

         })

         $("#fadeTo").click(function(){

             $(".box").fadeTo("slow",0.5);

         })

         $("#slideDown").click(function(){

             $(".box").slideDown();

         })

         $("#slideUp").click(function(){

             $(".box").slideUp();

         })

         $("#slideToggle").click(function(){

             $(".box").slideToggle();

         })

     </script>

 </body>

 </html>

第六个demo

百叶窗效果

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <style>

     .box{

         margin: 0 auto;

         position: relative;

         width: 500px;

         overflow: hidden;

         height: 200px;

     }

     .box img{

         position: absolute;

         width: 300px;

     }

     .box img:nth-child(1){

         left: 0;

     }

     .box img:nth-child(2){

         left: 100px;

     }

     .box img:nth-child(3){

         left: 200px;

     }

     .box img:nth-child(4){

         left: 300px;

     }

     .box img:nth-child(5){

         left: 400px;

     }

 </style>

 <script src="jq.js"></script>

 <body>

     <div class="box">

         <img src="img/1.jpg" alt="">

         <img src="img/2.jpg" alt="">

         <img src="img/3.jpg" alt="">

         <img src="img/4.jpg" alt="">

         <img src="img/5.jpg" alt="">

     </div>

     <script>

         $(".box img").mouseover(function(){

             var index=$(this).index();

             var px=200/4;

             for(var i=0;i<=4;i++){

                 if(i<=index){

                     $("img").eq(i).stop().animate({"left":px*i},500);

                 }else if(i>index){

                     $("img").eq(i).stop().animate({"left":px*(i-1)+300},500);

                 }

             }

         })

         $(".box img").mouseout(function(){

             for(var i=0;i<=4;i++){

                 $("img").eq(i).stop().animate({"left":100*i},500);

             }

         })

     </script>

 </body>

 </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文件夹。