jQuery對(duì)象是什么？如何理解jQuery對(duì)象？

將jQuery引入后，在全局作用域下會(huì)新增“$”和“jOuery”兩個(gè)全局變量，這兩個(gè)變量引用的是同一個(gè)對(duì)象，稱為jQuery頂級(jí)對(duì)象。在代碼中可以使用jQuery代替$，但一般為了方便，通常都直接使用$。下面我們通過代碼演示$和jQuery的使用。

//使用“$"
$(function({
    $("div").hide();
});

//使用"jQuery"
jQuery(function(){
    jQuery("div").hide();
});

jQuery頂級(jí)對(duì)象類似一個(gè)構(gòu)造函數(shù)，用來創(chuàng)建jQuery實(shí)例對(duì)象(簡稱jQuery對(duì)象)，但它不需要使用new進(jìn)行實(shí)例化，它內(nèi)部會(huì)自動(dòng)進(jìn)行實(shí)例化，返回實(shí)力化后的對(duì)象。jQuery的功能有很多，但使用方式很簡單，一種方式是為構(gòu)造函數(shù)傳入不同的參數(shù)，來完成不同的功能，另一種方式是調(diào)用jQuery的靜態(tài)方法。示例代碼如下。

//創(chuàng)建jQuery對(duì)象，語法為"$（參數(shù))"
console.log($("div"));     //創(chuàng)建div元素的jQuery對(duì)象
//調(diào)用靜態(tài)方法，語法為"$.方法名（)"
console.log($.trim("a"));       //利用trim()方法去掉字符串兩端的空白字符

在實(shí)際開發(fā)中，經(jīng)常會(huì)在jQuery對(duì)象和DOM對(duì)象之間進(jìn)行轉(zhuǎn)換。DOM對(duì)象是用原生JavaScript的DOM操作獲取的對(duì)象，jQuery對(duì)象是通過jQuery方式獲取到的對(duì)象。這兩種對(duì)象的使用方式不同，不能混用，示例代碼如下。

//DOM對(duì)象
var myDiv = document.querySelector('div');
myDiv.hide();       //錯(cuò)誤寫法
//jQuery對(duì)象
var div = $("div");
div.style.display ="none";      //錯(cuò)誤寫法

jQuery對(duì)象實(shí)際上是對(duì)DOM對(duì)象進(jìn)行了包裝，也就是將DOM對(duì)象保存在了jQuery對(duì)象中，因此通過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開始)，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ì)象的方法

猜你喜歡

jQuery和vue的區(qū)別是什么?

什么是jQuery選擇器？jQuery選擇器有什么優(yōu)勢(shì)？

什么是jQuery對(duì)象?

黑馬程序員web前端培訓(xùn)課程