【简译】jQuery对象的奥秘:基础介绍

本文翻译自此文章

     你有没有遇到过类似$(".cta").click(function(){})这样的JavaScript代码并且在想“$('#x')是什么”?如果这些对你想天书一样,请往下读。如果你认为这些代码不可能是真的,请浏览一些jQuery例子,他们都是这种结构。

     这篇文章覆盖了像下面一样吓人的代码片段中涉及的关键概念。我们以一个长例子开始,这个长例子是基于一个让一个正方形运动的简单例子(a simple example of animating a square)。你可能不需要每天做这些,但是这是一个简洁整齐的示范:

$(document).ready(function(){

    $("button").click(function(){

        $("div").animate({height:"toggle"}).append("hi");

    });

});

      我们将会涉及到上述例子所用的所有知识点和功能,一窥JavaScript函数,jQuery对象以及事件驱动编程的细节。到了最后,你在面对这种神秘代码时将不会感到困惑。

$什么?

     第一眼看,$像是一个特殊的复杂的JavaScript功能。但他不是。在JavaScript中, 美元符号没有特别的含义。事实上,$只是一个函数,他有一个别名jQuery函数

     jQuery函数是jQuery库存在的理由(raison d’être of jQuery library)。jQuery是一个消除了不同浏览器之间的JavaScript实现差异的JavaScript库,他还为网页提供了丰富的控制和动画功能。你可以通过引用一份这个库的拷贝来包含jQuery函数(例如,$):

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>

或者,你可以下载从官网上一份副本。

     jQuery函数通常使用单个参数,不是选择器(selector)就是在页面上的一个JavaScript引用,例如document。选择器是CSS的一部分,在{...}之前。因此,$("div")类似于jQuery("div")。通过选择当前页面上所有的div元素,它的行为十分类似于下面的CSS:

<style>

    div {}

</style>

    在我们开始的例子中,$(document)将document这个JavaScript变量传给了jQuery函数。document变量是浏览器自动设置的,它指的是DOM的最顶端。DOM是浏览器自己对页面中的HTML分析后生成的结果,也是jQuery功能的建立基础。例如,jQuery的$("div")十分类似于document.getElementByTagName("div")。

关键点

     要记住,$只是一个函数,他有一个易用的别名叫jQuery函数。

点操作符

     在$(document)后面的.操作符显示了丰富的功能。它和JavaScript对象一起使用。简单的说,JavaScript 是一系列属性的集合。例如:

var digger = new Object();

digger.species = "gerbil";

digger.name = "Digger";

digger.color = "white";

在这个例子中,digger是一个JavaScript对象,我们已经赋给了他三个变量:species、name和color。在面向对象的术语中,他们被叫做成员变量。可以用更简单的方式写:

var digger = {species:"gerbil", name:"Digger", color:"white"};

你也可以赋给对象一个函数作为属性。例如:

function meepMeep(){

    alert("meep meep");

}

在JavaScript中,变量、函数和对象之间的界限很模糊。所以,一个函数可以很容易的赋值给一个(成员)变量。

digger.speak = meepMeep;

你可以这样调用函数:

digger.speak();

在面向对象中,这叫做成员函数或者是方法。方法调用同一个对象中的其它方法和成员变量。例如:

function myNameIs(){

    alert("Meep! I am a " + this.species);

}

//assign the function

digger.sayMyName = myNameIs;

//call the function

digger.sayMyName();

在myNameIs函数中,特别的变量this指向包含它的对象,this.species等同于digger.species,他们的值是gerbil。如果你试图不通过对象只调用myNameIs函数,this将指向window对象,而this.species将会是window.species,也就是undefined。页面会显示”Meep!I am a undefined.“

对象也可以作为函数的返回值。例如:

function giveMeTheGerbil(){

    return digger;

}

他将返回一个(全局)变量或对象digger,就像原来的digger一样。

var digger2 = giveMeTheGerbil();

//alerts "Meep! I am a gerbil"

digger2.sayMyName();

然而,你可以不使用中间变量而直接用giveMeTheGerbil的返回值调用sayMyName:

giveMeTheGerbil().sayMyName();

仔细观察这个代码,它的编程结构和我们最初的例子里的第一行一样:

$(document).ready(…);

下一节将阐述ready函数做什么。

关键点

对象可以简写成{name:"Digger", species:"gerbil"}。The keyword this is used in a function attached to an object (a method) and refers to the containing object.(这句不知该如何翻译)

匿名函数

在JavaScript中有几中创建函数的方法。下满是一种经典的方式(声明式函数),有过编程经验的应该很熟悉:

function meepMeep(){

    alert("meep meep");

}

在之前我们已经看到函数可以赋值给变量。我们创建了meepMeep函数并把它赋给了digger.speak。事实上,函数可以被匿名的创建(叫做函数表达式),他没有任何名字并立即赋给一个变量:

var meepMeep = function(){

    alert("meep meep");

};

在JavaScript中,函数可以被赋值给变量并像其他变量一样作为实参被传给函数:

function runMe(f){

    f();

}

它有一个参数,叫做f。runMe把它当作一个函数并运行他。你可以这样:

runMe(meepMeep);

它将运行meepMeep函数。更有趣的是,你甚至可以不用正式的名字meepMeep。你可以简单的创建他,并立即传递给runMe:

runMe(function(){

    alert("meep meep");

});

事实上,任何meepMeep出现的地方,都可以使用等价的匿名函数:

meepMeep();

作为替代,你可以在meepMeep的地方放置一个匿名函数:

(function(){

    alert("meep meep");

})();

在JavaScript中,这个技术常用来提供变量作用域。你能明白下面代码要输出什么吗:

var x=3;

(function(){

    var x=4; console.log("x is " + x);

})();

console.log ("x is " + x);

在此处,函数中的var关键字很重要。它在函数内声明了一个变量。在此处,匿名函数声明了一个变量x并赋值为4,然后输出它。因为var关键字,函数的x跟之前一行的var x = 3完全的分开了。代码将会先输出x=4然后是x=3。

 这里的console.log存在于现代浏览器(换句话,老版IE不支持),他在浏览器的JavaScript控制台输出相关信息。

匿名函数是下一个难题。jQuery的ready函数就像上面runMe函数的有时间延迟的版本。ready函数等待所有的DOM加载完后才执行提供给它的函数。因此,当document最终ready,下面的匿名函数将会执行:

function(){

    $("button").click (…)

}

对于程序员来说,要执行那些只能在HTML文档被处理完之后的JavaScript,$(document).ready(...)是一个常用的方法。

关键点

匿名函数是那些没有名字的函数。他们可以赋值给变量,传递给其他函数或者作为立即执行函数来提供作用域。

方法链在更深入例子代码之前,我们需要在复习一次经常发生在JavaScript中的概念。方法链(method chaining)指的是在一行运行多个函数。让我们扩展一下上面giveMeTheGerbil()这个例子:

giveMeTheGerbil().sayMyName();

让我们重新定义一下gerbil相关的函数,让他们返回一个指向自己的引用:

digger.speak = function(){

    alert("meep meep"); return this;

}

digger.sayMyName = function(){

    alert("Meep! I am a " + this.species); return this;

}

这两个函数对digger做了一些事之后返回digger。这些改变让我们可以链式调用这些函数:

giveMeTheGerbil().speak().sayMyName().speak();

这行代码先运行giveMeTheGerbil,返回一个digger对象引用,现在,这行代码等价于:

digger.speak().sayMyName().speak();

接下来是speak函数,它也返回一个digger对象并在此调用sayMyName函数,一直这样直到最后一个函数。

这样的链式调用在JavaScript非常常见。你可能会见到string对象也有这样的情况。

var s = "I have a dagger."; 

console.log(s.substring(9, 15).replace("a", "i").toUpperCase());

上面的代码以字符串s开始,提取子串,用i替换a,是所有字符大写并返回一个在控制台日志显示的字符串。

当然,jQuery中也充斥这链式调用,它也出现在我们的例子里:

$("div").animate({height:"toggle"}).append("hi");

代码首先通过$("div")查询页面中全部的<div>并作为jQuery对象的一部分返回他们。然后,它对jQuery对象运行animate方法接着再运行append方法,每一次返回并操作的都是jQuery对象。

这样的调用链可以非常长,这里有一个特别长的调用链

通常来说,长的调用链会很难调试和维护。避免长调用链始终是个好主意,但在小规模的情况下将非常有用。

关键点

那些返回自身对象引用的方法可以链接在一起,这样就可以在执行长段代码是不用储存中间变量。

jQuery对象

我们例子中使用了几个jQuery方法:ready、click、animate和append。他们都是jQuery对象相关的函数,类似于speak和myNameIs是与digger对象相关的函数,和substr、replace和toUpperCase与string关系一致。

这些函数都是jQuery对象的方法,他们都返回jQuery对象。jQuery对象比digger和string对象都要复杂的多。

之前提过,在JavaScript中,概念之间的界限相当模糊。jQuery对象的行为类似于一个对象和一个数组。你在链式调用时对待他像一个对象,但你也可以对待它象一个数组:

var mydivs = $("div");

for (var i = 0; i < mydivs.length; i++) {console.log(mydivs[i].innerHTML);}

 在这个例子中,$("div")查找页面中所有的<div>元素并把生成的jQuery对象存储在mydivs变量中。代码遍历jQuery对象就好像他是DOM中的节点(nodes)数组(实际上,是一个NodeList)。这些节点同样也是包含着各自属性的对象,例如outerHTML和innerHTML。

我们也可以通过把这些节点返回个jQuery对象然后调用jQuery方法html()达到同样的结果。为了实现它,我们把节点传递给$,$可以将任何东西很好的转换为jQuery对象:

var mydivs = $("div");

for (var i = 0; i < mydivs.length; i++) {console.log($(mydivs[i]).html());}

上面两个都可以输出页面中的每个<div>的HTML内容。

记住,当你运行像是$("div").animate(...).append(...)这样的jQuery代码时,动画(animation)将会在jQuery对象中所有的<div>元素中发生,而且他们会作为jQuery对象的一部分传递给下一个在调用链的函数。(对于大多数jQuery函数是这样的,参见这里

关键点

jQuery函数$和许多jQuery方法像click和animate返回一个jQuery对象,jQuery一半类似于对象,一半类似于数组。类型与数组的部分包含着指向在DOM中的节点。

把所有合在一起

现在,我们可以将例子作为一个整体来看了。$(document)返回一个指向页面自己的jQuery对象。ready方法将会在页面完成解析和DOM可用时执行传递给他的方法:

function(){

    $("button").click(…);

}

这个函数用jQuery函数查询页面中所有的<buttons>元素。他返回一个有click方法的jQuery对象。click方法中有另一个匿名函数作为参数:

function(){

    $("div").animate ({height:"toggle"}).append("hi");

}

这个函数查找全部的<div>元素,返回一个jQuery对象,然后第一个调用它的animate方法。animate方法的参数是用来发生动画的属性列表,这里以简写的对象方式{height:"toggle"}传递给animate。它告诉jQuery切换页面中所有的<div>元素的高度。首先,它(animate方法)减小它们(div元素)的高度至零,然后,它在把它们变回成原来的高度。

animate方法也返回jQuery对象。然后链式调用append方法,这个方法在每次按钮被按下就给<div>元素增加一个字符串"hi"。复制下面代码到JS Bin或创建一个HTML观察:

<button>Click me</button>

<div style="width:100px;height:100px;background:green;"></div>

<script src="http://code.jquery.com/jquery-1.8.3.js"></script>

<script>

$(document).ready(function(){

    $("button").click(function(){

        $("div").animate({height:"toggle"}).append("hi");

    });

});

</script>

每次<button>被点击,绿色的<div>要么被折叠,要么被展开,同时添加一个额外的字符串"hi"。

事件驱动的麻烦

下面一段代码看似很简单:

//set h to 200

var h = 200; 

$(document).ready(function(){

    $("button").click(function(){

        //animate up to h, 200 pixels high

        $("div").animate({height:h});

    });

});

你可能希望<div>元素扩展到200像素。但是在变量h被赋值为200到动画发生之间可能会出现很多状况。在一个复杂的jQuery应用中,变量h可能会被重用,或者你的应用的其他部分会改变他的值。你将会经盯着那几行代码,并思考到底为什么你的盒子之变换到50像素而不是200像素。可能是在你的代码某个地方你不小心改变了h的值。

老实说,这不是因为jQuery或者是其他匿名函数引起的,但总的来说,这是事件驱动编程的危害。上面的代码运行在三个不同的时间,它们第一次处理($(document).ready(...))。当文档加载($(button).cilck(...))和按钮被点击($("div").animate(...))。

那些例如用PHP写的服务端代码是连续并按照顺序执行的,从开始到结束,输出HTML生成web页面然后结束。JavaScript也可以做这些,但它在和事件联系在一起时,例如按钮点击,它才是最强大的。这就是事件驱动编程,并不只有JavaScript是这样。在智能手机app中大量使用事件驱动,他们使用Object-C 或Java或C++响应你的IPhone,Android或者Windows Phone的触摸屏事件。

如果上面的代码被翻译成Java运行在Android机,在最里层的函数中的h会导致一个错误。这是因为h没有被声明为一个全局(或在Java中是静态变量)变量,内部代码不知道它的值是什么。尽管这没有改变问题,但他至少让你致力于仔细思考如何使用变量。避免这个问题的一个快速方法是给变量加一个作用域。这个例子可以通过在第一个匿名函数中添加一个变量声明 var h 而被修复。这样这个h的优先级将高于任何全局的h。

$(document).ready (function(){

    //set h to 200

    var h = 200;

    $("button").click (function(){

        //animate up to h, 200 pixels high

        $("div").animate ({height:h});

    });

});

如果你必须使用全局配置变量,那另一个技术就是良好的命名并组织变量。同时,清晰的注释终是被推荐的:

//properties of the animation

var animationConfig = {upToHeight:200};

//when document is loaded

$(document).ready(function(){

    //when any <button> element is clicked

    $("button").click(function(){

        //change the height of all <div>s

        $("div").animate({height:animationConfig.upToHeight});

    });

});

总结

这篇文章是一个关于JavaScript语法和通过jQuery来了解如何使用它的初学者指导。jQuery是一个有着特别长相的函数$和鼓励使用简写的对象,匿名函数和方法链的JavaScript库。不只是jQuery,想YUI(Yahoo User Interface)也是类似的。你现在可以直接看一个复杂的jQuery代码而不会有任何疑问或者不清楚的地方。你知道它是做什么的。由于事件驱动编程的复杂性,你可能不确定是何时做,但你知道是怎么做。

 

 

 

 

 

 

 

 

你可能感兴趣的:(JQuery对象)