模仿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>
模仿jquery框架源码 -成熟---选择器的更多相关文章
- 模仿jquery框架源码
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- 模仿jquery框架源码 -生长---跨域访问
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8& ...
- 模仿jquery框架源码---网络
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Page& ...
- jQuery框架源码解读
1.jQuery 1.9.1 parseJSON: function( data ) { // Attempt to parse using the native JSON parser first ...
- 【学】jQuery的源码思路1——后代选择器
jQuery的源码思路1--后代选择器 这里探讨一下jQuery中后代选择器的封装原理,并自己写一下 getEle('#div1 ul li .box');接受的参数就是个后代选择器,类似于这样: # ...
- 【深入浅出jQuery】源码浅析--整体架构
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
- 【深入浅出jQuery】源码浅析2--奇技淫巧
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
- YII框架源码分析(百度PHP大牛创作-原版-无广告无水印)
YII 框架源码分析 百度联盟事业部——黄银锋 目 录 1. 引言 3 1.1.Yii 简介 3 1.2.本文内容与结构 3 2.组件化与模块化 4 2.1.框架加载和运行流程 4 ...
- 【深入浅出jQuery】源码浅析2--使用技巧
最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...
随机推荐
- 【VBA】设置Excle最近使用文件清单数量
打开Excle,点击"文件"------"最近使用的文件",如下图: 根据上图可以看到,最近使用的文件数目为11个,那么是怎么实现的呢?具体代码如下: Publ ...
- 对象序列和反序列化Xml
1. XmlArray和XmlArrayItem XmlArray和XmlArrayItem是不同的,XmlArray是指这个数组叫什么,XmlArrayItem 值数组的每个元素叫什么. <X ...
- Lambda Expression in C#
1.Expression Expression<Func<double, double>> exp = a => Math.Sin(a); 委托类型Func<dou ...
- file_put_contents执行返回false，file_put_contents false（linux服务器httpd）
file_put_contents执行返回false,file_put_contents false(linux服务器httpd) 默认下selinux是开启的查看SELinux状态:1./usr/s ...
- 定时执行线程池ScheduledExecutorService的使用
ScheduledExecutorService progressExecutorService = Executors.newScheduledThreadPool(1); ScheduledFut ...
- Cygwin 版本的 Curl 安装，提取，使用笔记
Cygwin 版本的 Curl 安装,提取,使用笔记 Cygwin 版本的 Curl 使其恢复 HTTPS 请求功能Cygwin 版本的 Curl 依赖的 DLL 清单提取 Cygwin 版本的 Cu ...
- Java和C++ 比較
总体差别 1. C/C++是直接执行在机器上(编译后为机器码),而java编译后产生*.class文件(字节码)是执行在java虚拟机上在(JVM),经过JVM解译(机器码)再放到真实机器上执行. J ...
- jquery的push()
JavaScript push() 方法 JavaScript Array 对象 定义和用法 push() 方法可向数组的末尾添加一个或多个元素,并返回新的长度. 语法 arrayObject.pus ...
- Problem A. Dynamic Grid
Problem We have a grid with R rows and C columns in which every entry is either 0 or 1. We are going ...
- 内核源码之Kconfig和Makefile
转自:http://www.cnblogs.com/image-eye/archive/2011/08/28/2156005.html 内核源码之Kconfig和Makefile Linux内核源码树 ...