前端工程師面試問題概括（2、問答類JQ相關）

時間 2019-11-19

原文原文鏈接

其餘隨筆

前端工程師面試問題概括（1、問答類html/css/js基礎）

前端工程師面試問題概括（3、代碼類）

一、 jQuery 庫中的 $() 是什麼？

　　$() 函數是 jQuery() 函數的別稱。$() 函數用於將任何對象包裹成 jQuery 對象，接着你就被容許調用定義在 jQuery 對象上的多個不一樣方法。你能夠將一個選擇器字符串傳入 $() 函數，它會返回一個包含全部匹配的 DOM 元素數組的 jQuery 對象。javascript

二、如何找到全部 HTML select 標籤的選中項？

$('[name=selectname] :selected')

三、$(this) 和 this 關鍵字在 jQuery 中有何不一樣？

$(this) 返回一個 jQuery 對象，你能夠對它調用多個 jQuery 方法，好比用 text() 獲取文本，用val() 獲取值等等。css

而 this 表明當前元素，它是 JavaScript 關鍵詞中的一個，表示上下文中的當前 DOM 元素。你不能對它調用 jQuery 方法，直到它被 $() 函數包裹，例如 $(this)。html

四、jquery怎麼移除標籤onclick屬性？

得到a標籤的onclick屬性: $("a").attr("onclick")前端

刪除onclick屬性：$("a").removeAttr("onclick");java

設置onclick屬性：$("a").attr("onclick","test();");jquery

五、jquery中addClass,removeClass,toggleClass的使用。

$(selector).addClass(class)：爲每一個匹配的元素添加指定的類名面試

$(selector).removeClass(class)：從全部匹配的元素中刪除所有或者指定的類，刪除class中某個值；ajax

$(selector).toggleClass(class)：若是存在（不存在）就刪除（添加）一個類express

$(selector).removeAttr(class);刪除class這個屬性；數組

六、JQuery有幾種選擇器?

(1)、基本選擇器：#id，class,element,*;

(2)、層次選擇器：parent > child，prev + next ，prev ~ siblings

(3)、基本過濾器選擇器：:first，:last ，:not ，:even ，:odd ，:eq ，:gt ，:lt

(4)、內容過濾器選擇器： :contains ，:empty ，:has ，:parent

(5)、可見性過濾器選擇器：:hidden ，:visible

(6)、屬性過濾器選擇器：[attribute] ，[attribute=value] ，[attribute!=value] ，[attribute^=value] ，[attribute$=value] ，[attribute*=value]

(7)、子元素過濾器選擇器：:nth-child ，:first-child ，:last-child ，:only-child

(8)、表單選擇器： :input ，:text ，:password ，:radio ，:checkbox ，:submit 等；

(9)、表單過濾器選擇器：:enabled ，:disabled ，:checked ，:selected

七、jQuery中的Delegate()函數有什麼做用？

delegate()會在如下兩個狀況下使用到：

一、若是你有一個父元素，須要給其下的子元素添加事件，這時你可使用delegate()了，代碼以下：

$("ul").delegate("li", "click", function(){ $(this).hide(); });

二、當元素在當前頁面中不可用時，可使用delegate()

八、$(document).ready()方法和window.onload有什麼區別？

(1)、window.onload方法是在網頁中全部的元素(包括元素的全部關聯文件)徹底加載到瀏覽器後才執行的。

(2)、$(document).ready() 方法能夠在DOM載入就緒時就對其進行操縱，並調用執行綁定的函數。

九、如何用jQuery禁用瀏覽器的前進後退按鈕？

實現代碼以下：

<script type="text/javascript" language="javascript">
　　$(document).ready(function() {
　　　　window.history.forward(1);
  　　　　//OR window.history.forward(-1);
　　});
</script>

十、 jquery中$.get()提交和$.post()提交有區別嗎？

相同點：都是異步請求的方式來獲取服務端的數據；

異同點：

一、請求方式不一樣：$.get() 方法使用GET方法來進行異步請求的。$.post() 方法使用POST方法來進行異步請求的。

二、參數傳遞方式不一樣：get請求會將參數跟在URL後進行傳遞，而POST請求則是做爲HTTP消息的實體內容發送給Web服務器的，這種傳遞是對用戶不可見的。

三、數據傳輸大小不一樣：get方式傳輸的數據大小不能超過2KB 而POST要大的多

四、安全問題： GET 方式請求的數據會被瀏覽器緩存起來，所以有安全問題。

十一、寫出一個簡單的$.ajax()的請求方式？

$.ajax({
    url:'http://www.baidu.com',
    type:'POST',
    data:data,
    cache:true,
    headers:{},
    beforeSend：function(){},
    success:function(){},
    error:function(){},
    complete:function(){}
});

十二、jQuery的事件委託方法bind 、live、delegate、on之間有什麼區別？

(1)、bind 【jQuery 1.3以前】

定義和用法：主要用於給選擇到的元素上綁定特定事件類型的監聽函數；

語法：bind(type,[data],function(eventObject))；

特色：

　　(1)、適用於頁面元素靜態綁定。只能給調用它的時候已經存在的元素綁定事件，不能給將來新增的元素綁定事件。

　　(2)、當頁面加載完的時候，你才能夠進行bind()，因此可能產生效率問題。

實例以下：$( "#members li a" ).bind( "click", function( e ) {} );

(2)、live 【jQuery 1.3以後】

定義和用法：主要用於給選擇到的元素上綁定特定事件類型的監聽函數；

語法：live(type, [data], fn);

特色：

　　(1)、live方法並無將監聽器綁定到本身(this)身上，而是綁定到了this.context上了。

　　(2)、live正是利用了事件委託機制來完成事件的監聽處理，把節點的處理委託給了document，新添加的元素沒必要再綁定一次監聽器。

　　(3)、使用live（）方法但卻只能放在直接選擇的元素後面，不能在層級比較深，連綴的DOM遍歷方法後面使用，即$(「ul」").live...能夠，但$("body").find("ul").live...不行；

實例以下：$( document ).on( "click", "#members li a", function( e ) {} );

(3)、delegate 【jQuery 1.4.2中引入】

定義和用法：將監聽事件綁定在就近的父級元素上

語法：delegate(selector,type,[data],fn)

特色：

(1)、選擇就近的父級元素，由於事件能夠更快的冒泡上去，可以在第一時間進行處理。

　　(2)、更精確的小範圍使用事件代理，性能優於.live()。能夠用在動態添加的元素上。

實例以下：

$("#info_table").delegate("td","click",function(){/*顯示更多信息*/});

$("table").find("#info").delegate("td","click",function(){/*顯示更多信息*/});

(4)、on 【1.7版本整合了以前的三種方式的新事件綁定機制】

定義和用法：將監聽事件綁定到指定元素上。

語法：on(type,[selector],[data],fn)

實例以下：$("#info_table").on("click","td",function(){/*顯示更多信息*/});參數的位置寫法與delegate不同。

說明：on方法是當前JQuery推薦使用的事件綁定方法，附加只運行一次就刪除函數的方法是one()。

總結：.bind(), .live(), .delegate(),.on()分別對應的相反事件爲：.unbind(),.die(), .undelegate(),.off()

1三、解釋」deferreds」。

開發網站的過程當中，咱們常常遇到某些耗時很長的javascript操做。其中，既有異步的操做（好比ajax讀取服務器數據），也有同步的操做（好比遍歷一個大型數組），它們都不是當即能獲得結果的。

一般的作法是，爲它們指定回調函數（callback）。即事先規定，一旦它們運行結束，應該調用哪些函數。

可是，在回調函數方面，jQuery的功能很是弱。爲了改變這一點，jQuery開發團隊就設計了deferred對象。

簡單說，deferred對象就是jQuery的回調函數解決方案。在英語中，defer的意思是」延遲」，因此deferred對象的含義就是」延遲」到將來某個點再執行。

1四、你知道哪些針對jQuery的優化方法？

1.老是從ID選擇器開始繼承在jQuery中最快的選擇器是ID選擇器，由於它直接來自於JavaScript的getElementById()方法。

例若有一段HTML代碼：

<div id="content">

     <form method="post"action="#">

         <h2>交通訊號燈</h2>

         <ul id="traffic_light">

             <li>

                 <input type="radio"class="on"name="light"value="red"/>紅色

             </li>

             <li>

                 <input type="radio"class="off"name="light"value="yellow"/>黃色

            </li>

            <li>

                <input type="radio"class="off"name="light"value="green"/>綠色

            </li>

        </ul>

        <input class="button"id="traffic_button"type="submit"value="Go"/>

    </form>

</div>

好比須要選擇紅綠單選框，那麼可使用一個tag name來限制(修飾)class，以下所示：var active_light= $(“ i n p u t . o n ”); 当然也可以结合就近的 I D ，如下所示： v a r a c t i v e_{l} i g h t =$

2.在class前使用tag(標籤名)在jQuery中第二快的選擇器是tag(標籤)選擇器(好比：$(「head」))。

跟ID選擇器累時，由於它來自原生的getElementsByTagName()方法。繼續看剛纔那段HTML代碼：

在使用tag來修飾class的時候，咱們須要注意如下幾點：（1）不要使用tag來修飾ID，以下所示：var content= $(“div#content”);这样一来，选择器会先遍历所有的div元素，然后匹配#content。（好像jQuery从1.3.1开始改变了选择器核心后，不存在这个问题了。暂时无法考证。）（2）不要画蛇添足的使用ID来修饰ID，如下所示：var traffic_light=$

3.將jQuery對象緩存起來把jQuery對象緩存起來就是要告訴咱們要養成將jQuery對象緩存進變量的習慣。

下面是一個jQuery新手寫的一段代碼：

$("#traffic_light input.on").bind("click",function(){});

$("#traffic_light input.on").css("border","1px dashed yellow");

$("#traffic_light input.on").css("background-color","orange");

$("#traffic_light input.on").fadeIn("slow");

但切記不要這麼作。咱們應該先將對象緩存進一個變量而後再操做，以下所示：

記住，永遠不要讓相同的選擇器在你的代碼裏出現屢次.注：（1）爲了區分普通的JavaScript對象和jQuery對象，能夠在變量首字母前加上$符號。（2）上面代碼可使用jQuery的鏈式操做加以改善。以下所示：

var $active_light = $("#traffic_light input.on");

 

$active_light.bind("click",function(){})

.css("border","1px dashed yellow")

.css("background-color","orange")

.fadeIn("slow");

4.若是你打算在其餘函數中使用jQuery對象，那麼你必須把它們緩存到全局環境中。

以下代碼所示：

// 在全局範圍定義一個對象(例如:window對象)

 window.$my = {

     head:$("head"),

     trafficLight:$("#trafficLight"),

     trafficButton:$("#trafficButton")

 };

 

 function doSomething(){

     // 如今你能夠引用存儲的結果並操做它們

    var script=document.createElement("script");

    $my.head.append(script);

 

    // 當你在函數內部操做是,能夠繼續將查詢存入全局對象中去.

    $my.coolResults=$("#some_ul li");

    $my.otherResults=$("#some_table td");

 

    // 將全局函數做爲一個普通的jquery對象去使用.

    $my.otherResults.css("border-color","red");

    $my.trafficLight.css("border-color","green");

}

// 你也能夠在其餘函數中使用它.

這裏的基本思想是在內存中創建你確實想要的東西，而後更新DOM。這並非一個jQuery最佳實踐，但必須進行有效的JavaScript操做。直接的DOM操做速度很慢。例如，你想動態的建立一組列表元素，千萬不要這樣作,以下所示：對直接的DOM操做進行限制。

var top_100_list = [];// 假設這裏是100個獨一無二的字符串

var $mylist = $("#mylist");// jQuery選擇到<ul>元素

for(var i = 0,l = top_100_list.length;i<l;i++) {

$mylist.append("<li>" + top_100_list[i] + "</li>");

}

咱們應該將整套元素字符串在插入進dom中以前先所有建立好，以下所示：

$("#entryform input").bind("focus",function() {

$(this).addClass("selected");

}).bind("blur",function(){

$(this).removeClass("selected");

});

5.冒泡除非在特殊狀況下,不然每個js事件(例如:click,mouseover等.)都會冒泡到父級節點。

當咱們須要給多個元素調用同個函數時這點會頗有用。代替這種效率不好的多元素事件監聽的方法就是,你只需向它們的父節點綁定一次。好比,咱們要爲一個擁有不少輸入框的表單綁定這樣的行爲:當輸入框被選中時爲它添加一個class傳統的作法是，直接選中input，而後綁定focus等，以下所示：

$("#entryform").bind("focus",function(e) {

var $cell = $(e.target); // e.target捕捉到觸發的目標元素

$cell.addClass("selected");

}).bind("blur",function(e) {

var $cell = $(e.target);

$cell.removeClass("selected");

});

固然上面代碼能幫咱們完成相應的任務，但若是你要尋求更高效的方法，請使用以下代碼：

經過在父級監聽獲取焦點和失去焦點的事件，對目標元素進行操做。在上面代碼中，父級元素扮演了一個調度員的角色,它能夠基於目標元素綁定事件。若是你發現你給不少元素綁定了同一個事件監聽,那麼如今的你確定知道哪裏作錯了。

6.推遲到$(window).load。

jQuery對於開發者來講有一個很誘人的東西,能夠把任何東西掛到 $(d o c u m e n t) . r e a d y 下。尽管$

7.壓縮JavaScript。

在線壓縮地址:http://dean.edwards.name/packer/壓縮以前，請保證你的代碼的規範性，不然可能失敗，致使Js錯誤。

8.儘可能使用ID代替Class。

前面性能優化已經說過，ID選擇器的速度是最快的。因此在HTML代碼中，能使用ID的儘可能使用ID來代替class。看下面的一個例子：

// 建立一個list

var $myList = $('#myList');

var myListItems = '<ul>';

for(var i = 0; i < 1000; i ++) {

myListItems += '<li class = "listItem'+i+'">This is a list item</li>';

// 這裏使用的是class

}

myListItems += '</ul>';

$myList.html(myListItems);

// 選擇每個li

for(var i = 0; i<1000; i++) {

var selectedItem = $('.listItem' + i);

}

在上段代碼中，選擇每一個li總共只用了61毫秒，相比class的方式，將近快了100倍。在代碼最後，選擇每一個li的過程當中，總共用了5066毫秒，超過5秒了。接着咱們作一個對比，用ID代替class：

9.給選擇器一個上下文。

jQuery選擇器中有一個這樣的選擇器，它能指定上下文。jQuery(expression,context);經過它，能縮小選擇器在DOM中搜索的範圍，達到節省時間，提升效率。普通方式： $(‘ . m y D i v^{'}) 改进方式：$

10.慎用.live()方法（應該說盡可能不要使用）。

這是jQuery1.3.1版本以後增長的方法，這個方法的功能就是爲新增的DOM元素動態綁定事件。但對於效率來講，這個方法比較佔用資源。因此請儘可能不要使用它。例若有這麼一段代碼:

<script type="text/javascript">

$(function(){

$("p").click(function(){

alert($(this).text());

});

$("button").click(function(){

$("<p>this is second p</p>").appendTo("body");

});

})

</script>

<body>

<p>this is first p</p>

<button>add</button>

</body>

運行後，你會發現新增的p元素，並沒用被綁定click事件。你能夠改爲.live(「click」)方式解決此問題，代碼以下：

$(function() {

$("p").live("click",function() {

// 改爲live方式

alert($(this).text());

});

$("button").click(function() {

$("<p>this is second p</p>").appendTo("body");

});

})

但我並不建議你們這麼作，我想用另外一種方式去解決這個問題，代碼以下：

$(function() {

$("p").click(function() {

alert($(this).text());

});

$("button").click(function() {

$("<p>this is second p</p>").click(function() {

// 爲新增的元素從新綁定一次

alert($(this).text());

}).appendTo("body");

});

})

雖然我把綁定事件從新寫了一次，代碼多了點，但這種方式的效率明顯高於live()方式，特別是在頻繁的DOM操做中，這點很是明顯。

1五、什麼是效果隊列？

jQuery中有個動畫隊列的機制。當咱們對一個對象添加屢次動畫效果時後添加的動做就會被放入這個動畫隊列中，等前面的動畫完成後再開始執行。但是用戶的操做每每都比動畫快，若是用戶對一個對象頻繁操做時不處理動畫隊列就會形成隊列堆積，影響到效果。jQuery中有stop這個方法能夠中止當前執行的動畫，而且它有兩個布爾參數，默認值都爲false。第一個參數爲true時會清空動畫隊列，第二個參數爲true時會瞬間完成掉當前動畫。因此，咱們常用obj.stop(true,true)來中止動畫。可是這還不夠！正如jQuery文檔中的說法，即便第二個參數爲true，也僅僅是把當前在執行的動畫跳轉到完成狀態。這時第一個參數若是也爲true，後面的隊列就會被清空。若是一個效果須要多個動畫同時處理，咱們僅完成其中的一個而把後面的隊列丟棄了，這就會出現意料以外的結果。