概述

2018-08-12 21:27 更新

jQuery - 概述

什么是 jQuery?

jQuery 是一種快速簡(jiǎn)潔的 JavaScript 庫(kù),由 John Resig 在 2006 年創(chuàng)建,它的理念很好——用更少的代碼,實(shí)現(xiàn)更多的功能。

jQuery 簡(jiǎn)化了 HTML 文檔遍歷、事件處理、動(dòng)畫(huà)以及 Ajax 交互,用于快速 web 開(kāi)發(fā)。

jQuery 是一個(gè) JavaScript 工具包,旨在通過(guò)編寫(xiě)更少的代碼來(lái)簡(jiǎn)化各種任務(wù)。這是 jQuery 支持的重要的核心特性列表 ——

  • DOM 操作 —— jQuery 通過(guò)使用被稱(chēng)為 Sizzle 的跨瀏覽器的開(kāi)源選擇器引擎,使得選擇 DOM 元素,遍歷它們以及修改它們的內(nèi)容變得容易。

  • 事件處理 —— jQuery 提供一種優(yōu)雅的方式來(lái)捕獲各種事件,如用戶(hù)點(diǎn)擊一個(gè)鏈接,不需要使用事件處理程序來(lái)編寫(xiě)雜亂的 HTML 代碼。

  • AJAX 支持 —— jQuery 能夠?yàn)槟闶褂?AJAX 技術(shù)開(kāi)發(fā)響應(yīng)的和功能豐富的網(wǎng)站提供很多幫助。

  • 動(dòng)畫(huà) —— jQuery 有很多內(nèi)置的動(dòng)畫(huà)效果,你可以在你的網(wǎng)站中使用它們。

  • 輕量級(jí) —— jQuery 是非常輕量級(jí)的庫(kù) —— 大約 19 kb 大小(壓縮格式)。

  • 跨瀏覽器支持 —— jQuery 跨瀏覽器支持,可以在 IE 6.0 +,F(xiàn)F 2.0 +,Safari 3.0 +,Chrome,Opera 9.0 + 瀏覽器上很好的工作。

  • 最新的技術(shù) —— jQuery 支持 CSS3 選擇器和基本的 XPath 語(yǔ)法。

如何使用 jQuery ?

有兩種方式來(lái)使用 jQuery。

  • 本地安裝 —— 你可以在本地計(jì)算機(jī)上下載 jQuery 庫(kù),并把它包括在你的 HTML 代碼中。

  • 基于 CDN 版本 —— 你可以直接從內(nèi)容分發(fā)網(wǎng)絡(luò)(CDN)將 jQuery 庫(kù)包括進(jìn)你的 HTML 代碼中。

本地安裝

  • 進(jìn)入 https://jquery.com/download/ 網(wǎng)頁(yè)來(lái)下載最新的可用的版本。

  • 現(xiàn)在下載 jquery-2.1.3.min.js 文件到你的網(wǎng)站目錄中,如 /jquery。

示例

現(xiàn)在你可以把 jQuery 庫(kù)包括進(jìn)你的 HTML 文件中,如下所示 ——

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript"  src="https://atts.w3cschool.cn/attachments/image/wk/jquery/jquery-2.1.3.min.js"></script>

      <script type="text/javascript">
         $(document).ready(function(){
            document.write("Hello, World!");
         });
      </script>

   </head>

   <body>

      <h1>Hello</h1>

   </body>
</html>

這將產(chǎn)生如下所示結(jié)果 ——

基于 CDN 版本

你可以直接從內(nèi)容分發(fā)網(wǎng)絡(luò)(CDN)將 jQuery 庫(kù)包括進(jìn)你的 HTML 代碼中。谷歌和微軟為最新的版本提供了內(nèi)容發(fā)布。

在本教程中,我們使用的是 Google CDN 版本庫(kù)。

示例

現(xiàn)在讓我們使用來(lái)自 Google CDN 的 jQuery 庫(kù)重新編寫(xiě)上述例子。

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/jquery.min.js">
      </script>

      <script type="text/javascript">
         $(document).ready(function(){
            document.write("Hello, World!");
         });
      </script>
   </head>

   <body>

      <h1>Hello</h1>

   </body>
</html>

這會(huì)產(chǎn)生如下所示的結(jié)果 ——

如何調(diào)用一個(gè) jQuery 庫(kù)函數(shù)?

正如我們所做的任何事一樣,在使用 jQuery 讀取或操作文檔對(duì)象模型(DOM),我們需要確保當(dāng) DOM 準(zhǔn)備好后要盡快的開(kāi)始添加事件等。

如果你想使一個(gè)事件在你的頁(yè)面上工作,你應(yīng)該在 $(document).ready() 函數(shù)內(nèi)部調(diào)用它。在 DOM 下載完成后以及頁(yè)面內(nèi)容下載前,該函數(shù)內(nèi)部的所有事物都將要下載。

要想實(shí)現(xiàn)這一功能,我們?yōu)槲臋n注冊(cè)了一個(gè)已經(jīng)準(zhǔn)備好的事件,如下所示 ——

$(document).ready(function() {
   // do stuff when DOM is ready
});

要想調(diào)用上述任何 jQuery 庫(kù)函數(shù),使用 HTML 腳本標(biāo)簽,如下所示 ——

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/jquery.min.js">
      </script>

      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("div").click(function() {alert("Hello, world!");});
         });
      </script>

   </head>

   <body>
      <div id="mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>

</html>

這將產(chǎn)生如下所示結(jié)果 ——

如何使用自定義腳本?

最好在自定義的 JavaScript 文件:custom.js 中編寫(xiě)我們的自定義代碼,如下所示 ——

/* Filename: custom.js */
$(document).ready(function() {
   $("div").click(function() {
      alert("Hello, world!");
   });
});

現(xiàn)在我們可以把 custom.js 文件包括到 HTML 文件中,如下所示 ——

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/jquery.min.js">
      </script>

      <script type="text/javascript" src="https://atts.w3cschool.cn/attachments/image/wk/jquery/custom.js"></script>
   </head>

   <body>
      <div id="mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>

</html>

這將產(chǎn)生如下所示結(jié)果 ——

使用多個(gè)庫(kù) ——

你可以同時(shí)使用多個(gè)庫(kù)而且每個(gè)庫(kù)之間不會(huì)發(fā)生沖突。例如你可以同時(shí)使用 jQuery 和 MooTool javascript 庫(kù)。

更多細(xì)節(jié),你可以查看 jQuery noConflict 方法。

接下來(lái)的內(nèi)容

即使你對(duì)上述示例不是很理解的話(huà),也不要太擔(dān)心。在隨后的章節(jié)中,你會(huì)很快掌握它們。

下一節(jié)將講解一些傳統(tǒng)的 JavaScript 的基本概念。

以上內(nèi)容是否對(duì)您有幫助:
在線(xiàn)筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)