jquery從零開始-1.2 使用 jQuery

接上一節(jié) jQuery從零開始-1.1 認識 jQuery
jQuery 項目 主要包括 jQuery Core (核心庫)、 jQuery UI (界面庫〉、 Sizzle ( CSS 選擇器)、 jQuery Mobile CjQuery 移動版〉和 QUnit C 測試套件) 5 個部分。

jQuery 2.1.1 版本之后, 全部升級為 jQuery 3.0。第三個版本兼容更廣泛的瀏覽器,提供更優(yōu)化的代 碼。雖然 jQuery 3 將是jQuery 的未來,但是與 jQuery UI 和jQuery Mobile 還存在兼容性問題。如果需 要支持 IE6-8 瀏覽器,或者兼容已經(jīng)開發(fā)的項目,建議繼續(xù)使用最新版本 1.12。

安裝 jQuery

jQuery 庫不需要復雜的安裝,只需要把下載的庫文件放到站點中,然后導入到頁面中即可。
【示例 1 】 導入 jQuery 庫文件可以使用相對路徑,也可以使用絕對路徑,具體情況根據(jù)存放jQuery 庫文件的位置而定。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery/jquery-3.3.1.min.js"></script>
</head>
<body>

<script>
 
</script>
</body>
</html>

測試 jQuery

引入 jQuery 庫文件之后, 就可以在頁面中進行 jQuery 開發(fā)了。開發(fā)的步驟很簡單,在導入 jQuery 庫文件的<script>標簽行下面,重新使用<script>標簽定義一個 JavaScript 代碼段,然后就可以在<script> 標簽內(nèi)調(diào)用 jQuery 方法,編寫 JavaScript 腳本。
【示例 2】 本示例設計在頁面初始化完畢后,調(diào)用 JavaScript 的 alert()方法與瀏覽者打個招呼.

//在這里用戶就可以使用 jQuery 編程了!

 $(function(){
 
 alert("HELLO,WORLD")

})

在jQuery 代碼中,是 jQuery 的別名,如()等效于 jQuery ()。 jQuery ()函數(shù)是 jQuery 庫文件的接口 函數(shù),所有 jQuery 操作都必須從該接口函數(shù)切入。jQuery ()函數(shù)相當于頁面初始化事件處理函數(shù), 當頁 面加載完畢,會執(zhí)行jQuery ()函數(shù)包含的函數(shù), 所以當瀏覽該頁面時, 會執(zhí)行 alert("您好"),看到彈出的信息提示對話框。

如果使用jQuery操作DOM文擋,則必須確保在DOM載入完畢后開始執(zhí)行,應該使用ready事件作為處理HTML文擋的開始。

 $(document).ready(function(){
 
//JavaScript 或者 jQuery 代碼

}) ;

上面代碼的語義是匹配文檔中的 document 節(jié)點,然后為該節(jié)點綁定 ready 事件處理函數(shù)。它類似于 JavaScript 的 事件處理函數(shù),不過jQuery 的 ready 事件要先于onload事件被激活。

為了方便開發(fā), jQuery 框架進一步簡化了(document).ready()方法的寫法,直接使用()方法來表示。

$(function() {

 //JavaScript 或者 jQuery 代碼

})

考慮到頁面加載需要一個過程,所有 jQuery代碼建議都包含在()函數(shù)中 , 當然也可以不被包含在() 函數(shù)中,這與 JavaScript 代碼應該放在 事件處理函數(shù)中的道理是一樣的。


今天本節(jié)結(jié)束,下一節(jié)jQuery實戰(zhàn)案例

順便推薦一下自己的博客,http://www.htmlfuns.cn,里面有知識體系適合從沒接觸過html的童鞋使用,不管是html5還是javascript,又或者是最新的vue都可以先從最基礎的開始學起??赐暾左w系后你就可以寫出自己的網(wǎng)頁啦。并且有很規(guī)范的分類,程序員之間可以分享學習筆記、技術(shù)進行交流。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

  • 概要 64學時 3.5學分 章節(jié)安排 電子商務網(wǎng)站概況 HTML5+CSS3 JavaScript Node 電子...
    阿啊阿吖丁閱讀 9,880評論 0 3
  • 一、樣式篇 第1章 初識jQuery (1)環(huán)境搭建 進入官方網(wǎng)站獲取最新的版本 http://jquery.co...
    凜0_0閱讀 3,683評論 0 44
  • PNG 有PNG8和truecolor PNG PNG8類似GIF顏色上限為256,文件小,支持alpha透明度,...
    hudaren閱讀 1,850評論 0 0
  • 通過jQuery,您可以選?。ú樵?,query)HTML元素,并對它們執(zhí)行“操作”(actions)。 jQuer...
    枇杷樹8824閱讀 731評論 0 3
  • 均等分問題 核心原因: 分辨率不同,安卓手機底部普遍含有虛擬導航欄解決辦法: 外框flex布局,flex:1可以自...
    太陽mob閱讀 335評論 0 2

友情鏈接更多精彩內(nèi)容