jQuery是什麼?

jQuery是什麼?

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

不使用jQuery設置UI文本的JavaScript代碼以下:css

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

用jQuery類庫後的的JavaScript代碼以下:html

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

可見,在使用jQuery類庫後的JavaScript代碼明顯簡潔了不少,也更符合IT行業特色:短、平、快。java

 

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

JavaScript:是一門Web最流行的腳本語言。jquery

jQuery: 是一個優秀的Javascript框架。它是輕量級的js庫 ,它兼容CSS3,還兼容各類瀏覽器(IE 6.0+, FF 1.5+, Safari  2.0+, Opera 9.0+)。程序員

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

 

如何使用jQuery庫?

從jquery.com下載的jquery.js文件(最新的JQuery版本V1.11.1或V2.1.1)。 jQuery的文件規則,如「jquery-1.4.1.j s」,其中1.4.1是JS文件的版本的版本號。api

在開發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文件,適合讓程序員閱讀,以下圖所示:

image

jQuery.min.js文件,經過壓縮和刪除全部的空格,以節省帶寬和空間,使得文件更小,用於網絡傳輸,不適合程序員閱讀。

image

 

什麼時候使用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文件會大大的提升開發效率。

image

 

jQuery的基本語法如何解釋?

jQuery的語法結構能夠分爲四部分:

  1. 默認狀況下,全部Jquery的命令開始以一個「$」符號。
  2. 其次是HTML元素的選擇。例以下面是咱們經過ID「txt1」選擇一個HTML文本框。
  3. 接着由點(.)分隔。這個操做者將分離的元素和該元素的動做(函數)。 
  4. 最後什麼樣的函數(動做)。

例如在下面的jQuery代碼,咱們正在設置的文本值爲「Hello world, jQuery」。

image

 

在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>
相關文章
相關標籤/搜索