`
stworthy
  • 浏览: 526164 次
  • 来自: ...
社区版块
存档分类
最新评论

理解jQuery对象

阅读更多

学习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
分享到:
评论
2 楼 bellstar 2008-10-26  
就以上代码来看$(“id”),操作后返回的很明显不是数组,而是一个Object,this[0]只是表明当前对象拥有0这个属性,this.length=1更是表明它不是数组,数组它是会自动给它的length属性计数的,没有必要手动设置值。typeof($("id"))看下吧



1 楼 ayumike 2008-10-25  
this[0] = elem;  
this.length = 1;
这个this 是指的jQuery这个对象吗?

下面的this.id是指的DIV这个对象吗?

这2个this 我不太明白 希望可以告诉我下...

$(this).attr()这个this应该是jQuery的自己对象吧

希望能帮我解释下 谢谢啊~~

相关推荐

    2014-10-04-深入理解jQuery(1)——jQuery对象1

    n是jQuery.prototype的别名,这样做是为了方便在jQuery的核心功能中引用原型方法。在jQuery的原型上,定义...通过深入理解jQuery对象的创建、结构和原型,开发者可以更好地运用jQuery库,编写出高效、优雅的前端代码。

    jquery dom对象 详细介绍1

    jQuery 是一个广泛使用的JavaScript库,它简化了DOM操作、AJAX请求、事件处理以及创建复杂的网页特效。... ### 一、jQuery 选择器 ...同时,理解jQuery对象和DOM对象的区别及其相互转换,是有效利用jQuery功能的关键。

    jquery转换java对象

    我们将深入理解jQuery对象的特性,以及在Java中如何映射和解析这些数据。 首先,jQuery对象主要是JavaScript对象,它封装了DOM元素集合,提供了方便的API来操作DOM和处理事件。当前端通过jQuery发起一个AJAX请求向...

    关于dom和jquery对象理解

    ### 关于DOM与jQuery对象的理解 #### DOM简介 在探讨DOM与jQuery之间的关系之前,我们首先需要明确什么是DOM(Document Object Model)。DOM是一种用于表示HTML或XML文档的标准接口,它提供了一种方式来读取、操作...

    jquery对象和dom对象

    **jQuery对象和DOM对象** 在JavaScript中,DOM(Document Object Model)对象是浏览器解析HTML或XML文档后生成的树状结构,它允许我们通过编程方式访问和操作网页元素。而jQuery对象则是jQuery库中用于封装DOM对象...

    一些很不错的JQuery的例子(附上jQuery_Succinctly.pdf)

    理解JQuery对象和DOM元素之间的区别也很重要,JQuery对象可以执行JQuery特有的方法,而DOM元素则对应于实际的HTML元素。 总之,这个压缩包提供了一个全面的学习JQuery的机会。通过阅读电子书和实践HTML示例,你可以...

    jQuery源码分析-03构造jQuery对象

    首先,让我们从整体上理解jQuery构造函数的设计思路。 ##### 总体结构 在jQuery的源码中,通过立即执行函数表达式(IIFE)来定义jQuery对象。这种设计可以避免全局命名空间的污染,确保jQuery内部实现的私有性。...

    jquery学习文档

    **3.2 案例演示——理解jQuery对象** - **目标**: 通过实例演示来了解jQuery对象的本质。 - **HTML结构**: ```html &lt;h1&gt;jQuery对象 &lt;p&gt;1. jQuery统一封装的对象 &lt;p&gt;2. jQuery选择器选择的结果是jQuery对象 &lt;p&gt;...

    jquery对象和dom对象.doc

    当我们谈论jQuery对象和DOM对象时,我们需要理解两者之间的基本差异和转换方法。 DOM(Document Object Model)是HTML和XML文档的结构表示,允许我们通过JavaScript来访问和修改网页内容。DOM对象是通过JavaScript...

    jQuery学习笔记

    通过深入理解jQuery对象和DOM对象的关系,以及如何解决与其他库的冲突,开发者能够更好地利用jQuery来构建功能丰富的Web应用。在实际项目中,结合jQuery提供的各种工具和插件,可以极大地提高开发效率和代码质量。

    jquery1.8.2在线-离线手册

    理解jQuery对象和原生DOM对象之间的差异至关重要。jQuery对象是jQuery封装的集合,可以调用jQuery的方法;而DOM对象则是JavaScript原生的对象,适用于处理节点操作。 九、jQuery插件 jQuery拥有庞大的插件生态系统...

    jQuery使用手册.zip

    9. **jQuery对象和DOM元素**:理解jQuery对象和DOM元素的区别,掌握如何在两者之间转换,例如`$(element)[0]`和`$(selector).get(0)`都是从jQuery对象获取原始DOM元素的方法。 10. **版本更新**:随着Web技术的发展...

    JQuery PPT

    在"Lesson01 jQuery基础"中,你可能会学习到如何引入jQuery库,理解jQuery对象与JavaScript原生对象的区别,掌握基本的选择器和DOM操作,以及如何绑定和处理用户事件。这些都是学习jQuery的基石,为后续更复杂的功能...

    jquery 入门文档 从零开始学校jquery

    接下来,学习"管理jQuery包装集",理解jQuery对象与JavaScript原生对象的区别,以及如何对选择的元素集合进行操作。jQuery包装集允许我们一次性对多个元素执行相同的操作,提高了代码效率。 在"操作元素的属性与...

    jquery教程 15天学会jquery(完整版)

    3. **链式操作**:理解jQuery对象的链式调用,如何在一个方法调用后立即执行另一个方法。 4. **DOM操作**:学习如何使用jQuery选择并操作DOM元素,包括获取和设置属性、内容、CSS样式。 **第2天:jQuery事件处理** ...

    jQuery技巧大放送

    本篇文章将深入探讨jQuery在开发中的实用技巧,帮助开发者更高效地使用这一强大...通过深入理解jQuery对象与DOM对象的区别,以及如何有效利用jQuery提供的集合处理和事件处理功能,你可以编写出更简洁、更高效的代码。

    jquery插件开发

    1. **理解jQuery对象和DOM元素的区别**:在jQuery中,我们经常使用$()函数来选择DOM元素,返回的是一个jQuery对象,而不是DOM元素本身。了解这两者的差异是开发插件的基础,因为它们的API和使用方式有所不同。 2. *...

    jQuery简介、jQuery使用详解、DOM对象与jQuery对象的转换与区别

    jQuery是一款广泛应用于Web开发的JavaScript库,它极大地简化了JavaScript的...理解jQuery的基本概念,熟练掌握其使用方法,以及了解DOM对象与jQuery对象的转换,能帮助开发者更高效地构建动态、交互丰富的网页应用。

    jquery基础知识要点

    在学习 jQuery 的基础知识时,理解 jQuery 对象与 DOM 对象的区别至关重要。 1. **jQuery 对象与 DOM 对象的转换** - jQuery 对象是由 `$(...)` 包裹的对象,可以调用 jQuery 提供的所有方法。DOM 对象则是浏览器...

Global site tag (gtag.js) - Google Analytics