关于jQuery的html()方法研究.

    
大家都知道使用下面的代码
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