jQuery對象是什么？如何理解jQuery對象？

將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對象的方法

猜你喜歡

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

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

什么是jQuery對象?

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