【艾琪出品】-轻量级框架开发应用 、学习资料

【声明】本博客内容,若有侵权请告之,会删除 非商业用途,如有侵权,请告知我,我会删除

如回复不及时,或不懂的请加我 微信 island68  QQ823173334  可以的话注明来自CSDN

很希望通过CSDN这个平台与大家交流

轻量级框架开发应用  

 小试牛刀    
任务一:检验一下你是否学会了类选择器(基础)。
在代码编辑器中第50行填写相应代码。
$(".imooc")
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        div {
            width: 100px;
            height: 90px;
            float: left;
            padding: 5px;
            margin: 5px;
            background-color: #EEEEEE;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>   
     <div class="aaron">
        <p>class="aaron"</p>
        <p>选中</p>
    </div>   
     <div class="aaron">
        <p>class="aaron"</p>
        <p>选中</p>
    </div>
    <div class="imooc">
        <p>class="imooc"</p>
        <p>jQuery选中</p>
    </div>
    <div class="imooc">
        <p>class="imooc"</p>
        <p>jQuery选中</p>
    </div>
    <script type="text/javascript">
        //通过原生方法处理
        //样式是可以多选的,所以得到的是一个合集
        //需要通过循环给合集中每一个元素修改样式
        var divs = document.getElementsByClassName('aaron');
        for (var i = 0; i < divs.length; i++) {
            divs[i].style.border = "3px solid blue";
        }
    </script>
    <script type="text/javascript">
        //通过jQuery直接传入class
        //class选择器可以选择多个元素
        ?.css("border", "3px solid red");
    </script>
</body>
</html>
                   

第一阶段作品展示    

                

第一阶段作品展示

你需要提交的作品:
用jquery写一个tab选项卡效果,
要求: 
1.    点击tab切换不同的内容。
2.    当前选择的tab需要有背景色。
 

    

借我一双慧眼吧-轻量级框架开发应用    

    任务一
    问题:前端实习小哥哥张小磊想要实现如下图所示的效果,他编写了一组代码,可问题是运行后得不到想要的结果。为什么呢?
    任务:请你找出代码中的问题,并加以修改。
 
如果你自己搞不定,不妨试试求助卡和军师卡吧。
    求助卡:到微信群内找伙伴寻求帮助,问问大家是怎么解决的。
    军师卡:到平台问答区发帖请教辅导老师,请军师给你指点迷津。
    张小哥的代码
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        div {
            width: 100px;
            height: 90px;
            float: left;
            padding: 5px;
            margin: 5px;
            background-color: #EEEEEE;
        }
    </style>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
</head>
<body>   
     <div class="aaron">
        <p>class="aaron"</p>
        <p>选中</p>
    </div>   
     <div class="aaron">
        <p>class="aaron"</p>
        <p>选中</p>
    </div>

    <div class="imooc">
        <p>class="imooc"</p>
        <p>jQuery选中</p>
    </div>
    <div class="imooc">
        <p>class="imooc"</p>
        <p>jQuery选中</p>
    </div>

    <script type="text/javascript">
        //通过原生方法处理
        //样式是可以多选的,所以得到的是一个合集
        //需要通过循环给合集中每一个元素修改样式
        var divs = document.getElementsByClassName('aaron');
        for (var i = 0; i < divs.length; i++) {
            divs[i].style.border = "3px solid blue";
        }
    </script>

    <script type="text/javascript">
        //通过jQuery直接传入class
        //class选择器可以选择多个元素
$("imooc").css("border:3px solid red");
    </script>


</body>

</html>

              
跳转到百度:<a href-"">百度<a> 
图片超链接:<a href-""><img src="yzxx.png" ><a>

第三阶段作品展示-Web前端综合案例开发    

  

我们经常会在浏览网站的时候看到轮播图组件,轮播图组件主要用来展示多个主题、产品、美图之类的,是个很常用的组件。比如淘宝:
 
比如京东:
 
任务:实现一个简易版的自动轮播图效果,图片循环播放images中的4张图片。
考核点:
1.js获取DOM元素
2.setInterval定时器的使用
 本题素材为以下4张图片,分别为1.jpg, 2,jpg, 3,jpg, 4.jpg
 

上一篇:JS === 实现多个光标跟随事件


下一篇:Jquery