走过平凡人生、留下平凡足迹 注册 | 登陆
浏览模式: 标准 | 列表2008年03月的文章

PHP的面向对象编程-开发大型PHP项目的方法(四)

PHP的高级OOP技术
  在看过基本的OOP概念后,我就可以向你展示更高级的技术:

序列化(Serializing)
  PHP不支持永久对象,在OOP中永久对象是可以在多个应用的引用中保持状态和功能的对象,这意味着拥
有将对象保存到一个文件或数据库中的能力,而且可以在以后装入对象。这就是所谓的序列化机制。PHP 拥
有序列化方法,它可以通过对象进行调用,序列化方法可以返回对象的字符串表示。然而,序列化只保存了
对象的成员数据而不包话方法。

  在PHP4中,如果你将对象序列化到字符串$s中,然后释放对象,接着反序列化对象到$obj,你可以继续
使用对象的方法!我不建议这样去做,因为(a)文档中没有保证这种行为在以后的版本中仍然可以使用。(b)
这个可能导致一种误解,在你把一个序列化后的版本保存到磁盘并退出脚本时。当以后运行这个脚本时,你
不能期待着在反序列化一个对象时,对象的方法也会在那里,因为字符串表示根本就不包括方法。

  总而言之,PHP 进行序列化对于保存对象的成员变量非常有用。(你也可以将相关数组和数组序列化到
一个文件中)。

例子 :

-----------------------------------------------------
<?php

$obj=new Classfoo();
$str=serialize($obj);

//保存$str到磁盘上


//几个月以后


//从磁盘中装入str

$obj2=unserialize($str)

?>---------------------------------------------------
  你恢复了成员数据,但是不包括方法(根据文档所说)。这导致了只能通过类似于使用$obj2->x来存取
成员变量(你没有别的方法!)的唯一办法,所以不要在家里试它。

  有一些办法可以解决这个问题,我把它留着,因为对这篇简洁的文章来说,他们太不好。

Tags: ajax, javascript, php, jquery

PHP的面向对象编程-开发大型PHP项目的方法(三)

重载(与覆盖不同)在PHP中不支持。在OOP中,你可以重载一个方法来实现两个或重多的方法具有相同
的名字,但是有不同数量或类型的参数(这要看语言)。PHP 是一种松散类型的语言,所以通过类型重载不
起作用,然而通过参数的个数不同来重载也不起作用。

  有时在OOP中重载构造函数非常好,这样你可以通过不同的方法创建对象(传递不同数量的参数)。在PHP
中实现它的技巧是:

-----------------------------------------------------
<?php

class Myclass {
function Myclass() {
$name="Myclass".func_num_args();
$this->$name();

//注意$this->name()一般是错误的,但是在这里$name是一个将被调用方法的名字
}
function Myclass1($x) {
code;
}
function Myclass2($x,$y) {
code;
}
}

?>---------------------------------------------------
  通过在类中的额外的处理,使用这个类对用户是透明的:

  $obj1=new Myclass('1'); //将调用Myclass1

  $obj2=new Myclass('1','2'); //将调用Myclass2

  有时这个非常好用。

多态
  多态是对象的一种能力,它可以在运行时刻根据传递的对象参数,决定调用哪一个对象的方法。例如,
如果你有一个figure的类,它定义了一个draw的方法。并且派生了circle和rectangle 类,在派生类中你覆
盖了draw方法,你可能还有一个函数,它希望使用一个参数x,并且可以调用$x->draw() 。如果你有多态性,
调用哪个draw方法就依赖于你传递给这个函数的对象类型。

  多态性在象PHP这样的解释语言(想象一下一个C++编译器生成这样的代码,你应该调用哪一个方法?你
也不知道你拥有的对象是什么类型的,好,这不是重点)是非常容易和自然的。所以PHP当然支持多态性。

-----------------------------------------------------
<?php

function niceDrawing($x) {

//假设这是Board类的一个方法
$x->draw();
}

$obj=new Circle(3,187);
$obj2=new Rectangle(4,5);

$board->niceDrawing($obj);
//将调用Circle的draw方法

$board->niceDrawing($obj2);
//将调用Rectangle的draw方法

?>---------------------------------------------------

用PHP进行面向对象编程
  一些"纯化论者(purists)"可能会说PHP不是一个真正的面向对象的语言,这是事实。PHP 是一个混合型
语言,你可以使用OOP,也可以使用传统的过程化编程。然而,对于大型项目,你可能想/需要在PHP 中使用
纯的OOP去声明类,而且在你的项目只用对象和类。

  随着项目越来越大,使用OOP可能会有帮助,OOP代码很容易维护,容易理解和重用。这些就是软件工程
的基础。在基于web的项目中应用这些概念就成为将来网站成功的关键。

Tags: ajax, javascript, php, jquery

PHP的面向对象编程-开发大型PHP项目的方法(二)

"Another"类的对象现在拥有了父类(Something)的全部的数据成员及方法,而且还加上了自已的数据成 员和方法。

你可以使用
$obj2=new Something;
$obj2->setX(6);
$obj2->setY(7);

PHP现在还不支持多重继承,所以你不能从两个或两个以上类派生出新的类来。

你可以在派生类中重定义一个方法,如果我们在"Another"类中重定义了getX方法,我们就不能使 用"Something"中的getX方法了。如果你在派生类中声明了一个与基派同名的数据成员,那么当你处理它时, 它将“隐藏”基类的数据成员。

你可以在你的类中定义构造函数。构造函数是一个与类名同名的方法,当你创建一个类的对象时会被调 用,例如:
-----------------------------------------------------
<?php

class Something {
var $x;

function Something($y) {
$this->x=$y;
}

function setX($v) {
$this->x=$v;
}

function getX() {
return $this->x;
}
}

?>---------------------------------------------------
  所以你可以创建一个对象,通过:

  $obj=new Something(6);

  构造函数会自动地把6赋值给数据变量x。构造函数和方法都是普通的PHP函数,所以你可以使用缺省参数。

  function Something($x="3",$y="5")

  接着:

  $obj=new Something(); // x=3 and y=5
  $obj=new Something(8); // x=8 and y=5
  $obj=new Something(8,9); // x=8 and y=9

  缺省参数使用C++的方式,所以你不能忽略Y的值,而给X一个缺省参数,参数是从左到右赋值的,如果
传入的参数少于要求的参数时,其作的将使用缺省参数。

  当一个派生类的对象被创建时,只有它的构造函数被调用,父类的构造函数没被调用,如果你想调用基
类的构造函数,你必须要在派生类的构造函数中显示调用。可以这样做是因为在派生类中所有父类的方法都
是可用的。

-----------------------------------------------------
<?php

function Another() {
$this->y=5;
$this->Something();
//显示调用基类构造函数
}

?>---------------------------------------------------
  OOP的一个很好的机制是使用抽象类。抽象类是不能实例化,只能提供给派生类一个接口。设计者通常
使用抽象类来强迫程序员从基类派生,这样可以确保新的类包含一些期待的功能。在PHP中没有标准的方法,
但是:

  如果你需要这个特性,可以通过定义基类,并在它的构造函数后加上"die" 的调用,这样就可以保证基
类是不可实例化的,现在在每一个方法(接口)后面加上"die" 语句,所以,如果一个程序员在派生类中没有
覆盖方法,将引发一个错误。而且因为PHP 是无类型的,你可能需要确认一个对象是来自于你的基类的派生
类,那么在基类中增加一个方法来实义类的身份(返回某种标识id),并且在你接收到一个对象参数时校验
这个值。当然,如果一个邪恶不好的程序员在派生类中覆盖了这个方法,这种方法就不起作用了,不过一般
问题多发现在懒惰的程序员身上,而不是邪恶的程序员。

  当然,能够让基类对程序员无法看到是很好的,只要将接口打印出来做他们的工作就可以了。

  在PHP中没有析构函数。

Tags: ajax, javascript, php, jquery

PHP的面向对象编程-开发大型PHP项目的方法(一)

面向对象编程的概念:
不同的作者之间说法可能不一样,但是一个OOP语言必须有以下几方面:

抽象数据类型和信息封装
继承
多态

在PHP中是通过类来完成封装的:

---------------------------------------------------<?php
class Something {
// 在OOP类中,通常第一个字符为大写
var $x;
function setX($v) {
// 方法开始为小写单词,然后使用大写字母来分隔单词,例如getValueOfArea()
$this->x=$v;
}
function getX() {
return $this->x;
}
}
?>---------------------------------------------------
  当然你可以按自已的喜好进行定义,但最好保持一种标准,这样会更有效。

  数据成员在类中使用"var"声明来定义,在给数据成员赋值之前,它们是没有类型的。一个数据成员可
以是一个整数,一个数组,一个相关数组(associative array)或者是一个对象。

  方法在类中被定义成函数形式,在方法中访问类成员变量时,你应该使用$this->name,否则对一个方
法来说,它只能是局部变量。

  使用new操作符来创建一个对象:

  $obj=new Something;

  然后你可以使用成员函数通过:

  $obj->setX(5);
  $see=$obj->getX();

  在这个例子中,setX成员函数将5赋值给对象的成员变量x(不是类的),然后getX返回它的值5。

  你可以象:$obj->x=6那样通过类引用方式来存取数据成员,这不是一个很好的OOP习惯。我强烈建议通
过方法来存取成员变量。如果你把成员变量看成是不可处理的,并且只通过对象句柄来使用方法,你将是一
个好的OOP程序员。不幸的是,PHP不支持声明私有成员变量,所以不良代码在PHP中也是允许的。

  继承在PHP中很容易实现,只要使用extend关键字。



-----------------------------------------------------
<?php

class Another extends Something {
var $y;
function setY($v) {
$this->y=$v;
}
function getY() {
return $this->y;
}
}

?>---------------------------------------------------

Tags: ajax, javascript, php, jquery

JQuery 中 is(':visible') 解析及用法

Boolean布尔值is( String  expr )用一个表达式来检查当前选择的元素集合,如果其中至少有一个元素符合这个给定的表达式就返回true。

 

JavaScript代码
  1. $(document).ready(function() {   
  2.         $('#faq').find('dd').hide().end().find('dt').click(function() {//end()为结束前面处理函数,返回到最初的元素   
  3.         //解释:用end()结束find(dd)的hide(),并将find(dt)作用到最初的#fap上   
  4.          var answer = $(this).next();//next()为此元素的下一个元素,可以再加上.next()表示下下一个元素,以此类推   
  5.          if (answer.is(':visible')) {//如果ANSWER 为可见,:visible是可见的意思,相关用法还有:hidden(隐藏),:first(第一个),:last(最后一个)   
  6.              answer.slideUp();//隐藏   
  7.          } else {   
  8.              answer.slideDown();//显示   
  9.          }   
  10.      });   
  11. });  

answer.is(':visible')是指可见的answer元素.
如果可见就调用answer.slideUp();使之隐藏.
else则是不可见的元素 调用answer.slideDown();使之显示.
类似的写法还有answer.is(':first')answer.is(':last')之类的,类似于CSS的伪类a:hover

 

 

 

Tags: ajax, javascript, php, jquery

MySQL Left Join,Right Join

在SQL标准中规划的(Join)联结大致分为下面四种:

1. 内联结:将两个表中存在联结关系的字段符合联结关系的那些记录形成记录集的联结。

2. 外联结:分为外左联结和外右联结。

左联结A、B表的意思就是将表A中的全部记录和表B中联结的字段与表A的联结字段符合联结条件的那些记录形成的记录集的联结,这里注意的是最后出来的记录集会包括表A的全部记录。

右联结A、B表的结果和左联结B、A的结果是一样的,也就是说:

Select A.name B.name From A Left Join B On A.id=B.id

和Select A.name B.name From B Right Join A on B.id=A.id执行后的结果是一样的。

3.全联结:将两个表中存在联结关系的字段的所有记录取出形成记录集的联结(这个不需要记忆,只要是查询中提到了的表的字段都会取出,无论是否符合联结条件,因此意义不大)。

4.无联结:不用解释了吧,就是没有使用联结功能呗,也有自联结的说法。

 

这里我有个比较简便的记忆方法,内外联结的区别是内联结将去除所有不符合条件的记录,而外联结则保留其中部分。外左联结与外右联结的区别在于如果用A左联结B则A中所有记录都会保留在结果中,此时B中只有符合联结条件的记录,而右联结相反,这样也就不会混淆了。其实大家回忆高等教育出版社出版的《数据库系统概论》书中讲到关系代数那章(就是将笛卡儿积和投影那章)的内容,相信不难理解这些联结功能的内涵。

MySQL支持Select和某些Update和Delete情况下的Join语法,具体语法上的细节有:

table_references:

table_reference [, table_reference] …

table_reference:

table_factor

| join_table

table_factor:

tbl_name [[AS] alias]

[{USE|IGNORE|FORCE} INDEX (key_list)]

| ( table_references )

| { OJ table_reference LEFT OUTER JOIN table_reference

ON conditional_expr }

join_table:

table_reference [INNER | CROSS] JOIN table_factor [join_condition]

| table_reference STRAIGHT_JOIN table_factor

| table_reference STRAIGHT_JOIN table_factor ON condition

| table_reference LEFT [OUTER] JOIN table_reference join_condition

| table_reference NATURAL [LEFT [OUTER]] JOIN table_factor

| table_reference RIGHT [OUTER] JOIN table_reference join_condition

| table_reference NATURAL [RIGHT [OUTER]] JOIN table_factor

join_condition:

ON conditional_expr | USING (column_list)

上面的用法摘自权威资料,不过大家看了是否有点晕呢?呵呵,应该问题主要还在于table_reference是什么,table_factor又是什么?这里的table_reference其实就是表的引用的意思,因为在MySQL看来,联结就是一种对表的引用,因此把需要联结的表定义为table_reference,同时在SQL Standard中也是如此看待的。而table_factor则是MySQL对这个引用的功能上的增强和扩充,使得引用的表可以是括号内的一系列表,如下面例子中的JOIN后面括号:

SELECT * FROM t1 LEFT JOIN (t2, t3, t4) ON (t2.a=t1.a AND t3.b=t1.b AND t4.c=t1.c)

这个语句的执行结果和下面语句其实是一样的:

SELECT * FROM t1 LEFT JOIN (t2 CROSS JOIN t3 CROSS JOIN t4)

ON (t2.a=t1.a AND t3.b=t1.b AND t4.c=t1.c)

这两个例子不仅让我们了解了MySQL中table_factor和table_reference含义,同时能理解一点CROSS JOIN的用法,我要补充的是在MySQL现有版本中CROSS JOIN的作用和INNER JOIN是一样的(虽然在SQL Standard中是不一样的,然而在MySQL中他们的区别仅仅是INNER JOIN需要附加ON参数的语句,而CROSS JOIN不需要)。

既然说到了ON语句,那就解释一下吧,ON语句其实和WHERE语句功能大致相当,只是这里的ON语句是专门针对联结表的,ON语句后面的条件的要求和书写方式和WHERE语句的要求是一样的,大家基本上可以把ON当作WHERE用。

大家也许也看到了OJ table_reference LEFT OUTER JOIN table_reference这个句子,这不是MySQL的标准写法,只是为了和ODBC的SQL语法兼容而设定的,我很少用,Java的人更是不会用,所以也不多解释了。

Tags: php, mysql

实例讲解MySQL联合查询

实例讲解MySQL联合查询.那下面就具体讲讲简单的JOIN的用法了。首先我们假设有2个表A和B,他们的表结构和字段分别为:

表A:

ID Name

 

1 Tim

 

2 Jimmy

 

3 John

 

4 Tom

表B:

ID Hobby

 

1 Football

 

2 Basketball

 

2 Tennis

 

4 Soccer

 

1.  内联结:
Select A.Name B.Hobby from A, B where A.id = B.id,这是隐式的内联结,查询的结果是:

 

Name Hobby

 

Tim Football

 

Jimmy Basketball

 

Jimmy Tennis

 

Tom Soccer

它的作用和 Select A.Name from A INNER JOIN B ON A.id = B.id是一样的。这里的INNER JOIN换成CROSS JOIN也是可以的。

2.  外左联结
Select A.Name from A Left JOIN B ON A.id = B.id,典型的外左联结,这样查询得到的结果将会是保留所有A表中联结字段的记录,若无与其相对应的B表中的字段记录则留空,结果如下:

Name Hobby

 

Tim Football

 

Jimmy Basketball,Tennis

 

John  
Tom Soccer

所以从上面结果看出,因为A表中的John记录的ID没有在B表中有对应ID,因此为空,但Name栏仍有John记录。
3.  外右联结
如果把上面查询改成外右联结:Select A.Name from A Right JOIN B ON A.id = B.id,则结果将会是:

Name Hobby

 

Tim Football

 

Jimmy Basketball

 

Jimmy Tennis

 

Tom Soccer

这样的结果都是我们可以从外左联结的结果中猜到的了。
说到这里大家是否对联结查询了解多了?这个原本看来高深的概念一下子就理解了,恍然大悟了吧(呵呵,开玩笑了)?最后给大家讲讲MySQL联结查询中的某些参数的作用:

1.USING (column_list):其作用是为了方便书写联结的多对应关系,大部分情况下USING语句可以用ON语句来代替,如下面例子:

a LEFT JOIN b USING (c1,c2,c3),其作用相当于下面语句
a LEFT JOIN b ON a.c1=b.c1 AND a.c2=b.c2 AND a.c3=b.c3

只是用ON来代替会书写比较麻烦而已。

2.NATURAL [LEFT] JOIN:这个句子的作用相当于INNER JOIN,或者是在USING子句中包含了联结的表中所有字段的Left JOIN(左联结)。

3.STRAIGHT_JOIN:由于默认情况下MySQL在进行表的联结的时候会先读入左表,当使用了这个参数后MySQL将会先读入右表,这是个MySQL的内置优化参数,大家应该在特定情况下使用,譬如已经确认右表中的记录数量少,在筛选后能大大提高查询速度。

最后要说的就是,在MySQL5.0以后,运算顺序得到了重视,所以对多表的联结查询可能会错误以子联结查询的方式进行。譬如你需要进行多表联结,因此你输入了下面的联结查询:

SELECT t1.id,t2.id,t3.id
    FROM t1,t2
    LEFT JOIN t3 ON (t3.id=t1.id)
    WHERE t1.id=t2.id;

但是MySQL并不是这样执行的,其后台的真正执行方式是下面的语句:

SELECT t1.id,t2.id,t3.id
    FROM t1,(  t2 LEFT JOIN t3 ON (t3.id=t1.id)  )
    WHERE t1.id=t2.id;

这并不是我们想要的效果,所以我们需要这样输入:

SELECT t1.id,t2.id,t3.id
    FROM (t1,t2)
    LEFT JOIN t3 ON (t3.id=t1.id)
    WHERE t1.id=t2.id;

在这里括号是相当重要的,因此以后在写这样的查询的时候我们不要忘记了多写几个括号,至少这样能避免很多错误(因为这样的错误是很难被开发人员发现的)。

Tags: mysql, php, 教程

jQuery起点教程---使用选择器和事件

jQuery起点教程之使用选择器和事件
jQuery提供两种方式来选择html的elements:


  • 第一种是用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器(如:$("div > ul a"));
  • 第二种是用jQuery对象的几个methods(方法)。这两种方式还可以联合起来混合使用。



为了测试这些选择器,我们来试着在我们starterkit.html中选择并修改第一个ordered list.

一开始,我们需要选择这个list本身,这个list有一个ID叫“orderedlist”,通常的javascript写法是document.getElementById("orderedlist").在jQuery中,我们这样做:

$(document).ready(function() {
        $("#orderedlist").addClass("red");
});

这里将starterkit中的一个CSS样式red附加到了orderedlist上(译者Keel注:参考测试包中的css目录下的core.css,其中定义了red样式)。因此,在你刷新了starterkit.html后,你将会看到第一个有序列表(ordered list )背景色变成了红色,而第二个有序列表没有变化.
现在,让我们添加一些新的样式到list的子节点.

$(document).ready(function() {
        $("#orderedlist > li").addClass("blue");
});

这样,所有orderedlist中的li都附加了样式"blue"。

现在我们再做个复杂一点的,当把鼠标放在li对象上面和移开时进行样式切换,但只在list的最后一个element上生效。

$(document).ready(function() {
        $("#orderedlist li:last").hover(function() {
                $(this).addClass("green");
        }, function() {
                $(this).removeClass("green");
        });
});

还有大量的类似的CSS和XPath例子,更多的例子和列表可以在这里找到。(译者Keel注:入门看此文,修行在个人,要想在入门之后懂更多,所以这段话的几个链接迟早是要必看的!)

每一个onXXX事件都有效,如onclick,onchange,onsubmit等,都有jQuery等价表示方法(译者Keel注:jQuery不喜欢onXXX,所以都改成了XXX,去掉了on)。其他的一些事件,如ready和hover,也提供了相应的方法。

你可以在Visual jQuery找到全部的事件列表,在Events栏目下.

用这些选择器和事件你已经可以做很多的事情了,但这里有一个更强的好东东!

$(document).ready(function() {
        $("#orderedlist").find("li").each(function(i) {
                $(this).html( $(this).html() + " BAM! " + i );
        });
});

  • find() 让你在已经选择的element中作条件查找,因此 $("#orderedlist).find("li") 就像 $("#orderedlist li").
  • each()一样迭代了所有的li,并可以在此基础上作更多的处理。 大部分的方法,如addClass(), 都可以用它们自己的 each() 。
  • 在这个例子中, html()用来获取每个li的html文本, 追加一些文字,并将之设置为li的html文本。(译者Keel注:从这个例子可以看到.html()方法是获取对象的html代码,而.html('xxx')是设置'xxx'为对象的html代码)



另一个经常碰到的任务是在没有被jQuery覆盖的DOM元素上call一些方法,想像一个在你用AJAX方式成功提交后的reset:

$(document).ready(function() {
        // use this to reset a single form
        $("#reset").click(function() {
                $("#form")[0].reset();
        });
});

(译者Keel注:这里作者将form的id也写成了form,源文件有<form id="form">,这是非常不好的写法,你可以将这个ID改成form1或者testForm,然后用$("#form1")或者$("#testForm")来表示它,再进行测试。)

这个代码选择了所有ID为"form"的元素,并在其第一个上call了一个reset()。如果你有一个以上的form,你可以这样做:

$(document).ready(function() {
        // use this to reset several forms at once
        $("#reset").click(function() {
                $("form").each(function() {
                        this.reset();
                });
        });
});

(译者Keel注:请注意一定要亲自将这些代码写在custom.js中并在starterkit.html上测试效果才能有所体会!必要时要观察starterkit.html的html代码)

这样你在点击Reset链接后,就选择了文档中所有的form元素,并对它们都执行了一次reset()。

还有一个你可能要面对的问题是不希望某些特定的元素被选择。jQuery 提供了filter() 和not() 方法来解决这个问题。 filter()以过滤表达式来减少不符合的被选择项, not()则用来取消所有符合过滤表达式的被选择项. 考虑一个无序的list,你想要选择所有的没有ul子元素的li元素。

$(document).ready(function() {
        $("li").not("[ul]").css("border", "1px solid black");
});

这个代码选择了所有的li元素,然后去除了没有ul子元素的li元素。刷新浏览器后,所有的li元素都有了一个边框,只有ul子元素的那个li元素例外。

(译者Keel注:请注意体会方便之极的css()方法,并再次提醒请务必实际测试观察效果,比方说换个CSS样式呢?再加一个CSS样式呢?像这样:$("li").not("[ul]").css("border", "1px solid black").css("color","red");)

上面代码中的[expression] 语法是从XPath而来,可以在子元素和属性(elements and attributes)上用作过滤器,比如你可能想选择所有的带有name属性的链接:

$(document).ready(function() {
        $("a[@name]").background("#eee");
});

这个代码给所有带有name属性的链接加了一个背景色。(译者Keel注:这个颜色太不明显了,建议写成$("a[@name]").background("red");)

更常见的情况是以name来选择链接,你可能需要选择一个有特点href属性的链接,这在不同的浏览器下对href的理解可能会不一致,所以我们的部分匹配("*=")的方式来代替完全匹配("="):

$(document).ready(function() {
        $("a[@href*=/content/gallery]").click(function() {
                // do something with all links that point somewhere to /content/gallery
        });
});

到现在为止,选择器都用来选择子元素或者是过滤元素。另外还有一种情况是选择上一个或者下一个元素,比如一个FAQ的页面,答案首先会隐藏,当问题点击时,答案显示出来,jQuery代码如下:

$(document).ready(function() {
        $('#faq').find('dd').hide().end().find('dt').click(function() {
         var answer = $(this).next();
         if (answer.is(':visible')) {
             answer.slideUp();
         } else {
             answer.slideDown();
         }
     });
});

这里我们用了一些链式表达法来减少代码量,而且看上去更直观更容易理解。像'#faq' 只选择了一次,利用end()方法,第一次find()方法会结束(undone),所以我们可以接着在后面继续find('dt'),而不需要再写$('#faq').find('dt')。

在点击事件中的,我们用 $(this).next() 来找到dt下面紧接的一个dd元素,这让我们可以快速地选择在被点击问题下面的答案。

(译者Keel注:这个例子真是太酷了,FAQ中的答案可以收缩!从利用next()的思路到实现这些效果都有很多地方需要我们消化,注意 if (answer.is(':visible'))用法,注意answer.slideUp();不懂的地方赶紧查我在最开始提到的两个必看API文档)

除了选择同级别的元素外,你也可以选择父级的元素。可能你想在用户鼠标移到文章某段的某个链接时,它的父级元素--也就是文章的这一段突出显示,试试这个:

$(document).ready(function() {
        $("a").hover(function() {
                $(this).parents("p").addClass("highlight");
        }, function() {
                $(this).parents("p").removeClass("highlight");
        });
});

测试效果可以看到,移到文章某段的链接时,它所在的段全用上highlight样式,移走之后又恢复原样。

(译者Keel注:highlight是core.css中定义的样式,你也可以改变它,注意这里有第二个function()这是hover方法的特点,请在API文档中查阅hover,上面也有例子说明)
在我们继续之前我们先来看看这一步: jQuery会让代码变得更短从而更容易理解和维护,下面是$(document).ready(callback)的缩写法:

$(function() {
        // code to execute when the DOM is ready
});

应用到我们的Hello world例子中,可以这样:

$(function() {
        $("a").click(function() {
                alert("Hello world!");
        });
});

现在,我们手上有了这些基础的知识,我们可以更进一步的探索其它方面的东西,就从AJAX开始!

Tags: ajax, javascript, php, jquery