程式員Web面試之JQuery

來源:互聯網
上載者:User

標籤:style   class   blog   code   java   http   

又到了一年一度的畢業季了,青春散場,卻等待下一場開幕。

在求職大軍中,IT行業的程式員、碼農是工科類大學生的熱門選擇之一,

尤其是近幾年Web的如火如荼,更是吸引了成千上萬的程式員投身其中追求自己的夢想,

這篇文章以Web面試官的經曆整理而成,希望能對你有所協助。

 jQuery是什嗎?

  
jQuery是javascript編寫一個可重用的JavaScript庫。

不使用JQuery設定UI文本的JavaScript代碼如下:

document.getElementById("txt1").value = "hello";

用JQuery類庫後的的JavaScript代碼如下:

$("#txt1").val("Hello");

可見,在使用JQuery類庫後的JavaScript代碼明顯簡潔了很多,也更符合IT行業特點:短、平、快。

 

jquery與JavaScript的關係,JQuery會取代JavaScript嗎?

JavaScript:是一門Web最流行的指令碼語言。

JQuery: 是一個優秀的Javascript架構。它是輕量級的js庫 ,它相容CSS3,還相容各種瀏覽器(IE 6.0+, FF 1.5+, Safari  2.0+, Opera 9.0+)。

故,jQuery是並不是要取代的JavaScript;使用JQuery使Web開發變得簡單。

 

如何使用jQuery庫?

從jquery.com下載的jquery.js檔案(最新的JQuery版本V1.11.1或V2.1.1)。 jQuery的檔案規則,如“jquery-1.4.1.j s”,其中1.4.1是JS檔案的版本的版本號碼。

在開發Web程式前,需要包含的JavaScript,下面的代碼:

<script src="file:///C:/jquery-1.11.1.min.js" type="text/javascript"></script>
CDN(內容分髮網絡)是什嗎?

在開發Web頁面,考慮最多的問題之一是頁面在用戶端電腦的響應:時間越短,使用者體驗越好。

而制約使用者體驗的關鍵因素之一是瀏覽器下載Web檔案大小,包括*.html、圖片、*.js、*.css等檔案。

為了最大化複用和節約頻寬,故CDN應運而生:其基本思路是儘可能避開互連網上有可能影響資料轉送速度和穩定性的瓶頸和環節,使內容傳輸的更快、更穩定。其目的是使使用者可就近取得所需內容,解決 Internet網路擁擠的狀況,提高使用者訪問網站的響應速度。

 

如何使用JQuery CDN?

推薦使用官方的CDN節點,使用代碼如下:

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script><script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>

還有Google提供的JQuery CDN:

<script type="text/javascript"    src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

同時微軟也提供了JQuery CDN的節點:

<script type="text/javascript"    src="http://ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js"></script>

 

如何在CDN網路不可訪問情況下,能自動訪問網站的JQuery檔案?

一般情況下,CDN網路節點是可靠的。

但是偶爾也有失靈的時候,故為了提供雙保險,可進行判斷網路載入CDN失敗,則自動載入網站上的JQuery

, 範例程式碼如下:

<script type="text/javascript" src="http:/ajax.microsoft.com/ajax/jquery/jquery-1.9.1.min.js"></script><script type="text/javascript">if (typeof jQuery == ‘undefined‘){  document.write(unescape("%3Cscript src=‘Scripts/jquery.1.9.1.min.js‘ type=‘text/javascript‘%3E%3C/script%3E"));}</script>

 

同版本的JQuery.js檔案和JQuery.min.js有何不同?

相同

這兩個檔案提供相同的jQuery的功能,即在函數調用上沒有區別。

不同

JQuery.js檔案,適合讓程式員閱讀,如所示:

JQuery.min.js檔案,通過壓縮和刪除所有的空格,以節省頻寬和空間,使得檔案更小,用於網路傳輸,不適合程式員閱讀。

 

何時使用jquery.js,何時使用jquery.min.js?

開發調試情境下:用JQuery.js檔案,因為你想調試,能夠看到javascript代碼。

生產部署環境下:用JQuery.min.js檔案,可減少網路寬度,加快網頁載入速度。

JQuery.vsdoc.js檔案是什麼?

*.vsdoc.js檔案是用來在微軟的開發環境Visual Studio下使用的,方便得獲得JQuery的智能感知,當你輸入JQuery函授後,會自動提示函數的類型、函數使用說明、函數參數等等。

如果在VS下用JQuery開發Web程式,則vsdoc.js檔案會大大的提高開發效率。

 

JQuery的基本文法如何解釋?

jQuery的文法結構可以分為四部分:

  1. 預設情況下,所有Jquery的命令開始以一個“$”符號。
  2. 其次是HTML元素的選擇。例如下面是我們通過ID“txt1”選擇一個HTML文字框。
  3. 接著由點(.)分隔。這個操作者將分離的元素和該元素的動作(函數)。 
  4. 最後什麼樣的函數(動作)。

例如在下面的jQuery代碼,我們正在設定的文本值為“Hello world, jQuery”。

 

在jQuery中,“$”符號代表什嗎?

在JQuery中,“$”符號是一個jQuery的別名,預設的JQuery類庫以$開頭。

 

為何要使用JQuery.noConflict()

有很多類似JQuery一樣的類庫,如MooTools, Backbone, Sammy, Cappuccino, Knockout 。這些類庫中,有的也使用了$符號,如果同時使用,則會導致命名衝突。

為瞭解決這個衝突,需要用到JQuery.noConflict(),這樣就不依賴$這個預設符號了。
   例如:

$.noConflict();jQuery("p").text("I am jquery and I am working&hellip;");

或者使用別名代替:

var jq = $.noConflict();jq("p").text("I am invoked using jquery shortcut&hellip;");
請舉例說明JQuery的選取器

選擇所有HTML的p元素,並隱藏

$("p").hide();

選擇ID為Text1的HTML元素,並賦值

$("#Text1").val("Hello");

選擇Class為Text1dHTML元素,並賦值

$(".Text1").val("Hello");

 

在JQuery中,如何使用document.ready?

一次完整的HTML DOM載入完成,會觸發HTML的“document.ready”事件,而要通過JQuery訪問HTML元素,則需要頁面的HTML元素載入完成。

例如:

<script>   $("#text1").val("Sometext"); // 報錯。因為text1此刻未載入完成,無法訪問</script></head><body><input type="text" id="text1" /></body>

而在Ready事件中的可訪問HTML元素,例子如下:

<script>       $(document).ready(function(){           $("#text1").val("Sometext");       });</script>
同一個頁面中,能否載入多個個document.ready事件?

可以。

 

如何用JQuery對HTML元素事件進行附加?

下面通過2個例子來說明

例子1,選擇所有的button元素,在其click事件中,對所有p元素進行toggle。

$("button").click(function(){$("p").toggle();});

例子2,選擇ID為p1的元素,在mouseenter事件中,進行alert。

$("#p1").mouseenter(function(){  alert("You entered p1!");});
 如何使用JQuery添加樣式(style)?

使用例子如下:

$("li").filter(".middle").addClass("selected");

css樣式內容如下:

<style>      .selected { color:red; }</style>

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.