jQuery網頁特效設計基礎教程（慕課版）（第2版）課件 第1、2單元 JavaScript 基礎；初識jQuery_第1頁
jQuery網頁特效設計基礎教程（慕課版）（第2版）課件 第1、2單元 JavaScript 基礎；初識jQuery_第2頁
jQuery網頁特效設計基礎教程（慕課版）（第2版）課件 第1、2單元 JavaScript 基礎；初識jQuery_第3頁
jQuery網頁特效設計基礎教程（慕課版）（第2版）課件 第1、2單元 JavaScript 基礎；初識jQuery_第4頁
jQuery網頁特效設計基礎教程（慕課版）（第2版）課件 第1、2單元 JavaScript 基礎；初識jQuery_第5頁
已閱讀5頁，還剩63頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

第1單元JavaScript基礎jQuery網頁特效設計基礎教程（慕課版）（第2版）了解什么是JavaScript。了解JavaScript的開發工具及使用。了解如何編寫并運行JavaScript程序。了解JavaScript程序的出錯類型及調試方式。了解JavaScript常用庫。教學目標pedagogicalobjectives能夠搭建JavaScript開發環境及使用開發工具。能夠使用JavaScript的調試方式來進行代碼調試。培養對編程語言的興趣與探索精神，理解JavaScript的基礎知識與特點，養成獨立配置開發環境和解決編程問題的能力，提升邏輯思維與實踐能力。目錄導航1.1JavaScript概述1.3編寫和運行第一個JavaScript程序1.5項目實戰：設計簡單倒計時器1.2JavaScript的開發工具1.4JavaScript庫1.1.1什么是JavaScriptJavaScript是由Netscape公司開發的一種Web頁面腳本語言，也是一種通用的、跨平臺的、基于對象和事件驅動的，并具有相對安全性的解釋型腳本語言。它不需要進行編譯，而是直接嵌入HTML（HypertextMarkupLanguage，超文本標記語言）頁面中，把靜態頁面轉變成支持用戶交互并響應相應事件的動態頁面，在Web系統中應用非常廣泛。1.1.2JavaScript的應用01OPTION校驗用戶輸入的內容校驗功能校驗功能常常與服務器端的數據庫相關聯。例如，在開發密碼登錄頁面時，用戶要輸入正確的登錄名和登錄密碼。校驗格式校驗格式可以只發生在客戶端，即在將表單提交到服務器端之前完成。JavaScript能及時響應用戶的操作，對提交的表單做即時校驗。JavaScript常用于校驗用戶輸入的格式。1.1.2JavaScript的應用02OPTION實現實時預覽效果在Web編程中，多數情況下需要程序與用戶進行交互，告訴用戶已經發生的情況，或者從用戶的輸入中獲得下一步的數據，程序的運行過程大多數是一步步交互的過程實時預覽許愿字條效果1.1.2JavaScript的應用03OPTION實現動畫效果網頁中經常會有一些動畫效果，其能使頁面顯得更加生動。使用JavaScript腳本語言也可以實現動畫效果，例如在頁面中實現一種星星閃爍的動畫效果。04OPTION實現浮動廣告窗口在打開網頁時我們經常會看到一些浮動的廣告窗口。這些廣告窗口是網站最大的盈利手段之一，它們也可以通過JavaScript腳本語言來實現。1.1.2JavaScript的應用05OPTION實現文字特效使用JavaScript語言可以實現多種文字特效。例如文字滾動的特效。1.1.3JavaScript的特點JavaScript不同于一些編譯性的編程語言（例如C、C++等），它是一種解釋性的程序語言，它的源代碼不需要經過編譯，而是直接在瀏覽器中運行時被解釋。無須編譯，在瀏覽器中運行時被解釋基于對象事件驅動JavaScript是一種基于對象的語言，這意味著它能運用自己已經創建的對象。因此，它的許多功能可以來自腳本環境中對象的方法與腳本的相互作用。JavaScript可以直接對用戶輸入做出響應，無須經過Web服務程序。它對用戶輸入的響應是以事件驅動的方式進行的。所謂事件驅動，就是指在主頁中執行了某種操作所產生的動作，此動作稱為“事件”。JavaScript是一種基于Java基本語句和控制流的簡單而緊湊的語言，對于學習Java來說是一種非常好的過渡。此外，它的變量類型采用弱類型，并未采用嚴格的數據類型。相對簡單跨平臺，多種瀏覽器支持安全性高JavaScript依賴于瀏覽器本身，與操作環境無關。只要計算機能運行瀏覽器，并且瀏覽器支持JavaScript，就可正確運行JavaScript。JavaScript是一種安全性高的語言，不允許將數據存入服務器上和對網絡文檔進行修改和刪除，只能通過瀏覽器實現信息瀏覽或動態交互，這樣可有效地防止數據丟失。目錄導航1.1JavaScript概述1.3編寫和運行第一個JavaScript程序1.5項目實戰：設計簡單倒計時器1.2JavaScript的開發工具1.4JavaScript庫1.2.1使用記事本開發記事本是最原始的JavaScript開發工具之一，它最大的優點就是不需要獨立安裝，只要安裝Windows操作系統，使用系統自帶的記事本，就可以開發JavaScript應用程序?！纠?-1】下面介紹如何將記事本作為JavaScript的編輯器，編寫第一個JavaScript腳本。<html><head><title>一段簡單的JavaScript代碼</title><scriptlanguage="javascript"> window.alert("歡迎光臨本網站");</script></head><body><h3>這是一段簡單的JavaScript代碼。</h3></body></html>（1）打開記事本。（2）在記事本的工作區域輸入以下HTML標記符和JavaScript代碼。（3）編輯完畢后，選擇“文件”/“保存”命令，在彈出的“另存為”對話框中，輸入文件名，將其保存為.html格式或.htm格式。雙擊該文件，以上代碼的運行結果會在瀏覽器中顯示。1.2.2使用VSCode開發VisualStudioCode（簡稱VSCode）開發工具，是一款由Microsoft開發的免費、開源代碼編輯器。它是一個輕量級的跨平臺編輯器，適用于Windows、macOS和Linux系統。它內置對JavaScript、TypeScript和Node.js的支持，并且擁有豐富的其他語言和運行時擴展生態系統。訪問VSCode官網下載安裝包，需要選擇對應系統的安裝包，直接下載即可。1.2.2使用VSCode開發【例1-2】下面通過一個實例了解使用VSCode如何進行開發。在桌面上創建一個名為sourceCode（在VSCode中顯示為SOURCECODE）的文件夾，然后通過VSCode打開（Windows快捷鍵：Crtl+K+O。macOS快捷鍵：command+O）該文件夾。01在該文件夾下面新建一個index.html文件，輸入源碼內容如下。02<!DOCTYPEhtml><html><head><title>一段簡單的JavaScript代碼</title><scriptlanguage="javascript"> window.alert("歡迎光臨本網站");</script></head><body><h3>這是一段簡單的JavaScript代碼。</h3></body></html>雙擊index.html文件，瀏覽器可以運行該文件。03目錄導航1.1JavaScript概述1.3編寫和運行第一個JavaScript程序1.5項目實戰：設計簡單倒計時器1.2JavaScript的開發工具1.4JavaScript庫1.3.1編寫JavaScript程序【例1-3】下面使用VSCode編輯器編寫第一個JavaScript程序。啟動VSCode編輯器，在之前創建的sourceCode文件夾中新建一個文件夾1-3。01在1-3文件夾中新建一個index.html文件，并且輸入代碼如下。02<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title></head><body><scriptlanguage="javascript">alert("我要學習JavaScript")</script></body></html>1.3.1編寫JavaScript程序【例1-3】下面使用VSCode編輯器編寫第一個JavaScript程序。JavaScript的程序代碼必須置于<scriptlanguage="javascript">和</script>之間。JavaScript腳本在HTML文件中的位置有以下3種。在HTML文件的<body>標記中的任何位置在HTML文件的<head>標記中

01

02

03

如果所編寫的JavaScript程序用于輸出網頁的內容，那么應該將JavaScript程序置于HTML文件的<boby>標記中需要顯示該內容的位置。在單獨的.js文件中如果所編寫的JavaScript程序需要在某一個HTML文件中多次使用，那么就應該編寫JavaScript函數（Function），并將函數置于該HTML文件的<head>標記中。如果所編寫的JavaScript程序需要在多個HTML文件中使用，或者所編寫的JavaScript程序內容很多，這時就應該將這段JavaScript程序置于單獨的.js文件中，然后在所需要的HTML文件a.html中，使用<script>標記包含該.js文件。1.3.1編寫JavaScript程序【例1-3】下面使用VSCode編輯器編寫第一個JavaScript程序。雖然大多數瀏覽器都支持JavaScript，但是少部分瀏覽器不支持JavaScript，還有一些支持JavaScript的瀏覽器由于安全問題關閉了對JavaScript的支持。如果遇到不支持JavaScript的瀏覽器，網頁會達不到預期效果或出現錯誤。解決這個問題可以使用以下兩種方法。03JavaScript腳本語言區分字母大小寫。040102HTML注釋符號<noscript>標記HTML注釋符號是以<!--開始、以-->結束的。但是JavaScript不能識別HTML注釋符號的結束部分-->。如果在此HTML注釋符號內編寫JavaScript腳本，那么不支持JavaScript的瀏覽器將會把編寫的JavaScript腳本作為注釋處理。如果當前瀏覽器支持JavaScript，那么該瀏覽器將會忽略<noscript>和</noscript>標記之間的任何內容。如果當前瀏覽器不支持JavaScript，那么該瀏覽器將會把這兩個標記之間的內容顯示出來。此標記可以提醒瀏覽者當前使用的瀏覽器是否支持JavaScript。1.3.2運行JavaScript程序運行用JavaScript編寫的程序需要使用支持JavaScript語言的瀏覽器?，F在的瀏覽器基本上都支持JavaScript。雙擊1-3/index.html文件，在瀏覽器中輸出運行結果。1.3.3JavaScript程序的出錯類型語法錯誤是在程序開發中使用不符合某種語言規則的語句而產生的錯誤。例如，錯誤地使用了JavaScript的關鍵字、錯誤地定義了變量名稱等，這樣當瀏覽器運行JavaScript程序時就會報錯。例如，將例1-3程序中的alert語句改寫成下述語句，即將第1個字符由小寫字母改寫成大寫字母。01OPTION語法錯誤Alert("我要學習JavaScript！");保存該文件后，再次在瀏覽器中運行，程序就會報錯。運行本程序，瀏覽器將不會正常彈出提示信息，在瀏覽器調試窗口中可以看到報錯信息。1.3.3JavaScript程序的出錯類型02OPTION邏輯錯誤有些時候，程序中不存在語法錯誤，也沒有執行非法操作的語句，可是程序的運行結果卻是不正確的，造成這種結果的錯誤叫作邏輯錯誤。邏輯錯誤對于編譯器來說并不算錯誤，但是由于代碼中存在邏輯錯誤，會導致運行結果并非期望得到的結果。邏輯錯誤從語法上看是不存在錯誤的，但是從程序的功能上看是Bug（錯誤、漏洞）。這是最難調試和發現的Bug之一，因為它們不會導致彈出任何錯誤信息，唯一能看到的就是程序的功能（或部分功能）沒有實現。1.3.3JavaScript程序的出錯類型02OPTION邏輯錯誤例如，某商城舉行商品優惠活動，如果用戶是商城的會員，那么商品打八五折，代碼如下所示。<scriptlanguage="javascript">user="會員";if(user=="會員"){price=485*8.5;//485是商品價格，8.5表示打八五折alert("商品的會員價格是："+price);//輸出商品的會員價格}</script>運行程序時，瀏覽器沒有彈出錯誤信息。但是當用戶是商城的會員時，商品價格乘8.5，相當于商品不但沒有打折，其價格反而比原價貴了8.5倍，這一點就不符合要求，屬于邏輯錯誤，應該乘0.85才正確。1.3.3JavaScript程序的出錯類型02OPTION邏輯錯誤在實現動態的Web編程時，通常情況下，數據表中均是以8.5進行存儲的，這時在程序中就應該在商品價格乘8.5后再除以10，這樣就相當于商品價格乘0.85。正確的代碼為：price=485*8.5/10;//485是商品價格,8.5/10表示打八五折對于邏輯錯誤而言，發現錯誤是容易的，但要查找出邏輯錯誤的原因卻很困難。因此，讀者在編寫程序的過程中，一定要注意語句或者函數的完整性，否則將導致程序出錯。1.3.4JavaScript的3種調試方式使用alert()彈出警告框，實例代碼如下所示。01OPTION<!DOCTYPEhtml><html><head><title>在JavaScript中使用警告框</title></head><body><script>alert(5+6);</script></body></html>運行以上代碼，瀏覽器顯示結果如下所示。1.3.4JavaScript的3種調試方式使用document.write()將內容寫入HTML文檔，實例代碼如下所示。02OPTION<!DOCTYPEhtml><html><head><title>在JavaScript中使用document.write()方法</title></head><body><script>document.write(Date());</script></body></html>運行以上代碼，瀏覽器顯示結果如下所示。1.3.4JavaScript的3種調試方式使用console.log()將內容寫入瀏覽器控制臺，實例代碼如下所示。03OPTION<!DOCTYPEhtml><html><head><title>在JavaScript中使用console.log()方法</title></head><body><script>a=5;b=6;c=a+b;console.log(c);</script></body></html>運行以上代碼，瀏覽器顯示結果如下所示。1.3.4JavaScript的3種調試方式如果在文檔已完成加載后執行document.write()，整個HTML頁面將被覆蓋，對程序的執行造成不便。alert()方法會阻斷JavaScript程序的執行，從而帶來副作用，而且使用alert()方法需要用戶單擊彈窗的“確定”按鈕，操作麻煩，最重要的是alert()只能輸出字符串。console.log()僅在控制臺輸出相關信息，不會對JavaScript程序執行造成阻礙。此外，console.log()可以接收任何字符串、數字和JavaScript對象，使用它可以看到清楚的對象屬性結構，在AJAX（AsynchronousJavaScriptAndXML，異步JavaScript和XML技術）中返回JSON數組對象時調試很方便。比較這3種調試方式可知，console.log()是一種更好的方式，在實際應用中更受開發人員的青睞。對這3種調試方式的對比分析如下。目錄導航1.1JavaScript概述1.3編寫和運行第一個JavaScript程序1.5項目實戰：設計簡單倒計時器1.2JavaScript的開發工具1.4JavaScript庫1.4.1什么是JavaScript庫JavaScript庫是指可以方便地應用到現有Web開發體系中的、現成的JavaScript代碼資源，包含工具、函數庫、約定以及從常用任務中抽象出的可以復用的通用模塊，能幫助使用者輕松地建立具有高難度交互的Web2.0特性的富客戶端頁面，并且兼容各大瀏覽器。它們通常由開源社區開發和維護，并被各大公司支持和使用。大多數JavaScript庫都提供了以下功能：命名空間支持、JavaScript可用性增強工具、用戶界面組件、拖放組件、視覺效果和動畫、布局管理工具、元素樣式操作、AJAX支持、DOM（DocumentObjectModel，文檔對象模型）支持、事件處理增強工具、操作日志和調試功能、單元測試架構等。這些功能都是在Web開發中經常用到的，并且基于JavaScript庫的應用程序可以獲得更好的瀏覽器兼容性和更高的開發效率，同時可以提供更多的功能和效果。1.4.2常用的JavaScript庫本書的主題jQuery是繼Prototype之后又一個優秀的輕量級JavaScript庫。它是一個快速和簡潔的JavaScript庫，擁有強大的選擇器，可以簡化HTML文檔元素的遍歷、事件處理、動畫和AJAX交互，實現快速Web開發。jQuery還擁有完善的兼容性和鏈式操作等功能，它的這些優點吸引了眾多開發人員。jQuery01OPTIONVue是由華人程序員尤雨溪（EvanYou）開發的一個JavaScript庫，并且在國內外都受到開發人員的青睞。它是一個構建用戶頁面的漸進式框架，與其他重量級框架不同的是，Vue采用自底向上增量開發的設計，Vue的核心庫只關注視圖層，提供數據驅動的組件以及簡單、靈活的API（ApplicationProgramInterface，應用程序接口），并且非常容易學習、非常容易與其他庫或已有項目整合。Vue02OPTION1.4.2常用的JavaScript庫AngularJS是一個用JavaScript編寫的庫，它可通過<script>標記添加到HTML頁面中。AngularJS通過指令擴展了HTML，并且通過表達式綁定數據到HTML，是一個優秀的前端JavaScript框架。AngularJS有著諸多特性，其中最為核心的特性是：模塊化、自動化雙向數據綁定、語義化標簽、依賴注入等。AngularJS03OPTIONReact是一個用于構建用戶界面的JavaScript庫。由于React的設計思想極其獨特，屬于革命性創新，性能出眾，代碼邏輯卻非常簡單，所以越來越多的人開始關注和使用它，認為它可能是將來Web開發的主流工具。React04OPTION1.4.2常用的JavaScript庫Prototype是最早成型的JavaScript庫之一，它的特點是功能實用且容量較小。它定義了JavaScript面向對象擴展、DOM操作API、事件等，非常適合在中小型Web應用中使用。Prototype庫極大地簡化了JavaScript代碼的編寫工作，同時兼容各種瀏覽器。Prototype05OPTIONExtJS通常稱為Ext，是一個非常優秀的JavaScript庫，可以用來開發具有絢麗外觀的富客戶端應用。使用Ext開發的多彩頁面吸引了許多程序員的眼球，同時也吸引了眾多用戶，對于開發企業應用系統來說，Ext非常實用。但Ext體積較大，導致頁面加載速度比較慢；此外，Ext并不是完全免費的，如果用于商業用途，是需要付費獲得授權許可的。ExtJS06OPTION1.4.2常用的JavaScript庫Dojo是一個強大的、面向對象的JavaScript庫。它主要由三大模塊組成：Core、Dijit、DojoX。Core提供了構建Web應用必需的幾乎所有基礎功能。Dojo07OPTIONDijit是一個可更換皮膚且基于模板的WebUI（UserInterface，用戶界面）控件庫。DojoX包括一些創新的代碼和控件：DataGrid、Chart、離線應用、跨瀏覽器矢量繪圖等。Dojo功能強大、組件豐富，采用面向對象的設計，有統一命名空間和管理機制，適用于企業級或復雜的大型Web應用開發。它的缺點是比較復雜。但Dojo仍然是一個很有發展潛力的JavaScript庫。1.4.2常用的JavaScript庫YUI是一個使用JavaScript編寫的工具和控件庫。它是利用DOM腳本、DHTML（DynamicHTML，動態HTML）和AJAX構造的具有豐富交互功能的Web程序。YUI的許多組件實現了對數據源的支持。YUI08OPTIONMooTools是一個輕量、簡潔、模塊化、面向對象的開源JavaScript庫。MooTools的語法幾乎和Prototype的一樣，但MooTools卻提供了更強大的功能、更好的擴展性和兼容性。它的模塊化思想優秀，各模塊代碼非常獨立，最小的核心模塊只有8KB。其最大的優點是可選擇使用哪些模塊，用的時候只導入使用的模塊即可。MooTools完全貫徹了面向對象的編程思想，并且語法簡潔、文檔完善，是一個非常優秀的JavaScript庫。MooTools09OPTION目錄導航1.1JavaScript概述1.3編寫和運行第一個JavaScript程序1.5項目實戰：設計簡單倒計時器1.2JavaScript的開發工具1.4JavaScript庫1.5項目實戰：設計簡單倒計時器創建一個名為index.html的文件，創建倒計時器的頁面。關鍵代碼如下：01OPTION<pid="timer">剩余時間：</p><buttonid="startButton">開始</button><buttonid="stopButton">停止</button>在JavaScript中使用定時器實現倒計時邏輯。關鍵代碼如下：02OPTION學習快樂！工業和信息化精品系列教材第2單元初識jQueryjQuery網頁特效設計基礎教程（慕課版）（第2版）工業和信息化精品系列教材人民郵電出版社了解什么是jQuery。了解jQuery的特點和版本歷程。學會jQuery下載與配置。了解jQuery對象和DOM對象的使用。了解jQuery和其他庫沖突解決方式。了解jQuery插件的使用。教學目標pedagogicalobjectives能夠搭建jQuery開發環境以及使用jQuery。能夠解決jQuery和其他庫的沖突以及使用jQuery插件。形成庫和框架應用的初步概念，理解技術工具在提升開發效率中的價值，增強分析問題和靈活使用工具的能力，為后續學習奠定基礎。目錄導航2.1jQuery概述2.3jQuery對象和DOM對象2.5jQuery插件簡介2.2jQuery下載與配置2.4解決jQuery庫和其他庫的沖突2.6項目實戰：顯示、隱藏下拉菜單效果2.1.1jQuery的應用使用jQuery可以非常方便快捷地獲取DOM元素、動態地修改頁面樣式、動態地改變DOM內容、及時響應用戶的交互操作、為頁面添加動態效果、統一AJAX操作、簡化常見的JavaScript任務。海爾官網應用jQuery的效果京東網上商城應用jQuery的效果去哪兒網應用jQuery的效果2.1.2jQuery的特點代碼精致小巧功能函數強大跨瀏覽器鏈式的語法風格對DOM對象封裝AJAX操作完善文檔豐富開源插件豐富2.1.3jQuery的版本發布時間：2006年8月。jQuery的第1個穩定版本，已經具有了對CSS（CascadingStyleSheets，串聯樣式表）選擇符、事件處理和AJAX交互的穩健支持。jQuery1.0jQuery2.0發布時間：2013年4月。該版本不再支持IE6/7/8，如果在IE9/10中使用“兼容性視圖”模式也會受到影響。發布時間：2016年6月。該版本引入了很多新特性，并為未來的大型改進做準備。不再支持IE6～IE8。jQuery3.0.0jQuery4.0.0發布時間：2024年2月。該版本停止支持IE10及更早版本的瀏覽器。該版本帶來了多項改進，包括錯誤修復、性能提升、代碼精簡等。目錄導航2.1jQuery概述2.3jQuery對象和DOM對象2.5jQuery插件簡介2.2jQuery下載與配置2.4解決jQuery庫和其他庫的沖突2.6項目實戰：顯示、隱藏下拉菜單效果2.2.1下載jQuery01OPTION進入jQuery官方網站的首頁。02OPTION在jQuery官方網站的首頁中，可以下載所需要的jQuery版本，本書使用jQuery3.6.4。單擊網站首頁中的“DownloadjQuery”按鈕，頁面跳轉之后單擊所需要的版本鏈接，選擇“另存為”選項，彈出右圖所示對話框。03OPTION單擊“保存”按鈕，將jQuery下載到本地計算機。下載后的文件名為jquery-3.6.4.min.js。2.2.2配置jQuery將jQuery下載到本地計算機后，還需要在項目中配置jQuery，即將下載后的文件放置到項目指定的文件夾中（通常放置到js文件夾中），然后在需要應用jQuery的頁面中使用下面的語句，將其引用到文件中。<scriptlanguage="javascript"src="js/jquery-3.6.4.min.js"></script>或者<scriptsrc="js/jquery-3.6.4.min.js"type="text/javascript"></script>2.2.3我的第一個jQuery腳本【例2-1】應用jQuery彈出一個提示對話框。（1）創建一個名為js的文件夾，并將jquery-3.6.4.min.js復制到該文件夾中。（2）創建一個名為index.html的文件，在該文件的<head>標記中引用jQuery庫文件，關鍵代碼如下：<scriptlanguage="javascript"src="js/jquery-3.6.4.min.js"></script>（3）編寫jQuery腳本，實現在頁面載入完畢后，彈出一個提示對話框，具體代碼如下：<script>$(document).ready(function(){ alert("我的第一個jQuery腳本！");});</script>2.2.3我的第一個jQuery腳本【例2-1】應用jQuery彈出一個提示對話框。實際上，上面的代碼還可以更簡單，也就是將$(document).ready用“$”代替，代替后的代碼如下：<script>$(function(){ alert("我的第一個jQuery腳本！");});</script>熟悉JavaScript的讀者應該知道，要實現例2-1的效果，還可以通過下面的代碼實現：<script>window.onload=function(){ alert("我的第一個jQuery腳本！");}</script>運行index.html，將彈出如下提示對話框。目錄導航2.1jQuery概述2.3jQuery對象和DOM對象2.5jQuery插件簡介2.2jQuery下載與配置2.4解決jQuery庫和其他庫的沖突2.6項目實戰：顯示、隱藏下拉菜單效果2.3.1jQuery對象和DOM對象簡介01OPTIONjQuery對象jQuery對象就是通過jQuery包裝DOM對象后產生的對象。jQuery對象是獨有的，可以使用jQuery中的方法，例如：$("#test").html();//獲取id為test的元素內的HTML代碼這段代碼等同于：document.getElementById("test").innerHTML;雖然jQuery對象是包裝DOM對象后產生的，但是jQuery對象無法使用DOM對象中的任何方法，同理DOM對象也不能使用jQuery中的方法。例如$("#test").innerHTML、document.getElementById("test").html()等的寫法都是錯誤的。2.3.1jQuery對象和DOM對象簡介02OPTIONDOM對象DOM是以層次結構組織的節點或信息片段的集合，每一份DOM都可以表示成一棵樹。下面構建一個基本的網頁，網頁代碼如下：<html><head><title>DOM對象</title></head><body><h2>人郵圖書</h2><p>《jQuery開發基礎教程》</p></body></html>網頁的初始化效果如圖所示。2.3.1jQuery對象和DOM對象簡介02OPTIONDOM對象可以把上述代碼中的HTML結構表示成一棵DOM樹。在這棵DOM樹中，<h2>、<p>節點都是DOM樹的節點，可以使用JavaScript中的getElementById()或getElementsByTagName()來獲取，獲取的元素就是DOM對象。DOM對象可以使用JavaScript中的方法，例如：vardomObject=document.getElementById("id");varhtml=domObject.innerHTML;2.3.2jQuery對象和DOM對象的相互轉換01OPTIONjQuery對象轉換成DOM對象jQuery提供了兩種轉換方式將一個jQuery對象轉換成一個DOM對象，即[index]和get(index)。（1）jQuery對象是一個類似數組的對象，可以通過[index]方法轉換成相應的DOM對象，例如：var$mr=$("#mr"); //jQuery對象varmr=$mr[0]; //DOM對象alert(mr.value); //獲取DOM對象的value的值并彈出（2）jQuery本身也提供get(index)方法，可以將jQuery對象轉換成相應的DOM對象，例如：var$mr=$("#mr"); //jQuery對象varmr=$mr.get(0); //DOM對象alert(mr.value); //獲取DOM對象的value的值并彈出2.3.2jQuery對象和DOM對象的相互轉換02OPTIONDOM對象轉換成jQuery對象對于一個DOM對象，只需要用$()把它包裝起來，即$(DOM對象)，就可以將其轉換成一個jQuery對象，例如：varmr=document.getElementById("mr"); //DOM對象var$mr=$(mr); //jQuery對象alert($(mr).val()); //獲取文本框的值并彈出轉換后，DOM對象就可以任意使用jQuery中的方法了。通過以上方式，可以任意實現DOM對象和jQuery對象之間的轉換。需要再次強調的是，DOM對象才能使用DOM中的方法，而jQuery對象是不能使用DOM中的方法的。2.3.2jQuery對象和DOM對象的相互轉換【例2-2】DOM對象轉換成jQuery對象。（1）創建一個名為js的文件夾，并將jquery-3.6.4.min.js復制到該文件夾中。（2）創建一個名為index.html的文件，在該文件的<head>標記中引用jQuery庫文件，關鍵代碼如下：<scriptlanguage="javascript"src="js/jquery-3.6.4.min.js"></script>（3）編寫jQuery代碼，實現在頁面載入完畢后，首先使用DOM對象中的方法彈出<p>節點的內容，之后將DOM對象轉換成jQuery對象，使用jQuery對象中的方法同樣再彈出<p>節點的內容。具體代碼如下：運行結果2.3.2jQuery對象和DOM對象的相互轉換【例2-3】jQuery對象轉換成DOM對象。（1）創建一個名為js的文件夾，并將jquery-3.6.4.min.js復制到該文件夾中。（2）創建一個名為index.html的文件，在該文件的<head>標記中引用jQuery庫文件，關鍵代碼如下：<scriptlanguage="javascript"src="js/jquery-3.6.4.min.js"></script>（3）編寫jQuery代碼，實現在頁面載入完畢后，首先獲取兩個jQuery對象，使用jQuery對象中的方法分別彈出兩個<p>節點的內容，之后分別使用[index]和get(index)方法將jQuery對象轉換成DOM對象，使用DOM對象中的方法同樣再彈出兩個<p>節點的內容。具體代碼如下：2.3.2jQuery對象和DOM對象的相互轉換【例2-3】jQuery對象轉換成DOM對象。運行結果目錄導航2.1jQuery概述2.3jQuery對象和DOM對象2.5jQuery插件簡介2.2jQuery下載與配置2.4解決jQuery庫和其他庫的沖突2.6項目實戰：顯示、隱藏下拉菜單效果2.4.1jQuery庫在其他庫之前導入jQuery庫在其他庫之前導入，可以直接使用jQuery(callback)方法。如果jQu

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論