freeCodeCamp笔记(nomore!)

html+css

1.关于Lorem ipsum 链接

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

这是一段用来测试排版效果的占位文字,没有实际含义,实际上自从16世纪就有人用了

2.引入Lobster字体

<link href="https://fonts.gdgdocs.org/css?family=Lobster" rel="stylesheet" type="text/css">

3.Specify How Fonts Should Degrade(字体降级)

p {font-family: Helvetica, Sans-Serif;} 这样写浏览器就会在Helvetica字体不可用时自动降级为Sans-Serif字体

4.使用百分比(50%)而不是像素生成圆型边框

5.letters

Nesting 嵌套

6.表单提交按钮和action属性、required属性

在表单里添加一个type属性为submit的按钮,则点击按钮后表单中的数据会被提交到action属性指定的地址上,action属性的值指定了表单提交到服务器的地址

当你设计表单时,你可以指定某些选项为必填项(required),只有当用户填写了该选项后,用户才能够提交表单,在input元素中加上required属性就可以了,required属性在Safari浏览器中不起作用

7.元素的margin、padding

元素的外边距margin控制元素边框border和元素实际所占空间的距离,如果你将一个元素的margin设置为负值,元素将会变大

元素的padding控制元素内容content和元素边框border之间的距离

padding: 10px 20px 10px 20px;

这四个值以顺时针方式排列:顶部、右侧、底部、左侧,简称:上右下左 

当然,margin也是一样的,实际上css中其他这种情况应该也是这个原则

第一篇先这样吧

8.CSS中的颜色调配

用十六进制(hex)前2个数字是红色多少最大ff,最小00,中间2个数字是绿色多少,最后2个数字是蓝色多少,共约1600万色,也可以简化为3个一位十六进制表示,约4000色,还可以用rgb(x,x,x)的形式表示,x是0-255之间的数字

bootstrap

1.container-fluid类属性

响应式设计的div

2.img-responsive类属性

使图片自动适应页面

3.text-center类属性

用于元素居中

4.btn类属性、btn-block类属性、btn-primary、btn-info、btn-danger

btn用于bootstrap的按钮样式,btn-block用于将按钮伸展并填满页面整个水平空间,仍然需要btn类属性,btn-primary是基本颜色(darkblue),用在用户主要采取的操作上,btn-info是浅蓝色,用在用户可能会采取的那些操作上,btn-danger是红色,提醒用户该操作具有破坏性

5.bootstrap的网格布局

在父div上定义row,则子div会横向排列,再定义如col-xs-4之类就可以了,注意都是用div布局的,同理定义col会竖向排列

6.text-primary、text-info、text-danger

和btn的同理

7.font-awesome

一个方便的图标库,都是矢量图形,以.svg格式保存,比如fa fa-thumbs-up就表示一个大拇指图标,fa-info-circle表示信息图标,fa-trash表示删除图标,fa-paper-plane表示一个发送图标(纸飞机,用于submit)

8.form-control

用于显示input输入框

9.well

为设定的列创造出一种视觉上的深度感

jquery

$(document).ready(function() {

将代码写在这里面

});

在没有document ready function以前,代码会在HTML没有渲染完成就执行,这样会产生bug

所有jQuery方法都是由$开始的,通常称作为美元符号,或者简称为bling

要引入jQuery库和Animate.css库,FCC上在后台引入过了

$("button").addClass("animated bounce");

添加类

$("button").removeClass("btn-default");

移除类

$("#target1").css("color","red");

添加样式

$("button").prop("disabled", true);

prop()方法用来调整元素属性,这可以使按钮不可用

$("h3").html("jQuery Playground");

jQuery的.html()方法可以添加HTML标签和文字到元素,而元素之前的内容都会被方法的内容所替换掉

$("#target2").clone().appendTo("#right-well");

复制及追加元素的方法

$("#left-well").parent().css("background-color", "blue");

为元素的父级元素添加样式

$("#left-well").children().css("color", "blue");

为元素的子元素添加样式

$(".target:nth-child(3)").addClass("animated bounce");

给带有target类的元素的第3个子元素添加类

$(".target:odd/even").addClass("animated shake");

给带有target类且索引值为奇数/偶数的元素添加类

$("body").addClass("animated hinge");

给body添加一个很酷的动画效果

javascript

1.声明变量

在计算机科学中,data(数据)就是一切,因为它对于计算机的意义重大。JavaScript提供七种不同的data types(数据类型),它们是undefined(未定义),null(空),boolean(布尔型),string(字符串),symbol(符号),number(数字),object(对象)

举个栗子, 计算机能够分辨不同的数字, 例如数字12和strings,"12"和"dog", 或"123 cats", 都是字母的集合。 计算机能够精确地操作数字, 但是对于字符串却无能为力

Variables(变量)允许计算机以一种动态的形式来存储和操作数据,通过操作指向数据的指针而不是数据本身来避免了内存泄露,以上的七种数据类型都可以存储到一个变量(variable)中。

Variables非常类似于你在数学中使用的x,y变量, 这意味着它们都是以一个简单命名的名字来代替我们赋值给它的数据。计算机中的variables(变量)与数学中的变量不同的是,计算机可以在不同的时间存储不同类型的变量。

2..push()、.unshift() 和 .pop()、.shift()

.push()接受一个或多个参数,并把它“推”入到数组的末尾

.pop()函数用来“抛出”一个数组末尾的值。我们可以把这个“抛出”的值赋给一个变量存储起来

.shift()函数用来“抛出”一个数组头部的值

.unshift()接受一个或多个参数,并把它“推”入到数组的头部

3.局部变量与全局变量

一个程序中有可能具有相同名称的局部变量 和全局变量。在这种情况下,局部变量将会优先于全局变量

4.队列

在计算机科学中队列(queue)是一个抽象的数据结构,队列中的条目都是有秩序的。新的条目会被加到队列的末尾,旧的条目会从队列的头部被移出

5.switch

如果switch语句中的case分支的break语句漏掉了,后面的case语句会一直执行直到遇到break

switch(val) {

case 1:

case 2:

case 3:

result = "1, 2, or 3";

break;

case 4:

result = "4 alone";

}// 分支1,2,3将会产生相同的输出结果

6.21点算法

在赌场21点游戏中,玩家可以通过计算牌桌上已经发放的卡牌的高低值来让自己在游戏中保持优势,这就叫21点算法

21点算法的简单实现函数

7.对象

有两种方式访问对象属性,一个是点操作符(.),一个是中括号操作符([])

如果你想访问的属性的名称有一个空格,这时你只能使用中括号操作符([])

中括号操作符的另一个使用方式是用变量来访问一个属性。当你需要遍历对象的属性列表或查表时,这种方式极为有用

var someProp = "propName";

var myObj = {

propName: "Some Value"

}

myObj[someProp]; // "Some Value"

使用delete ourDog.bark;这样的语句可以删除对象的某个属性

可以用.hasOwnProperty(propname)方法来检查对象是否有该属性。如果有返回true,反之返回false

如果你需要通过变量来访问对象的属性值,请用中括号操作符,点操作符不支持变量

8.JSON

JavaScript Object Notation 简称JSON,它使用JavaScript对象的格式来存储数据。JSON是灵活的,因为它允许数据结构是字符串,数字,布尔值,字符串,和对象的任意组合

可以通过串联起来的点操作符或中括号操作符来访问JSON对象的嵌套属性 ourStorage.cabinet["top drawer"].folder2

JSON对象可以嵌套对象和数组。与访问嵌套对象一样,用中括号操作符同样可以访问嵌套数组

函数返回的永远是整个对象

9.条件循环语句

for ([初始化]; [条件判断]; [计数器])

初始化语句只会在执行循环开始之前执行一次。它通常用于定义和设置你的循环变量

条件判断语句会在每一轮循环的开始执行,只要条件判断为true就会继续执行循环。当条件为false的时候,循环将停止执行。这意味着,如果条件在一开始就为false,这个循环将不会执行

计数器是在每一轮循环结束时执行,通常用于递增或递减

10.随机数

Math.random()用来生成一个在0(包括0)到1(不包括1)之间的随机小数,因此Math.random()可能返回0但绝不会返回1

生成两个指定数之间的随机数的方法

Math.floor(Math.random() * (max - min + 1)) + min

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,324评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,303评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,192评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,555评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,569评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,566评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,927评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,583评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,827评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,590评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,669评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,365评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,941评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,928评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,159评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,880评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,399评论 2 342

推荐阅读更多精彩内容