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];