美文网首页
freeCodeCamp笔记(nomore!)

freeCodeCamp笔记(nomore!)

作者: M1SG | 来源:发表于2017-06-10 02:03 被阅读0次

    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

    相关文章

      网友评论

          本文标题:freeCodeCamp笔记(nomore!)

          本文链接:https://www.haomeiwen.com/subject/nbfqqxtx.html