主要內(nèi)容
JQuery 對象
jQuery 是一套兼容多瀏覽器的 javascript 腳本庫. 核心理念是寫得更少,做得更多,使用 jQuery 將極大的提高編寫 javascript 代碼的效率,幫助開發(fā)者節(jié)省了大量的工作,讓寫出來的代碼更加優(yōu)雅,更加健壯,"如虎添翼"。同時網(wǎng)絡(luò)上豐富的 jQuery 插件也讓我們的工作變成了"有了 jQuery,一切 so easy。" --因為我們已經(jīng)站在巨人的肩膀上了。
jQuery 在 2006 年 1 月由美國人 John Resig 在紐約的 barcamp 發(fā)布,吸引了來自世界各地的眾多 JavaScript 高手加入,由 Dave Methvin 率領(lǐng)團隊進行開發(fā)。如今,jQuery已經(jīng)成為最流行的 javascript 框架,在世界前 10000 個訪問最多的網(wǎng)站中,有超過 55%在使用 jQuery。
Jquery的下載與安裝
下載
從 jquery.com 下載 jQuery 庫
版本
jQuery 2.x has the same API as jQuery 1.x, but does not support Internet Explorer 6, 7,or 8. (不支持 ie6 7 8,如果需要下載 1.X)
(1)完整版 : jquery-2.1.4.js -->學習版本(學習源碼 想高手學習是最好學習方法)
(2)壓縮版 : jquery-2.1.4.min.js -->開發(fā)版本(壓縮版,減少傳輸)
目前使用版本:jquery-3.4.1.js
優(yōu)點
(1)提供了強大的功能函數(shù)
(2)解決瀏覽器兼容性問題
(3)實現(xiàn)豐富的 UI 和插件
(4)糾正錯誤的腳本知識
安裝
在頁面引入即可
<script src="js/jquery-3.4.1.js" type="text/javascript" ></script>
Jquery 核心
$ 符號在 jQuery 中代表對 jQuery 對象的引用, "jQuery"是核心對象。通過該對象可以獲取 jQuery 對象,調(diào)用 jQuery 提供的方法等。只有 jQuery 對象才能調(diào)用 jQuery 提供的方法。
$ <==> jQuery
Dom對象 與 Jquery 包裝集對象
明確 Dom 對象和 jQuery 包裝集的概念, 將極大的加快我們的學習速度。原始的 DoM 對象只有 DOM 接口提供的方法和屬性,通過js代碼獲取的對象都是 dom 對象;而通過 jQuery 獲取的對象是 jQuery 包裝集對象,簡稱 jQuery對象,只有 jQuery 對象才能使用jQuery 提供的方法。
Dom 對象
javascript 中獲取 Dom 對象,Dom 對象只有有限的屬性和方法:
var div = document.getElementById("testDiv");
var divs = document.getElementsByTagName("div");
Jquery 包裝集對象
可以說是 Dom 對象的擴充.在 jQuery 的世界中將所有的對象, 無論是一個還是一組, 都封裝成一個 jQuery 包裝集,比如獲取包含一個元素的 jQuery 包裝集:
var jQueryObject = $("#testDiv");
Dom 對象 轉(zhuǎn) Jquery對象
Dom 對象轉(zhuǎn)為 jQuery對象,只需要利用$()方法進行包裝即可
var domDiv = document.getElementById('mydiv'); // 獲取Dom對象
mydiv = $(domDiv);
Jquery 對象 轉(zhuǎn) Dom 對象
jQuery 對象轉(zhuǎn) Dom 對象,只需要取數(shù)組中的元素即可
// 第一種方式 獲取jQuery對象
var jqueryDiv = jQuery('#mydiv');
// 第二種方式 獲取jQuery對象
jqueryDiv = $('#mydiv');
var dom = jqueryDiv[0]; // 將以獲取的jquery對象轉(zhuǎn)為dom
通過遍歷 jQuery 對象數(shù)組得到的對象是 Dom 對象,可以通過 $() 轉(zhuǎn)為 jQuery 對象
$('#mydiv').each(function() {//遍歷
var jquery = $(this);
});
案例:
<div id="mydiv">write less, do more</div>
<script type="text/javascript">
console.log("-------------獲取dom對象------------------")
// dom對象
var domDiv = document.getElementById("mydiv");
console.log(domDiv);
console.log("-------------獲取jquery對象------------------")
// 獲取jquery對象
// 第一種方式
var jqueryDiv = jQuery('#mydiv');
console.log(jqueryDiv);
// 第二種方式
jqueryDiv = $('#mydiv');
console.log(jqueryDiv);
console.log("-------------dom轉(zhuǎn)jquery------------------")
// dom轉(zhuǎn)jquery包裝集/對象
var obj = $(domDiv);
console.log(obj);
console.log("-------------jquery轉(zhuǎn)dom------------------")
// jquery對象轉(zhuǎn)dom對象
var dom = $('#mydiv')[0]; // 獲取jquery對象轉(zhuǎn)為dom
// 或
var dom2 = jqueryDiv[0]; // 將jquery對象轉(zhuǎn)為dom
console.log(dom);
console.log(dom2);
/* this代表了dom對象,不是jquery對象 */
console.log("-------------dom轉(zhuǎn)jquery------------------")
$('#mydiv').each(function() {
// 通過id選擇器選擇了id為mydiv的所有元素然后進行遍歷
// 那么遍歷出的每個元素就是id為mydiv的標簽元素
// 而this就代表了當前的這個元素
var jquery = $(this);
});
console.log("-------------jquery轉(zhuǎn)dom------------------")
$('#mydiv').each(function() {
var dom3 = this;
});
</script>