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

最新推荐文章于 2022-02-24 14:12:11 发布

island33

最新推荐文章于 2022-02-24 14:12:11 发布

阅读量373

点赞数

本文链接：https://blog.csdn.net/island33/article/details/97492021

版权

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

如回复不及时，或不懂的请加我 微信 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>

</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