--Endfooter-->

36

37

以上示例代码的树形图如下：

很简单，是不是？

从现在开始我们可以将html或xhtml看做一棵树，不过我们想做的是程序员，这些植物学的理论有什么用处？

答案就在下一个要点之中。

对树进行选择和转换

选择

就想树一样，网站结构中叶存在子与父。

在jQuery中，我们可以利用这一结构。

假设我们拥有相同的html，但是现在我们想要选择名为“main”的div中的p元素，但是不想对任何有关p元素的东西造成变化。

我们有三种可能的方案，如下：

1$（"#wrapper"）.children（'#main'）.children（'p'）.css（"color","orange"）;

2$（"#wrapper"）.children（）.children（'p'）.css（"color","orange"）;

3$（"#main"）.children（'p'）.css（"color","orange"）;

利用children方法可以选择树中位于其他元素下的某个元素。

如果我们传递给它一个选择器，该方法将仅选择我们需要的元素，如果不是这样，父元素的所有子元素都将被选中。

让我们看看第一个和第二个选择器直接的区别。

唯一的不同之处在于：

第二个选择器中我们什么也没有指定，所有每一个子元素都会被选中。

此处的关键在于：

在上图中wrapper这个div元素下除main之外并没有其他子元素，所以我们得到的结果是一样的。

添加元素

现在我们在树中添加元素。

这个元素可以是段落、div元素、表格等等，假设我们想要添加一个列表，如下：

4

5

• Dog

6

• Cat

7

• Frog

8

只是一些字符串，所以我们可以在JavaScript代码中这样写：

9varlist="

\n"

10+"

• Dog
\n"

11+"

• Cat
\n"

12+"

• Frog
\n"

13"

现在我们要在html中某个地方添加字符串。

比如，在之前我们选择的p元素之后。

最后我们可以输入完整的代码，如下所示：

14$（document）.ready（function（）{

15varlist="

\n"

16+"

• Dog
\n"

17+"

• Cat
\n"

18+"

• Frog
\n"

19"

20

21$（"#wrapper"）.children（'#main'）.append（list）;

22}）;

字面上我们将字符串附加到HTML中的

移除元素

移除元素并不难，当我们谈到对树进行转换时，在这一过程一定会涉及元素的移除。

下面我们来移除之前选择的那个段落（注意我们可以再次使用选择器）。

23$（"#wrapper"）.children（'#main'）.children（'p'）.remove（）;

在这一代码中，位于选中元素之中的所有元素都将被移除，所以必须十分小心。

如果div下有一个列表，当我们移除该div时，div和列表都会被移除。

表面之下

jQuery类似只露出一角的冰山，在水面之下还有更多内容。

这一小结中，我们将向你展示某些表面之下的内容。

绑定（Bind）

绑定是一种方法，利用它，我们可以将一个事件（鼠标点击、悬置等等）与一个方法连接起来。

这有点类似：

当用户单击此处时，调用该方法。

听起来很熟悉，对吗？

没错，我们经常这样做。

看看以下示例：

24$（document）.ready（function（）{

25$（"#id"）.click（function（）{

26alert（"Thatclickwasamazing!

"）;

27}）;

28}）;

上文中click（）方法在以下代码相对于wrapper：

29$（document）.ready（function（）{

30$（'#id'）.bind（'click',function（）{

31alert（"Thatclickwasamazing!

"）;

32}）;

33}）;

此外，使用unbind（）方法可以解除事件与元素的连接。

定义你自己的jQuery方法

目前我们看到了一些方法，如click、bind、hover等等，但是我们如何定义自己的方法？

如何使用$（’selector’）.mymethod（）这样的语句调用这些方法？

以下代码提供了这些问题的解决方案。

定义一个方法，显示一个元素的值。

1//ThenamewillbealertVal

2jQuery.fn.alertVal=function（）{

3varelement=$（this[0]）;//That'sourelement

4if（element.val（））

5alert（element.val（））;//That'sourelement'svalue

6};

7//Thisisthewaywecanuseit

8$（"selector"）.alertVal（）;

回调（callback）是常用的解决方案

使用回调，我们可以在其他方法完成时执行某个方法。

你可以将回调方法看做对别人说：

但你做完时，给我电话，因为我要做我的那份工作。

不过现在的问题是：

如何使用回调？

9$（document）.ready（function（）{

10myCallBack=function（）{

11alert（"I'macallbackalert."）;

12}

13//WhenthegetfinishesthenmyCallBackisexecuted

14$.get（'myhtmlpage.html',myCallBack）;

15}）;

注意：

如果该函数包含参数，我们必须使用以下方式：

16$（document）.ready（function（）{

17$.get（'myhtmlpage.html',function（）{

18myCallBack（param1,param2）;

19}）;

20}）;

结论

本文只是介绍一些技巧，能够让你更好的理解有关jQuery的知识。

当然，还有许多技巧比本文所讲的内容更为高级，但你可以将本文看做一名优秀的jQuery开发者迈出的第一步。

jQuery另类视角：

动态扩展对象

大家都知道Javascript是动态语言，它对动态的支持是与身俱来的，jQuery作为Javascript最为流行的框架之一，同样有着这样的特性。

文章将从个人的角度出发，研究jQuery的开发者是如何设计出access函数，并让它去支持动态扩展对象。

51CTO推荐专题：

jQuery从入门到精通

例如：

有一个employee对象：

1functionemployee（）{

2this.e_id=0;

3this.e_name="";

4}

现在需要为它动态的新增"age"属性和"toString（）"方法：

5varempObj=newemployee（）;

6empObj["age"]=20;

7empObj["toString"]=function（）{returnthis.e_id.toString（）+this.e_name;};

一行简单的代码就承担了这项工作，这是Javascript内置支持的，不过往往我们需要在这基础上支持一定程度的扩展，所以会将这一行简单的代码抽成一个方法：

8functiondym_setprop（obj,key,value）{

9if（obj&&key）{

10obj[key]=value;

11}

12}

看到这里，我们先让思路做个跳转，跳到C#中的employee对象，如下：

在面向对象的编程中，对外使用的都是属性（Get/Set），那么想想如何将这种方式签入到Javascript中，现在让我们跳回dym_setprop函数内，既在dym_setprop方法中不能使用obj[key]=value的直接赋值方式，而要支持Set。

13functiondym_setprop（obj,key,value,fn）{

14if（obj&&key）{

15fn（obj,key,value）;

16}

17}

参数fn，在dym_setprop中不直接操作任何对象，使用函数fn来代替相应的操作代码，则在这里除了支持Set外，还有其他很大的自由空间。

让我们继续深入dym_setprop方法，现在我们把关注点放在参数value上，大家都清楚value可以是值类型，也可以是函数，对于值类型来说，不用考虑其他东西直接赋值就可以了，对于函数来说就没有这么简单，它支持两种操作：

1、直接将函数赋给新扩展的属性；

2、将函数执行的返回值赋给新扩展的属性。

18functiondym_setprop（obj,key,value,fn,exec,pass）{

19if（obj&&key）{

20vartemp=value;

21if（exec）{

22temp=value.call（obj,key,fn（obj,key））;

23}

24fn（obj,key,temp,pass）;

25}

26}

在这段代码中参数exec充当了上面两种操作选择的角色，参数pass是一个额外的执行参数。

除此之外，大家也许会对fn有些疑惑，因为上面有两个地方使用了，区别只有参数个数不同，fn到底代表什么？

！

再次想下C#中的属性，它是有Get/Set的，那么在这里fn（obj,key）就相当与Get，而fn（obj,key,temp,pass）就相当与Set。

例如：

看下面的代码，对于fn的定义与使用，

27employee.AccessProp=function（obj,key,value）{

28if（value）{

29obj[key]=value;

30}

31else{

32returnobj[key];

33}

34}

35dym_setprop（empObj,"age",function（key,value）{returnvalue+10;},employee.AccessProp,true）;

看了这么多，也许大家觉得郁闷，简单的动态扩展对象程序为什么要以这种方式来编写，有种没事找事的感觉，其实不然，如果你只想做动态扩展对象，那么我建议你别采用上述dym_setprop的思路，但是如果你想从更加抽象的角度上思考，将dym_setprop内的程序作为一个流程执行的模板，那么这是一个不错的方式，因为dym_setprop内部不承担任何具体代码（obj[key]=value或obj[key]）的执行，它都通过函数fn来代替，这样对于具体执行来说有完全自由的空间。

理解完上述的思路后，让我们进入本文的核心，jQuery是如何实现动态扩展对象的？

access函数，

36functionaccess（elems,key,value,exec,fn,pass）{

37varlength=elems.length;

38//Settingmanyattributes

39if（typeofkey==="object"）{

40for（varkinkey）{

41access（elems,k,key[k],exec,fn,value）;

42}

43returnelems;

44}

45//Settingoneattribute

46if（value!

==undefined）{

47//Optionally,functionvaluesgetexecutedifexecistrue

48exec=!

pass&&exec&&jQuery.isFunction（value）;

49for（vari=0;i

50fn（elems[i],key,exec?

value.call（elems[i],i,fn（elems[i],key））:

value,pass）;

51}

52returnelems;

53}

54//Gettinganattribute

55returnlength?

fn（elems[0],key）:

null;

56}

仔细看完access函数的代码，你一定发现它和dym_setprop的相试度很高，它只是多了一段代码：

57if（typeofkey==="object"）{

58for（varkinkey）{

59access（elems,k,key[k],exec,fn,value）;

60}

61returnelems;

62}

很容易看出它其实就是用来支持object对象的动态扩展属性。

具体的执行流程通过下图来展示：

到这里已经写完了，本文试着从自己的角度上去猜测jQuery的开发者是如何设计出access函数的，让它去支持动态扩展对象，并且说明了access的执行流程。

其实对于我的这种猜测不一定正确，不过不妨碍我对于jQuery的研究。

学习jQuery必须知道的几种常用方法

jQuery事件处理

ready（fn）

代码：

$（document）.ready（function（）{

//Yourcodehere...

}）；

作用：

它可以极大地提高web应用程序的响应速度。

通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。

bind（type,[data],fn）

代码：

$（"p"）.bind（"click",function（）{

alert（$（this）.text（））;

}）;

作用：

为每一个匹配元素的特定事件（像click）绑定一个事件处理器函数。

起到事件监听的作用。

toggle（fn,fn）

代码：

$（"td"）.toggle（

function（）{

$（this）.addClass（"selected"）;

},

function（）{

$（this）.removeClass（"selected"）;

}

）;

作用：

每次点击时切换要调用的函数。

如果点击了一个匹配的元素，则触发指定的第一个函数，当再次点击同一元素时，则触发指定的第二个函数。

挺有趣的一个函数，在动态实现某些功能的时候可能会用到。

（像click（）,focus（）,keydown（）这样的事件这里就不提了，那些都是开发中比较常用到的。

）

jQuery外观效果

addClass（class）和removeClass（class）

代码：

$（".stripetr"）.mouseover（function（）{

$（this）.addClass（"over"）;}）.mouseout（function（）{