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

将jQuery引入后，在全局作用域下会新增“$”和“jOuery”两个全局变量，这两个变量引用的是同一个对象，称为jQuery顶级对象。在代码中可以使用jQuery代替$，但一般为了方便，通常都直接使用$。下面我们通过代码演示$和jQuery的使用。

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

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

jQuery顶级对象类似一个构造函数，用来创建jQuery实例对象(简称jQuery对象)，但它不需要使用new进行实例化，它内部会自动进行实例化，返回实力化后的对象。jQuery的功能有很多，但使用方式很简单，一种方式是为构造函数传入不同的参数，来完成不同的功能，另一种方式是调用jQuery的静态方法。示例代码如下。

//创建jQuery对象，语法为"$（参数)"
console.log($("div"));     //创建div元素的jQuery对象
//调用静态方法，语法为"$.方法名（)"
console.log($.trim("a"));       //利用trim()方法去掉字符串两端的空白字符

在实际开发中，经常会在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对象作为$()函数的参数传入，该函数就会返回jQuery对象，示例代码如下。

var myDiv = document.querySelector('div');      //获取 DOM对象
var div = $(myDiv);        //转换成jQuery对象
div.hide();                //调用jQuery对象的方法

猜你喜欢

jQuery和vue的区别是什么?

什么是jQuery选择器？jQuery选择器有什么优势？

什么是jQuery对象?

黑马程序员web前端培训课程