1、 opacity與RGBA
對元素進行透明度的設置時，經常用到的有opacity與background -color:rgba()，但兩者有所不同；對比：rgba()和opacity都能實現透明效果，但最大的不同是opacity作用於元素，以及元素內的所有內容的透明度，而rgba()只作用於元素的顏色或其背景色，兩者語法：
opacity(0-1)
background-color:rgba(r,g,b,a)//a 就是透明度 值0-1;
基於兩者的區別與開發時的需求RGBA的方法相對於前者的方法比較實用。
2、 javascript中函數的概念、作用、創建、調用
1.JavaScript的認識。
JavaScript作爲一種腳本語言，不同於C++/Java等語言，它更加靈活，但同時也更加令人無奈。JavaScript包括三個部分，分別是Ecmascript，DOM，BOM。Ecmascript是Javascript的標準制作者協會，規定其語法和基本對象，DOM全稱爲Document Object Model，顧名思義文檔對象模型，主要針對瀏覽器中的文檔進行操作，BOM全稱爲Bowser Object Model，瀏覽器對象模型，主要針對瀏覽器的各個基本屬性如location等。JavaScript中數據的基本類型有數值、字符串、布爾值、undefined、null和Object等，個人認爲其中最難學的便是Object類型的操作了，下面針對Object類型中的函數做一些總結。
2.函數的概念作用
面向對象編程思想的特點主要有封裝性、繼承性和多態性，面向對象程序設計離不開函數的封裝，函數的封裝增強了代碼的可讀性，使代碼的結構更加清晰便於理解，另外在不同的需求中方便進行不同的調用。
3.函數的創建
函數的創建大概有3種方式。
① 通過函數的聲明進行創建。如：
Function box(){
Console.log('hello');
};
Box();
備註：此種方式創建函數默認會有一個返回值，即this，而這個this便是全局對象window。另外函數 的創建必須有函數的調用，否則函數的創建是不會同步執行的。
② 通過函數的表達式進行創建。如：
Var box=function(){
Console.log('hello');
}
Box();
備註：這種方式創建的函數也必須進行調用，否則函數的創建是不會隨代碼同步執行的，另外函數的 創建必須在函數的調用之前。
③ 定義構造函數。如：
Var fun=new Function();
備註：這種函數創建方式，函數創建的同時可以自己調用。
4.函數的調用
函數的調用主要有4種方式。
【1】作爲函數去調用，如 函數名()。
這種函數內部的this指向是window，所以函數內部不能定義window爲變量，否則程序會崩潰。
【2】作爲方法去掉用。
這種調用方式內部this指向是函數對象本身。如：
Var car={
Color:'red',
Length:'3',
Desc:function(){
Return '這輛車是'+this.color+'的，長度爲'+this.length+'米';
}
}
Car.desc();
備註：創建的car對象擁有顏色和長度的屬性，同時有自我介紹的方法，這裏的this指向car對象。
【3】使用構造函數調用。
Function car(color,length){
This.color=color;
This.length=length;
}
Var x=new car('red','3');
X.color;
備註：構造函數調用創建一個新的對象，該對象繼承構造函數的屬性和方法。
【4】作爲函數方法調用函數。
JavaScript中的函數是對象，call()和apply()是該對象擁有的方法，兩個方法都可以調用函數本身，這兩個方法中的第一個參數都是函數本身。如：
Function chengfa(a,b){
Return a*b;
}
Chengfa.call(obj1,10,2);//obj1的返回值爲20
備註：函數中a爲函數本身即chengfa()，因爲call()方法中可以有多個參數，所以b依次爲10,2。
Function chengfa(a,b){
Return a*b;
}
arr=[10,2];
Chengfa.apply(obj2,arr);//函數返回值爲20。
備註：函數中a爲函數本身即chengfa()，b爲arr數組。
5.函數的深刻認識。
個人認爲：如果想對函數進行更加深入的瞭解和認識，可能要先了解JavaScript的運行機制，在瞭解的同時，充分認識函數的執行環境和變量的存儲。
jQuery是一個兼容多瀏覽器的javascript庫，核心理念是write less,do more(寫得更少,做得更多)。
jQuery，顧名思義，也就是JavaScript和查詢（Query），jQuery是免費、開源的。它可以簡化查詢DOM對象、處理事件、製作動畫、處理Ajax交互過程。
1． 引入JQuery
創建一個新的HTML文檔，在</head>結束標籤上邊加
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
這樣的一個標籤，引進JQuery的js文件。
3、 JQuery入門
- JQuery選擇器是JQuery中最核心的內容，相比較原生JS來說JQuery的中選擇器更加方便更
加簡練，原生JS中選擇器：
document.getElementById('box');
document.getElementsByTagName('div');
document.getElementsByClassName('box');
document.querySelector('.box');
document.querySelectorAll('.box');
往往常用的就上述的五種。而JQuery的選擇器：
ID選擇器$("#box");
類名選擇器：$(".box");
標籤選擇器：$("div");
通配符選擇器：$("*");
羣組選擇器：$("div, p, a");
後代選擇器：$("#box p");
簡單來看就可以看出JQ的選擇器相比較原生的來說要精簡不少，用起來也要方便不少，但是原生JS中選擇器返回的結果可能是一個DOM元素或者是一個僞數組，但是JQ選擇器返回的結果全是僞數組。
- JQ基本dom操作也是JQ入門來說相對簡單的一些操作，相比較原生JS來說，也是更加精煉。JQ中的設置方法一般都是可以爲全部選中元素設置的。
$(".box").attr（"name"，"test1"）
爲類名爲box的元素設置name的自定義屬性，屬性值爲test1，
如果attr中只傳一個參數"name" 那麼就是查詢類名爲box中的自定義屬性的屬性值。
$(".box").removeAttr（"name"）
相對應的，上述的方法就是刪除類名爲box的name自定義屬性。
因爲class在整個編程中都是特別常用的屬性，所以JQ中專門爲class設置了方法。
$(".box").addClass（"item"）
上邊這個就是爲每個匹配的元素添加item類名。
$(".box").removeClass（"item"）
上述就是刪除。
$(".box").toggleClass（"item"）
自我感覺這個方法用處就沒有上邊兩個方法用的多， 這個方式就是如果元素存在類名item 那麼就刪除，如果元素上沒有item類名，那麼就添加。
$(".box").animate（{width：300}，1000）
上述的方法就是給類名爲box的元素添加一個運動，使它的寬度變成300px，第二個參數 是時間，毫秒做單位，也就是說在1000毫秒內類名爲box的元素寬度變成300px。
有了運動自然會有結束運動的方法
$(".box").Stop（）
上述就是結束所有在類名爲box元素的運動效果。
- JQuery的擴展性，JQ的可擴展性爲我們也是提供了便利，可以自己封裝一些需要的功能，其擴展方法就是使用$.fn來實現的。
舉個例子：
<div id="box">我是JQ擴展性實現的高亮體字</div>
下面是實現：
$.fn.highlight = function（）{
this.css（"background-color"，"#fffceb"）.css（"color"，"#d85030"）
return this；
}
$("#box").highlight（）;
這樣就可以實現一個爲高亮體字的一個自己封裝的方法。
JQuery中這樣的方法還有好多好多，簡單來說相比較原生的js來說JQ框架真的是要方便不少。
4、 心得體會
1.先從最簡單的開始寫，一點一點的去往上添加功能。一口吃不成個胖子，所有複雜的程序都是從最簡單的演變而來的。
2.碰到程序報錯或者功能沒有實現的，一次只研究一個問題，那將會更容易找到問題的關鍵。必須確保這個問題解決之後，再去轉移到另一個問題上。
3.打印日誌。這是個究極強大的功能。在寫程序的時候打印日誌就能通過瀏覽器來了解程序狀態，如果程序出錯不能實現相應的功能那就打印日誌通常就能很快的發現程序中的錯誤。
4.BUG bug總是難免會遇到的，最好能夠做成可以快速的排除、修復bug。
5.動手去做， 代碼一定需要多寫多練你才能去熟練和掌握。
6.帶着問題睡覺 如果你有一個很難的問題，那麼你可以帶着問題睡覺。有科學研究表明（滑稽），這樣做雖然你表面上並沒有在主動思考問題，但你的潛意識卻這麼做了。其結果就是，第二天再去研究問題，解決辦法就呼之欲出了。
7.複習和預習 每天早上過來的時候可以複習一下以前講過的知識，有效的鞏固一下所學的東西。以後時間長了不去複習就會忘記。晚上回去前半個小時可以預習一下明天要講的知識，這樣在第二天聽課的時候就回輕鬆一點，晚上看不懂的東西第二天一下就能弄懂了，還可以提高聽課的注意力。
5、 css小項目
css繪製愛心
css 代碼
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
html 代碼
<div id="heart"></div>
總體來說，現階段前端的課程學習還在繼續，學海無涯，前端接觸的越深就會發現需要學的東西還有很多，希望大家共同努力，共同學習，加油！