专门从网上收集各种有关blogger设计的文章

2007年12月28日星期五

是谁害死了小布托?

是谁害死了小布托?
如果透过种种表象,我们最终可以发现是美国。
美国从最开始的阿富汗战争培养(资助)了塔利班,为了对付当时的苏联。苏联解体,塔利班成了麻烦,而美国不是采到政治手段化解,坚持以武力解决,从后来的阿富汗战争到伊拉克战争,美国穷兵黩武,但塔利班和基地组织没有得到削弱,反而加强了。为了打击恐怖组织,美国向巴基斯坦施压,不考虑巴国的现状,甚至威胁如果巴基斯坦不配合,要把巴基斯坦炸回石器时代,还不断叫嚣着要亲自派美军进入巴境内打击恐怖组织,激起了巴国人民普遍的反感和反对,巴国人民对美国是憎恶的。
在巴大选来临之际,美国又用其扶植的小布托与巴总统、陆军参谋长分权,逼穆脱下军装,名曰增强民主,其实就是扶植亲美势力,以期保证美国的利益。
小布托是一个悲情的人物,投入美国的怀抱,却成了美国利益的牺牲品。

是谁害死了小布托?

是谁害死了小布托?
如果透过种种表象,我们最终可以发现是美国。
美国从最开始的阿富汗战争培养了塔利班,为了对付当时的苏联。苏联解体,塔利班成了麻烦,而美国不是采到政治手段化解,坚持以武力解决,从后来的阿富汗战争到伊拉克战争,塔利班没有得到削弱,反而加强了。为了打击恐怖组织,美国向巴基斯坦施压,不考虑巴国的现状,甚至威胁如果巴基斯坦不配合,要把巴基斯坦炸回石器时代,还不断叫嚣着要亲自派美军进入巴境内打击恐怖组织,激起了巴国人民普遍的反感和反对,巴国人民对美国是憎恶的。
现在又扶持了亲美的小布托与巴总统、陆军参谋长分权,名曰民主,其实就是扶植亲美势力,以期保证美国的利益。
小布托是一个悲情的人物,投入美国的怀抱,却成了美国利益的牺牲品。

2007年12月27日星期四

如何看待巴基斯坦这个国家?

吉戈/最近巴基斯坦的国内政治引发了国际社会的极大关注,局势复杂多变。如何看待巴基斯坦这个国家,我认为应从几个侧面解剖。
巴基斯坦像六个伊斯兰教国家:像中东的埃及,有一位带有军人背景的总统,埃及总统穆巴拉克过去是军人,而巴基斯坦总统穆沙拉夫不久前还是四星上将和陆军参谋长;巴基斯坦像土耳其,有比较成熟的世俗社会,军队在国家政治中有比较大的影响力和权力;巴基斯坦像伊朗,有比较强大的宗教极端势力和宗教政党,而且宗教政党在国家中的地位也很特殊;巴基斯坦像伊拉克,历来有什叶派和逊尼派的伊斯兰教派冲突;巴基斯坦像阿富汗,有非常强大的部落武装和部落矛盾;巴基斯坦还像沙特阿拉伯,遍地都是宗教学校,宗教教育在许多地区的影响力远远超过世俗教育。
此外,它又与四个非伊斯兰教国家相像。巴基斯坦像印度,百分之七十五的巴基斯坦人接受了印度文化,乌尔都语实际上与印地语同出一源;巴基斯坦像英国,所有的政治制度都是仿照英国的,这大概是旧殖民主义的残余;巴基斯坦像(向)美国,它是美国的非北约盟国,巴基斯坦像(向)中国,与中国的关系可谓是比喜马拉雅山高、比阿拉伯海深全天候战略合作关系。
其次,巴基斯坦国内有五大政治势力和五大矛盾。所谓五大政治势力是指军队势力、宗教势力(宗教政党联盟)、人民党势力(代表信德省大地主阶级的利益和旁遮普省以及其他两省的中产阶级和专业人员利益)、穆盟(谢里夫派)(代表旁遮普大工商资产阶级利益)、穆盟(领袖派)(代表巴基斯坦旁遮普省工商资产阶级利益,是执政党,也是穆沙拉夫总统的主要依靠力量)。巴基斯坦政治基本上是围绕着上述五大政治集团之间的角逐运行和演变的。此外,还有类似像移民运动(代表印度移民)、普什图人民党等小党,这些小党不具备全国影响力。
所谓五大矛盾就是宗俗(宗教与世俗)、军民(军队与民选政府)、朝野(执政党与反对党)、司政(司法与行政)、中地(联邦政府与地方政府或部落)矛盾。往往一个时期,一种矛盾上升为影响全国政治的主要矛盾。比如今年一月和六七月,由于红色清真寺事件,所以宗俗矛盾一度为主要矛盾,三月和八月,由于大法官被软禁后又被平反,所以司政矛盾为主要矛盾,而九月份谢里夫的无功而返,则最集中地体现了朝野和军民矛盾,而现在贝·布托回国遭遇恐怖袭击,则既体现了宗俗矛盾激化,也侧面地反映了朝野矛盾和军民矛盾。
巴基斯坦与美国的关系“从辈分”上讲要低,美国一直对巴基斯坦不信任,既把巴基斯坦当作反恐盟友,同时也把巴基斯坦当作恐怖策源地,而且美国对巴基斯坦有点像“后娘”对继子的味道,一方面利用,另一方面又限制和改造。巴基斯坦一方面要“听美国的教导”,一方面又要“挨美国的棒槌”。
(《新京报》,原标题为《巴基斯坦多重政治矛盾待决》)

2007年12月23日星期日

中共能跳出七十年兴亡周期圈吗

2007年7月1日是中国共产党86岁生日,从新中国成立时算起,也已58年,无论从哪方面讲,都是一个老党和执政时间较长的党。我作为一名老党员,抚今追昔,一方面为今日党的事业兴旺发达、国家繁荣昌盛、中国经济和中国模式得到国内外的重视和认可而欢欣鼓舞;另一方面又对党内现在存在的诸多问题,确有一些忧思。本着居安思危精神与君子和而不同的中国优良传统,特真实地把自己的忧思写出来,既供参考,又备他日查阅。

第一,当前党内政治生活的真实情况,和而不同是主流还是同而不和是主流?

和与同的关系,是我国历史上政治生活中的一个关键问题。凡是做到和而不同的,大家心情舒畅,畅所欲言,人际关系比较和谐,经济发展、社会安定、人民安居乐业。反之,一人或一个小集团说了算,不允许有不同意见,人人自危,人际关系紧张,社会生活死气沉沉,实际上是山雨欲来的寂静,是一个闷局,接踵而来的往往是大动乱、大变革。这方面的经验实在太多了。孔子有感于当时的形势,提出“君子和而不同,小人同而不和”,标出君子小人之别,用心可谓良苦。毛泽东在上世纪50年代曾希望我国出现一个新政治局面,特点是:“一个又有集中又有民主,又有纪律又有自由,又有统一意志、又有个人心情舒畅、生动活泼,那样一种政治局面”。他认为这种局面有“利于社会主义革命和社会主义建设,较易于克服困难,较快地建设我国的现代工业和现代农业,党和国家较为巩固,较为能够经受风险”。(毛选五卷456—457)应该说毛主席这种见解与历史上和而不同的论点,在精神上是一致的,是非常好的设想。可惜在毛主席的晚年,他领导了反右派、反右倾等运动特别是十年文化大革命,却又背离上述想法,弄得人人噤若寒蝉,全社会万马齐喑,国民经济到了崩溃边缘,政治上冤狱遍中国,他老人家原先的希望完全破灭,教训实在太沉重。

粉碎“四人帮” 后,我党领导中国,进行了近三十年的改革开放,使党和国家的情况发生了很大变化很大进步,人们的心情变化大,党内和国家政治生活变化更大,这是谁都感觉到的、认可的、拥护的。北京的出租车司机可以与乘客随意谈论朝野大事而毫无顾忌,“谤议于市朝”这一喜人局面竟在今日中国出现了,虽然党对它还没有奖励办法。网上议论更是内容丰富生动活泼。

但是,目前党内在和与同的问题上,究竟进步到什么程度,我以为还是一个应该进一步弄清楚的大问题。形势愈好,我党作为执政党,愈需要清醒。我的看法是,我们的实际生活中,是提不同意见的人得到重用和提拔,还是唯唯诺诺的人得到重用和提拔;是实干的人得到重用和提拔,还是弄虚作假、耍嘴皮子的人得到重用和提拔?我以为这才是最真实的考核干部的尺度。群众中广为流传的“数字出官、官出数字”议论,就是不少干部群众给我们的鉴定。现在一个相当普遍的现象是:人们不讲真话。许多领导干部慨叹:“很难听到真话和不同意见,迎合型干部太多”。下面则慨叹:“讲真话吃亏,不说为佳”。有人反映:现在讲成绩,层层加码,到中央一级成了无限大,完全失真。讲问题和缺点则层层减码,到中央一级仅存空壳,也完全失真。这两个金字塔现象所反映的干部心态不一定十分准确,但也实在太可怕了,其原因更值得我党认真思考。

两种慨叹,一个是想听听不到,一个是想讲不敢讲。本来人们是愿意讲真话的,弄得不敢讲了,根本原因是怕招祸。谁能给他祸呢,当然是各级有权力的人。因此,问题的关键在于各级领导人,能不能听不同意见并择其善者而从之,有不同见解的人能不能受到尊重并受到公平对待。如果社会上因言得祸的事不断发生,当然就没有人讲真话了。粉碎 “四人帮”前,在这个问题上我们有惨痛教训,粉碎“四人帮”后,我们有改进,但不能说已经解决。

一个听不到真话的社会,表明这个社会还是同而没有和。领导听不到真话就是最大的政治问题,说明脱离群众,人们不信任他。我党应该接受教训,并摆脱一切现实的虚假现象,研究群众目前不讲真话和领导听不到真话的现象,找到根本原因,认真解决听真话与讲真话的问题。我希望各级领导干部从自己做起,讲真话,讲到做到,身教重于言教。群众是最有能力区别真话与假话的。“知政失者在草野”,东汉的思想家王充早就认识到这一点。只有上面讲真话办实事,才能换来群众讲真话办真事。 www.6park.com

第二,不少干部中的几股歪风冷了许多群众的心

当前,干部队伍中几股歪风盛行。

一是豪华摆阔风。许多政府的“衙门”和官员宅第,愈来愈豪华气派,也愈来愈脱离群众,引起民怨与民怒。群众称“衙门”集中的街道为腐败一条街,称官员豪宅为贪官营。按照政府规定的标准和干部固定收入,他们不可能建设这样的“衙门”与豪宅,但修成了而且一些贫困地区也这样做了,资金从何而来呢?上级是不管还是管不住呢?这股风看来愈演愈烈,群众的心则愈来愈冷,党政领导的威信愈来愈低。有的群众说,再也看不到“老八路作风”了。这一声叹息包含着无限怀念与无奈,也含着一线希望。

二是迷信风。关于这个问题有不少报道,有的是调查资料,有的是理论上的批评,说得最清楚的是风水师们。一个调查资料说,有近三成的“县处级”干部迷信相面。《求是》杂志论文,则批评少数干部不信马列主义信鬼神。风水师们讲的就具体多了,“县处级以上干部中,相当一部分有风水方面的顾问,有不少人还聘请专职风水师为他规划”,“风水师和官员们的交易是悄然进行的”。“相较于商人,官员们更想念一些‘玄’ 的东西”。为了掩人耳目,风水师们不穿唐装,不留胡子,而是西装革履,打扮成一个推销员模样,出入官府和豪宅。官员不直接出面,有商人代办并买单,当然他们得到的更多。外电报道:“迷信风水现象在中国抬头”,或说:“鬼神迷信在中国抬头”。有报道说,有名的大寨大队,现在有人投资3000万元盖一座庙宇搞旅游。一些干部的迷信风与社会上的迷信风,究竟谁影响了谁,它们反映的是何种内心世界?

三是豪赌风。中国的豪赌已“享誉”世界,他们成了许多国家、地区赌城的常客,我国周边国家、地区都建设专门赌场迎接他们。澳门特区的赌场更是内地豪赌者的佳处,有材料指出,澳门赌场内地赌徒占到93%。官方统计,中国每年流失到国外的赌金达6000亿元,官员输的钱往往都是公款。商人参赌的也大都是官商,真正的民营企业家以创业为主,很少这样干的。这股赌风使中国人在全世界丢尽了脸,群众的愤怒是十分自然的也是应该的。对这股恶风党和政府似乎束手无策。

四是“跑部钱进”风。这已成为潜规则了,下面振振有词。“不跑部就拿不到项目,不用钱就进不了门。跑部钱进是下面的不得已之举,是逼出来的,含着眼泪干的。”送钱已成了一门大学问,神龙见首不见尾,不露痕迹,其妙无穷。比较公开的则是“项目车”是小干部干的,给小单位和个人一个小项目,不用说话就有一辆轿车送上供他使用,油和司机的开支也不用管。在这种潜规则支配下,下面的花样就更多了,风气也就愈来愈坏,上面的管理限制办法,永远跟不上形势。

还有一些风,如公款吃喝风、包二奶风、外逃风等等,就不细说了。

上述种种歪风的总的结果是:我们不少党政机关的办事能力愈来愈低下,出现了所谓的“体制性迟钝症”,处理事件拖拉,往往把一件民意小事情,酿成民怨甚至民怒,成为群体事件,社会安定大受影响。最近发生的两件事就充分说明这一点。一是山西黑砖窑事件。人贩子在河南郑州市等地方抓劳力,通过他们的交通线送到山西各地的黑砖窑,强迫劳动,过着非人生活。此事长期存在,两省的有关部门毫无作为,任其胡行,有的基层单位甚至与他们勾结共同作恶。这里的党政机关的无能已到了何等地步,岂仅是“迟钝症”而已。二是太湖兰藻事件,这是自然现象,完全可以预测到,南京市就有中科院的一个湖泊研究所,对太湖当然十分了解,为什么他们的信息就不能进入省市决策领域?太湖水质关系广大群众生活,当地领导却毫不了解即将发生的严重事故。特别严重的是三江三湖治理已实行多年,为什么还发生这样的事。这两件事太令人震惊并陷入沉思。国家环保部门已明确指出,我国已进入污染高发期。每一个污染源都与当地群众的生产和生活息息相关。高发期的特点及其对周围群众的影响,应早作研究并制定对策,再不能临时被动应付了。

第三,能请群众来监督干部吗?

上述种种歪风在我党我国还不能说处处如此,日日如此,但是若不能及时坚决刹住,不仅会破坏当前的大好形势,如果久拖不决,那就会彻底冷了群众的心,他们必然由怨而怒,势将酿成大祸。群众的耐心不是无限的,我们党的威信也不是天生,更不是一劳永逸的。

现在的问题是,单靠领导机关的力量能否彻底解决这个问题,回答是否定的,无数实践已证明这一点。下面对付上级的监督和检查规律,已弄得清清楚楚,对付办法更是天衣无缝,现在这套监督和检查办法可以说收效甚微。我们处分几个干部可以做到,但改变不了风气,一阵风过后,一切照旧。群众早就总结出一条检查规律: “河水突然清了,表明领导要来检查,河水又污浊了,表明领导走了。”领导得到的是假象,但误以为真,十分高兴。群众却认为下级玩弄领导又成功了。受苦受害的是当地群众,淮河沿岸现在出现不少癌症村,就是最明显的证据。他们既看笑话,对官僚主义的无能,心中怨气和愤怒也随之而来。这种情况是相当普遍的,许多报道都反映了这个情况,下面传说的笑话就更多了。

中国的官场是一个大染缸,有几千年封建社会的传统,积淀太深厚,是一股强大的传统力量,严重影响着我们党。对干部个人来说,这种坏传统坏作风很舒服自在,是很难抗拒的。我们如果没有强大的监督力量制度力量,很难解决大染缸这个大问题。

要彻底解决干部中存在的上述种种歪风,唯一办法就是请群众来批评、监督。他们的监督是全天候的,无时无处不在,谁也无法躲藏。干部干坏事总要伤害一些群众,受伤害的人当然愿意揭发,只要领导支持加以保护和奖励,举报和揭发就可以形成风气和制度,一切歪风就无处隐匿,久之就自然刹住了。如果监督还包括各级领导的决策和工作上的失误,以及一切形式主义的做法,其作用就更大。我以为必须包括这些内容。

请不请群众来监督干部、监督党和政府的决策和工作,是考验我党领导层是否决心依靠群众改变作风和改进工作、发展大好形势的试金石。

请群众来监督干部和我们的工作,要有一套办法和具体制度,要明确规定群众享有的权力,有一定的运行方式,还应有对干部打击报复的处分办法,所有这些都得认真执行。实行起来当然有困难,但不实行这一套,我们遇到的不仅是困难而是灾难。

群众路线,是我们的传家宝,请群众来监督干部和各方面的工作,必将得到广大群众的拥护,这个力量是巨大的,一定会成功,效果一定会很好。

第四、怎样跳出历史周期律

毛泽东和黄炎培关于这个问题的著名对话,是大家熟知的。黄提出中国历史上的封建王朝都未能逃脱“其兴也焉,其亡也忽焉”这一历史周期律的支配,希望中共能找出一条新路来跳出这个周期律。毛泽东回答说已找到了,新路就是民主,让人民来监督政府,政府才不敢松懈,人人起来负责,才不会人亡政息。黄深表赞同,这是1945年7月发生的事情。据说,1949年我军接管北平时,傅作义也提出类似的问题。他说,国民党执政20年就腐化了,结果被人民打倒,共产党执政后,30年、40年后会不会也腐化?(薄一波《若干重大决策与事件的回顾》上册P157)可见,这个历史周期律问题是人们普遍关心的问题,任何执政党都要遇到和解决的问题。

我以为可以从国内经验和国际经验来探索和思考,寻找跳出这个周期圈的办法,特别是怎样实行毛泽东提出的办法。

从国内经验讲,人们关心历史上三个黄金时代及其以后的变化。第一个黄金时代,史称文景之治包括汉武帝的开拓疆域。从文帝开始到武帝末年共94年,之后逐渐衰败,最后是王莽专权和称帝。第二个黄金时代,史称贞观之治直到开元之治共114年,如果算到安史之乱则129年。之后唐朝进入衰败期直到灭亡。第三个黄金时代是清初的康、雍、乾三朝共133年。之后就是内忧外患频繁,虽然消灭了太平天国运动,也未中兴起来,末期的“戊戌变法”更遭到镇压实行不了,最后被辛亥革命推翻。为什么黄金时代之后就是衰败或大乱(如唐朝)是一个值得研究的大问题。我国现在的形势可说也处于黄金时代,但我国的经济高速增长还能维持多久,未来前景怎样,也已是今日人们思考和议论的话题,各种观点都有。从整个中国历史看,黄金时代少而且较为短暂,动乱时代则较多而长,这个问题也值得深思。

从国际经验看,有人提出70年现象问题。指出墨西哥的革命制度党,在上世纪五六十年代曾被世人誉为北大西洋的民主模式,执政71年后失去政权。苏联共产党执政72年后解散,苏联也随之解体。似乎 70年是一个坎。另外,中国国民党在连续执政70年后也失去政权。上述三党失去政权各有自己的具体原因,但脱离群众、不顾群众疾苦,不能妥善处理各种社会问题,内部腐化堕落等等,似乎又是共同的。还是唐朝杜牧在《阿房宫赋》一文中提出的论点:“灭六国者,六国也,非秦也。族秦者,秦也,非天下人也。”就是说统治阶级自己打倒了自己。所谓七十年坎是现象,是长期执政的党放弃自我管束和改造,许多社会问题、环境问题不能解决,群众的实际困难不能解决,统治集团和广大官员生活优裕和腐败盛行。群众无法忍受只能另找他人来帮助自己保护自己,也就是我们常讲的官逼民反。责任在官而不在民。不是民弃官,首先是官弃民。

想通了,解决办法其实十分简单,因为真理总是简单明了的。执政党要做到,一方面实行党内民主,定期改选领导集体,让有作为而清廉的人来领导,解决党内老化、腐化问题。另一方面真正实行政治民主,请人民来监督执政党和政府的干部。两者结合,上述种种问题就能彻底解决。也就是毛泽东对黄炎培所说的实行民主的办法。现在要弄清的问题是:毛泽东为什么说的好,但执政后不但没有实行民主,而且反其道而行之。我们党执政快60年了,直到今日,这党内党外民主,也还实行的不好,没有完全执行。难点究竟在哪里?唐太宗与魏徵的故事最能说明问题。接受批评能防止错误发生,但唐太宗有时也很难受,甚至想杀这个田舍翁。只愿自己说了算的统治者,当然不愿意有人监督他。这就是英明的君主与昏聩君主的区别所在,结局也不大相同。现在是人民当家作主的时代,我们自称是人民公仆,为人民服务,对群众监督总应该有新的认识、新的态度。要为人民服务,又不愿听人民的意见和接受人民的监督,岂不是自相矛盾。结论应是:长期执政的政党要想继续执政打破70年这道坎,必须解决自身腐化和脱离群众问题,除自身不断改革外,唯一有效办法就是严格的强有力的群众监督,这个婆婆非要不可。官员们的不舒服、不自在是很自然的,换来的是群众拥护和社会稳定、和谐,国运昌盛,全国人民大自在、大满意、大舒服。值得,完全值得。

(作者石山,我国著名生态经济学者,曾任中国生态经济学会副理事长,国务院农村发展研究中心原顾问)

2007年12月3日星期一

jQuery中文入门教程_译自Getting Started with jQuery

 

jQuery中文入门指南,翻译加实例,jQuery的起点教程

中文版译者:Keel

此文以实例为基础一步步说明了jQuery的工作方式。现以中文翻译(添加我的补充说明)如下。如有相关意见或建议请麻烦到我的 BLOG 写个回复或者 EMAIL 告知。

英文原版:http://jquery.bassistance.de/jquery-getting-started.html ,感谢原文作者 Jörn Zaefferer

本文发布已征求原作者同意。

另外我认为在学习过程中,有两个API文档你要打开随时查看:

以下部分为原文翻译:

jQuery入门指南教程

这个指南是一个对jQuery库的说明,要求读者了解HTML(DOM)和CSS的一些常识。它包括了一个简单的Hello World的例子,选择器和事件基础,AJAX、FX的用法,以及如何制作jQuery的插件。 这个指南包括了很多代码,你可以copy它们,并试着修改它们,看看产生的效果。

内容提要

  1. 安装
  2. Hello jQuery
  3. Find me:使用选择器和事件
  4. Rate me:使用AJAX
  5. Animate me(让我生动起来):使用FX
  6. Sort me(将我有序化):使用tablesorter插件(表格排序)
  7. Plug me:制作您自己的插件
  8. Next steps(下一步)

安装

一开始,我们需要一个jQuery的库,最新的下载可以到这里找到。这个指南提供一个基本包含实例的包供下载.

下载:jQuery Starterkit

(译者Keel注:一定要下载这个包,光看文章不实践肯定是不行的。)

下载后解压缩,然后用你最喜欢的文本编辑器打开starterkit.html和custom.js这两个文件。(译者Keel注:这两个就是例子文件,所有的例子都用这两个例子作出,custom.js写jQuery代码,starterkit.html观察效果.建议用editPlus打开)

现在,我们就已经做好了一切准备来进行这个著名的"Hello world"例子.

本章的相关链接:

Hello jQuery

在做所有事情之前,我们要让jQuery读取和处理文档的DOM,必须尽可能快地在DOM载入后开始执行事件,所以,我们用一个ready事件作为处理HTML文档的开始.看看我们打开的custom.js这个文件,里面已经准备好了:

$(document).ready(function() {
// do stuff when DOM is ready
});


放一个简单的alert事件在需要等DOM完成载入,所以我们把任务稍稍变复杂一点:在点击任何一个链接时显示一个alert.



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


这样在你点击页面的一个链接时都会触发这个"Hello world"的提示。



(译者Keel注:请照此代码修改custom.js并保存,然后用浏览器打开starterkit.html观察效果。)



让我们看一下这些修改是什么含义。$("a") 是一个jQuery选择器(selector),在这里,它选择所有的a标签(译者Keel注:即<a></a>),$号是 jQuery “类”(jQuery "class")的一个别称,因此$()构造了一个新的jQuery 对象(jQuery object)。函数 click() 是这个jQuery对象的一个方法,它绑定了一个单击事件到所有选中的标签(这里是所有的a标签),并在事件触发时执行了它所提供的alert方法.



这里有一个拟行相似功能的代码:



<a href="#" onclick="alert('Hello world')">Link</a>


不同之处很明显,用jQuery不需要在每个a标签上写onclick事件,所以我们拥有了一个整洁的结构文档(HTML)和一个行为文档(JS),达到了将结构与行为分开的目的,就像我们使用CSS追求的一样.



下面我们会更多地了解到选择器与事件.



本章的相关链接:




Find me:使用选择器和事件



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");
});
});


还有大量的类似的CSSXPath例子,更多的例子和列表可以在这里找到。(译者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开始!



本章的相关链接:




Rate me:使用AJAX



在这一部分我们写了一个小小的AJAX应用,它能够rate一些东西(译Keel注:就是对某些东西投票),就像在youtube.com上面看到的一样。



首先我们需要一些服务器端代码,这个例子中用到了一个PHP文件,读取rating参数然后返回rating总数和平均数。看一下rate.php代码.



虽然这些例子也可以不使用AJAX来实现,但显示我们不会那么做,我们用jQuery生成一个DIV容器,ID是"rating".



$(document).ready(function() {
// generate markup
var ratingMarkup = ["Please rate: "];
for(var i=1; i <= 5; i++) {
ratingMarkup[ratingMarkup.length] = "<a href='#'>" + i + "</a> ";
}
// add markup to container and applier click handlers to anchors
$("#rating").append( ratingMarkup.join('') ).find("a").click(function(e) {
e.preventDefault();
// send requests
$.post("rate.php", {rating: $(this).html()}, function(xml) {
// format result
var result = [
"Thanks for rating, current average: ",
$("average", xml).text(),
", number of votes: ",
$("count", xml).text()
];
// output result
$("#rating").html(result.join(''));
} );
});
});


这段代码生成了5个链接,并将它们追加到id为"rating"容器中,当其中一个链接被点击时,该链接标明的分数就会以rating参数形式发送到rate.php,然后,结果将以XML形式会从服务器端传回来,添加到容器中,替代这些链接。



如果你没有一个安装过PHP的webserver,你可以看看这个在线的例子.



不使用javascript实现的例子可以访问 softonic.de 点击 "Kurz bewerten!"



更多的AJAX方法可以从这里 找到,或者看看API文档 下面的AJAX filed under AJAX.



(译者Keel注:这个在线实例从国内访问还是比较慢的,点击后要等一会儿才能看到结果,可以考虑对它进行修改,比如加上loading,投票后加上再投票的返回链接等。此外,这个例子中还是有很多需要进一步消化的地方,看不懂的地方请参考API文档。)



一个在使用AJAX载入内容时经常发生的问题是:当载入一个事件句柄到一个HTML文档时,还需要在载入内容上应用这些事件,你不得不在内容加载完成后应用这些事件句柄,为了防止代码重复执行,你可能用到如下一个function:



// lets use the shortcut
$(function() {
var addClickHandlers = function() {
$("a.clickMeToLoadContent").click(function() {
$("#target").load(this.href, addClickHandlers);
});
};
addClickHandlers();
});


现在,addClickHandlers只在DOM载入完成后执行一次,这是在用户每次点击具有clickMeToLoadContent 这个样式的链接并且内容加载完成后.



请注意addClickHandlers函数是作为一个局部变量定义的,而不是全局变量(如:function addClickHandlers() {...}),这样做是为了防止与其他的全局变量或者函数相冲突.



另一个常见的问题是关于回调(callback)的参数。你可以通过一个额外的参数指定回调的方法,简单的办法是将这个回调方法包含在一个其它的function中:



// get some data
var foobar = ...;
// specify handler, it needs data as a paramter
var handler = function(data) {
...
};
// add click handler and pass foobar!
$('a').click( function(event) { handler(foobar); } );

// if you need the context of the original handler, use apply:
$('a').click( function(event) { handler.apply(this, [foobar]); } );


用到简单的AJAX后,我们可以认为已经非常之“web2.0”了,但是到现在为止,我们还缺少一些酷炫的效果。下一节将会谈到这些效果.



本章的相关链接:




Animate me(让我生动起来):使用FX



一些动态的效果可以使用 show()hide()来表现:



$(document).ready(function() {
$("a").toggle(function() {
$(".stuff").hide('slow');
}, function() {
$(".stuff").show('fast');
});
});


你可以与 animate()联合起来创建一些效果,如一个带渐显的滑动效果:



$(document).ready(function() {
$("a").toggle(function() {
$(".stuff").animate({
height: 'hide',
opacity: 'hide'
}, 'slow');
}, function() {
$(".stuff").animate({
height: 'show',
opacity: 'show'
}, 'slow');
});
});


很多不错的效果可以访问interface plugin collection. 这个站点提供了很多demos和文档



这些效果插件是位于jQuery插件列表的前面的,当然也有很多其他的插件,比如我们下一章讲到的表格排序插件。



本章的相关链接:




Sort me(将我有序化):使用tablesorter插件(表格排序)



这个表格排序插件能让我们在客户端按某一列进行排序,引入jQuery和这个插件的js文件,然后告诉插件你想要哪个表格拥有排序功能。



要测试这个例子,先在starterkit.html中加上像下面这一行的代码:



<script src="lib/jquery.tablesorter.js" type="text/javascript"></script>


然后可以这样调用不着:



$(document).ready(function() {
$("#large").tableSorter();
});


现在点击表格的第一行head区域,你可以看到排序的效果,再次点击会按倒过来的顺序进行排列。



这个表格还可以加一些突出显示的效果,我们可以做这样一个隔行背景色(斑马线)效果:



$(document).ready(function() {
$("#large").tableSorter({
stripingRowClass: ['odd','even'], // Class names for striping supplyed as a array.
stripRowsOnStartUp: true // Strip rows on tableSorter init.
});
});


关于这个插件的更多例子和文档可以在 tablesorter首页找到.



几乎所有的特件都是这样用的:先include插件的js文件,然后在某些元素上使用插件定义的方法,当然也有一些参数选项是可以配置的



经常更新的插件列表可以从jQuery官方站 on the jQuery site找到.



当你更经常地使用jQuery时,你会发现将你自己的代码打包成插件是很有用处的,它能方便地让你的公司或者其他人进行重用.下一章我们将谈到如何构建一个自己的插件.



本章的相关链接:




Plug me:制作自己的插件



写一个自己的jQuery插件是非常容易的,如果你按照下面的原则来做,可以让其他人也容易地结合使用你的插件.




  1. 为你的插件取一个名字,在这个例子里面我们叫它"foobar".


  2. 创建一个像这样的文件:jquery.[yourpluginname].js,比如我们创建一个jquery.foobar.js


  3. 创建一个或更多的插件方法,使用继承jQuery对象的方式,如:
    jQuery.fn.foobar = function() {
    // do something
    };



  4. 可选的:创建一个用于帮助说明的函数,如:
    jQuery.fooBar = {
    height: 5,
    calculateBar = function() { ... },
    checkDependencies = function() { ... }
    };


    你现在可以在你的插件中使用这些帮助函数了:



    jQuery.fn.foobar = function() {
    // do something
    jQuery.foobar.checkDependencies(value);
    // do something else
    };



  5. 可选的l:创建一个默认的初始参数配置,这些配置也可以由用户自行设定,如:
    jQuery.fn.foobar = function(options) {
    var settings = {
    value: 5,
    name: "pete",
    bar: 655
    };
    if(options) {
    jQuery.extend(settings, options);
    }
    };


    现在可以无需做任何配置地使用插件了,默认的参数在此时生效:



    $("...").foobar();


    或者加入这些参数定义:



    $("...").foobar({
    value: 123,
    bar: 9
    });




如果你release你的插件, 你还应该提供一些例子和文档,大部分的插件都具备这些良好的参考文档.



现在你应该有了写一个插件的基础,让我们试着用这些知识写一个自己的插件.



很多人试着控制所有的radio或者checkbox是否被选中,比如:



$("input[@type='checkbox']").each(function() {
this.checked = true;
// or, to uncheck
this.checked = false;
// or, to toggle
this.checked = !this.checked;
});


无论何时候,当你的代码出现each时,你应该重写上面的代码来构造一个插件,很直接地:



$.fn.check = function() {
return this.each(function() {
this.checked = true;
});
};


这个插件现在可以这样用:



$("input[@type='checkbox']").check();


现在你应该还可以写出uncheck()和toggleCheck()了.但是先停一下,让我们的插件接收一些参数.



$.fn.check = function(mode) {
var mode = mode || 'on'; // if mode is undefined, use 'on' as default
return this.each(function() {
switch(mode) {
case 'on':
this.checked = true;
break;
case 'off':
this.checked = false;
break;
case 'toggle':
this.checked = !this.checked;
break;
}
});
};


这里我们设置了默认的参数,所以将"on"参数省略也是可以的,当然也可以加上"on","off", 或 "toggle",如:



$("input[@type='checkbox']").check();
$("input[@type='checkbox']").check('on');
$("input[@type='checkbox']").check('off');
$("input[@type='checkbox']").check('toggle');


如果有多于一个的参数设置会稍稍有点复杂,在使用时如果只想设置第二个参数,则要在第一个参数位置写入null.



从上一章的tablesorter插件用法我们可以看到,既可以省略所有参数来使用或者通过一个 key/value 对来重新设置每个参数.



作为一个练习,你可以试着将 第四章 的功能重写为一个插件.这个插件的骨架应该是像这样的:



$.fn.rateMe = function(options) {
var container = this; // instead of selecting a static container with $("#rating"), we now use the jQuery context

var settings = {
url: "rate.php"
// put more defaults here
// remember to put a comma (",") after each pair, but not after the last one!
};

if(options) { // check if options are present before extending the settings
$.extend(settings, options);
}

// ...
// rest of the code
// ...

return this; // if possible, return "this" to not break the chain
});


Next steps(下一步)



如果你想做更好的javascript开发,建议你使用一个叫 FireBug的firefox插件. 它提供了断点调试(比alert强多了)、观察DOM变化等很多漂亮的功能



如果你还有未解决的问题,或者新的想法与建议,你可以使用jQuery的邮件列表 jQuery mailing list.



关于这个指南的任何事情,你可以写mail给作者或者发表评论在他的日志:blog.



关于这个指南的翻译任何事情,你可以写mail给我或者发表评论在我的日志:blog.



还有什么...


大大感谢John Resig创造了这么好的library! 感谢jQuery community 为John提供了如此多的咖啡和其他的一切!



© 2006, Jörn Zaefferer - last update: 2006-09-12


中文版翻译:Keel - 最后更新: 2006-12-13



jQuery中文入门教程_译自Getting Started with jQuery