学科分类

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对象的方法
点击此处
隐藏目录