JQuery：設計師的簡易JavaScript

鑰匙要點

• > jQuery是一個JavaScript庫，簡化了使用JavaScript進行Web設計的過程，提供了一系列的預構建功能和工具來提高功能和用戶體驗。
jQuery允許設計人員以更簡化和高效的方式來操縱HTML元素，處理事件，創建動畫並進行AJAX調用，以及其他任務。
• > jQuery的關鍵功能之一是它可以將“鏈”功能“鏈接”起來的能力，從而允許在單一的代碼行中執行多個操作。這使其成為簡化複雜JavaScript任務的功能強大的工具。
>
• > jQuery的加載事件功能允許在頁面加載期間完成任務，並在擁有所需的所有零件時就開始工作。這是對傳統的撞擊方法的改進。
• >儘管具有高端技巧的能力，但Jquery的最大吸引力是它可以快速解決小問題，最少大驚小怪的能力，這使其成為網絡設計師的寶貴工具。
• 如果JavaScript的重生是過去兩年中最大的主題，那麼您可能可以將圍繞此主題的大部分談話分為兩個主要領域。
在城鎮的Geekier盡頭，我們已經看到Smarties利用JavaScript做各種令人驚奇的，偶爾會荒謬的 - 與Ajax一起做事。

> 但是，對於像我這樣的前端傢伙來說，大部分腳本的嘶嘶聲和泡沫一直集中在改裝您的標記上 - 也就是說，使用JavaScript使您的標記在瀏覽器上後使您的標記效果更好。在過去的幾年中，設計視圖新聞通訊的長期讀者可能會記住我自己的一些實驗：

在使用DOM的造型圖像時，我們使用JavaScript將圓角添加到圖像中。

>在DOM文本陰影中，我們使用JavaScript在標題文本上構建陰影。

在水平規則中！好吧！ ，我們使用JavaScript修復了狡猾的人力資源元素。

>
>儘管這些腳本中的每個腳本都有一個完全不同的目的，但它們都涉及向瀏覽器發送整潔的語義標記，並使用JavaScript來修復或擴展那些足夠智能的瀏覽器的能力。在大多數情況下，這涉及在更多標記中“包裝”標記的某些部分。今天，我們將研究一種簡單，通用的方法，該方法將使我們隨時隨地執行此操作：jQuery。
那麼，什麼是jQuery？
• >
> jQuery是另一個JavaScript庫，它加入了已經擁擠的空間，其中包括原型，Scriptaculous，Rico，Moo.fx和其他十幾個。要使用它，只需將.js文件附加在頁面頭的頭部：神奇地，您可以訪問許多預構建的功能和Gizmos。

問：為什麼您可能希望另一個Arcane JavaScript庫來處理？ 答：jQuery的關鍵吸引力是它可以在使用它的前10分鐘內為您提供。 不久前，我們花了一些時間來改善Sitepoint市場運營的方式。在尋找一種優雅的方式來允許賣家展示大型屏幕截圖，統計信息，圖形和其他圖像而不離開主拍賣頁面時，我遇到了Cody Lindley的厚箱，該盒子由John Resig的JQuery JQuery JavaScript庫提供支持。下圖顯示了厚箱的作用。
>

>僅五分鐘用厚的箱子玩耍後，您就會開始看到它的潛力。在市場上，我能夠將鏈接的圖像和完整的HTML文檔都拉到厚的窗口窗口，同時啟動頁面調暗（但不會丟失）。使用JavaScript被禁用或不可用的瀏覽器的用戶直接將其直接帶到項目（即圖像或頁面）。這是一個非常聰明，可用且可訪問的解決方案，解決了“擴大此縮略圖”問題。 但是，由於我們已經決定在頁面中包含jQuery庫（很小 - 大約10kb），所以我認為找出它可以為我們做些什麼是一個好主意。 >

一個小時後，我是一個jQuery convert。

jQuery的真正美是它的簡單性。單行jQuery代碼可以替換十幾行正常的JavaScript，但它仍然非常元素和靈活。讓我用一個例子說明這一點。在兩年前的“水平規則修復程序”中，我們使用了以下腳本：>

作為此代碼的快速摘要，瀏覽器等待頁面完成加載，然後再通過DOM，以找到HR的每個出現。每當它找到一個時，它會創建一個新的DIV，將其賦予類名稱為“線”，將其插入HR的位置，並將舊的HR彈出新的Div中，以實現實現此特殊效果所需的標記。除了語義譜系外，該腳本的最終結果是我們能夠達到所需的結果而無需更改數百頁。

>當時，我認為對於12行代碼來說，這還不錯。但是，讓我們看一下如何使用jQuery實現相同的結果。

>

我不騙你。

function fancyRules() {  <br>
  if (!document.getElementsByTagName) return;  <br>
    var hr = document.getElementsByTagName("hr"); <br>
  for (var i=0; i<hr.length; i++) {  <br>
    var newhr = hr[i];  <br>
    var wrapdiv = document.createElement('div'); <br>
    wrapdiv.className = 'line';   <br>
    newhr.parentNode.replaceChild(wrapdiv, newhr);   <br>
    wrapdiv.appendChild(newhr);   <br>
  }  <br>
}  <br>
 <br>
window.onload = fancyRules;

將其分解（不是有太多破壞）：>

>第一行和第三行是jQuery的加載事件，它們從上面替換了舊窗口。我們希望在頁面加載期間要完成的任何任務都可以在這些捲髮括號內放置。 >

>這是舊的Onload方法的一個很好的改進，因為Jquery的功能並沒有等到所有內容都觀看所需的所有內容，而是在擁有所需的所有零件時就開始工作。真的很整潔。

明顯地，第二行更簡單：

function fancyRules() {  <br>
  if (!document.getElementsByTagName) return;  <br>
    var hr = document.getElementsByTagName("hr"); <br>
  for (var i=0; i<hr.length; i++) {  <br>
    var newhr = hr[i];  <br>
    var wrapdiv = document.createElement('div'); <br>
    wrapdiv.className = 'line';   <br>
    newhr.parentNode.replaceChild(wrapdiv, newhr);   <br>
    wrapdiv.appendChild(newhr);   <br>
  }  <br>
}  <br>
 <br>
window.onload = fancyRules;

>“美元對象” - $（“ HR”） - 我們需要告訴jQuery以獲取此頁面上的每個水平規則，而包裹是我們將對這些HR元素做的。

>

> jQuery的內置包裝功能接收我們給它的任何HTML（在這種情況下，“

”），並將其包裹在我們頁面中的每個HR周圍 - 無需循環或測試。 >

>我們在這裡使用了一個div，但是我們可以很容易地修改或包裝B，SPAN或A元素。

>儘管我們在此處使用了非常簡單的選擇規則（所有HRS），但我們可以很容易地對我們的目標更具體。使用熟悉的舊CSS語法，我們可以使用以下任何一個：

>

$（“ hr.separate”） - 獲取帶有類名為“獨立”的HR元素。
• >
$（“ li：唯一的孩子”） - 獲取自己的列表項目。
• >
$（“ ul> li”） - 僅獲取帶有未訂購父母列表的列表項目。

>我親自發現包裝是最有用的jQuery函數，但它只是眾多，包括hide，show，vadeout（“ slow”）和slideup（“ fast”），僅舉幾例。您可能可以猜測這些功能中的每一個。 JQuery首發網站上的Jquery首發教程是一個非常溫和的初學者指南，並帶您瀏覽一些最常見的功能。

>

>但也許jQuery的單一最整潔的功能是它“鏈”起作用的能力。換句話說，如果由於某種瘋狂的原因，我想在我們的人力資源元素中添加第二個div，我可以簡單地將另一個調用函數添加到代碼末尾的包裝函數，例如：

>

$(document).ready(function(){ <br>
  $("hr").wrap("<div class='line'></div>"); <br>
});

太容易了，這太瘋狂了。像狐狸一樣瘋狂！

>

賣出您的市場網站部分為您提供了另一個派上用場的例子，如下所示。

>當我們開發此頁面時，我想在每個縮略圖的底部添加一個小圖標。這要求將每個IMG元素包裹在容器div中，另一個DIV顯示要位於容器div的圖標>再次，jQuery代碼只是一行（我在這裡將其拆分，因為我們可以使用有限的列寬度）。

>

>用普通的英語，此代碼只要求：

$(document).ready(function(){ <br>
  ... <br>
});

• 在#thumbnails內部的li元素中找到所有圖像。
>將這些圖像包裹在稱為“ wrap”的Div中。
• > 在我的圖像之前，我的“包裹” div中的另一個div（帶有圖標圖形的一個）
• 現在我們有了結構，CSS完成了其餘的工作。
> 當然，如果關閉JavaScript，則縮略圖直接鏈接到原始圖像文件，並且不需要圖標。現在，這就是我所說的優雅退化。

>與大多數其他JavaScript庫一樣，jQuery能夠進行一些非常高端的技巧（我們在上一篇文章中介紹了其Ajax功能），但是對我來說，最大的吸引力是它可以快速解決小問題，最小的麻煩。

您可能會說，我已經是一個很大的JQuery粉絲。我希望您也會發現它也有用。

>當然，如果您要擴展自己的JavaScript範圍，請不要忘記升級到Joe Hewitt的Firebug擴展名的最新版本，該版本現在是無可爭議的JavaScript Debugger的國王。

本文最初發表在設計視圖＃23。

經常詢問有關設計師的jQuery和JavaScript的問題

> jquery和javaScript？

> javaScript是一種編程語言，可讓您在網頁上實現複雜的功能。另一方面，jQuery是一個快速，小且功能豐富的JavaScript庫。它使HTML文檔遍歷和操縱，事件處理和動畫之類的東西變得更加簡單，可以易於使用易於使用的API，可在許多瀏覽器中使用。本質上，JQuery是一組JavaScript庫，旨在簡化HTML文檔遍歷，活動處理和動畫。您可以從官方的jQuery網站下載它，也可以直接從內容交付網絡（CDN）中包含它。一旦庫包含在項目中，您就可以通過使用$符號開始使用jQuery函數（選擇html元素）和jQuery操作（在選定的元素上執行）。 >>

jQuery的jQuery的某些常見用途是在網絡設計中的某些常見用途？單擊或鼠標的動作），創建動畫並進行AJAX調用以檢索或將數據發送到服務器。它還用於創建交互式功能，例如圖像滑塊，表單驗證和動態內容加載。

> jQuery如何簡化使用JavaScript？

> jQuery通過為常見的Web任務提供易於使用的API來簡化JavaScript，從而抽象複雜的JavaScript功能。它還處理編寫原始JavaScript時可能會出現的許多跨瀏覽器兼容性問題，使您的代碼更易於編寫和維護。

我可以與其他JavaScript庫一起使用jQuery？

是的，是的，可以與其他Javascript庫一起使用JQuery。它提供了一個稱為Noconflict Mode的功能，它允許您與其他也使用$符號的庫一起使用jQuery。官方的jQuery網站提供了全面的文檔和教程。 Codecademy，Udemy和Khan Academy等其他在線平台也提供了JQuery的課程。

我如何調試jQuery代碼？

>調試jQuery代碼類似於調試JavaScript。您可以使用瀏覽器的開發人員工具來檢查元素，查看控制台日誌並逐步瀏覽代碼。此外，jQuery提供了一些方法，例如。 jQuery cdn用於更快的加載時間。

>如何優化我的jQuery代碼以獲得更好的性能？

>

>有幾種方法可以優化您的jQuery代碼以獲得更好的性能。其中包括：最小化DOM操作，使用ID選擇器代替類選擇器，緩存jQuery對像以及使用.ON（）方法進行事件綁定。

我可以將jQuery用於移動Web開發嗎？

是，是的，jQuery有一個特定的移動網絡開發圖書館，用於移動網絡開發的特定庫。它為所有流行的移動設備平台提供了一個統一的，基於HTML5的用戶界面系統。

以上是JQuery：設計師的簡易JavaScript的詳細內容。更多資訊請關注PHP中文網其他相關文章！