freeCodeCamp学习记录【一】

向大家推荐一个学习网站 Freecodecamp，像打怪一样，根本停不下来。

这一周，我也开始理清了各种库是什么意思，下面是我自己的理解，仅适用于非常初级使用。首先 Bootstrap 是 CSS 的框架，也就是说 Bootstrap 里封装好了一些效果，只要使用对应的语句就可以做出好看的 CSS 样式，jQuery 和 JavaScript 的关系也是如此。可以说 Bootstrap 和 jQuery 是在原生的 CSS 和 JS 基础上产生的。

在我做练习的过程中，有这么几个关键点想和大家分享。

在 html 文件中，如果要使用 CSS 样式，首先要在

<style>

元素中创建选择器。选择器有元素选择器、类选择器 (.) 和 id 选择器 (#) 三种。

元素选择器用在直接为

<h1>

等标签内的元素添加样式，代码如下：

h2 {color: red;}

类选择器可以同时为多个标签内的元素设置样式，只要在写明 class：

<h2 class="blue-text">

它的书写规范如下：

.blue-text {
color: blue;
}

注意：类选择器前面要有“.”这个符号。

你也可以应用多个 class 到一个元素，只要用空格分开即可，像下面的例子一样：

<img class="classname1 classname2">

id 选择器的级别高于前两个，也就是说，设置的 id 选择器的样式将被最终渲染到页面上。代码如下：

#cat-photo-element {
background-color: green;
}

如果你一定要确保某元素具有指定的 CSS 样式，可以使用“终极杀手”，使用

!important

。

Bootstrap 是一种流行的响应式框架。“通过响应式设计，你无需再为你的网站设计一个手机版的。它在任何尺寸的屏幕上看起来都会不错。” ——这就是响应式代表的意义。通过 Bootstrap 你可以设置更多的样式，我想介绍的一种是

<div>

标签的布局使用。

<div class="row">
<div class="col-xs-8">
<h2 class="text-primary text-center">CatPhotoApp</h2>
</div>
<div class="col-xs-4">
<a href="#"><img class="img-responsive thick-gr
een-border" src="/images/relaxing-cat.jpg"></a>
</div>
</div>

用上述代码，你可以为你的元素布局，效果如下：



在 jQuery 中，用

$

操作符来选中元素，通过

.addClass

可以添加效果，比如：

$("butt
9236
on").addClass("animated bounce");

这句代码为

button

这个按钮添加了弹回效果。

最后要讲的一点是 jQuery 用 CSS 选择器来选取元素，

target:nth-child(n)

CSS 选择器允许你按照索引顺序(从 1 开始)选择目标元素的所有子元素。但是要注意 jQuery 里的索引是从 0 开始的，可以创造更丰富的效果。同样也可用

.parent()

对某个元素的父元素进行操作。而且两个 jQuery 方法合起来使用了叫做方法链function chaining，使用起来很方便，可以在学习来风多效果后进行组合。

那么，今天与非的总结就到这里结束了，断断续续四个月有余我从这里才感觉刚刚开始入门，以后希望一起进阶，不气馁不妥协。