jQuery对象

将jQuery引入后，在全局作用域下会新增“$”和“jQuery”两个全局变量，这两个变量引用的是同一个对象，称为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对象中，因此通过jQuery可以获取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对象的方法