面試題之JavaScript+Jquery

問題:body中的onload()函數和jQuery中的document.ready()有什麼區別?
回答:onload()和document.ready()的區別有以下兩點:
1、我們可以在頁面中使用多個document.ready(),但只能使用一次onload()。
2、document.ready()函數在頁面DOM元素加載完以後就會被調用,而onload()函數則要在所有的關聯資源(包括圖像、音頻)加載完畢後纔會調用。

Jquery選擇器:
大概歸納爲9種。
(1)基本:

id

element
.class
*
(2)層次選擇器:
ancestor descendant
parent > child
prev + next
prev ~ siblings()選取每個匹配元素的所有同輩元素(不包括自己) nextAll(): 選取每個匹配元素之後的所有同輩元素。
(3)基本過濾器選擇器
:first
:last
:not
:even
:odd
:eq
:gt
:lt
:header
:animated
(4)內容過濾器選擇器
:contains
:empty
:has
:parent
(5)可見性過濾器選擇器
:hidden
:visible
(6)屬性過濾器選擇器
[attribute]
[attribute=value]
[attribute!=value]
[attribute^=value]
[attribute$=value]
[attribute*=value]
[attrSel1][attrSel2][attrSelN]
(7)子元素過濾器選擇器
:nth-child
:first-child
:last-child
:only-child
(8)表單選擇器
:input
:text
:password
:radio
:checkbox
:submit
:image
:reset
:button
:file
:hidden
(9)表單過濾器選擇器
:enabled
:disabled
:checked
:selected

問題:jQuery中的Delegate()函數有什麼作用?
回答:delegate()會在以下兩個情況下使用到:
1、如果你有一個父元素,需要給其下的子元素添加事件,這時你可以使用delegate()了,代碼如下:
(“ul”).delegate(“li”, “click”, function(){ (this).hide();
});
2、當元素在當前頁面中不可用時,可以使用delegate()

問題:怎樣用jQuery編碼和解碼URL?
回答:在jQuery中,我們可以使用以下方法實現URL的編碼和解碼。
encodeURIComponent(url) and decodeURIComponent(url)

問題:如何用jQuery禁用瀏覽器的前進後退按鈕?
回答:實現代碼如下:

$(document).ready(function() { window.history.forward(1); window.history.forward(-1); });

jQuery綁定事件的四種方式:
jQuery中提供了四種事件監聽方式,分別是bind、live、delegate、on,對應的解除監聽的函數分別是unbind、die、undelegate、off。
1、bind用法:
(‘#myol li’).bind(‘click’,getHtml);  
bind的特點就是會把監聽器綁定到目標元素上,有一個綁一個,在頁面上的元素不會動態添加的時候使用它沒什麼問題。但如果列表中動態增加一個“列表元素5”,點擊它是沒有反應的,必須再bind一次才行。  
2、live()用法:
(‘#myol li’).live(‘click’,getHtml);
live將監聽器綁定到document上,事件的處理需要等待層層冒泡,一直到根節點,纔開始執行。優於根節點的子節太多,易導致混亂。已棄用。
3、delegate()用法
(‘#myol’).delegate(‘li’,’click’,getHtml);  
參數多了一個selector,用來指定觸發事件的目標元素,監聽器將被綁定在調用此方法的元素上。  
4、on()的用法
(‘#myol li’).on(‘click’,getHtml);
on與delegate差不多但還是有細微的差別,首先type與selector換位置了,其次selector變爲了可選項。

注意:因爲其他方法都是內部調用on來完成的,直接使用on可以提高效率,而且你完全可以用on來代替其他三種寫法。

1、JavaScript基礎數據類型
JavaScript數據類型包括原始類型和引用類型,原始類型有五個:
Number(數值) String(字符串) Boolean(布爾) Null(空) Undefined(未定義)
引用類型有一個:
Object(對象)
通過typeof(x)可以返回一個變量x的數據類型“number”、“string”、“boolean”、“undefined”、”object”,這裏要注意一點:typeof運算符對於null類型返回的是object

2 談一談JavaScript作用域鏈
當執行一段JavaScript代碼(全局代碼或函數)時,JavaScript引擎會創建爲其創建一個作用域又稱爲執行上下文(Execution Context),在頁面加載後會首先創建一個全局的作用域,然後每執行一個函數,會建立一個對應的作用域,從而形成了一條作用域鏈。每個作用域都有一條對應的作用域鏈,鏈頭是全局作用域,鏈尾是當前函數作用域。
作用域鏈的作用是用於解析標識符,當函數被創建時(不是執行),會將this、arguments、命名參數和該函數中的所有局部變量添加到該當前作用域中,當JavaScript需要查找變量X的時候(這個過程稱爲變量解析),它首先會從作用域鏈中的鏈尾也就是當前作用域進行查找是否有X屬性,如果沒有找到就順着作用域鏈繼續查找,直到查找到鏈頭,也就是全局作用域鏈,仍未找到該變量的話,就認爲這段代碼的作用域鏈上不存在x變量,並拋出一個引用錯誤(ReferenceError)的異常。

6 new構建對象的本質
function User(){
this.name = “Vicfeel”;
this.age = 23;
}
var user = new User();
通過new操作符,實際上在構造函數User中完成了如下操作:
創建一個新的對象,這個對象的類型是object;
設置這個新的對象的內部、可訪問性和prototype屬性爲構造函數(指prototype.construtor所指向的構造函數)中設置的;
執行構造函數;
返回新創建的對象。
function User(){
//this = {};
//this.constructor = User;
this.name = “Vicfeel”;
this.age = 23;
//return this;
}
var user = new User();
如果構造函數默認返回的新創建的this對象,如果手動return 一個變量的話,如果該變量是原始類型則無效,如果是對象,則返回該對象。

2.javascript是面向對象的,怎麼體現javascript的繼承關係?
使用prototype來實現。

4.form中的input可以設置爲readonly和disable,請問2者有什麼區別?
readonly不可編輯,但可以選擇和複製;值可以傳遞到後臺
disabled不能編輯,不能複製,不能選擇;值不可以傳遞到後臺

5.js中的3種彈出式消息提醒(警告窗口,確認窗口,信息輸入窗口)的命令式什麼?
alert
confirm
prompt

7.javaScript的2種變量範圍有什麼不同?
全局變量:當前頁面內有效
局部變量:方法內有效

8、innerHTML,innerText,outerHTML,innerText的區別?
1)、innerHTML與outerHTML在設置對象的內容時包含的HTML會被解析,而innerText與outerText則不會。
2)、在設置時,innerHTML與innerText僅設置標籤內的文本,而outerHTML與outerText設置包括標籤在內的文本。
特別說明:
  innerHTML是符合W3C標準的屬性,而innerText、outerText、outerHTML只適用於IE瀏覽器,因此,儘可能地去使用innerHTML,而少用innerText,如果要輸出不含HTML標籤的內容,可以使用innerHTML取得包含HTML標籤的內容後,再用正則表達式去除HTML標籤,

神馬是 NaN,它的類型是神馬?怎麼測試一個值是否等於 NaN?
NaN 是 Not a Number 的縮寫,Javascript 的一種特殊數值,其類型是 Number,可以通過 isNaN(param) 來判斷一個值是否是 NaN:
console.log(isNaN(NaN)); //true
console.log(isNaN(23)); //false
console.log(isNaN(‘ds’)); //true
console.log(isNaN(‘32131sdasd’)); //true
console.log(NaN === NaN); //false
console.log(NaN === undefined); //false
console.log(undefined === undefined); //false
console.log(typeof NaN); //number
console.log(Object.prototype.toString.call(NaN)); //[object Number]

isNaN() 成爲了 Number 的靜態方法:Number.isNaN().

js中幾種實用的跨域方法原理詳解
這裏說的js跨域是指通過js在不同的域之間進行數據傳輸或通信,比如用ajax向一個不同的域請求數據,或者通過js獲取頁面中不同域的框架中(iframe)的數據。只要協議、域名、端口有任何一個不同,都被當作是不同的域。
一、通過jsonp跨域
在js中,我們直接用XMLHttpRequest請求不同域上的數據時,是不可以的。但是,在頁面上引入不同域上的js腳本文件卻是可以的,jsonp正是利用這個特性來實現的。
這樣jsonp的原理就很清楚了,通過script標籤引入一個js文件,這個js文件載入成功後會執行我們在url參數中指定的函數,並且會把我們需要的json數據作爲參數傳入。所以jsonp是需要服務器端的頁面進行相應的配合的。

2、通過修改document.domain來跨子域
瀏覽器都有一個同源策略,其限制之一就是第一種方法中我們說的不能通過ajax的方法去請求不同源中的文檔。 它的第二個限制是瀏覽器中不同域的框架之間是不能進行js的交互操作的。有一點需要說明,不同的框架之間(父子或同輩),是能夠獲取到彼此的window對象的,但蛋疼的是你卻不能使用獲取到的window對象的屬性和方法(html5中的postMessage方法是一個例外,還有些瀏覽器比如ie6也可以使用top、parent等少數幾個屬性),總之,你可以當做是隻能獲取到一個幾乎無用的window對象。

3、使用window.name來進行跨域
window對象有個name屬性,該屬性有個特徵:即在一個窗口(window)的生命週期內,窗口載入的所有的頁面都是共享一個window.name的,每個頁面對window.name都有讀寫的權限,window.name是持久存在一個窗口載入過的所有頁面中的,並不會因新頁面的載入而進行重置。

4、使用HTML5中新引進的window.postMessage方法來跨域傳送數據
window.postMessage(message,targetOrigin) 方法是html5新引進的特性,可以使用它來向其它的window對象發送消息,無論這個window對象是屬於同源或不同源,目前IE8+、FireFox、Chrome、Opera等瀏覽器都已經支持window.postMessage方法。
調用postMessage方法的window對象是指要接收消息的那一個window對象,該方法的第一個參數message爲要發送的消息,類型只能爲字符串;第二個參數targetOrigin用來限定接收消息的那個window對象所在的域,如果不想限定域,可以使用通配符 * 。
需要接收消息的window對象,可是通過監聽自身的message事件來獲取傳過來的消息,消息內容儲存在該事件對象的data屬性中。
上面所說的向其他window對象發送消息,其實就是指一個頁面有幾個框架的那種情況,因爲每一個框架都有一個window對象。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章