jquery（自制版）

最新推荐文章于 2019-10-24 19:50:34 发布

Mesut_Ozil

最新推荐文章于 2019-10-24 19:50:34 发布

阅读量809

点赞数 1

分类专栏： javascript 文章标签： jQuery 函数扩展插件 javascript

本文链接：https://blog.csdn.net/xizai2012/article/details/8907021

版权

javascript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

<html> 
<head> 
<title>自制的jquery</title> 
<script type = "text/javascript">


//1>创建jQuery对象;2>直接使用jQuery对象的属性/方法/事件),一个强悍的dom元素查找器($),插件式编程接口(jQuery.fn),以及插件初始化的”配置”对象思想.


//实现自己的MyQuery框架
(function(window, undefined ){
this.$ = function(selector){ 
if ( window == this ) return new $(selector);
//这里只实现dom类型的简单查找,嗯嗯~
var doms = document.getElementsByTagName(selector); 
var arr = []; 
for(var i=0; i<doms .length; i++){ 
arr.push(doms.item(i)); 
} 
return this.setArray(arr); 
} 
var MyQuery = this.$;
MyQuery.prototype.setArray = function( arr ) { 
this.length = 0; 
[].push.apply( this, arr ); 
return this; 
} 
MyQuery.fn = MyQuery.prototype; 
//var $ = MyQuery;
//插件扩展1)each 
MyQuery.fn.each = function(method){ 
for(var i=0,l=this.length; i<l; i++){ 
method.call(this[i],i); 
}}
MyQuery.fn.a2 = function (){
alert("ddf");
}
//插件扩展2)show 
MyQuery.fn.show = function(){ 
this.each(function(i){ 
alert(i+":"+this.id+":"+this.innerHTML); 
}); 
}
/*this.good =function(){
alert("df");} 
*/
})(window);
</script>
</head> 
<body> 
<div id="d">这里的id是“d”;</div> 
<div id="f">这里的id是“f”</div> 
</body> 
<script type="text/javascript">  
//测试debugger 
$(window).a2();
//alert($(window).toString)
$("div").show();
/*******
块级作用域
(function(参数){
})(参数值);


相当于
function func(参数){
}
func(参数值);
快速使用函数，而又不让变量溢出作用域的手法
******/
</script>
</html>