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