[jQuery筆記] jQuery初識
- 2019 年 12 月 10 日
- 筆記
jQuery安裝
jQuery可以通過多種方法在網頁中載入，一般可以常用兩種方法：
- 從jquery.com下載jQuery庫
- 從CDN中載入，比如Google中載入jQuery，常見的CDN有：
// 百度 <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"> // 又拍雲 <script src="https://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js"> // 新浪 <script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"> // Google <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> // Microsoft(微軟) <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>
版本說明
官網上面有兩個版本可以下載：
- production version：生產環境中，此版本是已經被精簡和壓縮過的;
- development version:常用於開發和測試，此版本的程式碼是可讀的。
jQuery庫是一個JavaScript文件，可以直接在HTML的<script>標籤中引用，如下段程式碼所示：
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>jQuery第一個案例</title> // 載入jquery文件，版本2以上不支援IE6、7、8瀏覽器;如需支援IE6/7/8請選擇1.9 <script src="js/jquery-1.8.3.min.js"></script> </head> <body> //和CSS一樣有:類選擇器、ID選擇器、標籤選擇器 <div id="title"><h3>jquery示例</h3></div> <a href="www.lianst.com">Blog</a> <a href="dl.lianst.com">資源分享</a> <input type="text" class="txt" value="1"> <input type="text" class="txt" value="2"> <input type="button" id="btn" value="ok"> <!--原生JS程式碼--> <script> alert(document.getElementById("btn").value); alert(document.getElementsByTagName("a").length); alert(document.getElementById("title").innerHTML); </script> <!--jQuery程式碼--> <script> alert(jQuery("#btn").val()); alert(jQuery("a").size()); alert(jQuery(".txt").size()); alert(jQuery("#title").html()); </script> <!--jQuery最簡化程式碼,$代替了jQuery很多程式碼--> <script> alert($("#btn").val()); alert($("a").size()); alert($(".txt").size()); alert($("#title").html()); </script> </body> </html>
