jQuery实战——jQuery本质是一个javascript函数

jQuery的调用方法有两种，一个是jQuery（）一个是$（）。使用时多用$（），此文在需要的地方，尽量用jQuery这一直观的名称。

一般情况下，两者的作用是一样的，都是调用jQuery框架。

做为javascript的一个框架，jQuery本质是一个javascript函数。从其调用方法即可看出：

jQuery(document).ready(function(){

         //somecode

});

这是最正常和规范的调用jQuery方式。

从这段调用代码，结合javascript的语法，即可以看出，

jQuery(document);

这是调用一个叫做jQuery的javascript函数，并将文档document做为参数传入这个函数。

jQuery(document).ready();

ready()这个函数，为jQuery函数的一个方法。

jQuery(document).ready(function(){
    //somecode
});

function()这个匿名函数，为jQuery函数下ready（）方法的一个函数型参数，即回调函数（什么是回调函数？函数A做为参数的形式传入函数B中执行，那么函数A即是函数B的回调函数。）在函数jQuery(document).ready()这个函数方法执行结束后执行。

整个jQuery的调用函数的意思是：检查文档是否加载完成，完成则开始执行执行匿名函数function()。

有一点需要注意的，就是this的值：“这里是哪里？”一测便知：

console.log(this);             //返回window对象。

$(document).ready(function(){
    console.log(this);        //返回包装集document。
});


$(function(){
    console.log(this);         //jQuery的简写调用。返回包装集document。
});

上例中，第一个返回的为window对象，这是Javascript里的超级对象，是正常的。

后面两个返回的都包含有document对象的jQuery对象。

在jQuery的使用中，jQuery只向window对象注册了两个顶级函数名，一个是jQuery()，一个是$()。并且这个$是可以取消的，如果你的其它库同时使用了$这个顶级函数名的话，只需要执行jQuery.noConflict()这个方法（或者说是jQuery函数），这种冲突可以轻易化解。这是jQuery做的非常友好的地方。

因为在一个jQuery(document).ready(fucntion(){})之外，你可以用任何javascript允许的字符定义变量和函数，而不用考虑它会与jQuery及其内部定义的变量、函数的名称产生冲突。

好，既然像ready这些都是jQuery函数的方法，那么这些方法是不是可以在javascript脚本的任意位置使用呢？做一下测试：

</pre><pre name="code" class="javascript">window.οnlοad=function(){
    var someElement=document.getElementById('backSpace');
    console.log(jQuery.text(someElement));    //成功返回“退格”
};
<button id="backSpace">退格</button>

<span style="font-family: Arial, Helvetica, sans-serif;"></span>

以上代码是用jQuery中的text()方法，来获取DOM元素的文本内容。测试证明，这种使用方法是可以的。（之所以要放在window.onload事件中，是因为如果DOM树没有建立完成，则取DOM对象只会返回null）。

这也就解释了下面这种错误产生的原因：

<pre name="code" class="javascript">var a=$('button');         //将文档中的所有div选中放入包装集   
    console.log(a[0].text());  //获取包装集中的索引号为0的第一个元素文本内容

结果会显示：

Uncaught TypeError: a[0].text is not a function

text()这明明是jQuery的一个方法呀？为什么告诉我不是一个函数呢？

这是因为在通过下标获取元素之后，这个a[0]已经不是像上面所定义的a一样为jQuery对象，而变为一个DOM元素，而text()是一个jQuery的方法，它必须通过jQuery才能调用。

正确调用是把a[0]这个DOM元素传入jQuery函数中，然后再调用text()方法如下：

    var a=$('button');         //将文档中的所有div选中放入包装集
    console.log($(a[0]).text());  //获取包装集中的索引号为0的第一个元素文本内容

这种方法是将DOM元素转化为jQuery包装集对象，再调用jQuery的方法就没有问题了。

还有一种方法：

    var a=$('button');         //将文档中的所有div选中放入包装集
    console.log(jQuery.text(a[0]));  //获取包装集中的索引号为0的第一个元素文本内容

这种方法是将这个DOM元素直接做为参数来传入jQuery函数的text()方法。当然，你也可以这样简写：

    var a=$('button');         //将文档中的所有div选中放入包装集
    console.log($.text(a[0]));  //获取包装集中的索引号为0的第一个元素文本内容

这里只是为了便于理解jQuery，而如此使用这个方法，在实际操作中不要用它。