在使用DOM的造型圖像時，我們使用JavaScript將圓角添加到圖像中。
>在DOM文本陰影中，我們使用JavaScript在標題文本上構建陰影。
在水平規則中！好吧！ ，我們使用JavaScript修復了狡猾的人力資源元素。
問：為什麼您可能希望另一個Arcane JavaScript庫來處理？
答：jQuery的關鍵吸引力是它可以在使用它的前10分鐘內為您提供。
不久前，我們花了一些時間來改善Sitepoint市場運營的方式。在尋找一種優雅的方式來允許賣家展示大型屏幕截圖，統計信息，圖形和其他圖像而不離開主拍賣頁面時，我遇到了Cody Lindley的厚箱，該盒子由John Resig的JQuery JQuery JavaScript庫提供支持。下圖顯示了厚箱的作用。
>
>僅五分鐘用厚的箱子玩耍後，您就會開始看到它的潛力。在市場上，我能夠將鏈接的圖像和完整的HTML文檔都拉到厚的窗口窗口，同時啟動頁面調暗（但不會丟失）。使用JavaScript被禁用或不可用的瀏覽器的用戶直接將其直接帶到項目（即圖像或頁面）。這是一個非常聰明，可用且可訪問的解決方案，解決了“擴大此縮略圖”問題。
但是，由於我們已經決定在頁面中包含jQuery庫（很小 - 大約10kb），所以我認為找出它可以為我們做些什麼是一個好主意。 >
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（在這種情況下，“
>我們在這裡使用了一個div，但是我們可以很容易地修改或包裝B，SPAN或A元素。
>
>
>但也許jQuery的單一最整潔的功能是它“鏈”起作用的能力。換句話說，如果由於某種瘋狂的原因，我想在我們的人力資源元素中添加第二個div，我可以簡單地將另一個調用函數添加到代碼末尾的包裝函數，例如：>
$(document).ready(function(){ <br>
$("hr").wrap("<div class='line'></div>"); <br>
});>
賣出您的市場網站部分為您提供了另一個派上用場的例子，如下所示。
>
>用普通的英語，此代碼只要求： >與大多數其他JavaScript庫一樣，jQuery能夠進行一些非常高端的技巧（我們在上一篇文章中介紹了其Ajax功能），但是對我來說，最大的吸引力是它可以快速解決小問題，最小的麻煩。
經常詢問有關設計師的jQuery和JavaScript的問題 > jquery和javaScript？ > javaScript是一種編程語言，可讓您在網頁上實現複雜的功能。另一方面，jQuery是一個快速，小且功能豐富的JavaScript庫。它使HTML文檔遍歷和操縱，事件處理和動畫之類的東西變得更加簡單，可以易於使用易於使用的API，可在許多瀏覽器中使用。本質上，JQuery是一組JavaScript庫，旨在簡化HTML文檔遍歷，活動處理和動畫。您可以從官方的jQuery網站下載它，也可以直接從內容交付網絡（CDN）中包含它。一旦庫包含在項目中，您就可以通過使用$符號開始使用jQuery函數（選擇html元素）和jQuery操作（在選定的元素上執行）。 >> > jQuery通過為常見的Web任務提供易於使用的API來簡化JavaScript，從而抽象複雜的JavaScript功能。它還處理編寫原始JavaScript時可能會出現的許多跨瀏覽器兼容性問題，使您的代碼更易於編寫和維護。 >調試jQuery代碼類似於調試JavaScript。您可以使用瀏覽器的開發人員工具來檢查元素，查看控制台日誌並逐步瀏覽代碼。此外，jQuery提供了一些方法，例如。 jQuery cdn用於更快的加載時間。 >有幾種方法可以優化您的jQuery代碼以獲得更好的性能。其中包括：最小化DOM操作，使用ID選擇器代替類選擇器，緩存jQuery對像以及使用.ON（）方法進行事件綁定。 
>當我們開發此頁面時，我想在每個縮略圖的底部添加一個小圖標。這要求將每個IMG元素包裹在容器div中，另一個DIV顯示要位於容器div的圖標$(document).ready(function(){ <br>
... <br>
});
jQuery的jQuery的某些常見用途是在網絡設計中的某些常見用途？單擊或鼠標的動作），創建動畫並進行AJAX調用以檢索或將數據發送到服務器。它還用於創建交互式功能，例如圖像滑塊，表單驗證和動態內容加載。
> jQuery如何簡化使用JavaScript？
我可以與其他JavaScript庫一起使用jQuery？
是的，是的，可以與其他Javascript庫一起使用JQuery。它提供了一個稱為Noconflict Mode的功能，它允許您與其他也使用$符號的庫一起使用jQuery。官方的jQuery網站提供了全面的文檔和教程。 Codecademy，Udemy和Khan Academy等其他在線平台也提供了JQuery的課程。
我如何調試jQuery代碼？ >如何優化我的jQuery代碼以獲得更好的性能？
>我可以將jQuery用於移動Web開發嗎？
是，是的，jQuery有一個特定的移動網絡開發圖書館，用於移動網絡開發的特定庫。它為所有流行的移動設備平台提供了一個統一的，基於HTML5的用戶界面系統。
以上是JQuery：設計師的簡易JavaScript的詳細內容。更多資訊請關注PHP中文網其他相關文章！
