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 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

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容