JQuery 之從 $（核心函式）載入事件入門
JQuery 程式碼少而多實現的JS類庫 就是這麼6 |
|---|
一、關於JQuery
（一）、什麼是JQuery ?
《1》jQuery，顧名思義，也就是JavaScript和查詢（Query），它就是輔助JavaScript開發的js類庫。
1、使用jquery一定要引入jquery庫嗎？
要使用JQury首先必須匯入jquery類庫
2、jquery中的$到底是什麼？
$是JQuery類庫的核心函式 $()即呼叫這個核心函式
3、怎麼為按鈕新增點選響應函式的？
1）查詢元素，2）繫結事件
《2》JQuery好處！！！
jQuery是免費、開源的，jQuery的語法設計可以使開發更加便捷
例如操作文件物件、選擇DOM元素、製作動畫效果、事件處理、使用Ajax以及其他功能
（二）JQuery使用步驟：
1）第一步，先使用script標籤引入Jquery原始檔。
//js放在 WebContent/script/jquery-1.7.2.js
<script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
2）第二步，在文件載入完成之後，給按鈕動態繫結事件。
二、用JQuery和js的頁面載入完成事件來分析入門JQuery
<1>、JQuery 實現 與JavaScript 比較它有什麼強大的地方？
<1>簡單的頁面載入完成函式 體會JQuery 與js
example：使用JQuery與js進行頁面載入事件（onload）的比較
$(function(){}); //JQuery實現
和
window.onload = function(){} //js實現
的區別？
<2>它們的三個區別如下
他們分別是在什麼時候觸發？
Jquery的頁面載入完成之後。是指在整個html頁面的標籤被解析然後建立好dom物件之後。 也就是大多數人常用說的。整個dom樹被建立好之後。 window.onload的頁面載入完成之後。是指整個html頁面中所有的元素都被載入完成。
他們觸發的順序？
先執行jquery的頁面載入完成
再執行window.onload的方法
他們執行的次數？
window.onload只會執行最後一次的繫結。
Jquery的頁面載入完成之後。會根據註冊的順序依次全部執行。
程式碼測試：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript"></script>
<script type="text/javascript" src="../../script/jquery-1.7.2.js"></script>
<script type="text/javascript">
// 他們分別是在什麼時候觸發？
//一、window.onload是在頁面中所有元素載入完成之後
window.onload = function() {
alert("這是window.onload事件1號");
}
window.onload = function() {
alert("這是window.onload事件2號");
}
window.onload = function() {
alert("這是window.onload事件3號");
}
// 這個window.onload事件只會執行一次執行3號事件。
// 二、 $(function(){
// alert("jquery頁面載入完成之後！");
// });
// 在整個頁面被瀏覽器載入解析完成。整個Dom樹建立完成之後
$(document).ready(function(){
alert("jquery頁面載入完成之後！11111");
});
$(document).ready(function(){
alert("jquery頁面載入完成之後！22222");
});
$(document).ready(function(){
alert("jquery頁面載入完成之後！33333");
});
$(document).ready(function(){
alert("jquery頁面載入完成之後！444444");
});
// Jquery的頁面載入完成之後。每註冊一次。jquery都會緩衝一個function到集合中。當頁面載入完成之後。它會
// 按照這個事件註冊的順序依次執行。
// 先執行jquery的頁面載入完成之後，再執行window.onload的載入完成
</script>
</head>
<body>
<button>我是按鈕</button>
<iframe src="http://www.baidu.com"></iframe>
<img src="http://www.baidu.com/1.jpg" alt="圖片找不到" />
</body>
</html>
分析如下：
上述為js和JQuery的比較和JQueryd $ 核心函式使用
依次彈出為：
jquery頁面載入完成之後！11111
jquery頁面載入完成之後！22222
jquery頁面載入完成之後！33333
jquery頁面載入完成之後！44444
這是window.onload事件3號
其中js實現的window.onload = function(){}事件1被事件2覆蓋，事件2被事件3覆蓋 最後執行事件3
而JQuery實現的$(document).ready(function(){}每次都執行
三、Jquery 核心函式 $()
<1>
<2>
1、傳入引數為 [ 函式 ] 時：$( function(){} )
文件載入完成後執行此方法等價於window.onload = function() {}
2、傳入引數為 [ HTML 字串 ] 時： $(“12“);
根據字串建立元素的dom節點物件 <span>
3、傳入引數為 [ 選擇器字串 ] 時：$(“#id”)
根據選擇器查找出元素節點物件
4、傳入引數為 [ DOM物件 ] 時： $(this)
將dom物件包裝為jquery物件返回
四、JQuery物件和dom物件比較分析
1、什麼是jquery物件，什麼是dom物件
（一）Dom物件：
1.通過getElementById()查詢出來的標籤物件是Dom物件
2.通過getElementsByName()查詢出來的標籤物件是Dom物件
3.通過getElementsByTagName()查詢出來的標籤物件是Dom物件
4.通過createElement() 方法建立的物件，是Dom物件
（二）JQuery物件
5.通過JQuery提供的API建立的物件，是JQuery物件
$(“ <span>12</span> ”)
6.通過JQuery核心函式包裝的Dom物件，也是JQuery物件
var dom物件；
var $jquery物件 = $(dom物件)
7.通過JQuery提供的API查詢到的物件，是JQuery物件
$(“#id屬性值”)
$(“標籤名”)
兩者特徵：
JQuery物件：其實就是 （Dom物件陣列和一系列JQuery方法）
Dom物件，不能呼叫JQuery物件的方法和屬性。
JQuery物件、也不能呼叫Dom物件的屬性和方法。
2、dom與jquery物件之間的轉換
1.將dom物件轉為JQuery物件
var $Jquery物件 = $(dom物件);
2、jquery物件轉為dom物件
var dom物件 = $Jquery[0];