引荐jQuer.docVIP

1第1章引荐jQuery 1 第1章 本章内容 为什么应当使用jQuery 不唐突的JavaScript意味着什么 1jQuery的基本原理和概念 1 结合其他JavaScript库使用jQuery JavaScript曾经长期被严谨的Web开发者当作“玩具”语言，然而在过去数年间，随着人们对富因特网应用和Ajax技术重新燃起兴趣，JavaScript重获威望。这门语言不得不快速成长，因为客户端开发者已经抛弃剪切和粘贴JavaScript的方式，转而采用方便快捷、功能完备的JavaScript库。这些库一次性地彻底解决了跨浏览器的难题，并提供新颖的、改进了的Web开发方式。 作为JavaScript库世界的后来者，jQuery如暴风雪般横扫Web开发社区，很快赢得MSNBC等大网站，以及颇受关注的开源项目SourceForge、Trac和Drupal的支持。 此外，jQuery已确定成为ASP.NET MVC和Visual Studio未来版本中的正式组成部分。诺基亚手机平台Web Run-Time也将纳入jQuery。——编者注 和其他着重关注JavaScript灵活技巧的工具包相比，jQuery力求改变Web开发者在创建页面的富功能时的思维方式。与其花时间杂耍JavaScript高级复杂的技巧，设计者不如充分利用自己现有的CSS（Cascading Style Sheet，层叠样式表）、XHTML（Extensible Hypertext Markup Language，可扩展超文本标记语言）及普通JavaScript的知识，去直接操作页面元素，实现更快的开发。 在本书中，我们将要深入考察jQuery。我们先来看看jQuery究竟给页面开发的盛宴带来了什么吧。 1.1 为什么是jQuery 如果你曾花过时间试着给页面增添动态功能，就会发现经常要遵循这样一种模式：选择一个元素或一组元素，然后以某种方式对其进行操作。你可以隐藏或显示元素，给元素增加CSS类，使元素活动起来，或者修改元素的特性。 利用原始的JavaScript完成这些任务中的任何一个，都会需要数十行的代码。jQuery的创造者为了使这些常见任务变得简单而特意创造了该库。例如，设计者利用JavaScript给表格添加“斑马条纹”（利用形成对比的两种颜色使表格隔行突出显示）需要10多行代码，下面请看如何利用 jQuery来实现同样的功能： $(table tr:nth-child(even)).addClass(striped); 2如果现在对你来说，这些代码看起来有点神秘，也不用担心。稍后你就会明白它的工作原理，并且简洁扼要却威力强大的jQuery语句会脱口而出，页面注入活力。下面简要探讨一下这个片段怎样工作。 2 我们标识页面中所有表格的所有偶数行（tr元素），并且将CSS类striped添加到每一个偶数行。借助于CSS规则中的类striped，把选定的背景色应用到偶数行，仅仅一行JavaScript就增进了整个页面的美感。 将其应用于示例表格，效果如图1-1所示。 底色为红色 底色为红色 图1-1 给表格添加“斑马条纹”，用jQuery只需一个简单的语句就能实现 这条jQuery语句的真正威力来自选择器，也就是用于标识页面里的目标元素的表达式，我们可以借此轻而易举地标识和获取所需元素。本示例中，目标元素就是所有表格中所有偶数tr元素。在本书的可下载代码文件chapter1/zebra.stripes.html中，可以找到本页面的完整源代码。 我们下面将要学习如何轻松地创建选择器。不过首先，让我们了解jQuery的发明者对于在页面中最有效地利用JavaScript，持有什么样的想法。 1.2 不唐突的JavaScript 记得在CSS出现之前糟糕的往日吗？那时候我们不得不在HTML页面中，把样式标记与文档结构标记混在一起使用。 3从事页面设计的任何人，不管时间是长还是短，肯定都会记得，很可能还有些后怕。现在把CSS添加到Web开发工具包，就可以把样式信息从文档结构中分离，并且摒弃了font标签之类的滑稽模仿 作者认为样式标签 3 作者认为样式标签font是body等文档结构标签的拙劣模仿，在CSS被采用后应该摒弃。——译者注 几乎没有人愿意回到把样式混入HTML元素的日子，然而下面这种写法还是太普遍： 不难看出，按钮元素的样式，包括标题的字体，并没有使用font标签和其他被否定的面向样式的标记，而是通过CSS规则在页面表现出来。虽然此声明并没有把样式标记混入结构里，但却把行为混入了结构里——作为按钮元素标记的一部分而嵌入的JavaScript，当按钮被点击时将被执行（在本示例中，就是按钮被点击时，名为xyz的DOM元素会变为红色）。 就像在HTML文