day16--HTML、CSS、JavaScript總結

    HTML

        一大堆的標籤：塊級、行內

　CSS

　　position

　　background

　　text-align

　　padding

　　font-size

　　background-image

　　z-index

　　opacity

　　float(clear:both)

　　line-height

　　border

　　color

　　display

　　補充：頁面佈局    

    JavaScript

　　6.for循環

　　    for (var item in [11,22,33,44]){

　　　　console.log(item)

　　　　}

　　　for (var i = 0;i<arra.length;i=i+1){

　　　　break;}

　　while(條件){}

　　7.條件語句

　　if(條件){} else if(條件){結果} else{結果}

        switch(name){case:"1|:console.log(123)

　　　　　　　　break;

　　　　　　　　case:"2":console.log(456);

　　　　　　　　default:console.log(789);}

　　8.函數

　　    function func(arg){

　　　　}

　　　普通函數

　　　　function func(){

　　　　}

　　　匿名函數：

　　　　setInterval(function(){},5000)

　　　自執行函數：

　　　　function func(){}

　　　　(function(arg){

　　　　　　console.log(arg);

　　　　})()                #自執行函數，自動執行函數

　　    自執行函數就是函數建立完畢以後，總體括起來，在外面加上一個()，就可以自動執行(def func():print(66666))()自動觸發執行

            序列化和飯序列化

　　　JSON.stringify(obj)     #把對象轉化爲字符串  obj = [1,2,3,4,5]   con = JSON.stringify(obj)   >: "[1,2,3,4,5]"

　　    JSON.parse(obj)         #把字符串對象轉換爲原有形式，如列表，字典形式

　　    十、轉義

　　　　客戶端（cookie）   =》  服務器端

　　　　轉義以後保存到硬盤上，保存用戶登陸狀態，保存到本地cookie中，須要轉義。

　　　　將數據通過轉義後，保存在cookie中

　　　　encodeURI()     #轉義字符，將中文轉換爲，轉義後的URL地址

　　　　encodeURIComponent( )   轉義URI組件中的字符

　　　　decodeURI()     #進行轉義，把轉換後的URL進行解碼

　　　　decodeURIComponent( )   URI組件中的未轉義字符

　　　11.eval

            　JavaScript

　　　　　　eval()

　　　12.時間

　　　　Date類

　　　　var d = new Date()

　　　13.做用域

　　　　JavaScript：以函數做爲做用域

　　　　function func(){

　　　　　　if(1==1){var name="alex";

　　　　　　　　}

　　　　　　　　console.log(name);

　　　　　　　　}

　　　　func()

　　　　=================================一、以函數做爲做用域=====================================

　　　　=================================二、函數的做用域在函數未被調用以前，已經建立================　

　　　　=================================三、函數的做用域存在做用域鏈，而且也是在被調用以前建立=======

    JavaScript的做用域是函數級別的，以函數塊爲做用域，從內層開始查找做用域。

    function func(){

　　var xo = "eric";

　　function inner(){

　　　　console.log(xo);

　　}

　　var xo = "tony"

　　return inner;

　　}

　　var ret = func()

　　ret()

　　執行結果是「tony"，爲何呢？由於內層做用域沒有執行，下面"tony"替換了"eric"，最後調用的時候，"eric"已經被修改成"tony"。

　　14.JavaScript面向對象

　　    function Foo(n){

　　　　this.name = n;

　　　　this.sayName = function(){

　　　　　　console.log(this.name);

　　　　　　}

　　　　}

　　　var obj = new Foo("we");

　　a.this帶指對象（python self）

　　b.建立對象時，new函數()

    DOM

　　間接查找

　　　　文件內容操做：

　　　　　　innerText                           #僅獲取文本

　　　　　　innerHTML　　               #獲取所有內容

　　　　　　value                                  #input標籤中的value值，可以設置

　　　　　　value                                 #select標籤中的<option value="n">值也可以修改，變換選擇的選項

　　　　　　selectedIndex                     #select中的索引值

　　　　CSS樣式

　　　　　　className

　　　　　　classList.add

　　　　　　classList.remove

　　　　　　obj.style.fontsize="16px"          #修改標籤中的樣式，給style添加屬性

　　　　屬性操做

　　　　　　setAttribute(屬性名,值)                            #給屬性設置值

　　　　　　removeAttribute(屬性值)                          #刪除屬性值

　　　　　　getAttribute(屬性名)                                  #獲取屬性

　　　　建立標籤，並添加到HTML中　

　　　　提交表單

　　　　document.getElementById("f1").submit()

　　　　其餘：

　　　　    console.log()     alert      confirm(信息)      v:true    false

　　　　　location.href    獲取當前網頁的url      location.href="url|"   跳轉到某個網頁

　　　　    setInterval(函數,時間)    #定時器，一直在執行中。

　　　　    clearInterval(obj);     取消定時器

　　　　　setTimeout(函數,時間)    定時器只執行一次

　　　　　clearInterval(obj)     清除定時器

　　　　事件：

　　　　　行爲   樣式   結構   相分離的頁面？

　　　　　js          css      html   

　　　　　綁定事件兩種方式：

　　　　　　a.直接標籤綁定，onclick="xxxx();"

　　　　　　b.先獲取Dom對象，而後進行綁定

　　　　　　　　document.getElementById("xx").onfoucs

　　　　　　　　document.getElementById("xx").onfoucs

　　　　this,當前觸發事件的標籤

　　　　　a.第一種綁定方式

　　　　　　<input id="i1" type="button" onclick="ClickOn(this)">

　　　　　　function.ClickOn(self){

　　　　　　　　//self  當前點擊的標籤

　　　　　　　　}

　　　　　b.第二種綁定方式

　　　　　　<input id="i1" type=button">

　　　　　　document.getElementById("i1").onclick = function(){

　　　　　　　　//this 帶指當前點擊的標籤

　　　　　　　　}