1. 程式人生 > 實用技巧 >Web網頁設計之jQuery_1. 認識jQuery

Web網頁設計之jQuery_1. 認識jQuery

一、認識jQuery

先來百科一波,認識一下這個jQuery

百科上說 jQuery 是一個快速、簡介的 JavaScript框架,封裝了 JavaScript 常用的功能程式碼,而且還優化了 HTML文件、事件處理,動畫等等,也就是說,這個 jQuery 就是一個高階的 JavaScript ,我們之所以不學習這個 JavaScript 也是因為這個東西跟不上時代了,但是,跟不上是跟不上,但也得會一些,這裡我給大家準備了一個教程,大家可以看看:《W3school_JavaScript》

一定要看哦,不然看這個會很吃力的

對了,jQuery 官網是:https://jquery.com/

順便認識一下 logo

二、下載jQuery

我們登入到官網上,然後找到 Download,並點選

點選這個進行下載,我出這個部落格的時候,這個版本是3.5.1,可能你看到的時候這個版本已經更新到更高了,沒有關係的啊

推薦使用迅雷下載,我這裡網不好,下載不動,下載連線地址:https://code.jquery.com/jquery-3.5.1.min.js

三、使用 jQuery 寫一個Helloworld

開啟我們的專案,然後把這個jquery-3.5.1.min 複製到專案中

然後我們建立一個新的目錄,進行我們的 Helloworld 的開發

我們在 html 中引入 jQuery 是使用的 script 標籤

向這樣,引入之後,我們來寫一個例項,點選一個 button,然後觸發一個效果,彈出一個對話方塊並輸出 hello,world

我們先寫一個 button

學過這個 JavaScript 的,我們可以先使用一下之前的方法去做一下

然後我們點選一下這個 button

可以看到一個這個彈出框,下面我們使用一下 jQuery

我們給要操作的 DOM 賦予一個 id,然後我們這樣去寫

然後我們重新整理一下頁面,再去點選 button ,我們會發現,並沒有任何提示框,而且 console 也沒有任何錯誤,如何去解決這個問題呢?我們只需要將這個引入和 script 放在 body 的下面即可。

我們再來點選

是OK的,這樣我們就用這個 jQuery 做了一個 helloworld。

先認識一下,然後我們後面細講,有不懂的可以聯絡我的QQ:2100363119