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

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

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

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

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

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

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

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

jQuery對象實際上是對DOM對象進行了包裝，也就是將DOM對象保存在了jQuery對象中，因此通過jOuery可以獲取DOM對象，有兩種方式，如下所示。

// 從jQuery對象中取出DOM對象
$("div")[0];     //方式1
$("div").get(0);    // 方式2
// 取出 DOM對象后就可以用DOM方式操作元素
$("div")[0].style.display = "none";

在上述代碼中，由于一個jQuery對象中可以包含多個DOM對象，所以在取出DOM對象時需要加上索引(從0開始)，0表示第1個DOM對象。

DOM對象也可以轉換成jQuery對象，其方式是將DOM對象作為$()函數(shù)的參數(shù)傳入，該函數(shù)就會返回jQuery對象，示例代碼如下。

var myDiv = document.querySelector('div');      //獲取 DOM對象
var div = $(myDiv);        //轉換成jQuery對象
div.hide();                //調用jQuery對象的方法

猜你喜歡

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

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

什么是jQuery對象?

黑馬程序員web前端培訓課程