FreeCodeCamp备查簿(4:#91-#131)
20170814
91、 Create a Bootstrap Headline
``` 建一个bootstrap的标题jQuery Playground
```
92、 House our page within a Bootstrap Container Fluid Div
``` 建一个container-fluid的div元素(container-fluid,自动设置为外层视窗的100%，如果外层视窗为body，那么它将全屏显示，无论屏幕大小，并且自动实现响应式布局。)```jQuery Playground
93、 Create a Bootstrap Row
``` 创建一个带class="row"的div```
94、 Split your Bootstrap Row
``` 设置两个col-xs-6的div```
95、 Create Bootstrap Wells
```
创建well的div
```
96、 Add Elements within your Bootstrap Wells
```
设置三个button
```
97、 Apply the Default Bootstrap Button Style
```
给每个按钮加默认的属性,default
```
98、 Create a Class to Target with jQuery Selectors
``` 创建一个jquery的选择器,target ```
99、 Add ID Attributes to Bootstrap Elements
```
添加id属性,class是给元素定义一个类,符合这个类的都是一个样式,id是给元素起名字
一个元素就一个名字,当然,也可以同名.
```
100、 Label Bootstrap Wells
```
添加h4
#left-well
#right-well
```
101、 Give Each Element a Unique ID
```
给按钮添加id
#left-well
#right-well
```
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(){});这部分代码主要声明，页面加载后 “监听事件” 的方法。
)
```
110、 Target HTML Elements with Selectors Using jQuery
``` 添加按钮回弹效果 ```
111、 Target Elements by Class Using jQuery
``` 给所有类为well的元素添加animated和shake ```
20170815
112、 Target Elements by ID Using jQuery
``` 根据id获取元素,具体写法跟上一节一样,把".target"换成"#target"即可 ```
113、 Delete your jQuery Functions
``` 删掉三条语句(白玩了) ```
114、 (编号记错了,114没有,从115开始)
115、 Target the same element with multiple jQuery Selectors
``` 这个课程讲的是自己动手将114课程的内容根据要求自己录入一遍，刚开始模仿着做了，但是出现问题： 这是第一遍的代码： 后来发现后面的class是需要有引号的，下面是第二遍代码： 提交以后发现提示错误"在每个选择器中只添加一个 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方法是用来改变元素的文本的.,emphasize的意思是强调,既然是强调,那么改写后的文本就替换
了以前的文本样式和内容.
$("#target4").html(" target4 ");
上面的代码现在出错了,提示:"确保你更换的按钮为 target4。"找不到原因,回头再看看
找到原因了,里面的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
``` 做一个个人的作品页面,先跳过,回头再来弄 ```