大家都知道使用下面的代码
jQuery("#cssrain").html("Hello jQuery!");
能设置id为cssrain元素的html代码。
但你想过为什么jQuery支持这种写法呢?如果要你实现能完成吗?
这篇文章我就来讲解下吧自己的思路吧。
上图所示代码,我把代码分为两部分(A和B),如下图所示:
上图最终可以简化为 : A.B;
接下来我们就可以开始用JavaScript来实现 A.B;
先看一个例子:
function Test(val){
?? this.B = val;
}
var A = new Test("CssRain");
alert(A.B);
运行结果会输出 CssRain .
很显然实现A.B是非常简单的,通过定义一个函数,然后给函数设置一个B的属性,最后通过new构造即可。
A.B实现后,接下来我们把刚才的图再次分解,如下所示:
我们把刚才的代码分为了四个部分(A,B,C,D)。
首先我们看A和B部分:
前面我们实现了A.B,代码如下:
function Test(val){
?? this.B = val;
}
var A = new Test("CssRain");
alert(A.B);
如果要实现 A(参数).B ;
我们需要为
var A = new Test("CssRain"); 这段话传递一个参数。
如何传参数呢?
var A = function(val){
?? new Test(val);
}
这样吗?显然不行,因为我们需要调用Test函数里的方法,如果不把new Test(val)的值返回给A,那么A(参数).B肯定会报 函数A没有B属性。
正确代码如下所示:
var A = function(val){
?? var new_A = new Test(val);
?? return new_A;
}
也可以直接这样:
var A = function(val){
?? return new Test(val);
}
此时,A就可以调用属性B了。
完整代码如下:
function Test(val){
?? this.B = val;
}
var A = function(val){
?? return new Test(val);
}
alert(?? A("CssRain").B?? );
此时我们已经完成了 A("CssRain").B;
跟jQuery("#cssrain").html("Hello jQuery!");对比下,好像已经有点像了。
代码前面的A("CssRain")跟jQuery("#cssrain")非常相似了。不过后面的B和html("Hello jQuery!")则差远了,所以接下来需要把这个也完成。
前面我们已经实现了A("CssRain").B,代码如下:
function Test(val){
?? this.B = val;
}
var A = function(val){
?? return new Test(val);
}
alert(?? A("CssRain").B?? );
如果要实现A("CssRain").B(参数);那么必须改造
function Test(val){
?? this.B = val;
}
既然要传参数,那么肯定需要用到函数之类的,所以我把B改成一个匿名的函数:
function Test(id){
?? this.B = function(val){
document.getElementById(id).innerHTML = val;
?? };
}
最终代码为:
function Test(id){
?? this.B = function(val){
document.getElementById(id).innerHTML = val;
?? };
}
var A = function(val){
?? return new Test(val);
}
A("CssRain").B("hello world!");
本段代码中的A("CssRain").B("hello world!");跟jQuery("#cssrain").html("Hello jQuery!");是不是非常相似了呢。是的,已经非常相似了,不过我们还需要把 id 中的“#”号处理下。
function Test(id){
?? this.B = function(val){
document.getElementById(??id.replace(/#/, "")??).innerHTML = val;
?? };
}
最后只要将 A和 B替换成 jQuery和html即可。
最终代码如下:
function Test(id){
?? this.html = function(val){
document.getElementById( id.replace(/#/, "") ).innerHTML = val;
?? };
}
var jQuery = function(val){
?? return new Test(val);
}
jQuery("#CssRain").html("hello world!");
至此,关于jQuery的html()方法就介绍完了,不知道大家学会了吗?
jQuery其他的方法都大同小异,大家有兴趣可以去看看。新手么,就不要去看了,先把基础学好。
源码下载:
点击下载此文件
http://www.CssRain.cn