自学如何去学习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文件夹。

posted @ 2016-12-01 00:34 叶文翔阅读(1199) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

叶文翔