更新時(shí)間:2021-11-11 來源:黑馬程序員 瀏覽量:
將jQuery引入后,在全局作用域下會新增“$”和“jOuery”兩個(gè)全局變量,這兩個(gè)變量引用的是同一個(gè)對象,稱為jQuery頂級對象。在代碼中可以使用jQuery代替$,但一般為了方便,通常都直接使用$。下面我們通過代碼演示$和jQuery的使用。
//使用“$" $(function({ $("div").hide(); });
//使用"jQuery" jQuery(function(){ jQuery("div").hide(); });
jQuery頂級對象類似一個(gè)構(gòu)造函數(shù),用來創(chuàng)建jQuery實(shí)例對象(簡稱jQuery對象),但它不需要使用new進(jìn)行實(shí)例化,它內(nèi)部會自動進(jìn)行實(shí)例化,返回實(shí)力化后的對象。jQuery的功能有很多,但使用方式很簡單,一種方式是為構(gòu)造函數(shù)傳入不同的參數(shù),來完成不同的功能,另一種方式是調(diào)用jQuery的靜態(tài)方法。示例代碼如下。
//創(chuàng)建jQuery對象,語法為"$(參數(shù))" console.log($("div")); //創(chuàng)建div元素的jQuery對象 //調(diào)用靜態(tài)方法,語法為"$.方法名()" console.log($.trim("a")); //利用trim()方法去掉字符串兩端的空白字符
在實(shí)際開發(fā)中,經(jīng)常會在jQuery對象和DOM對象之間進(jìn)行轉(zhuǎn)換。DOM對象是用原生JavaScript的DOM操作獲取的對象,jQuery對象是通過jQuery方式獲取到的對象。這兩種對象的使用方式不同,不能混用,示例代碼如下。
//DOM對象 var myDiv = document.querySelector('div'); myDiv.hide(); //錯(cuò)誤寫法 //jQuery對象 var div = $("div"); div.style.display ="none"; //錯(cuò)誤寫法
jQuery對象實(shí)際上是對DOM對象進(jìn)行了包裝,也就是將DOM對象保存在了jQuery對象中,因此通過jOuery可以獲取DOM對象,有兩種方式,如下所示。
// 從jQuery對象中取出DOM對象 $("div")[0]; //方式1 $("div").get(0); // 方式2 // 取出 DOM對象后就可以用DOM方式操作元素 $("div")[0].style.display = "none";
在上述代碼中,由于一個(gè)jQuery對象中可以包含多個(gè)DOM對象,所以在取出DOM對象時(shí)需要加上索引(從0開始),0表示第1個(gè)DOM對象。
DOM對象也可以轉(zhuǎn)換成jQuery對象,其方式是將DOM對象作為$()函數(shù)的參數(shù)傳入,該函數(shù)就會返回jQuery對象,示例代碼如下。
var myDiv = document.querySelector('div'); //獲取 DOM對象 var div = $(myDiv); //轉(zhuǎn)換成jQuery對象 div.hide(); //調(diào)用jQuery對象的方法
猜你喜歡