jQuery 是一个流行的 JavaScript 库,它提供了许多实用的功能和方法来简化前端开发。其中最为特别的一点是,jQuery 同时可以表现为一个对象和一个函数。
jQuery 作为对象
当我们使用 $
或 jQuery
函数选择 DOM 元素时,返回的是一个 jQuery 对象。这个对象包含了很多有用的属性和方法,例如:
length
: 返回选定元素的数量;each()
: 遍历选定元素并执行指定的函数;addClass()
: 给选定元素添加一个或多个类名;- ...
我们可以通过链式调用这些方法,以便在单个语句中对选定元素执行多个操作。例如:
$('p').addClass('highlight').fadeOut();
上面的代码会先给页面中所有的 <p>
元素添加 highlight
类名,然后再淡出它们。
jQuery 作为函数
除了作为对象外,jQuery 还可以像函数一样被调用。当我们传递一个字符串选择器或 HTML 内容作为参数时,$()
或 jQuery()
函数会返回选定的 DOM 元素。例如:
var element = $('#myElement');
上面的代码会选择 id
为 myElement
的元素,并将它存储到 element
变量中。
除了字符串选择器和 HTML 内容外,$()
或 jQuery()
函数还可以接受一个函数作为参数。当文档准备就绪时,传入的函数会被执行。这个函数通常用来初始化页面内容或绑定事件处理程序。例如:
$(document).ready(function() { // 初始化代码... });
上面的代码会在文档加载完成后执行指定的函数。
jQuery 之所以能够同时作为对象和函数,是因为它实际上是一个工厂函数(Factory Function)。当我们调用 $()
或 jQuery()
函数时,它会返回一个构造函数的实例,而这个构造函数定义了所有 jQuery 对象的方法。
下面是一个简化的 jQuery 构造函数的例子:
-- -------------------- ---- ------- -------- ---------------- - -- -- ------ -- --- --- - --- -- ------- ---------- - ------------------------------------------- -------- - ------------------ - --- -------- - ------------------------------------ --- ---- - - -- - - ---------------- ---- - -------------------------- -- ------------- - ------ ---- -- -- -- ------ -- ------ ---- -
在这个例子中,jQuery()
函数接受一个字符串选择器作为参数,并返回一个包含 length
和 each()
属性的对象。这些属性定义了 jQuery 对象的行为。
总结一下,jQuery 既可以作为对象使用,也可以作为函数使用,这使得我们可以方便地在 JavaScript 中选择 DOM 元素,并对它们进行操作。深入理解 jQuery 的对象和函数的使用方式,可以帮助我们更好地开发出高效、可维护的前端代码。
示例代码
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------- -- ------ --- ---------------- ------- ------ -------- --- ------ -- ---- ---- -------------- ------- -------------------------- ------- ----------------------------------------------------------- -------- -- -- ------ ---- --------------------------------------- -- -- ------ ---- --- ------ - -------------- ----------------------- - ----------------- --- --------- ------- -------
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/30106