標籤:代碼風格 ack title 壓縮版 選擇 版本 包括 jquery類庫 get
一、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簡介