模仿jquery框架源码 -成熟---选择器

<!DOCTYPE HTML>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<title></title>

<style type="text/css">

.red {

color: red;

}

</style>

</head>

<body>

<div class="red">1</div>

<div>2</div>

<div>3</div>

</body>

<script language="javascript" type="text/javascript">

var $ = jQuery = function( selector, context ){ //定义类

return new jQuery.fn.init(selector, context); //返回选择器的实例

}

//jQuery类的原型对象

jQuery.fn = jQuery.prototype = {

init : function(selector, context){ //定义选择器构造器

selector = selector || document; //设置默认值为document

context = context || document; //设置默认值为document

if( selector.nodeType ) { //如果选择符为节点对象

this[0] = selector; //把参数节点传递给实例对象的数组

this.length = 1; //并设置实例对象的length属性,定义包含的元素个数

this.context = selector; //设置实例的属性,返回选择范围

return this; //返回当前实例

}

if( typeof selector === "string" ) { //如果选择符是字符串

var e = context.getElementsByTagName(selector);

//获取指定名称的元素

for( var i = 0; i < e.length; i++ ){//遍历元素集合,并把所有元素填入到当前实例数组中

this[i] = e[i];

}

this.length = e.length; //设置实例的length属性,即定义包含的元素个数

this.context = context; //设置实例的属性,返回选择范围

return this; //返回当前实例

} else {

this.length = 0; //否则,设置实例的length属性值为0

this.context = context;

return this; //返回当前实例

}

},

jquery: "1.3.2", //原型属性

size: function() { //原型方法

return this.length;

}

}

jQuery.fn.init.prototype = jQuery.fn; //使用jQuery的原型对象覆盖init的原型对象

alert( $("div").size() ); //返回3

</script>

</html>

时间: 2024-10-10 16:59:20

模仿jquery框架源码 -成熟---选择器的相关文章

模仿jquery框架源码---网络

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Page</title> </head> <body> <div id="d">divvv</div> <div id="fsd">fdsf</div> </body> </ht

模仿jquery框架源码

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <!-- <script src="../jquery.js" type="text/javascript"></script> --> <script

模仿jquery框架源码 -生长---跨域访问

<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <script language="javascript" type="text/javascript"> var $ = jQuery = function(){ return n

第五节:JQuery框架源码简析(1)

(转自老惠的博客) JQuery是一个应用广泛.非常优秀的JavaScript框架,其代码简洁而优雅,有很多值得我们学习的地方.这里仅仅对其代码结构做一个简单的分析,方便大家的理解和学习. 我们进行分析.分解的基准版本是jQuery1.7.1. 开始之前,请准备好以下素材和工具: jQuery源代码:jquery-1.7.1.js 文本编辑器:EditPlus,或者你喜欢的 参考书:<jQuery高级编程>.<jQuery技术内幕:深入解析jQuery架构设计与实现原理>.<

第五节:JQuery框架源码简析(2)

(续1) 5.选择器Sizzle 我们把选择器Sizzle实现的代码放在文件jquery.sizzle.js中.关于选择器Sizzle的说明,请看<jQuery技术内幕:深入解析jQuery架构设计与实现原理>,这里不再赘述了. /*! * Sizzle CSS Selector Engine *  Copyright 2011, The Dojo Foundation *  Released under the MIT, BSD, and GPL Licenses. *  More info

第五节:JQuery框架源码简析(3)

(续2) 9.DOM 我们将jQuery有关DOM模块的代码放在文件jquery.extend.dom.js中. function jQuery_extend_dom(jQuery){ jQuery.fn.extend({ text: function( text ) { if ( jQuery.isFunction(text) ) { return this.each(function(i) { var self = jQuery( this ); self.text( text.call(t

框架源码|Java、Spring、HTML5、JavaScript、jQuery、Web移动端

A.代码生成器(开发利器) 生成Java各层次的类和JSP等文件,提高开发效率 B.阿里巴巴数据库连接池Druid 性能最好的数据库连接池,稳定.可扩展.高性能.高并发 C.安全权限框架Shiro 实现认证.授权.加密.缓存.并发.会话管理.单点登录等功能 D.Ehcache二级缓存和Spring MVC静态加载缓存 E.微信接口开发 详尽的单元测试代码,详尽的开发文档,每个模块都有详尽说明和代码示例 F.提供基于JBPM工作流的OA办公系统(后续加入Activiti 5.18工作流) ----

模拟jQuery底层源码的链式调用和常用的$()方法的实现

最近在看jQuery框架的源码,感觉还是学到不少东西的,所以就想总结一下自己的知识,和广大的前端爱好者一起 交流一下,我下面所说的并不是直接对jQuery的源码来解读,我是模拟一下jQuery底层源码的链式调用大概是怎么 实现的和常用的$功能是怎么实现的.好了废话不多说了.你要看这个,你就要对jQuery有一定的了解,最起码你要用过jQuery.首先看下jQuery的源码开始是怎么写的 (function( window, undefined){    })(window);它的代码就是被这个块

YII框架源码分析(百度PHP大牛创作-原版-无广告无水印)

                        YII 框架源码分析             百度联盟事业部--黄银锋   目 录 1. 引言 3 1.1.Yii 简介 3 1.2.本文内容与结构 3 2.组件化与模块化 4 2.1.框架加载和运行流程 4 2.2.YiiBase 静态类 5 2.3.组件 6 2.4.模块 9 2.5 .App 应用   10 2.6 .WebApp 应用   11 3.系统组件 13 3.1.日志路由组件  13 3.2.Url 管理组件  15 3.3.异常