前端HTML、JS、CSS

時間  2019-11-08
標籤 前端 html css 欄目 HTML 简体版
原文   原文鏈接

基礎

一、前端頁面有哪三層構成？ HTML結構層、CSS表示層、JS行爲層。
二、瀏覽器內核(渲染引擎)javascript

①IE內核 -- Trident                                              
②Firefox內核 -- Gecko
③Safari內核(曾經Chrome內核) -- Webkit      
④現Chrome內核 -- Blink

三、綁定事件的方式？css

一、直接在dom裏綁定：<div onclick="test(this)"></div>
 二、在js中經過onclick綁定：xxx.onclick=test;
 三、經過事件綁定：dom.addEventListener("click", ele, boolean)

(拓展：js事件流模型？)html

「事件冒泡」：事件由最具體的元素接收，而後逐級向上傳播；
「事件捕捉」：事件由最不具體的節點先接收，而後逐級向下，一直到最具體元素；
「dom事件流」：三個階段：事件捕捉，目標階段，事件冒泡；

e.stopPropagation() 阻止冒泡
e.preventDefault() 阻止默認事件前端

四、form表單提交與ajax提交什麼區別？java

一、Ajax在提交、請求、接收時都是異步進行的，網頁不須要刷新；
   而Form提交則是新建一個頁面，哪怕是提交給本身自己的頁面，也是須要刷新的。
二、Ajax在提交時是在後臺新建一個請求；Form倒是放棄本頁面，然後再請求。
三、Ajax在提交、請求、接收時整個過程都須要程序來對其數據進行整理；
   Form提交倒是根據表單結構自動完成，不須要代碼干預。
四、Ajax必需要使用JS來實現，不啓用JS的瀏覽器沒法完成該操做；
   Form倒是瀏覽器的本能，不管是否開啓JS均可以提交表單。

五、爲何要用Ajax？jquery

使用Ajax用戶體驗會更「敏捷」：數據提交頁面不會閃屏；頁面局部更新速度快；網絡帶寬佔用小

六、離線存儲--本地存儲和離線緩存 及優缺點android

1.本地存儲--1) cookie    2) localStorage    3) sessionStorage
2.離線緩存--1) Application Cache (Manifest)

Cookieios

優勢：
    可控制過時時間，使其不會長期有效
    可擴展、可用性比較好
    可加密減小cookie被破解的可能性
缺點：
    數量和長度有限制，最多20條，最長不能超過4k
    請求頭上帶着數據安全性差
主要應用：
    購物車、客戶端登陸

localStorage(本地存儲)web

優勢：
    localStorage拓展了cookie的4k限制
    localStorage能夠將第一次請求的5M大小數據直接存儲到本地，相比於cookie能夠節約帶寬
    localStorage的使用也是遵循同源策略的，因此不一樣的網站直接是不能共用相同的localStorage
缺點：
    須要手動刪除，不然長期存在
    瀏覽器大小不一，版本的支持也不同
    localStorage只支持string類型的存儲，JSON對象須要轉換
    localStorage本質上是對字符串的讀取，若是存儲內容多的話會消耗內存空間，會致使頁面變卡
特色：
    同源策略限制、只在本地存儲、永久保存、同瀏覽器共享、存儲方式、存儲上限限制(大多數5MB如下)。
應用場合：
    數據比較大的臨時保存方案。如在線編輯文章時的自動保存。

sessionStorage(會話存儲)ajax

特色：
    同源策略限制、只在本地存儲、單標籤頁限制、存儲方式、存儲上限限制(大多數5MB如下)。
應用場合：
    適合單頁應用程序，方便在各業務模塊進行傳值。

離線緩存--Application Cache (Manifest)

優點：
    離線瀏覽：用戶可在應用離線時使用它們
    速度：已緩存資源加載速度塊
    減小服務器負載：瀏覽器只從服務器下載更新過的資源
 
使用方法：
 在html標籤添加manifest屬性，屬性值爲manifest文件的路徑
 <!DOCTYPE HTML> 
    <html manifest=""demo.manifest""></html>
編寫manifest文件
manifest文件可分爲三部分：
 (1) CACHE MANIFEST - 在此標題下列出的文件將在首次下載後進行緩存
 (2)NETWORK - 在此標題下列出的文件須要與服務器的鏈接，且不會被緩存
 (3)FALLBACK - 在此標題下列出的文件規定當頁面沒法訪問時的回退頁面（好比 404 頁面）
CACHE MANIFEST
    #version 1.1   /*版本號*/
    CACHE:
        html/index.html /*須要緩存的文件*/
    NETWORK:
        js/jquery.js /*不須要緩存的文件*/
    FALLBACK: 
        html/index.html /*當頁面沒法訪問時的回退頁面*/

HTML

一、HTML 塊級元素、行內元素
塊級元素：塊狀元素排斥其餘元素與其位於同一行，能夠設定元素的寬塊級元素：

①老是在新行開始；
②寬高，行高以及內外邊距均可控制；
③寬度缺省是它的容器的100%，除非設定一個寬度。
④它能夠容納內聯元素和其餘塊元素

from table ol ul dl div p h1-h6
nav、header、section、footer。

行內元素：

①和其餘元素都在一行上；
②寬高，行高及內外邊距不可改變，除左右方向的外邊距margin、內邊距padding；
③內聯元素只能容納文本或者其餘內聯元素

lable span a em

行內塊狀元素：

綜合了行內元素和塊狀元素的特性，顯示效果爲行內元素，但它擁有塊狀元素的屬性。
select  textarea button

這三者能夠經過 display 相互轉換。

三、表單標籤的readonly與disabled的區別

readonly 只讀，只用於文本輸入框，input type="text/password"、textarea；
使用表單提交時會提交此元素，應用在用戶只讀同時須要提交數據的場景。
disabled 禁用，可用於全部表單標籤，使用表單提交時不會提交此元素。

二、H5 新特性

一、語義特性 -- 新增語義化標籤，例如 header section footer nav 
二、本地存儲特性 -- 對本地離線存儲更好的支持，
   例如 localStorage sessionStorage ApplicationCache應用程序緩存。
三、設備訪問特性 -- 地理位置API - 獲取用戶的地理位置 getCurrentPosition()。媒體訪問API getUserMedia()
四、鏈接特性 -- Web Sockets
五、網頁多媒體特性 -- Audio 和 Video 標籤
六、三維圖形 特性 -- 可縮放矢量圖形 SVG。畫布 Canvas

JS

一、JS是一門什麼樣的語言及特色？
JavaScript是客戶端腳本語言,是一種動態、弱類型、基於原型的語言；

1.不須要編譯就能夠由解釋器直接運行；
2.語法相似於常見的高級語言，如C和Java；
3. 變量鬆散定義，屬於弱類型語言；
4. 面向對象的。

二、JS的數據類型

基本數據類型 String Number Boolean undefined null  -- 指的是簡單的數據段，按值訪問。
引用數據類型 Object(Array Date Regxp Function) -- 可能有多個值構成的對象 按引用訪問。

三、JS如何查找元素？
document
getElementById()
getElementsByClassName()
getElementsByName()
getElementsByTagName()

querySelector()
querySelectorAll()

節點指針
父節點.firstChild -- firstElementChild
父節點.lastChild -- lastElementChild
父節點.childNodes
兄弟節點.previousSibling -- previousElementSibling
兄弟節點.nextSibling -- nextElementSibling
子節點.parentNode

四、JS如何建立節點?
docuement.
createElement(元素標籤) 建立元素節點
createAttribute(元素屬性)
createTextNode(文本內容) 建立文本節點

五、JS如何操做節點(插入、替換、複製、刪除)？
插入
appendChild(添加的新子節點) 向子節點列表末尾添加新的子節點
insertBefore(插入當前節點的新節點,已知子節點) 在已知的子節點以前插入新的子節點

son.parentNode.insertBefore

替換節點
replaceChild(要插入的新元素, 將被替換的老元素)
刪除節點
removeChild(要刪除的節點)
複製節點
須要被複制的節點.cloneNode(true/false)
true -- 複製當前節點及其全部子節點
false -- 僅複製當前節點

六、JS屬性操做？
獲取屬性 getAttribute
元素節點.getAttribute(元素屬性名)

設置屬性 setAttribute
元素節點.setAttribute(元素屬性名, 屬性值)

刪除屬性 removeAttribute
元素節點.removeAttribute(元素屬性名)

七、什麼是僞數組？
一、具備 length 屬性。
二、按索引方式存儲數據。
三、不具備數組的 push()、pop() 等方法或指望 length 屬性有什麼特殊的行爲。
好比 arguments 對象，調用 getElementsByTagName document.childNodes 之類的返回 NodeList對象都屬於僞數組。arguments能夠經過Array.prototype.slice.call(fakeArray) 將僞數組轉換成真正的Array對象;
jQuery中的 $() 對象都是僞數組對象，保存的是DOM對象。基於此也就更能理解 jQuery 的 this。

八、var that=this;
this 關鍵字表明函數運行時自動生成的一個內部對象，只能在函數內部使用，指向調用函數的那個對象。
九、eval();
eval()函數就像是一個ECMAScript解析器，只接收一個參數，即執行的ECMAScript字符串。將傳入的字符串看成實際的語句來解析。
十、什麼是Ajax和JSON，它們的優缺點？
Ajax Asynchronous Javascript And XML/異步的javascript和xml
優勢：

可使頁面不重載所有內容的狀況下加載局部內容，下降數據傳輸量。
避免用戶不斷刷新或者跳轉頁面，提升用戶體驗。

缺點：

對搜索引擎不友好。
要實現ajax下的先後退功能成本較大
可能形成請求數的增長
跨域問題限制

JSON：一、一種輕量級的數據交換格式，佔用帶寬小；

二、易閱讀編寫解析；
  三、支持複合數據類型；
  四、基於純文本，跨平臺傳遞極其簡單，Javascript原生支持，理想的數據交換格式；
缺點：相對xml通用性較差，數據可描述性較差

十一、JSONP與JSON
跨域請求的概念 同一域名不一樣端口 不一樣協議(http~https) 不一樣二級域名 域名和域名對應ip
JSON是一種基於文本的數據交換方式 (不支持跨域)；
JSONP是一種非官方跨域數據交互協議

JSON

一、一種輕量級的數據交換格式，佔用帶寬小；
二、容易閱讀編寫解析；
三、支持複合數據類型；
四、基於純文本，跨平臺傳遞極其簡單，Javascript原生支持，理想的數據交換格式；

沒辦法跨域直接獲取，就將json包裹在一個合法的js語句中做爲js文件傳過去。json是想要的東西，jsonp是達到這個目的而廣泛採用的一種方式

JSONP是怎麼產生的
一、 Ajax直接請求普通文件存在跨域無權限訪問的問題
二、Web頁面擁有"src"屬性的標籤都擁有跨域的能力
dataType: "jsonp",
jsonp: "callback",//傳遞給請求處理程序或頁面的，用以得到jsonp回調函數名的參數名(通常默認爲:callback)
jsonpCallback:"flightHandler",//自定義的jsonp回調函數名稱，默認爲jQuery自動生成的隨機函數
十二、js中的同步和異步
JS 是一門「單線程」的語言，就像一條流水線，不能同時進行多個任務和流程。
差異就在於這條流水線上各個流程的執行順序不一樣。
同步任務指的是，在主線程上排隊執行的任務，造成一個執行棧（execution context stack），只有前一個任務執行完畢，才能執行後一個任務；
異步任務指的是，不進入主線程、而進入"任務隊列"（task queue）的任務，只有等主線程任務執行完畢，"任務隊列"通知主線程請求執行任務，該任務纔會進入主線程執行。
最基礎常見的異步是setTimeout和setInterval函數。

1三、get 與 post

一、get參數經過url傳遞，post 放在request body 中。
二、get請求在url中傳遞的參數是有長度限制的(2048個字符)，post沒有。
三、get比post更不安全，由於參數直接暴露在url中，因此不能用來傳遞敏感信息。
四、get產生一個TCP數據包，post產生兩個TCP數據包。

HTTP1.0定義了三種請求方法： GET, POST 和 HEAD方法。
HTTP1.1新增了五種請求方法：OPTIONS, PUT, DELETE, TRACE 和 CONNECT 方法
1418466-20180810112625596-2103906128.png

1四、http與https

*HTTP*是超文本傳輸協議，定義了客戶端與服務器端之間文本傳輸的規範。

HTTP協議以明文方式發送內容，不提供任何方式的數據加密，若是攻擊者截取Web瀏覽器和網站服務器之間的傳輸報文，就能夠直接讀取其中的信息，因此不適合傳輸一些敏感信息，好比：信用卡號，密碼支付信息。
HTTP默認使用80端口，這個端口指的是服務端的端口，而客戶端使用的端口是動態分配的。當咱們沒有指定端口訪問時，瀏覽器會默認幫咱們添加80端口。

*https*

爲了解決HTTP協議的這一缺陷，須要使用另外一種協議：安全套接字層超文本傳輸協議HTTPS，爲了數據傳輸的安全，HTTPS在HTTP的基礎上加入了SSL協議，SSL依靠證書來驗證服務器的身份，併爲瀏覽器和服務器的之間的通訊加密。
主要做用能夠分爲兩種：一種是創建一個信息安全通道，來保證數據傳輸的安全；另外一種就是確認網站的真實性。

1. HTTPS協議須要到ca申請證書，通常免費證書較少，於是須要必定費用。
2. HTTP是超文本傳輸協議，信息是明文傳輸，HTTPS則是具備安全性的SSL加密傳輸協議。
3. HTTP的鏈接很簡單，是無狀態的；HTTPS協議是由SSL+HTTP協議構建的可進行加密傳輸，身份認證的網絡協議，比HTTP協議安全。

HTTP和HTTPS的區別
1五、原生js的window.onload與jQuery的$(document).ready(function(){})有什麼不一樣？
如何用原生js實現ready方法？
window.onload方法必須等到頁面內包括圖片的全部元素加載完畢後才能執行。
$(document).ready()是DOM結構繪製完畢後就執行，沒必要等到加載完畢。

function ready(fn){
   var d = document;        //提升性能
   if(d.addEventListener){
     d.addEventListener("DOMContentLoaded",function(){
       //註銷事件，避免反覆觸發
       d.removeEventListener("DOMContentLoaded",arguments.callee,false);
       fn();
     },false)
   } else if(d.attachEvent){        //ie9如下
     d.attachEvent("onreadystatechange",function(){
       d.detachEvent("onreadystatechange",arguments.callee);
       fn();
     })
   }
 }
 window.onload = function () {
  alert('onload');
 };
 ready(function () {
  alert('ready');
 });

1六、工廠模式、構造函數、原型模式([動態原型模式])
工廠模式:

在函數內建立一個對象，給對象賦予屬性及方法再將對象返回。
（  由於在ECMAScript中沒法建立類，因此用函數封裝以特定接口建立對象。）
  解決了建立多個類似對象的問題，可是工廠模式無從識別對象的類型。
  由於所有都是Object，不像Date、Array等，所以出現了構造函數模式。
function createBlog(name, url) {
  var o = new Object();
  o.name = name;
  o.url = url;
  o.sayUrl= function() {
    alert(this.url);
  }
  return o;
}
var blog1 = createBlog('luomg', 'https://segmentfault.com/');

構造函數模式

能夠建立特定類型的對象，相似於Array、Date等原生JS的對象。問題在每一個成員沒法獲得複用，包括函數。
（在於每次建立實例的時候都要從新建立一次方法）
  1.按照慣例函數名首寫字母爲大寫
  2.沒有顯示的建立對象
  3.直接將屬性和方法賦值給了this對象
  4.沒有return語句
  5.使用new建立對象
  6.可以識別對象（這正是構造函數模式勝於工廠模式的地方）
function Blog(name, url) {
  this.name = name;
  this.url = url;
  this.alertUrl = function() {
    alert(this.url);
  }
}
 
var blog = new Blog('luomg', 'https://segmentfault.com/');

原型模式

建立的每一個函數都有prototype (原型)屬性，這個屬性是一個指針，指向一個對象，
而這個對象的用途是包含能夠由特定類型的全部實例共享的屬性和方法。
使用原型對象的好處(也是壞處)就是可讓全部對象實例共享它所包含的屬性及方法。
function Blog() {
}
 
Blog.prototype.name = 'luomg';
Blog.prototype.url = 'https://segmentfault.com/';

混合模式（原型模式 + 構造函數模式）

function Blog(name, url, friend) {
  this.name = name;
  this.url = url;
  this.friend = friend;
}
Blog.prototype.alertInfo = function() {
  alert(this.name + this.url + this.friend);
}
var blog = new Blog('luomg', 'https://segmentfault.com/', ['fn1', 'fn2', 'fn3']);

動態原型模式

將全部信息封裝在了構造函數中，經過構造函數中初始化原型（僅第一個對象實例化時初始化原型），
這個能夠經過判斷該方法是否有效而選擇是否須要初始化原型。
function Blog(name, url) {
  this.name = name;
  this.url = url;
 
  if (typeof this.alertInfo != 'function') {
    // 這段代碼只執行了一次
    alert('exe time');
    Blog.prototype.alertInfo = function() {
      alert(thia.name + this.url);
    }
  }
}
var blog = new Blog('luomg', 'https://segmentfault.com/')

1七、new 操做符具體幹了什麼？

一、新建一個對象 var obj=new Object();
二、設置原型鏈 obj.__proto__=F.prototype;
三、讓F中的this指向 obj，執行F的函數體。 F.call(obj);
四、判斷F的返回值類型：若是是值類型，就丟棄它，仍是返回 obj。若是是引用類型，就返回這個引用類型的對象，替換掉 obj。

1八、原型鏈
指的是構造函數、原型和實例的關係。每一個構造函數都有一個prototype原型對象，每一個原型對象都包含一個指向構造函數的指針constructor，而實例都包含一個指向原型對象的內部指針 _proto_。
1九、構造函數相關的檢測方法

訪問實例屬性 obj.hasOwnProperty(key);
訪問原型屬性 !obj.hasOwnProperty(name) && name in obj
返回一個可枚舉屬性的字符串數組  Object.keys(obj  ||  Object.prototype);
獲得全部實例屬性  Object.getOwnPropertyNames(obj  ||  Object.prototype)
肯定原型與實例的關係 obj instanceof Object; Object.prototype.isPrototypeOf(obj);

30、Javascript獲取頁面元素的位置
①網頁的大小和瀏覽器窗口的大小
若是網頁內容可以在瀏覽器窗口中所有顯示(也就是不出現滾動條), 那麼網頁大小和瀏覽器窗口大小是相等的。
若是不能所有顯示，則滾動瀏覽器窗口，能夠顯示出網頁的各個部分。

②獲取網頁的大小(只讀屬性)

width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight

③獲取網頁元素的絕對位置--offsetTop和offsetLeft屬性
　　function getElementLeft(element){
　　　　var actualLeft = element.offsetLeft;
　　　　var current = element.offsetParent;
　　　　while (current !== null){
　　　　　　actualLeft += current.offsetLeft;
　　　　　　current = current.offsetParent;
　　　　}
　　　　return actualLeft;
　　}
2一、瀏覽器如何渲染解析頁面？
解析html以構建dom樹 -> 將CSS解析成CSS Rule 樹 -> 構建render樹 -> 佈局render樹 -> 繪製render樹。
其中某個部分發生了變化影響了佈局，就會 迴流(Reflow -- 從新渲染) 重繪(Repaint -- 重畫某部分)，影響性能。因此寫代碼時不要一條一條修改DOM的樣式，能夠先定義好CSS再去修改DOM的className。

2二、「strict mode」的做用
「strict mode」 是一種更加嚴格的代碼檢查機制，會讓代碼更加安全。

一、讓Debug更加容易：在正常模式下不少錯誤都會被忽視掉，「strict mode」模式會讓Debug極致更加嚴謹。
二、防止默認的全局變量：在正常模式下，給一個未通過聲明的變量賦值將會將這個變量自動設置爲全局變量。在strict模式下，咱們取消了這個默認機制。
三、取消this的默認轉換：在正常模式下，給this關鍵字指引到null或者undefined會讓它自動轉換爲全局。在strict模式下，咱們取消了這個默認機制。
四、防止重複的變量聲明和參數聲明：在strict模式下進行重複的變量聲明會被抱錯，如 (e.g., var object = {foo: ""bar"", foo: ""baz""};) 同時，在函數聲明中重複使用同一個參數名稱也會報錯，如 (e.g., function foo(val1, val2, val1){}),
五、讓eval()函數更加安全。
六、當遇到無效的delete指令的過後報錯：delete指令不能對類中未有的屬性執行，在正常狀況下這種狀況只是默默地忽視掉，而在strict模式是會報錯的。

2三、JS 跳轉
刷新 window.location.reload()
前進 window.history.go(1)
後退 window.history.go(-1) -- 表單中的內容會丟失
後退 window.history.back() -- 表單中的內容會保留
history.back()的刷新版本 window.location.replace(document.referrer)

[前進 window.history.forward()]
2四、內存泄露緣由及解決辦法
沒有及時釋放內存資源。
JS是一種垃圾收集式語言，內存是根據對象的建立分配給該對象的，並會在沒有該對象的引用時由瀏覽器收回。IE和FireFox均使用引用計數來爲 DOM 對象處理內存。若是計數爲零，該對象就會被銷燬。

1.循環引用                                 --打破循環引用  避免閉包自身
2.由外部函數調用引發的
3.事件處理引發的

2四、內存溢出緣由
程序向系統申請必定大小內存，而系統不能知足程序的要求

2五、閉包
讀取其餘函數內部變量的函數 -- 定義在一個函數內部的函數。

1.能夠讀取函數內部的變量
2.使局部變量始終保存在內存中
注意點：
1.會形成網頁的性能問題，在IE中可能致使內存泄露，退出函數前將不使用的局部變量所有刪除。
2.閉包會在父函數外部，改變父函數內部變量的值。因此，若是你把父函數看成對象（object）使用，把閉包看成它的公用方法（Public Method），把內部變量看成它的私有屬性（private value），這時必定要當心，不要隨便改變父函數內部變量的值。

2六、typeof 與instanceof 判斷類型
typeof -- 獲取一個變量或表達式的類型 instanceof -- 判斷一個變量是不是某個對象的實例
基本類型 -- typeof => String Number Boolean undefined function Object
引用類型 -- instanceof =>

Array.isArray(arr);
                 constructor 屬性返回對建立此對象的數組函數的引用

(a instanceof Array) //a是否Array的實例？true or false
(a.constructor == Array) // a實例所對應的構造函數是否爲Array? true or false
2七、JS的apply與call的用法及意義
爲了改變函數運行時的上下文，改變函數體內部 this 的指向。
調用一個對象的一個方法，以另外一個對象替換當前對象。
劫持別人的方法--實現繼承
做用徹底同樣，只是接受參數的方式不太同樣。

obj.call(thisObj, arg1, arg2, ...); //連續參數
obj.apply(thisObj, [arg1, arg2, ...]);//數組參數
把obj(即this)綁定到thisObj，這時候thisObj具有了obj的屬性和方法。或者說thisObj『繼承』了obj的屬性和方法。

2八、JS做用域、上下文。
做用域是在運行時代碼中的某些特定部分中變量，函數和對象的可訪問性。
換句話說，做用域決定了代碼區塊中變量和其餘資源的可見性。
在 ES5及之前 無塊級做用域，採用全局和函數做用域，
如 if 和 switch 條件語句或 for 和 while 循環語句，它們不會建立一個新的做用域。
ES6及之後纔有塊做用域。

上下文(context)是用來指定代碼某些特定部分中 this 的值，指 this 在同一做用域內的值。
取決於JavaScript 的宿主換環境，在全局做用域(scope)中上下文中始終是Window對象。

？、數組經常使用方法
棧方法 push pop
隊列方法 unshift shift
splice(開始index, 刪除length, 插入新增)
join 轉換成字符串(鏈接符鏈接成一字符串) --split("""")
slice(start,end)
concat(array) 鏈接數組
reverse() 數組逆序
sort() 排序 降序 -- arr.sort(function(a, b){return b-a})

6.1 == lastIndexOf()、indexOf() -- 查找的項, 查找起點位置的索引(可選的)

filter()、map()、some()、every()、forEach() -- 數組項, 對應數組索引, 數組自己

6.2 == filter() -- 「過濾」功能，數組中的每一項運行給定函數，返回知足過濾條件組成的數組。
6.3 == map() -- 指「映射」，對數組中的每一項運行給定函數，返回每次函數調用的結果組成的數組。
6.4 == some() -- 判斷數組中是否存在知足條件的項，只要有一項知足條件，就會返回true。
6.5 == every() -- 判斷數組中每一項都是否知足條件，只有全部項都知足條件，纔會返回true。
6.6 == forEach() --遍歷循環、對數組中的每一項運行給定函數, 這個方法沒有返回值.

arr.forEach(function(item,index,array){})

？、字符串經常使用方法
.slice(start[,end]) --若是爲負，將它做爲length+[start, end]處理 end>=start 返回空字符串
.substring(start,end) -- 若是start或end爲NaN或者爲負數，那麼將其替換爲0
.substr(start[,length])
.indexOf(substr[,startIndex]) 第一次出現子字符串位置。若是沒有找到子字符串，則返回-1。
.lastIndexOf(substr[,startIndex]) 後面查詢
.split([separator[,limit]]) 將一個字符串分割爲子字符串，而後將結果做爲字符串數組返回
limit該值用來限制返回數組中的元素個數
.toLowerCase 返回一個字符串，該字符串中的字母被轉換成小寫
.toUpperCase 返回大寫字符串

.search(reExp)返回與正則表達式查找內容匹配的第一個字符串的位置
.concat(str[,str2,str3]) 字符串鏈接

.replace 用來查找匹配一個正則表達式的字符串，而後使用新字符串代替匹配
？、常見數學方法
Math.abs() 取絕對值

.ceil()     向上取整 
 .floor()    向下取整
  .round()    四捨五入 
 .random()  隨機數

function getRan(n,m,nums){
return Math.floor((Math.random()m+n)nums);
}
1-10 -- Math.floor(Math.random()*(10)+1)
6位隨機數[1-9]-- Math.floor((Math.random()9+1)100000)

ES6

一、ES6

一、塊級做用域
ES5 只有全局做用域和函數做用域，let、const 實際上爲JS 新增了塊級做用域
不存在變量提高、不容許重複聲明。
let 命令
暫時性死區(let聲明變量a，但在這聲明以前對a聲明、賦值會報錯)，typeof再也不是一個百分之百安全的操做
const 命令
聲明一個只讀的常量且必須賦值。一旦聲明，常量的值就不能改變。若是是對象則不能改變對象的引用，或能夠增長屬性。

ES6 聲明變量的六種方法
var、function(ES5)
let、const、import、class
二、字符串
靜態字符串一概使用單引號或反引號，不使用雙引號。動態字符串使用反引號。
三、解構賦值 -- 對應關係賦值
使用數組成員對變量賦值時，優先使用解構賦值。
四、對象
①單行定義的對象，最後一個成員不以逗號結尾。多行定義的對象，最後一個成員以逗號結尾。
②對象儘可能靜態化，不得隨意添加新的屬性。若是添加屬性不可避免，要使用Object.assign方法。
五、數組
    ①使用擴展運算符（...）拷貝數組。
    ②使用 Array.from 方法，將相似數組的對象轉爲數組(ES5 -- Array.prototype.slice.call)。
六、箭頭函數 -- 匿名函數的簡寫 -- 好比setTimeout
不綁定this與arguments，不能用做構造器，也沒有prototype屬性，隱式返回值。當即執行函數能夠寫成箭頭函數的形式
簡單的、單行的、不會複用的函數，建議採用箭頭函數。若是函數體較爲複雜，行數較多，仍是應該採用傳統的函數寫法。
七、Map、Set
八、Class
九、模塊
    ①使用import取代require。
    ②使用export取代module.exports。
十、使用ESLint
一個語法規則和代碼風格的檢查工具，能夠用來保證寫出語法正確、風格統一的代碼。

CSS

一、CSS選擇器？引用CSS的方式？CSS 優先級如何計算？盒模型？
①通配選擇符、標籤名選擇符、類選擇符、ID選擇符、後代選擇符(包含)、子選擇符、相鄰選擇符、兄弟選擇符、屬性選擇符、僞類、僞對象。
②行內樣式、內嵌式、link連接式、import導入式。
③!import 》行內樣式》ID》class 》標籤名選擇符，選擇符越具體等級就越高。
④Margin、border、padding、content。
box-sizing: border-box; // content-box
// 定義 瀏覽器 應該如何計算一個元素的總寬高；更改元素默認的 CSS 盒子模型

兼容性

一、position屬性--底部absolute、fixed元素在安卓瀏覽器裏面會被輸入法頂上去。
解決方法：①頁面加載完成後計算底部元素到頂部的距離         
②在父級容器中定義容器高度，並設定position屬性的值爲relative便可解決此問題
（body：relative； 沒有驗證）。
二、僞類 :active 失效
body添加ontouchstart onmousemove兩個空事件
三、對非可點擊元素如(label,span)監聽click事件，ios下不會觸發
css增長 -- cursor:pointer；
四、上下拉動滾動條時卡頓、慢
body { -webkit-overflow-scrolling:touch;  overflow-scrolling: touch; }
五、iphone及ipad下輸入框默認內陰影
-webkit-appearance:none;
六、ios和android下觸摸元素時出現半透明灰色遮罩
-webkit-tap-highlight-color:rgba(255,255,255,0)
設置alpha值爲0就能夠去除半透明灰色遮罩，備註：transparent的屬性值在android下無效。
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程