FreeCodeCamp备查簿(4:#91-#131)

关注

原创最新推荐文章于 2026-11-08 21:13:07 发布 392 阅读 AI 写同款· GEO 优化 ›

FreeCodeCamp(一)学习笔记 FrontEndDevelopmentCertificationHTML5andCSSSay Hello to HTML Elements<h1>hello world</h1> <h1>Hello world</h1>Headline with the h2 Element <h1>Hello World</h1> <h2>CatPhotoApp</h2>Inform with the Parag 阅读详情

20170814

#91 Create a Bootstrap Headline
建一个bootstrap的标题
<h3 class="text-primary text-center">jQuery Playground</h3>

#92 House our page within a Bootstrap Container Fluid Div
建一个container-fluid的div元素(container-fluid,自动设置为外层视窗的100%，如果外层视窗为body，那么它将全屏显示，无论屏幕大小，并且自动实现响应式布局。)
<div class="container-fluid">
<h3 class="text-primary text-center">jQuery Playground</h3>
</div>

#93 Create a Bootstrap Row
创建一个带class="row"的div
<div class="row">
</div>

#94 Split your Bootstrap Row
设置两个col-xs-6的div
<div class="col-xs-6">
</div>
<div class="col-xs-6">
</div>

#95 Create Bootstrap Wells
创建well的div
<div class="col-xs-6">
<div class="well">
</div>
</div>
<div class="col-xs-6">
<div class="well">
</div>

#96 Add Elements within your Bootstrap Wells
设置三个button
<div class="row">
<div class="col-xs-6">
<div class="well">
<button></button>
<button></button>
<button></button>
</div>
</div>
<div class="col-xs-6">
<div class="well">
<button></button>
<button></button>
<button></button>
</div>
</div>
</div>

#97 Apply the Default Bootstrap Button Style
给每个按钮加默认的属性,default
<div class="well">
<button class="btn btn-default"></button>
<button class="btn btn-default"></button>
<button class="btn btn-default"></button>
</div>
</div>
<div class="col-xs-6">
<div class="well">
<button class="btn btn-default"></button>
<button class="btn btn-default"></button>
<button class="btn btn-default"></button>
</div>
</div>

#98 Create a Class to Target with jQuery Selectors
创建一个jquery的选择器,target
<button class="btn btn-default target"></button>

#99 Add ID Attributes to Bootstrap Elements
添加id属性,class是给元素定义一个类,符合这个类的都是一个样式,id是给元素起名字
一个元素就一个名字,当然,也可以同名.
<div class="col-xs-6">
<div class="well" id="left-well">
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
</div>
</div>
<div class="col-xs-6">
<div class="well" id="right-well">
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
</div>
</div>

#100 Label Bootstrap Wells
添加h4
<div class="col-xs-6">
<h4>#left-well</h4>
<div class="well" id="left-well">
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
</div>
</div>
<div class="col-xs-6">
<h4>#right-well</h4>
<div class="well" id="right-well">
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
<button class="btn btn-default target"></button>
</div>
</div>

#101 Give Each Element a Unique ID
给按钮添加id
<div class="col-xs-6">
<h4>#left-well</h4>
<div class="well" id="left-well">
<button class="btn btn-default target" id="target1"></button>
<button class="btn btn-default target" id="target2"></button>
<button class="btn btn-default target" id="target3"></button>
</div>
</div>
<div class="col-xs-6">
<h4>#right-well</h4>
<div class="well" id="right-well">
<button class="btn btn-default target" id="target4"></button>
<button class="btn btn-default target" id="target5"></button>
<button class="btn btn-default target" id="target6"></button>
</div>
</div>

#102 Label Bootstrap Buttons
给按钮添加文本内容,这节简单,代码不贴了,太多

#103 Use Comments to Clarify Code
添加注释,这段代码也不贴了,太简单了,不会添加注释就不要学前端了,注释这个事我要告诫看到这段说明的童鞋和提醒自己,以后在开发的时候,一定要多写注释,因为程序员所需要学的东西太多,需要写的东西也太多,尤其是以后如果需要自己写新的控件和class,函数等等(俗称造轮子),时间短还好,时间长了,自己都记不住这个是做什么的,那样的话系统和软件根本没法维护,尤其是合作开发的mvc模式,你不用框架的东西要是自己定义的话,一定要写出注释,让别人知道这个是做什么的.具体的注释规范应该是写出:创建时间,创建原因,上下代码之间的联系等等.

#104-108
都是一些网站的介绍和推荐(广告),多了解一下没啥坏处,但是有几个打不开,被和谐掉了.
Twitch.tv这个要是能看到直播代码的话倒是个不错的网站

#109 Learn how Script Tags and Document Ready Work
添加script方法,($(document).ready(function(){});这部分代码主要声明，页面加载后 “监听事件” 的方法。
)
<script>
$(document).ready(function(){});
</script>

#110 Target HTML Elements with Selectors Using jQuery
添加按钮回弹效果
<script>
$(document).ready(function() {
$("button").addClass("animated bounce");
});
</script>

#111 Target Elements by Class Using jQuery
给所有类为well的元素添加animated和shake
<script>
$(document).ready(function() {
$("button").addClass("animated bounce");
$(".well").addClass("animated shake");
});

</script>

20170815

# 112 Target Elements by ID Using jQuery
根据id获取元素,具体写法跟上一节一样,把".target"换成"#target"即可
<script>
$(document).ready(function() {
$("button").addClass("animated bounce");
$(".well").addClass("animated shake");
$("#target3").addClass("animated fadeout");
});
</script>

#113 Delete your jQuery Functions
删掉三条语句(白玩了)

#114 (编号记错了,114没有,从115开始)

#115 Target the same element with multiple jQuery Selectors
这个课程讲的是自己动手将114课程的内容根据要求自己录入一遍，刚开始模仿着做了，但是出现问题：
这是第一遍的代码：
<script>
$(document).ready(function() {
$("button").addClass(animated shake);
$(".btn").addClass(animated shake);
$("#target1").addClass(animated btn-primary);
});
</script>
后来发现后面的class是需要有引号的，下面是第二遍代码：
<script>
$(document).ready(function() {
$("button").addClass("animated" );
$(".btn").addClass("animated shake");
$("#target1").addClass("animated btn-primary");
});
</script>
提交以后发现提示错误"在每个选择器中只添加一个 class。"那么应该是哪里出问题?百度后知道后面的每个括号里我都写了两个class.
疑问:跟bootstrap不一样,bootstrap是每个class都有两个,比如"btn btn-primary"这个地方还没搞懂,等以后回头再看.

#116 Remove classes from an element with jQuery
这个简单,移除class.就是把addClass换成removeClass就可以了

#117 Change the CSS of an Element Using jQuery
这个课程是用 jQuery 的css改变样式.也很简单,jquery的css就是讲.addClass换成.css就可以了,不同的是jquer的css后面括号里面
的""这里是把属性和值分开写的,都在括号内,但是分别用引号分开,像下面这样:
$("#target1").css("color","red");

#118 Disable an Element Using jQuery
让按钮变不可选。
这个也不难,jquer的.prop就是让按钮变的不可选.
$("button").prop("disable" true); //需要注意的是:值:true是没有引号的.

#119 Change Text Inside an Element Using jQuery
这节课讲的是jQuery的.html方法,.html方法是用来改变元素的文本的.<em>,emphasize的意思是强调,既然是强调,那么改写后的文本就替换
了以前的文本样式和内容.
$("#target4").html("<em> target4 </em>");
上面的代码现在出错了,提示:"确保你更换的按钮为 target4。"找不到原因,回头再看看
找到原因了,<em>里面的target4少写了一个#,简单的错误啊.

#120 Remove an Element Using jQuery
用.remove方法移除元素,这个简单的
$("#target4").remove("#target4");

#121 Use appendTo to Move Elements with jQuery
用jQuery的appendTo方法把一个元素从一个div转移到另一个div里面,这个也简单,照样子做就可以
$("#target2").appendTo("#right-well");

#122 Clone an Element Using jQuery
拷贝元素,也很简单:就是把元素先复制(.clone)然后拷贝到指定地方(.appendTo)
$("#target5").clone().appendTo("#left-well");

#123 Target the Parent of an Element Using jQuery
简单的说就是改变某个元素的父元素的属性,用parent方法:
$("#target1").parent().css("background-color","red");

#124 Target the Children of an Element Using jQuery

#125 Target a Specific Child of an Element Using jQuery
从父元素中选取众多的子元素中的一个.按照索引顺序.
$(".target:nth-child(2)").addClass("animate bounce");
//这样写但是有问题了.没研究明白,回头再看,找到毛病了,"animate"少个d,应该是"animated",太马虎了,这是怎么发现的呢?因为我看了后面章节的代码,嘿嘿

#126 Target Even Numbered Elements Using jQuery
根据索引获取class的元素,比较难,没怎么看懂
$(".target:even").addClass("animated shake");
//举例是用基数,用的:odd.那么even是不是偶数的形式呢

#127 Use jQuery to Modify the Entire Page
做个body的特殊样式,fadeOut是逐渐隐藏,hinge样式是像钉在墙上的画框掉下来的样子.
$("body").addClass("animated hinge");

20170720
#128 一些介绍

#129 Build a Tribute Page
一个致敬页面
按照本课的样例,需要做个h1标题,一个副标题(h2或者h3),一些对致敬人的简介(ul和li),一张图片(image)
一个链接另外网站的地址(a)
制作要点:可以只做需要的功能,不过我扩展了一下,用了一个h1标题,一个斜体的h2标题,然后是图片,image
用的是网上的图片,百度上找了一张马云的图片然后右键复制图片地址,粘贴过来就可以了.这里需要注意的
是ul的居中,网上很多种方式,但是觉得并不是很好,经常出现圆点在左侧,文字居中的情况找了一天用了下面这段代码
div {
position: relative;
}
ul {
display: block;
width: 600px;
margin: 0 auto;
position: relative;
}
把上面这段代码拷贝到css里,然后ul用div包围,就可以了,顺便我又加了一个bootstrap的页脚
下面的地址是我致敬马云的致敬页
https://codepen.io/cactusboy/pen/BZgoJr

#130 Build a Personal Portfolio Webpage
做一个个人的作品页面,先跳过,回头再来弄

#131 设计弹幕墙,这个跳过吧,没办法翻墙,连样子都看不到