继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

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

心有猛虎_细嗅蔷薇
关注TA
已关注
手记 7
粉丝 158
获赞 486

青,取之于蓝而青于蓝;冰,水为之而寒于水。


前景提示:师傅领进门,修行在个人。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

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

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

打开App,阅读手记
41人推荐
发表评论
随时随地看视频慕课网APP

热门评论

你没学原生js吗?直接jq吗

查看全部评论