前端面試題我的總結

 1、HTMLjavascript

一、html5的新特性有哪些?    css

(1)新的文檔類型 (New Doctype) <!DOCTYPE html>;html

(2)腳本和連接無需寫屬性type (No More Types for Scripts and Links): type="text/css"可省;html5

(3)語義化標籤:Header,Footer ,nav,article,aside,section,等等;java

(4)Hgroup:用<h1>和<h2>標籤來分別定義。然而,這種定義沒有說明這二者之間的關係。並且,h2標籤的使用會帶來更多問題,好比該頁面上還有其餘標題的時候。在HTML5中,咱們能夠用hgroup元素來將它們分組,這樣就不會影響文件的大綱。jquery

(5)標記元素 (Mark Element)android

(6)圖形元素 (Figure Element)css3

(7)從新定義<small> (Small Element redefined)web

(8)佔位符 (Placeholder)你能夠提早設置好一些信息,當用戶開始輸入時,文本框中的文字就消失。ajax

(9)必要屬性required (Required Attribute)HTML5中的新屬性「required」指定了某一輸入是否必需

(10)Autofocus 屬性 (Autofocus Attribute)HTML5的解決方案消除了對JavaScript的須要。若是一個特定的輸入應該是「選擇」或聚焦,默認狀況下,咱們如今能夠利用自動聚焦屬性。

(11)Audio 支持 (Audio Support)

(12)Video 支持 (Video Support)

(13)視頻預載 (Preload attribute in Videos element)當用戶訪問頁面時這一屬性使得視頻得以預載。爲了實現這個功能,能夠在<video>元素中加上preload="preload"或者只是preload。

(14)顯示控制條 (Display Controls)爲了渲染出播放控制條,咱們必須在video元素內指定controls屬性。

(15)正規表達式 (Regular Expressions)HTML5中新的pattern屬性讓咱們可以在標籤處直接插入一個正規表達式。

(16)拖放(Drag 和 drop)是 HTML5 標準的組成部分。

(17)canvas 元素用於在網頁上繪製圖形。

(18)HTML5 支持內聯 SVG。

      ·SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)

      ·SVG 用於定義用於網絡的基於矢量的圖形

      ·SVG 使用 XML 格式定義圖形

      ·SVG 圖像在放大或改變尺寸的狀況下其圖形質量不會有損失

      ·SVG 是萬維網聯盟的標準

(19)HTML5 Geolocation(地理定位)用於定位用戶的位置。

(20)在客戶端存儲數據,HTML5 提供了兩種在客戶端存儲數據的新方法:

       · localStorage - 沒有時間限制的數據存儲,用於持久化的本地存儲,除非主動刪除數據,不然數據是永遠不會過時的。

       · sessionStorage - 針對一個 session 的數據存儲,用於本地存儲一個會話(session)中的數據,這些數據只有在同一個會話中的頁面才能訪問而且當會話結束後數據也隨之銷燬。所以sessionStorage不是一種持久化的本地存儲,僅僅是會話級別的存儲。

(21)使用 HTML5,經過建立 cache manifest 文件,能夠輕鬆地建立 web 應用的離線版本。HTML5 引入了應用程序緩存,這意味着 web 應用可進行緩存,並可在沒有因特網鏈接時進行訪問。

應用程序緩存爲應用帶來三個優點:

  · 離線瀏覽 - 用戶可在應用離線時使用它們

  · 速度 - 已緩存資源加載得更快

  · 減小服務器負載 - 瀏覽器將只從服務器下載更新過或更改過的資源。

(22)web worker 是運行在後臺的 JavaScript,不會影響頁面的性能。當在 HTML 頁面中執行腳本時,頁面的狀態是不可響應的,直到腳本已完成。您能夠繼續作任何願意作的事情:點擊、選取內容等等,而此時 web worker 在後臺運行。

(23)HTML5 服務器發送事件(server-sent event)容許網頁得到來自服務器的更新。Server-Sent 事件指的是網頁自動獲取來自服務器的更新。之前也可能作到這一點,前提是網頁不得不詢問是否有可用的更新。經過服務器發送事件,更新可以自動到達。

例子:Facebook/Twitter 更新、估價更新、新的博文、賽事結果等。

(24)HTML5 的 Input的新改變: 

——input元素type屬性的值:

color :顏色控件。

date :日期控件。

email :電子郵件地址輸入框。

month :年月日曆控件。

number :數值輸入框。

range :滑動條。

search :搜索框。

tel :電話號碼輸入框。

time :時間控件。

url :網址輸入框。

week :週數控件。

——新的 input 屬性:

autocomplete :是否顯示與如今輸入內容相匹配的歷史輸入記錄。

autofocus :當頁面加載完成後,此元素得到焦點。

form :設置元素歸屬表單的ID。

formaction :設置表單action屬性的值。

formenctype :設置表單enctype屬性的值。

formmethod :設置表單method屬性的值。

formnovalidate :關閉表單的驗證。

formtarget :設置表單target屬性的值。

max :設置<input>元素中數字或日期控件的最大值。

min :設置<input>元素中數字或日期控件的最小值。

minlength :設置文本輸入控件的內容最小長度。

pattern :設置元素文本內容需匹配的正則表達式。

placeholder :設置文本控件的預先顯示內容。

readonly :設置元素是否只讀。

required :設置控件是否爲必填項。

(25)HTML5 的新的表單元素:

HTML5 擁有若干涉及表單的元素和屬性。

本章介紹如下新的表單元素:

datalist

keygen

output

(26)新的 form 屬性:

autocomplete

novalidate

(27)手機端html5觸屏事件(touch事件)

touchstart:觸摸開始的時候觸發

touchmove:手指在屏幕上滑動的時候觸發

touchend:觸摸結束的時候觸發

而每一個觸摸事件都包括了三個觸摸列表,每一個列表裏包含了對應的一系列觸摸點(用來實現多點觸控):

touches:當前位於屏幕上的全部手指的列表。

targetTouches:位於當前DOM元素上手指的列表。

changedTouches:涉及當前事件手指的列表。

每一個觸摸點由包含了以下觸摸信息(經常使用):

identifier:一個數值,惟一標識觸摸會話(touch session)中的當前手指。通常爲從0開始的流水號(android4.1,uc)

target:DOM元素,是動做所針對的目標。

pageX/pageX/clientX/clientY/screenX/screenY:一個數值,動做在屏幕上發生的位置(page包含滾動距離,client不包含滾動距離,screen則以屏幕爲基準)。 

radiusX/radiusY/rotationAngle:畫出大約至關於手指形狀的橢圓形,分別爲橢圓形的兩個半徑和旋轉角度。

2、CSS

一、CSS3的新特性:

(1)邊框圓角陰影反射

border-radius

box-shadow

border-image

box-reflect

(2)背景

background-size 調整背景圖片的大小,對背景圖片進行拉伸,使其完成填充內容區域:。

background-origin屬性規定背景圖片的定位區域。

背景圖片能夠放置於 content-box、padding-box 或 border-box 區域。

background-clip 規定背景的繪製區域。 

background-size 規定背景圖片的尺寸。

background-image:-webkit-gradient(linear,0% 0%,100% 0%,from(#2A8BBE),to(#FE280E))。漸變效果

background-break 屬性用來控制背景怎樣在這些不一樣的盒子中顯示。

多背景圖片

(3)文字

text-shadow :可向文本應用陰影。

word-wrap :在 CSS3 中,word-wrap 屬性容許您容許文本強制文本進行換行 - 即便這意味着會對單詞進行拆分。

text-overflow:設置或檢索噹噹前行超過指定容器的邊界時如何顯示。

Text-decoration:文字渲染。

@font-face:您「本身的」的字體是在 CSS3 @font-face 規則中定義的。

(5)動畫效果

transform(translate,rotate,scale,skew,matrix):經過 CSS3 轉換,咱們可以對元素進行移動、縮放、轉動、拉長或拉伸。

 3D 轉換 rotateX&rotateY

transition:經過 CSS3,咱們能夠在不使用 Flash 動畫或 JavaScript 的狀況下,當元素從一種樣式變換爲另外一種樣式時爲元素添加效果。

animation:經過 CSS3,咱們可以建立動畫,這能夠在許多網頁中取代動畫圖片、Flash 動畫以及 JavaScript。

(6)column-count,column-gap,column-rule:建立多個列來對文本進行佈局 ,能夠製做報紙的效果。

(7)新的用戶界面特性包括重設元素尺寸、盒尺寸以及輪廓等。resize,box-sizing,outline-offset

(8)CSS3選擇器:直接子元素(body>div),:first-child,:last-child,:nth-child(even), :nth-child(odd),:not()等等

(9)顏色

顏色的透明度:rgba。

HSL 的透明度:hsla。

(10)css3盒子模型

  display:box;

  box-flex:1;

3、JS

一、如何消除一個數組裏面的重複元素?

function(arr){

  var arr1=new Array();

  var arr2=new Array();

  arr1=arr;

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

    if(arr2.indexOf(arr1[i])==-1){

      arr2.push(arr1[i]);

    }

  }

  return arr2;

}

二、輸入一個字符串,找出出現最多的字符並返回該字符以及出現的次數。

function(str){ 

var strs = new Array();

strs=str.split('');

var obj = {};

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

var v = strs[i];

if(obj[v] && obj[v].value == v){

  obj[v].count ++;

}else{

obj[v] = {};

obj[v].count = 1;

obj[v].value = v;

}

}

for(key in obj){

  console.log(obj[key].value +'='+obj[key].count+';'); // a=4 b=3 c=4 d=2 f=1 g=1 h=1

}

}

 

 

 

三、數組從小到大排序

方法一:

function (arr){

var a =new Array();

a=arr;
for(var j=0;j<a.length;j++){
  for(var i=j+1;i<a.length;i++){
    if(a[j]>a[i]){
      var min=a[i];
      a[i]=a[j];
      a[j]=min;
    }
  }
}
return a;

 

}

方法2、

function sortNumber(a,b){
  return a - b
}

function(arr){

  var a=new Array();

  a=arr.sort(sortNumber);

  return a;

}

 快速排序法:

var quickSort = function(arr) {

  if (arr.length <= 1) { return arr; }

  var pivotIndex = Math.floor(arr.length / 2);

  var pivot = arr.splice(pivotIndex, 1)[0];

  var left = [];

  var right = [];

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

    if (arr[i] < pivot) {

      left.push(arr[i]);

    } else {

      right.push(arr[i]);

    }

  }

  return quickSort(left).concat([pivot], quickSort(right));

};

4、其餘

一、margin負值可實現:

· 左右列固定,中間列自適應佈局

· 去除列表右邊框

· 負邊距+定位:水平垂直居中

· 去除列表最後一個li元素的border-bottom

· 多列等高

 

二、定義

(1)執行環境

a、全局執行環境:在一個頁面中,第一次載入JS代碼時建立一個全局執行環境,全局執行環境是最外圍的執行環境,在Web瀏覽器中,全局執行環境被認爲是window對象。所以,全部的全局變量和函數都是做爲window對象的屬性和方法建立的。某個執行環境中的全部代碼執行完畢後,該環境被銷燬,保存在其中的全部變量和函數定義也隨之銷燬,全局執行環境直到應用程序退出後---例如關閉瀏覽器和網頁---時才被銷燬。

b、函數執行環境:每一個函數都有本身的執行環境,當執行進入一個函數時,函數的執行環境就會被推入一個執行環境棧的頂部並獲取執行權。當這個函數執行完畢,它的執行環境又從這個棧的頂部被刪除,並把執行權並還給以前執行環境。這就是ECMAScript程序中的執行流。

 

(2)做用域

就是變量和函數的可訪問範圍,控制着變量和函數的可見性與生命週期,在JavaScript中變量的做用域有全局做用域和局部做用域。

a、全局做用域:任何地方均可以定義擁有全局做用域的變量。

   (a.沒有用var聲明的變量(除去函數的參數)都具備全局做用域,成爲全局變量,因此聲明局部變量必需要用var。

  b.window的全部屬性都具備全局做用域

  c.最外層函數體外聲明的變量也具備全局做用域)

b、局部做用域:局部變量的優先級高於全局變量。

   (a.函數體內用var聲明的變量具備局部做用域,成爲局部變量

  b.函數的參數也具備局部做用域)

JavaScript是函數做用域(function scope),沒有塊級做用域。不管函數體內的變量在什麼地方聲明,對整個函數都是可見的,即JavaScript函數裏聲明的全部變量都被提早到函數體的頂部,只是提早變量聲明,變量的賦值仍是保留在原位置

 

(3)做用域鏈

JavaScript的變量都是對象的屬性,而該對象可能又是其它對象的屬性,而全部的對象都是全局對象的屬性,因此這些對象的關係能夠看做是一條鏈,因爲每一個對象都有一個做用域,因此造成了一個做用域鏈。鏈頭就是變量所處的對象,鏈尾就是全局對象。當代碼在一個環境中執行時,會建立變量對象的一個做用域鏈來保證對執行環境有權訪問的變量和函數的有序訪問。

 

(4)原型對象

a.只要建立了一個新函數,就會爲該函數建立一個prototype屬性,這個屬性指向函數的原型對象。

b.全部原型對象都會自動得到一個constructor(構造函數)屬性,這個屬性包含一個指向prototype屬性所在函數的指針。

c.當調用構造函數建立一個新實例後,該實例的內部將包含一個指針(內部屬性),指向構造函數的原型對象。

d.普通對象沒有prototype,但有__proto__屬性。

 

(5)原型鏈

假如咱們讓原型對象等於另外一個類型的實例,則此時的原型對象將包含一個指向另外一個原型的實例,相應地,另外一個原型中也包含着一個指向另外一個構造函數的指針。假如另外一個原型又是另外一個類型的實例,那麼上述關係依然成立,如此層層遞進,就構成了實例與原型的鏈條,這就是原型鏈。

【注】:全部引用類型默認都繼承了Object,而這個繼承也是經過原型鏈實現的。全部函數的默認原型都是Object的實例,所以默認原型都會包含一個內部指針,指向Object.prototype。這也正是全部自定義類型都會繼承toString(),valueOf()等默認方法的根本緣由。

 

(6)閉包

a.概念:有權訪問另外一個函數做用域中的變量的函數。簡單理解爲「定義在一個函數內部的函數」。

b.好處:保護函數內的變量安全,增強了封裝性;在內存中維持一個變量(緩存);匿名自執行函數;模擬面向對象編程。

c.缺點:常駐內存,會增大內存使用量,使用不當很容易形成內存泄露,更重要的是,對閉包的使用不當會形成無效內存的產生。

d.應用場景:使用閉包代替全局變量;函數外或在其餘函數中訪問某一函數內部的參數;包裝相關功能;爲節點循環綁定click事件,在事件函數中使用當次循環的值或節點,而不是最後一次循環的值或節點。

 

(7)內核

Trident(IE內核),Gecko(Firefox內核),Presto(Opera前內核) (已廢棄),Webkit(Safari內核,Chrome內核原型,開源)

(Google Chrome、360極速瀏覽器以及搜狗高速瀏覽器高速模式也使用Webkit做爲內核(在腳本理解方面,Chrome使用本身研發的V8引擎)。WebKit 內核在手機上的應用也十分普遍,例如 Google 的手機 Gphone、 Apple 的iPhone, Nokia’s Series 60 browser 等所使用的 Browser 內核引擎,都是基於 WebKit。)

 

(8)javascript的數據類型:字符串、數字、布爾、數組、對象、Null、Undefined

 

(9)angular的工做原理:

--AngularJS的工做原理是:HTML模板將會被瀏覽器解析到DOM中, DOM結構成爲AngularJS編譯器的輸入。AngularJS將會遍歷DOM模板, 來生成相應的NG指令,全部的指令都負責針對view(即HTML中的ng-model)來設置數據綁定。所以, NG框架是在DOM加載完成以後, 纔開始起做用的.

--咱們在html中先定義一個angular的app,指定一個angular的controller,則該controller會對應於一個做用域(能夠用$scope前綴來指定做用域中的屬性和方法等). 則在該ngCtl的做用域內的HTML標籤, 其值或者操做均可以經過$scope的方式跟js中的屬性和方法進行綁定.這樣, 就實現了NG的雙向數據綁定

 

(10)web語義化

語義化是指用合理HTML標記以及其特有的屬性去格式化文檔內容。通俗地講,語義化就是對數據和信息進行處理,使得機器能夠理解.

語義化的(X)HTML文檔有助於提高你的網站對訪客的易用性,好比使用PDA、文字瀏覽器以及殘障人士將從中受益。對於搜索引擎或者爬蟲軟件來講,則有助於它們創建索引,並可能給予一個較高的權值。

事實上SEO最有效的一種辦法,就是對網頁的HTML結構進行重構,實質上就是語義化。

 

(11)模塊化和封裝

模塊化是一種將系統分離成獨立功能部分的方法,可將系統分割成獨立的功能部分,嚴格定義模塊接口、模塊間具備透明性。

優勢:

可維護性

1.靈活架構,焦點分離

2.方便模塊間組合、分解

3.方便單個模塊功能調試、升級

4.多人協做互不干擾

可測試性

1.可分單元測試

缺點:

性能損耗

1.系統分層,調用鏈會很長

2.模塊間通訊,模塊間發送消息會很耗性能

封裝最基本的意思就是對外提供簡單功能單一的方法, 好比一個方法根據不一樣的參數獲取不一樣的頁面元素 如點開頭的是查找class的元素,#開頭的是查找id,好比jquery的方法都是封裝好的。

 

(12)mvc

MVC全名是Model View Controller,是模型(model)-視圖(view)-控制器(controller)的縮寫,一種軟件設計典範,用一種業務邏輯、數據、界面顯示分離的方法組織代碼,將業務邏輯彙集到一個部件裏面,在改進和個性化定製界面及用戶交互的同時,不須要從新編寫業務邏輯。MVC被獨特的發展起來用於映射傳統的輸入、處理和輸出功能在一個邏輯的圖形化用戶界面的結構中。

 

(13)絕對定位和相對定位

設置爲絕對定位的元素框從文檔流徹底刪除,並相對於其包含塊定位,包含塊多是文檔中的另外一個元素或者是初始包含塊。元素原先在正常文檔流中所佔的空間會關閉,就好像該元素原來不存在同樣。元素定位後生成一個塊級框,而不論原來它在正常流中生成何種類型的框。

設置爲相對定位的元素框會偏移某個距離。元素仍然保持其未定位前的形狀,它本來所佔的空間仍保留。相對定位是一個很是容易掌握的概念。若是對一個元素進行相對定位,它將出如今它所在的位置上。而後,能夠經過設置垂直或水平位置,讓這個元素「相對於」它的起點進行移動。

 

三、如何實現繼承??(繼承是指一個對象直接使用另外一對象的屬性和方法。)

——構造函數的繼承

a.構造函數綁定

使用call或apply方法,將父對象的構造函數綁定在子對象上,即在子對象構造函數中加一行:

  (父對象的構造函數).apply(this, arguments);

b.prototype模式

使用prototype屬性。若是"貓"的prototype對象,指向一個Animal的實例,那麼全部"貓"的實例,就能繼承Animal了。

  Cat.prototype = new Animal();//將Cat的prototype對象指向一個Animal的實例。它至關於徹底刪除了prototype 對象原先的值,而後賦予一個新值。

  Cat.prototype.constructor = Cat;//任何一個prototype對象都有一個constructor屬性,指向它的構造函數。若是沒有"Cat.prototype = new Animal();"這一行,Cat.prototype.constructor是指向Cat的;加了這一行之後,Cat.prototype.constructor指向Animal。更重要的是,每個實例也有一個constructor屬性,默認調用prototype對象的constructor屬性。所以,在運行"Cat.prototype = new Animal();"這一行以後,cat1.constructor也指向Animal!這顯然會致使繼承鏈的紊亂(cat1明明是用構造函數Cat生成的),所以咱們必須手動糾正,將Cat.prototype對象的constructor值改成Cat。這就是第二行的意思。

c.直接繼承prototype

第三種方法是對第二種方法的改進。因爲Animal對象中,不變的屬性均可以直接寫入Animal.prototype。因此,咱們也可讓Cat()跳過 Animal(),直接繼承Animal.prototype。

Animal.prototype.species = "動物";

Cat.prototype = Animal.prototype;

Cat.prototype.constructor = Cat;//Animal.prototype對象的constructor屬性也改掉了

//優勢是效率比較高(不用執行和創建Animal的實例了),比較省內存。缺點是 Cat.prototype和Animal.prototype如今指向了同一個對象,那麼任何對Cat.prototype的修改,都會反映到Animal.prototype。

d.利用空對象做爲中介

 function extend(Child, Parent) {

 

    var F = function(){};

    F.prototype = Parent.prototype;

    Child.prototype = new F();

    Child.prototype.constructor = Child;

    Child.uber = Parent.prototype;

  }

//這時,修改Cat的prototype對象,就不會影響到Animal的prototype對象。這個函數就是YUI庫如何實現繼承的方法。

e.拷貝繼承

純粹採用"拷貝"方法實現繼承。

  function extend2(Child, Parent) {

    var p = Parent.prototype;

    var c = Child.prototype;

    for (var i in p) {

      c[i] = p[i];

      }

    c.uber = p;

  }

——非構造函數的繼承

a.object()方法

  function object(o) {

    function F() {}

    F.prototype = o;

    return new F();

  }

var Doctor = object(Chinese);//第一步先在父對象的基礎上,生成子對象

Doctor.career = '醫生';//再加上子對象自己的屬性

alert(Doctor.nation); //中國(子對象已經繼承了父對象的屬性了。)

b.淺拷貝

把父對象的屬性,所有拷貝給子對象,也能實現繼承。(只是拷貝基本類型的數據,咱們把這種拷貝叫作"淺拷貝"。)

  function extendCopy(p) {

    var c = {};

    for (var i in p) { 

      c[i] = p[i];

    }

    c.uber = p;

    return c;

  }

var Doctor = extendCopy(Chinese);

  Doctor.career = '醫生';

  alert(Doctor.nation); // 中國

(可是,這樣的拷貝有一個問題。那就是,若是父對象的屬性等於數組或另外一個對象,那麼實際上,子對象得到的只是一個內存地址,而不是真正拷貝,所以存在父對象被篡改的可能。)

c.深拷貝

所謂"深拷貝",就是可以實現真正意義上的數組和對象的拷貝。它的實現並不難,只要遞歸調用"淺拷貝"就好了。

  function deepCopy(p, c) {

    var c = c || {};

    for (var i in p) {

      if (typeof p[i] === 'object') {

        c[i] = (p[i].constructor === Array) ? [] : {};

        deepCopy(p[i], c[i]);

      } else {

         c[i] = p[i];

      }

    }

    return c;

  }

var Doctor = deepCopy(Chinese);

//如今,給父對象加一個屬性,值爲數組。而後,在子對象上修改這個屬性,這時,父對象就不會受到影響了。目前,jQuery庫使用的就是這種繼承方法。

 

四、ajax的格式

a.url: 

要求爲String類型的參數,(默認爲當前頁地址)發送請求的地址。

b.type: 

要求爲String類型的參數,請求方式(post或get)默認爲get。注意其餘http請求方法,例如put和delete也可使用,但僅部分瀏覽器支持。

c.timeout: 

要求爲Number類型的參數,設置請求超時時間(毫秒)。此設置將覆蓋$.ajaxSetup()方法的全局設置。

d.async: 

要求爲Boolean類型的參數,默認設置爲true,全部請求均爲異步請求。若是須要發送同步請求,請將此選項設置爲false。注意,同步請求將鎖住瀏覽器,用戶其餘操做必須等待請求完成才能夠執行。

e.cache: 

要求爲Boolean類型的參數,默認爲true(當dataType爲script時,默認爲false),設置爲false將不會從瀏覽器緩存中加載請求信息。

f.data: 

要求爲Object或String類型的參數,發送到服務器的數據。若是已經不是字符串,將自動轉換爲字符串格式。get請求中將附加在url後。防止這種自動轉換,能夠查看  processData選項。對象必須爲key/value格式,例如{foo1:"bar1",foo2:"bar2"}轉換爲&foo1=bar1&foo2=bar2。若是是數組,JQuery將自動爲不一樣值對應同一個名稱。例如{foo:["bar1","bar2"]}轉換爲&foo=bar1&foo=bar2。

g.dataType: 

要求爲String類型的參數,預期服務器返回的數據類型。若是不指定,JQuery將自動根據http包mime信息返回responseXML或responseText,並做爲回調函數參數傳遞。可用的類型以下:

xml:返回XML文檔,可用JQuery處理。

html:返回純文本HTML信息;包含的script標籤會在插入DOM時執行。

script:返回純文本JavaScript代碼。不會自動緩存結果。除非設置了cache參數。注意在遠程請求時(不在同一個域下),全部post請求都將轉爲get請求。

json:返回JSON數據。

jsonp:JSONP格式。使用SONP形式調用函數時,例如myurl?callback=?,JQuery將自動替換後一個「?」爲正確的函數名,以執行回調函數。

text:返回純文本字符串。

h.beforeSend:

要求爲Function類型的參數,發送請求前能夠修改XMLHttpRequest對象的函數,例如添加自定義HTTP頭。在beforeSend中若是返回false能夠取消本次ajax請求。XMLHttpRequest對象是唯一的參數。

function(XMLHttpRequest){

this; //調用本次ajax請求時傳遞的options參數

}

i.complete:

要求爲Function類型的參數,請求完成後調用的回調函數(請求成功或失敗時均調用)。參數:XMLHttpRequest對象和一個描述成功請求類型的字符串。

function(XMLHttpRequest, textStatus){

this; //調用本次ajax請求時傳遞的options參數

}

j.success:要求爲Function類型的參數,請求成功後調用的回調函數,有兩個參數。

(1)由服務器返回,並根據dataType參數進行處理後的數據。

(2)描述狀態的字符串。

function(data, textStatus){

//data多是xmlDoc、jsonObj、html、text等等

this; //調用本次ajax請求時傳遞的options參數

}

k.error:

要求爲Function類型的參數,請求失敗時被調用的函數。該函數有3個參數,即XMLHttpRequest對象、錯誤信息、捕獲的錯誤對象(可選)。ajax事件函數以下:

function(XMLHttpRequest, textStatus, errorThrown){

//一般狀況下textStatus和errorThrown只有其中一個包含信息

this; //調用本次ajax請求時傳遞的options參數

}

l.contentType:

要求爲String類型的參數,當發送信息至服務器時,內容編碼類型默認爲"application/x-www-form-urlencoded"。該默認值適合大多數應用場合。

m.dataFilter:

要求爲Function類型的參數,給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據,type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。

function(data, type){

//返回處理後的數據

return data;

}

n.dataFilter:

要求爲Function類型的參數,給Ajax返回的原始數據進行預處理的函數。提供data和type兩個參數。data是Ajax返回的原始數據,type是調用jQuery.ajax時提供的dataType參數。函數返回的值將由jQuery進一步處理。

function(data, type){

//返回處理後的數據

return data;

}

o.global:

要求爲Boolean類型的參數,默認爲true。表示是否觸發全局ajax事件。設置爲false將不會觸發全局ajax事件,ajaxStart或ajaxStop可用於控制各類ajax事件。

p.ifModified:

要求爲Boolean類型的參數,默認爲false。僅在服務器數據改變時獲取新數據。服務器數據改變判斷的依據是Last-Modified頭信息。默認值是false,即忽略頭信息。

q.jsonp:

要求爲String類型的參數,在一個jsonp請求中重寫回調函數的名字。該值用來替代在"callback=?"這種GET或POST請求中URL參數裏的"callback"部分,例如{jsonp:'onJsonPLoad'}會致使將"onJsonPLoad=?"傳給服務器。

r.username:

要求爲String類型的參數,用於響應HTTP訪問認證請求的用戶名。

s.password:

要求爲String類型的參數,用於響應HTTP訪問認證請求的密碼。

t.processData:

要求爲Boolean類型的參數,默認爲true。默認狀況下,發送的數據將被轉換爲對象(從技術角度來說並不是字符串)以配合默認內容類型"application/x-www-form-urlencoded"。若是要發送DOM樹信息或者其餘不但願轉換的信息,請設置爲false。

u.scriptCharset:

要求爲String類型的參數,只有當請求時dataType爲"jsonp"或者"script",而且type是GET時纔會用於強制修改字符集(charset)。一般在本地和遠程的內容編碼不一樣時使用。

 

五、link和import的區別:

頁面中使用CSS的方式主要有3種:行內添加定義style屬性值,頁面頭部內嵌調用和外面連接調用,其中外面引用有兩種:link和@import。

import和link的區別:

  區別1:link是XHTML標籤,除了加載CSS外,還能夠定義RSS等其餘事務;@import屬於CSS範疇,只能加載CSS。

  區別2:link引用CSS時,在頁面載入時同時加載;@import須要頁面網頁徹底載入之後加載。

  區別3:link是XHTML標籤,無兼容問題;@import是在CSS2.1提出的,低版本的瀏覽器不支持。

  區別4:ink支持使用Javascript控制DOM去改變樣式;而@import不支持。

 

六、行內元素和塊級元素的區別:

  塊級元素 行內元素
常見元素 div、p、form、ul、ol、li span、strong、em
特性

獨佔一行,默認狀況下,其寬度自動填滿其父元素寬度

不會獨佔一行,相鄰行內元素會排列在同一行裏,直到一行排不下,纔會換行,其寬度隨元素的內容而變化

width、height屬性  能夠設置,設置了寬度仍是獨佔一行  無效
 margin和padding屬性  能夠設置

水平方向的padding-left、padding-right、margin-left、margin-right都產生邊距效果,

但豎直方向的padding-top、padding-bottom、margin-top、margin-bottom卻不會產生邊距效果。

 對應的相關display屬性  block  inline
 切換  display:inline變成行內元素  display:block變成塊級元素

 

七、hack有哪些?

a.條件hack 

  <!--[if IE]>//<!--[if IE 6]>//<!--[if gte IE 6]>//<!--[if ! IE 8]>//<!--[if !IE]>

  這段文字只在IE瀏覽器顯示

  <![endif]-->

b.類內屬性hack(*,+,#,_,-,\0,\9\0)

  .style{

    *color:#000;

  }

c.選擇器hack

  *前綴只對IE6生效;*+前綴只對IE7生效;

  *html{

  }

 

八、兼容性問題

a.png圖片在ie中背景不透明

  ·css使用濾鏡filter

  ·js

  ·png轉換爲gif圖片

b.清除浮動的方法

  ·父級元素定義高度;

  ·clear:both;

  ·overflow:hidden;

  ·ie6下須要加上zoom:1;

  .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} 

  .clearfloat{zoom:1} 

c.IE6怪異解析之padding與border算入寬高 

  解決方法:加入文檔聲明<!doctype html> 

d.IE6在塊元素、左右浮動、設定marin時形成margin雙倍(雙邊距) 

  解決方法:display:inline 

e.position下的left,bottom錯位 

  解決方法:爲父級(relative層)設置寬高或添加*zoom:1 

f.100% 高度 

  在IE6下,若是要給元素定義100%高度,必需要明肯定義它的父級元素的高度,若是你須要給元素定義滿屏的高度,就得先給html和body定義height:100%。

g.Overflow Bug 

  在IE6/7中,overflow沒法正確的隱藏有相對定位position:relative;的子元素。解決方法就是給外包容器.wrap加上position:relative。 

h.IE下z-index的bug 

  在IE瀏覽器中,定位元素的z-index層級是相對於各自的父級容器,因此會致使z-index出現錯誤的表現。解決方法是給其父級元素定義z-index,有些狀況下還須要定義position:relative。 

i.清除浮動 

  若是你想用div(或其餘容器)包裹一個浮動的元素,你會發現必須給div(容器)定義明確的height、width、overflow之中一個屬性(除了auto值)才能將浮動元素嚴實地包裹。 

 

九、overflow:hidden;能夠解決邊距重合問題。以及解決清除浮動問題。

 

十、水平垂直居中方法

a.容器內單行文字,text-align:center;line-height:(height);

b.容器內多行文字

相關文章
相關標籤/搜索