2016/12/10前端學習筆記CSS結束+JS開始。

標籤：nan   表示   個數   bottom   12px   算術運算子   tofixed   style   define   

18 瀏覽器安全色問題：IE6不支援小於12px的盒子，相容方式： height:4px; _font-size:1px;

　　　　　　　　　　IE6不支援overflow：hidden的方法清除浮動，所以，需要 用 ： overflow: hidden; 與_zoom:1;兩條代碼做相容處理

　　　　　　　　　　css屬性之前加上底線是IE6的專有屬性 例如：_background-color:red;

19 margin的塌陷：在標準文檔流中豎直方向的margin會有已較大margin 為準的塌陷現象。但是浮動後沒有塌陷。

20 盒子置中：margin： 0 auto; 1 必須盒子有明確的寬度

　　　　　　　　　　　　　　　　2 不能脫標（浮動，絕對位置，相對定位都不可以） 

21 margin的使用，margin一般用於兄弟之間，當用於父子之間時，如果父親沒有border父親會跟著兒子一起走。所以父子之間一般用父親的padding。

22 margin的IE6相容問題： 當出現連續浮動的元素時，在IE6中，隊首的margin會變為雙倍。

　　　　　　　　　　　　解決辦法 ：1 讓浮動反向與margin方向相反，例如：float：left; margin-right:40px;

　　　　　　　　　　　　　　　　　　2 單獨設定隊首元素的margin,設為其他margin的一半。

23 首行縮排兩個空格代碼： text-indent: 2em;

24 偽類：a的偽類：link(未點擊過的),visited（已訪問過）,hover（滑鼠移至上方）,active（點擊不鬆手時的樣式）;（面試被問到過，表示只想起來一個hover）（喜歡lv包haha）

25 background屬性：其中background-poition: 向右移動量，向下移動量。（也可以用 right bottom這樣來表示）

26 定位有三種 absolute（脫標）,relative(不脫標 可微調自己的位置 相對自己原位置而言),fixed（脫標）;（面試被問到過）

27 移動位置，top,left正值分別是往下往右 。其他的相比這個記憶。

28 參考點：top參考點是對於總頁面左上方而言。bottom是對可視頁面而言。

29 定位參考點，要聽最近定位（相對，絕對（一般不用這種，都絕對全部脫標頁面不穩定）都可以）的長輩。決定定位的孩子無視父親的padding。

30 定位與置中：當絕對位置之後，已經脫標,不能用margin ：0  auto這種方法來置中

　　　　　　　　置中方法改為：width: 600px;position: absolute;left: 50%; margin-left: -300px;

31 固定定位脫標（IE6不相容）

JS開始

1  第一件事面試題（太激動我先把這句話說了，DOM和BOM的區別是什麼：（表示腦子一蒙，啥也不知道。。我也說了不知道。所以死在一面很正常）資料：BOM是瀏覽器物件模型，DOM是文件物件模型，前者是對瀏覽器本身進行操作，而後者是對瀏覽器（可看成容器）內的內容進行操作。http://blog.csdn.net/bing_javascript/article/details/52618695）

2 彈出 alert 控制台輸出：console.log()console.warn()console.error()列印document.write()）

3 變數命名規則：

4 變數範圍  分為局部變數和全域變數 （注意：如果是函數體內沒有加var。比如function（）{a=b=2;}那麼按照全域變數對待）

5 常用事件：onclick:按一下滑鼠

　　　　　　ondblclick:滑鼠雙擊

　　　　　　onkeyup:按下並釋放鍵盤上一個鍵時 

　　　　　　onchange:常值內容或者下拉式功能表中的選項發生改變

　　　　　　onfocus:獲得焦點，表示文字框等獲得滑鼠游標。

　　　　　　onblur: 失去焦點，表示文字框等失去滑鼠游標。

　　　　　　onmouseover:滑鼠移至上方

　　　　　　onmouseout:滑鼠移出

　　　　　　onmouseenter:滑鼠移至上方

　　　　　　onmouseleave:滑鼠移出（跟上兩個的區別 請自行百度哈哈）

　　　　　　onload:網頁文檔載入事件

　　　　　　onunload:關閉網頁

　　　　　　onsubmit:表單提交事件

　　　　　　onreset:重設表單

　　　　　　onresize：視窗 或者架構被調整尺寸

6 簡單輪播圖：點擊下方小span時改變圖片的src即可。src不屬於樣式 所以不用pic.style.src。直接用pic.src。　　　

 7 改變背景圖片時：document.body.syle.backgroundImage="url(image/1.png)";(注意駝峰命名法)

8 JS書寫方法： 行內，內嵌，外鏈（待補充）

 9 基礎資料型別 (Elementary Data Type)： 數值 字元 布爾 null undefined

10 資料類型的轉換： 1 數值轉字元：+"",String(num);

　　　　　　　　　　2 其他資料類型轉布爾： !!num   Boolean()     

　　　　　　　　　　　　　　　　所有數字為真，0是假

　　　　　　　　　　　　　　　　所有字元為真 “ ”是假

　　　　　　　　　　　　　　　　false undefined  null 0 ""  是false

　　　　　　　　　　　　　　　　true 1 "somestring" [Object] 是true

　　　　　　　　　　　　　　　　1+true   2(布爾轉數值）

　　　　　　　　　　　　　　　　0+false  0(布爾轉數值）

                            3 數值型：console.log(0xb)  16轉10進位

　　　　　　　　　　　　　　　console.log(020)  8轉10進位

　　　　　　　　　　　　　　　x-1     x*1 (字元轉數值)

　　　　　　　　　　　　　　　Number()  (字元轉數值)

　　　　　　　　　　4 parseInt("10.1px")返回10(注意取整）

 　　　　　　　　　　　　　　　“px10” NaN

　　　　　　　　　　　　　　　　“10px10” 10

　　　　　　　　　　5 parseFloat(“10.0”)返回 10 選擇輸入最前面的數字 小數為是0 返整數 非0 返小數 非數字 NaN

11  函數相關知識點     1 function fn(){} 調用時，fn()位置隨意 2 var fun=function(){}  fun();必須放在函式宣告之後

　　　　　　　　       2 聲明函數時參數是形參，調用時 參數是實參 （形參大於實參個數時 取前幾個 小於實參個數時報錯）

　　　　　　　　       3 函式宣告內部產生的arguments的長度指的是實際參數的個數。不是形參的個數

                              4 變數提升 解釋下左邊的原因 ： function範圍裡的變數會覆蓋上層範圍變數。but:只提升變數聲明 不提升賦值。意思就是：下面的 var a="3"會覆蓋掉var  a = 2; 但是 卻只有var a;放在了函數內部的頂部，而 a="3"卻還在底部。所以返回undefined; 順便提一下return 一個函數只能有一個return;同時終止函數運行。

12 算術運算子：var a = 10,b=20, c=30； a++;++a;  e=++a+(++b)+(c++)+a++; console.log(e);返回:77

13 var txt=$("input").value;或者某個表單的值。一般都是擷取焦點之後才去判斷，

　　　　　　　　　　所以獲得游標時觸發是： txt.onfocus=function(){ if （txt.value==""{}）}  只有表單才有value值 div span 沒有所以用innerHTML

　　　　　　　　　　　　獲得輸入時觸發是：txt.oninput=funciotn(){if(txt.value==""})};(IE678不支援）

　　　　　　　　 　　補充 :txt.focus();表示讓表單自動獲得游標。

　　　　　　　　　　　txt.select();自動選擇表單內部文字

                給某個元素更改類名（result.className="re"）

14 isNaN(4) false  isNaN("4") false 是不是非數字 是的時候 true 不是的時候 false

15 注意排他思想的雙迴圈結構

16 tab欄切換案例 注意雙排他之後

this.className="re1"; lis[this.index].className="show";

17 

18 　兩種數組聲明方式： var arr=[]; var arr= new Array();　　

19　console.log(arr.pop()).返回刪掉的值 shif

　　console.log(arr.push(9)) 返回數組長度。 unshift

     其他兩個同理 

　　a.concat(b);把兩個數組連起來形成第三個數組

　　arr.join("-");把數組轉化為字串；

　　var txt="wo men"; console.log(txt.split(" "));字串轉化為數組

20 重點JS組成：1 ECMAScript 描述了JS的文法和基本對象。比如變數區分大小等

　　　　　　　　2 文件物件模型（DOM） 處理網頁內容的方法和介面 比如怎麼得到某個表單的值，怎麼關閉div

　　　　　　　　3 瀏覽器物件模型（BOM）與瀏覽器互動的方法和介面 前進 後退 快顯視窗 跳轉頁面。
21 DOM樹

22 擷取類名的相容性寫法：

　　　　document.getElementByClassName("one") IE678不支援。

　　　　下面寫相容性寫法。

 

23 對節點的訪問。1 parentNode;

　　　　　　　　　2 nextSibling  previousSibling firstChild lastChild(IE678支援)  

　　　　　　　　　3 nextElementSibling  previousElementSibling   firstElementChild  lastElementChildFirefox Google等 上述的相容性問題 可以用||使用

　　　　　　　　　4childNodes在ie9裡可能是換行或空格等。解決方案

　　　　　　　　　　　　　　　　　　　　 1 用判斷nodeType的方法（nodeType==1元素節點）（nodeType==2屬性節點）（nodeType==3文本節點）

　　　　　　　　　　　　　　　　　　　　　var nodes=childNodes;然後對nodes[i].nodeType判斷

　　　　　　　　　　　　　　　　　　　　　2 用children, 這個擷取的是內部所有節點，but在ie678裡包含注釋節點，所以一定不要有注釋。

 

 

24   DOM節點操作 1 建立節點  var test = document.createElement("div");

　　　　　　　　　2 添加節點  demo.appendChild(demo1);

　　　　　　　　                在demo內部的newDiv之前插入newspan demo.insertBefore(newspan,newDiv)若newDIV==null.預設插在後面

　　　　　　　　　3 屬性的相關設定 demo.getAttribute("id");擷取 demo的id

　　　　　　　　　　　　　　　　　demo.setAttribute("class","class1");給demo設定一個類 類名字叫class1;

　　　　　　　　　　　　　　　　　demo.removeAttribute("class");把 demo的class屬性給刪除掉

　　　　　　　　　　but!!!上述方法ie67不支援。所以，相容性寫法是demo.className="one";

　　　　　　　　　4 更改多個屬性 div.style.cssText="width:100px; height:10px";

　　　　　　　　　5 刪除節點 a.removeChild(b)移除 a裡面的b節點；

　　　　　　　　　6 複製節點 domo.parentNode.appendChild(demo.cloneNode(true)); true表示複製節點與子節點。false只複製本身，不複製子節點。

25 日期對象。 var aa=new Date();內建時間

　　　　　　　var aa1=new Date("2014/3/03 13:34:00");自訂時間。

　　　　　　　aa.getTime();是指從1970年開始到現在的毫秒數

 

26　此處添加字串轉換方法 num.toString(). 但是a.toString(2)是轉化為2進位

27 根據位置返回字元

 

28 檢測字串長度：

29 返回字元位置。 

30 截取字串 

31 var a=23.3334212;

　　console.log(a.toFixed(2));

32 var a1=a;

　　console.log(a1.toUpperCase()); 與 toLowerCase()對應。大小寫轉化。

33  Math.max(1 ,2 ,red); 返回 NaN；

34 BOM語句複習。window.location.href="www.baidu.com";

 

今天到此為止，下次更新offset家族。

　　 

2016/12/10前端學習筆記CSS結束+JS開始。