三人行 必有吾师焉 [与慕课里的大神们过过招]

青，取之于蓝而青于蓝；冰，水为之而寒于水。

---

前景提示：师傅领进门，修行在个人。jQuery学了也有一段时间了，逐渐领略到其宗旨“write Less，Do More”。今日心血来潮，突发奇想——发现慕课网里的好多用JS原生写的效果也可以用jQuery代写，于是自己就挑了几个易懂的案例，来跟大家伙分享。毕竟自己学识浅薄，如有不正确的地方，欢迎指正批评。

格式：

//JS代码

PK

//jQuery(默认引用jQuery最新版)

Part 1

首先是慕课网里最受欢迎的美女老师之一——Amy^_^

传送门：http://www.imooc.com/learn/176《Tab选项卡切换效果》

伸缩菜单——单击不同的导航菜单，显示相应的内容；再次单击，隐藏相应的内容。

window.onload=function(){
    var menu=document.getElementById('menu'),       // 将点击的标题和要显示隐藏的列表取出来
        ps=menu.getElementsByTagName('p'),
        uls=menu.getElementsByTagName('ul');
        for(var i in ps){                           // 遍历要点击的标题
            ps[i].id=i;                            // 添加索引
            ps[i].onclick=function(){             // 添加点击事件
                var u=uls[this.id];              // 获取点击的标题上的索引属性
                if(u.style.display=='block'){
                    u.style.display='none';     // 判断该列表，如果是显示的则将其隐藏
                }else{
                    u.style.display='block';    //如果是隐藏的则将其显示出来
                }   
            }
        }
    }

PK

$(function () {                                  // 等待DOM元素加载完毕
    $(".menu p").click(function () {            // 给标题元素添加单击事件
        $(this).next().show()                  // 紧邻的列表元素显示
        .parent().siblings().children("p")    // 同时找到标题的父辈的同辈元素内部的子元素
        .next().hide();                      // 将它们的下一个元素隐藏
    });        
})

Part 2

然后是有美誉之称是历史专业里计算机最好，计算机专业里历史最好的稀有人种——薛老师^_^

传送门：http://www.imooc.com/learn/42 《表单美化》

多选框——将多选框进行单个选择、全选、全不选等操作。在课程中，老师用的方法很独特，CSS雪碧图的方式来实现的多选框效果（~(≧≦)/~赞）

window.onload=function(){
    function Checklist() {                         // 定义一个复选的函数
        var li=document.getElementById("checkList").getElementsByTagName("li"); 
        for(var i=0;i<li.length;i++){            // 遍历要选择的多选框
            li[i].onclick=function () {         // 添加点击事件
                if(this.className=="selected"){
                    this.className="";    // 判断该多选框，如果已经选中则去掉
                }else{
                    this.className="selected";    //如果未选中则让选中
                }   
            }
        }
    }

PK

$("#Checklist").click(function(){
        if(this.checked){                //如果当前点击的多选框被选中
             $('input[name=type]:checkbox').attr("checked", true ); //使用到属性过滤选择器
        }else{                              
             $('input[name=type]:checkbox').attr("checked", false );
        }
 });

Part 3

其次是前端攻城师，bug杀手——Ben^_^

传送门：http://www.imooc.com/learn/80 《用JavaScript实现图片缓慢缩放效果》

图片缓慢缩放效果——按等比例放大缩小，当达到一定界限后，弹出相应提示（文章篇幅有限，只比较放大代码^_^）

    window.onload = function(){
    var maxBtn = document.getElementById("max");
    maxBtn.onclick = function(){                      //添加放大点击事件
        maxFun();                                    //放大函数 
    }
    var img = document.getElementById("myImage");
    var maxWidth = img.width*2;                      //放大宽、高的极限值
    var maxHeight = img.height*2;     
    function maxFun(){                 
        var endWidth = img.width*1.3;                 //每次点击后的宽、高度
        var endHeight = img.height*1.3; 
        var maxTimer = setInterval(function(){        //添加一个计时器
                if(img.width < endWidth){
                    if(img.width < maxWidth){
                        img.width = img.width*1.05;
                        img.height = img.height*1.05;
                    }else{
                        alert("已经放大到最大值了");
                        clearInterval(maxTimer);    
                    }
                }else{
                    clearInterval(maxTimer);    
                }
        },10);  
    }
            /*缩小函数......*/              
}

PK

    var $img= $('#myImage');              //获取照片
    $('.max').click(function(){           //放大按钮绑定单击事件
          if( $img.width() < endWidth ){ 
               $img.animate(  {width : "*=1.05;"} ,10); //点击后的宽、高度，在10ms内放大1.05倍
               $img.animate(  {height : "*=1.05;"} ,10);
          }
    })
   /*缩小函数......*/

还有好多比如《焦点图轮播特效》传送门：http://www.imooc.com/learn/18

箭头、按钮切换——可以单击左右箭头，控制图片左右滚动，同时按钮也跟着切换。

条条大路通罗马，只要自己驾驭了这些知识，就能七十二变。万变不离其宗，最根本的精髓掌握好了，火眼金睛一看便晓。保持一颗敢想敢做的心，坚持下去，编程这条路你并不孤独。