`
wangzff
  • 浏览: 773 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

模拟jQuery架构--理解jQuery对象

阅读更多

      本文主要是对http://stworthy.iteye.com/blog/200863此篇文章的改进,希望读者更能重复理解javascript的一些框架。本文在stworthy的基础上对代码做了一些改变,并做了一些详细的阐述,希望能给广大IT朋友一点参考价值,如果写的不好的地方欢迎指正。

   

 

 <script type="text/javascript">
      
       var jQuery = $ = function(selector){  	
            return new jQuery.fn.init(selector);  
        };  
        
	jQuery.fn = jQuery.prototype = {
          //初始化jQuery对象
          init:function(selector){
		var elem = document.getElementById(selector);		
		this[0] = elem;
		this.length = 1;
                //(1)注意此处返回的是jQuery.fn.init对象
                return this;
	    },
	    each:function(method){
		for(var i=0; i<this.length; i++){
                   //利用call方法改变了method方法的作用域,也就是将method的this变成了
                   //jQuery.fn.init[0]对象,并将i值作为参数传递给method方法。
                   method.call(this[0],i);
	        }
	     }
	  };
        //因为(1)处的返回的是jQuery.fn.init对象,无法调用each方法。
        //所以将jQuery.fn对象赋给jQuery.fn.init对象原型中。这样
       //jQuery.fn.init对象就可以使用each方法了
        jQuery.fn.init.prototype = jQuery.fn;  

        $('myid').each(function(i){  
          alert(i+":"+this.id+":"+this.innerHTML);  
        });  
 </script>

 <div id="myid">测试内容</div> 
 

 

0
1
分享到:
评论

相关推荐

    jquery-jar包

    而"jquery-jar包"这一概念,可能对于某些开发者来说略显陌生,实际上,它是将jQuery库封装到Java的jar包中,以便于Java后端开发者在服务器端使用jQuery的功能。本文将深入探讨jQuery的核心概念,以及在Java环境中...

    Jquery1.2.6源码分析

    同时,jQuery 1.2.6虽然年代较为久远,但其基础架构和设计模式对于理解后续版本甚至其他JavaScript库的开发都有很大帮助。学习源码分析,可以帮助我们更好地适应不断演进的前端技术生态,理解框架背后的思考和决策。...

    jquery-zTree树形菜单

    3. **初始化树形菜单**:在JavaScript中,调用`$.fn.zTree.init()`方法,传入DOM元素、配置对象和数据源。 ```javascript var setting = {}; var zNodes = []; // 你的JSON数据 $(function() { $.fn.zTree.init...

    jquery.mobile-1.4.3

    1. **核心概念**:jQuery Mobile 的核心在于其触控优化的事件处理和页面架构。它通过数据属性(data-attributes)来增强HTML元素,使开发者能轻松地添加交互性和动态行为。例如,`data-role="page"`用于定义页面容器...

    jQuery源码解读

    首先,jQuery 的核心架构是基于一个立即执行的匿名函数。这种设计方式可以避免全局变量污染,提供一种模拟命名空间的效果。例如: ```javascript (function() { // 全部代码 })(); ``` 在匿名函数内部,jQuery 将其...

    JQuery-Cookie-Clicker

    7. **前端架构**:JQuery-Cookie-Clicker可能采用了模块化或组件化的开发方式,将游戏的不同部分(如计分系统、升级系统)封装为独立的函数或对象,这样代码更易于管理和维护。 8. **优化与性能**:为了保证游戏的...

    JQuery desktop 基本JQuery 的虚拟桌面

    从nathansmith-jQuery-Desktop-f1addcc这个项目中,你可以获取源代码进行学习和二次开发。通过阅读代码和官方文档,了解其架构和API,结合示例进行实践,逐渐掌握如何在自己的项目中集成和定制jQuery Desktop。 ...

    用JQUERY模仿Angularjs的todoList(mvc)

    在IT领域,前端开发是至关...这不仅加深了对jQuery的理解,也让我们有机会对比和学习AngularJS的MVC架构。在实际开发中,选择合适的工具和技术栈是非常重要的,理解并能灵活运用这些知识将有助于提升我们的开发技能。

    拓扑图jquery插件

    在这个名为"topology-jquery-master"的压缩包中,很可能是包含了这个插件的源代码、示例、文档等相关资源。 在JavaScript开发中,图片展示处理是一项常见的任务,而拓扑图jQuery插件则将这一功能扩展到了网络架构和...

    jquery desktop 很炫的桌面

    三、jQuery Desktop架构 1. 桌面背景:通常使用一张大图作为背景,通过CSS实现平铺或拉伸效果。 2. 图标:使用img元素或SVG图形表示,通过jQuery动态加载和控制图标的位置、大小和行为。 3. 窗口:模拟桌面应用程序...

    Three.JS+原生JS+jQuery实现3D机房

    在本项目中,我们主要探讨如何使用Three.js、原生JavaScript和jQuery来创建一个3D机房模拟系统。这个系统不仅展示了一个逼真的3D环境,还具备实用的功能,如设备管理、告警处理和机柜布局调整。下面将详细阐述这些...

    jquery仿iphone向右划动删除行

    标题“jquery仿iphone向右划动删除行”指的是使用jQuery库来实现一种类似于iPhone应用中的交互效果,即当用户在移动Web环境下向右滑动表格行时,会显示出一个删除按钮,允许用户快速删除该行数据。这个功能常用于...

    jQuery树形多级下拉菜单.zip

    "jQuery-Tree"可能是这个压缩包中包含的具体实现代码。这个文件可能包含了HTML、CSS和JavaScript三个部分,展示了如何使用jQuery实现树形多级下拉菜单。开发者可以通过阅读和学习这个示例,理解并掌握相关技术,然后...

    jQuery鼠标拖拽组织结构图代码.zip

    "jQuery鼠标拖拽组织结构图代码"提供了一种动态、直观的方式来呈现复杂的数据结构,使得用户可以通过简单的鼠标操作来理解并调整组织结构。这个功能的实现主要依赖于两个核心库:bootstrap.min.css和jquery.1.7.1....

    jquery-mobile-training:Lynda.com的Jquery Essential Training的所有练习代码

    在这个压缩包文件 "jquery-mobile-training-master" 中,包含了该课程的所有练习代码,学员可以通过这些代码来跟随课程步骤,加深理解和实践。在学习过程中,建议一边观看视频教程,一边动手操作,以达到最佳的学习...

    jquery仿淘宝商城选择商品尺寸与大小颜色功能

    本项目"jquery仿淘宝商城选择商品尺寸与大小颜色功能"旨在模拟淘宝商城的商品选购流程,提供用户友好的交互体验。下面将详细介绍这个项目中的关键知识点。 1. **jQuery库的运用**: - jQuery的核心功能是通过简洁...

    jquery实现树的动态加载

    在理解jQuery实现树形结构动态加载之前,首先需要对jQuery的基本概念有所了解。jQuery通过简洁的语法,如“$”符号,使得DOM(Document Object Model)操作变得简单易行。例如,选择元素、添加样式、触发事件等,都...

    jqery源码逐步解析视频(高清)

    #### 二、jQuery设计哲学与架构 - **轻量级**:jQuery体积小,压缩后仅约30KB。 - **链式调用**:允许连续调用方法,提高代码的可读性。 - **兼容性**:兼容各种浏览器,包括IE6+、Firefox、Chrome、Safari等主流...

    asp.net mvc2 jquery desktop intake

    2. **jquery-ui-1.8.16.custom.zip**: 这是jQuery UI的一个定制版本,版本号为1.8.16。jQuery UI提供了多种用户界面组件,如对话框、拖放、排序等,可以增强Web应用的交互性。定制版本意味着开发者可能只选择了适合...

    基于jquery的Ajax后台模板框架

    这个基于jQuery的Ajax后台模板框架,旨在为这类企业应用提供基础架构。 综上所述,该框架结合了jQuery的Ajax功能和后台管理模板的设计理念,为开发者提供了一个起点,以构建高效、易用的后台管理系统。然而,实际...

Global site tag (gtag.js) - Google Analytics