jquery 源码初探,一步步实现自己的jquery(三)

16 篇文章 0 订阅
15 篇文章 0 订阅
上两篇简单的介绍了jquery的一些知识,也模拟了一下jquery的调用方式,下面我们整点更像的,jquery不是使用#来指定Id吗,我们也来试试,给我们的TestClass类添加一个selector来存储我们要找的目标,并且添加一个val方法来获取值和赋值
改版的TestClass如下:


(function(){
TestClass=function (selector){
return new TestClass.fn.init(selector);
}
TestClass.fn=TestClass.prototype={
init:function(selector){
this.selector=selector;
return this;
},
val:function(value){
if(!(this.selector&&this.selector.indexOf("#")==0)){
return ;
}
var id=this.selector.substring(1);
var obj=document.getElementById(id);
if(!value){
return obj.value;
}else{
obj.value=value;
}

}
}
TestClass.fn.init.prototype=TestClass.fn;
var $=TestClass;
window.$=$;
window.TestClass=TestClass;



})()

alert($("#myinput1").val());
$("#myinput1").val("xxxtest");


上面的判断比jquery要少很多,满足基本功能,对于select等等这些元素,还需继续扩招下去,这个比较简单。
以上在IE和火狐都会通过。
现在总结一点东西:
[list]
[*]1,之所以要用匿名函数是避免出现方法或者属性,变量与其他的重复,在这个 里面定义的函数,在外面是不能直接调用的。
[*]2,大量利用js prototype属性,对扩展类的方法有很大作用,它是一个给类的对象添加方法的方法。
[/list]

现在jquery有很多扩展出来的插件,为整个框架带来生机,这也是它成为霸主的利剑,下一篇面我们就看看是怎样扩展它的功能的。
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值