学习JQuery时对$(...)操作后返回的jQuery对象具有如此灵活的操作方法感到惊讶,阅读JQuery源码后逐步明白一些道理。
下面仿照JQuery构造一个超简单的框架,以说明对JQuery的理解。
var jQuery = $ = function(selector){
return new jQuery.fn.init(selector);
};
使用jQuery(...)和$是一样的,都是返回一个对象,这个对象是由jQuery.fn.init的构造体构造的,这个对象有什么来头呢 ?
jQuery.fn = jQuery.prototype = {
init:function(selector){
var elem = document.getElementById(selector);
this[0] = elem;
this.length = 1;
return this;
},
each:function(method){
for(var i=0; i<this.length; i++){
method.call(this[i],i);
}
}
};
可见,返回的是一个数组,所以并没有什么神秘的东西。
但这个数组还不能进行each的操作,需要扩展其原型方法,下面的这句很重要:
jQuery.fn.init.prototype = jQuery.fn;
这样,通过$(...)得到的对象就能进行each调用了。
下面测试一下:
<div id="myid">测试内容</div>
<script>
$('myid').each(function(i){
alert(i+":"+this.id+":"+this.innerHTML);
});
</script>
确实可以运行,运行结果如下图:
- 大小: 5.9 KB
分享到:
- 2008-06-06 12:18
- 浏览 4013
- 评论(2)
- 论坛回复 / 浏览 (2 / 9286)
- 查看更多
相关推荐
n是jQuery.prototype的别名,这样做是为了方便在jQuery的核心功能中引用原型方法。在jQuery的原型上,定义...通过深入理解jQuery对象的创建、结构和原型,开发者可以更好地运用jQuery库,编写出高效、优雅的前端代码。
jQuery 是一个广泛使用的JavaScript库,它简化了DOM操作、AJAX请求、事件处理以及创建复杂的网页特效。... ### 一、jQuery 选择器 ...同时,理解jQuery对象和DOM对象的区别及其相互转换,是有效利用jQuery功能的关键。
我们将深入理解jQuery对象的特性,以及在Java中如何映射和解析这些数据。 首先,jQuery对象主要是JavaScript对象,它封装了DOM元素集合,提供了方便的API来操作DOM和处理事件。当前端通过jQuery发起一个AJAX请求向...
### 关于DOM与jQuery对象的理解 #### DOM简介 在探讨DOM与jQuery之间的关系之前,我们首先需要明确什么是DOM(Document Object Model)。DOM是一种用于表示HTML或XML文档的标准接口,它提供了一种方式来读取、操作...
**jQuery对象和DOM对象** 在JavaScript中,DOM(Document Object Model)对象是浏览器解析HTML或XML文档后生成的树状结构,它允许我们通过编程方式访问和操作网页元素。而jQuery对象则是jQuery库中用于封装DOM对象...
理解JQuery对象和DOM元素之间的区别也很重要,JQuery对象可以执行JQuery特有的方法,而DOM元素则对应于实际的HTML元素。 总之,这个压缩包提供了一个全面的学习JQuery的机会。通过阅读电子书和实践HTML示例,你可以...
首先,让我们从整体上理解jQuery构造函数的设计思路。 ##### 总体结构 在jQuery的源码中,通过立即执行函数表达式(IIFE)来定义jQuery对象。这种设计可以避免全局命名空间的污染,确保jQuery内部实现的私有性。...
**3.2 案例演示——理解jQuery对象** - **目标**: 通过实例演示来了解jQuery对象的本质。 - **HTML结构**: ```html <h1>jQuery对象 <p>1. jQuery统一封装的对象 <p>2. jQuery选择器选择的结果是jQuery对象 <p>...
当我们谈论jQuery对象和DOM对象时,我们需要理解两者之间的基本差异和转换方法。 DOM(Document Object Model)是HTML和XML文档的结构表示,允许我们通过JavaScript来访问和修改网页内容。DOM对象是通过JavaScript...
通过深入理解jQuery对象和DOM对象的关系,以及如何解决与其他库的冲突,开发者能够更好地利用jQuery来构建功能丰富的Web应用。在实际项目中,结合jQuery提供的各种工具和插件,可以极大地提高开发效率和代码质量。
理解jQuery对象和原生DOM对象之间的差异至关重要。jQuery对象是jQuery封装的集合,可以调用jQuery的方法;而DOM对象则是JavaScript原生的对象,适用于处理节点操作。 九、jQuery插件 jQuery拥有庞大的插件生态系统...
9. **jQuery对象和DOM元素**:理解jQuery对象和DOM元素的区别,掌握如何在两者之间转换,例如`$(element)[0]`和`$(selector).get(0)`都是从jQuery对象获取原始DOM元素的方法。 10. **版本更新**:随着Web技术的发展...
在"Lesson01 jQuery基础"中,你可能会学习到如何引入jQuery库,理解jQuery对象与JavaScript原生对象的区别,掌握基本的选择器和DOM操作,以及如何绑定和处理用户事件。这些都是学习jQuery的基石,为后续更复杂的功能...
接下来,学习"管理jQuery包装集",理解jQuery对象与JavaScript原生对象的区别,以及如何对选择的元素集合进行操作。jQuery包装集允许我们一次性对多个元素执行相同的操作,提高了代码效率。 在"操作元素的属性与...
3. **链式操作**:理解jQuery对象的链式调用,如何在一个方法调用后立即执行另一个方法。 4. **DOM操作**:学习如何使用jQuery选择并操作DOM元素,包括获取和设置属性、内容、CSS样式。 **第2天:jQuery事件处理** ...
本篇文章将深入探讨jQuery在开发中的实用技巧,帮助开发者更高效地使用这一强大...通过深入理解jQuery对象与DOM对象的区别,以及如何有效利用jQuery提供的集合处理和事件处理功能,你可以编写出更简洁、更高效的代码。
1. **理解jQuery对象和DOM元素的区别**:在jQuery中,我们经常使用$()函数来选择DOM元素,返回的是一个jQuery对象,而不是DOM元素本身。了解这两者的差异是开发插件的基础,因为它们的API和使用方式有所不同。 2. *...
jQuery是一款广泛应用于Web开发的JavaScript库,它极大地简化了JavaScript的...理解jQuery的基本概念,熟练掌握其使用方法,以及了解DOM对象与jQuery对象的转换,能帮助开发者更高效地构建动态、交互丰富的网页应用。
在学习 jQuery 的基础知识时,理解 jQuery 对象与 DOM 对象的区别至关重要。 1. **jQuery 对象与 DOM 对象的转换** - jQuery 对象是由 `$(...)` 包裹的对象,可以调用 jQuery 提供的所有方法。DOM 对象则是浏览器...