<body>
<div>1</div>
<div>2</div>
</body>
<script type="text/javascript">
//定义一个自调函数
(function(global){
//global保留了window对象的引用
//1.定义 jquery()方法,返回元素
function jquery(selectors){
//方法一：
var elements=document.querySelectorAll(selectors);
return elements;
}
//设置一个处理css样式的函数
//方法一：将css函数写入到elements对象的原型中
// HTMLCollection.prototype.css=function(){}
// 此方法可以实现效果，但改变了对象的原型，一般不可取
window.$=window.jquery=jquery;//给window对象添加属性$和jquery,并设置值为jquery
})(window)
$('div').css('color','red');
</script>
改进后
<body>
<div>1</div>
<div>2</div>
</body>
<script type="text/javascript">
//定义一个自调函数
(function(global){
//global保留了window对象的引用
//1.定义 jquery()方法,返回元素
function jquery(selectors){
//方法二：
return new fn(selectors);
}
//改进二：将dom元素放到fn函数中
function fn(selectors){
//jquery内部封装了一个Sizzle引擎来获取DOM元素
var elements=document.querySelectorAll(selectors);
this.elements=elements;//当函数以new关键字调用时，this指向该构造函数的实例
}
//将css写到fn函数的原型中：
fn.prototype.css=function(name,value){
for(var i=0;i<this.elements.length;i++){
this.elements[i].style[name]=value;
}
}
window.$=window.jquery=jquery;//给window对象添加属性$和jquery,并设置值为jquery
})(window)
$('div').css('color','red');
</script>
下一页继续改进
923
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
