jQuery:（一）jQuery簡介
一、jQuery簡介
jQuery由美國人John Resig於2006年創建
jQuery是目前最流行的JavaScript程序庫，它是對JavaScript對象和函數的封裝。
二、jQuery的優勢
1、強大的選擇器。
2、出色的DOM封裝。
3、可靠的事件處理機制。
4、出色的瀏覽器兼容性。
5、使用隱式叠代簡化編程。
6、豐富的插件支持。
7、體積小，壓縮後只有100KB左右。
三、下載和使用jQuery
1、下載
進入jQuery官網：http://jquery.com下載
2、jQuery庫文件
jQuery庫分開發版和發布版
| 名稱 | 大小 | 說明 |
| jquery-1.版本號.js(開發版) | 約268kb | 完整無壓縮版本，主要用於測試、學習和開發。 |
| jquery-1.版本號.min.js(發布版) | 約91KB | 經過工具壓縮或經過服務器開啟Gzip壓縮，主要應用於發布的產品和項目。 |
3、搭建jQuery使用環境
3.1 下載jQuery類庫。
3.2 在頁面中引入jQuery
<script type="text/javascript" src="jquery-3.2.1.js"></script>
四、jQuery語法結構
語法：$(selector).action();
說明：
工廠函數$()：將DOM對象轉化為jQuery對象。
選擇器 selector：獲取需要操作的DOM元素。
方法action()：jQuery中提供的方法，包括綁定事件處理的方法。
示例：
$("#current").addClass("current"); // id選擇
$("input").addClass("current"); // 標簽選擇
$(".current").addClass("other"); // class類名選擇
五、jQuery代碼風格
1、$(selector).action();
$等同於"jQuery"
$(document).ready()等同於jQuery(document).ready()
2、方法舉例
| 語法 | 說明 |
| css("屬性","屬性值") | 為元素設置CSS樣式的值 |
| addClass("類樣式名") | 為元素添加類樣式 |
| html("html代碼") | 為元素設置innerHTML的值 |
操作連綴書寫：
$("h2").css("background-color","#CCFFFF").next().css("display","block");
六、$(document).ready()
$(document).ready()與window.onload類似，但也有區別：
| window.onload | $(document).ready() | |
| 執行時機 | 必須等待網頁中所有的內容加載完畢後（包括圖片、視頻等）才能執行 | 網頁中所有DOM文檔結構繪制完畢後即刻執行，可能與DOM元素關聯的內容（圖片、視頻等）並沒有加載完 |
| 編寫次數 | 同一頁面不能同時編寫多個 | 同一頁面能同時編寫多個 |
| 簡化寫法 | 無 | $(function(){ //執行代碼 }); |
七、jQuery對象和DOM對象
1、DOM對象：直接使用JavaScript獲取的節點對象
var objDOM=document.getElementById("title");
var objHTML=objDOM.innerHTML;
2、jQuery對象：使用jQuery包裝DOM對象後產生的對象，它能夠使用jQuery中的方法：
$("#title").html()
等同於
document.getElementById("title").innerHTML;
提示：DOM對象和jQuery對象分別擁有一套獨立的方法，不能混用。
3、jQuery對象轉DOM對象
jQuery對象是一個類似數組的對象，可以通過[index]的方法得到相應的DOM對象
示例：
var $txtName=$(".txtName"); //jQuery對象
var txtName=$txtName[0]; //DOM對象
通過get(index)方法得到相應的DOM對象
示例：
var $txtName=$(".txtName"); //jQuery對象
var txtName=$txtName.get(0); //DOM對象
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>jQuery對象轉化成DOM對象</title> <style type="text/css"> p{ display: none;; } .show{ display: block; } </style> <!--引入jQuery類庫--> <script type="text/javascript" src="jquery-3.2.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ var $txtname=$(".txtName"); //獲取jQuery對象 var txtname=$txtname[0]; //獲取DOM對象 console.log($txtname); console.log(txtname); }); </script> </head> <body > <p id="title"> <a href="hello world"></a> </p> <div class="txtName"> 111111111 </div> </body> </html>
4、DOM對象轉jQuery對象
使用$()函數進行轉換：$(DOM對象)
示例：
var txtName=document.getElementById("txtName"); //DOM對象
var $txtName=$(txtName); //jQuery對象
註意：
1、jQuery對象命名一般約定以$開頭。
2、常使用$(this)來獲取觸發該事件的當前jQuery對象。
jQuery:（一）jQuery簡介