Beginning JavaScript and CSS Development with jQuery

Book Description

The jQuery JavaScript framework is a rising star in the world of web development. JavaScript frameworks in general have grown to become immensely popular in the past few years in parallel with the ever-increasing presence of JavaScript-driven, so-called Web 2.0 websites that make heavy use of technologies like AJAX and JavaScript in general for slick graphical enhancements that would be impossible or much more cumbersome to incorporate without JavaScript.

jQuery’s mission as a JavaScript library is simple — it strives to make the lives of web developers easier by patching over certain portions of cross-browser development and by making other tasks commonly needed by developers much easier. jQuery has the real, proven ability to reduce many lines of plain-vanilla JavaScript to just a few lines, and, in many cases, just a single line. jQuery strives to remove barriers to JavaScript development by removing redundancy wherever possible and normalizing cross-browser JavaScript development in key areas where browsers would otherwise differ, such as Microsoft’s Event API and the W3C Event API, and other, more remedial tasks like getting the mouse cursor’s position when an event has taken place.

jQuery is a compact, lightweight library that currently works in Microsoft’s Internet Explorer browser from version 6 on, Firefox from version 1.5 on, Safari from version 2.0.2 on, Opera from version 9 on, and Google’s new Chrome browser from version 0.2 on. Getting started with jQuery is very easy — all you have to do is include a single link of markup in your HTML or XHTML documents that includes the library. Throughout this book, I demonstrate jQuery’s API (Application Programming Interface) components in detail and show you how all the nuts and bolts of this framework come together to enable you to rapidly develop client-side applications.

I also cover the jQuery UI library, which makes redundant user-interface (UI) tasks on the client side ridiculously easy and accessible to everyday web developers who might not have much JavaScript programming expertise. Have you ever wondered how websites make virtual pop-up windows using JavaScript, HTML, and CSS? The jQuery UI library provides the ability to create these pop-up windows and includes the ability to animate transitions like fading the window on and off, or having it re-size from very small to full sized. The jQuery UI library gives you the ability to use animations and transitions using JavaScript, markup, and CSS that you may have thought previously could only have been done with Adobe’s Flash player.

What This Book Covers

This book covers the jQuery JavaScript framework and the jQuery UI JavaScript framework and demonstrates in great detail how to use the jQuery framework to get more results more quickly out of JavaScript programming. I cover each method exposed by jQuery’s API, which contains methods to make common, redundant tasks go much more quickly in less code. Some examples are methods that help you to select elements from a markup document through the DOM and methods that help you to traverse through those selections and filter them using jQuery’s fine-grained controls. This makes working with the DOM easier and more effortless. I also cover how jQuery eliminates certain cross-browser, cross-platform development headaches like the event model; not only does it eliminate these headaches, but it also makes it easier to work with events by reducing the amount of code that you need to write to attach events. It even gives you the ability to simulate events.

Later in the book, I cover how you can leverage the jQuery UI library to make graphically driven UI widgets. jQuery gives you the ability to break content up among multiple tabs in the same page. You have the ability to customize the look and feel of the tabs, and even to create a polished look and feel by providing different effects that come in when you mouse over tabs and click on them. The jQuery UI library also makes it easy to create accordion sidebars, like the one on Apple’s Mac website. These sidebars have two or more panels, and when you mouse over an item, one pane transitions to another via a smooth, seamless animation wherein the preceding pane collapses and the proceeding pane expands.

The jQuery UI library also gives you the ability to make any element draggable with the mouse; by clicking and holding and moving the mouse, you can move elements around on a page. It also makes it really easy to create drag-and-drop user interfaces. This can be used to make a dropping zone where you take elements from other parts of the page and drop them in another, as you would in your operating system’s file manager when you want to move a folder from one place to another. You can also make lists that are sortable via drag-and-drop, rearranging elements based on where you drop them. You can also have a user interface where you drag the mouse cursor to make a selection, as you would in your operating system’s file manager when you want to select more than one file. Then jQuery UI also exposes the ability to re-size elements on a page using the mouse. All of those neat things that you can do on your computer’s desktop, you can also do in a web browser with jQuery UI.

jQuery UI also provides a widget for entering a date into a field using a nice, accessible JavaScript-driven calendar that pops up when you click on an input field.

You can also make custom pop-up dialogues that are like virtual pop-up windows, except they don’t open a separate browser window — they come up using markup, CSS, and JavaScript.

Another widget that jQuery UI provides is a graphical slider bar, similar to your media player’s volume control.

As jQuery has done for JavaScript programming in general, jQuery UI strives to do for redundant graphical user interface (GUI) tasks. jQuery UI gives you the ability to make professional user-interface widgets with much less development effort.

This book is for anyone interested in doing more with less code! You should have a basic understanding of JavaScript. I review some basic JavaScript programming concepts, such as the Event API, but I do not go into great detail about the JavaScript language itself. You’ll want to have at least a basic grasp of the Document Object Model, or DOM, and basic JavaScript programming syntax. Additionally, you’ll need to know your way around CSS and HTML, since knowledge of those technologies is also assumed. A complete beginner might be able to grasp what is taking place in the examples in this book but might not understand certain terminology and programming concepts that would be presented in a beginner’s JavaScript guide, so if you are a beginner and insist with pressing forward, I recommend doing so with a beginning JavaScript book on hand as well. Specifically, I recommend the following Wrox books for more help with the basics:

• Beginning Web Programming with HTML, XHTML, and CSS, 2nd ed. (2008), by Jon Duckett
• Beginning CSS: Cascading Style Sheets for Web Design, 2nd ed. (2007), also written by yours truly.
• Beginning JavaScript, 3rd ed. (2007), by Paul Wilton and Jeremy McPeak

For further knowledge of JavaScript above and beyond what is covered in this book, I recommend Professional JavaScript for Web Developers, 2nd ed. (2009), by Nicholas C. Zakas.

中文：

书名：从jQuery开始进行JavaScript和CSS开发

JQuery JavaScript框架是Web开发领域的一颗冉冉升起的新星。在过去的几年里，随着越来越多的由JavaScript驱动的所谓的Web 2.0网站的出现，JavaScript框架总体上变得非常受欢迎，这些网站大量使用AJAX和JavaScript等技术来进行圆滑的图形增强，如果没有JavaScript，这些增强是不可能实现的，或者更加繁琐。

JQuery作为一个JavaScript库的使命很简单–它致力于通过修补跨浏览器开发的某些部分，并使开发人员通常需要的其他任务变得更容易，从而使Web开发人员的生活变得更容易。JQuery具有真正的、经过验证的能力，可以将许多普通的JavaScript行减少到几行，并且在许多情况下，只需要一行。JQuery致力于消除Java开发的障碍，方法是尽可能消除冗余，并在浏览器不同的关键领域(如Microsoft的Event API和W3C Event API)以及其他更具补救作用的任务(如在事件发生时获取鼠标光标的位置)中标准化跨浏览器的JavaScript开发。

JQuery是一个紧凑、轻量级的库，目前可以在微软的Internet Explorer浏览器6版以上、Firefox 1.5版以上、Safari 2.0.2版以上、Opera 9版以上以及谷歌0.2版以上的新Chrome浏览器上运行。开始使用jQuery非常简单–您所要做的就是在包含该库的HTML或XHTML文档中包含一个标记链接。在本书中，我将详细演示jQuery的API(应用程序编程接口)组件，并向您展示该框架的所有细节如何结合在一起，使您能够快速开发客户端应用程序。

我还介绍了jQuery UI库，它使客户端上的冗余用户界面(UI)任务变得异常简单，对于可能没有多少JavaScript编程专业知识的日常Web开发人员来说也是如此。您有没有想过网站是如何使用JavaScript、HTML和CSS来制作虚拟弹出窗口的？JQuery UI库提供了创建这些弹出窗口的能力，并包括设置过渡动画的能力，比如打开和关闭窗口，或者将窗口大小从非常小调整到完整大小。通过jQuery UI库，您可以使用之前认为只能通过Adobe的Flash Player才能完成的Java、标记和CSS来使用动画和过渡。

这本书涵盖了哪些内容

本书介绍了jQuery JavaScript框架和jQuery UI JavaScript框架，并非常详细地演示了如何使用jQuery框架更快地从Java编程中获得更多结果。我介绍了jQuery的API公开的每种方法，它包含了用更少的代码使常见的、冗余的任务执行得更快的方法。一些示例是帮助您通过DOM从标记文档中选择元素的方法，以及帮助您遍历这些选择并使用jQuery的细粒度控件对其进行过滤的方法。这使得使用DOM变得更容易、更轻松。我还将介绍jQuery如何消除某些跨浏览器、跨平台的开发难题，如事件模型；它不仅消除了这些难题，而且通过减少附加事件所需编写的代码量，还使处理事件变得更容易。它甚至让你有能力模拟事件。

在本书的后面部分，我将介绍如何利用jQuery UI库来制作图形驱动的UI小部件。JQuery使您能够在同一页面中的多个选项卡中拆分内容。您可以定制选项卡的外观，甚至可以通过提供当您将鼠标放在选项卡上并单击它们时出现的不同效果来创建抛光的外观和感觉。JQuery UI库还使得创建手风琴侧边栏变得容易，就像苹果Mac网站上的侧边栏一样。这些侧边栏有两个或多个面板，当您将鼠标悬停在一个项目上时，一个面板会通过平滑、无缝的动画转换到另一个面板，其中前面的面板会折叠，而下一个面板会展开。

JQuery UI库还使您能够使用鼠标拖动任何元素；通过单击并按住并移动鼠标，您可以在页面上四处移动元素。它还使创建拖放用户界面变得非常容易。这可以用来创建一个拖放区，在这个拖放区中，您可以从页面的其他部分获取元素，然后将它们放到另一个部分中，就像在您想要将文件夹从一个位置移动到另一个位置时在操作系统的文件管理器中所做的那样。您还可以创建可通过拖放进行排序的列表，根据您放置元素的位置重新排列元素。您还可以有一个用户界面，您可以在其中拖动鼠标光标进行选择，就像在操作系统的文件管理器中那样，当您想要选择多个文件时。然后，jQuery UI还提供了使用鼠标调整页面上元素大小的能力。所有这些你可以在电脑桌面上做的事情，你也可以在带有jQuery用户界面的网络浏览器上做。

JQuery UI还提供了一个小部件，用于使用漂亮的、可访问的、由JavaScript驱动的日历将日期输入到字段中，该日历在您单击输入字段时会弹出。

您还可以制作类似于虚拟弹出窗口的自定义弹出对话框，只是它们不会打开单独的浏览器窗口–它们使用标记、CSS和JavaScript出现。

JQuery UI提供的另一个小部件是一个图形滑块，类似于媒体播放器的音量控制。

就像jQuery为一般的JavaScript编程所做的那样，jQuery UI致力于处理冗余的图形用户界面(GUI)任务。JQuery UI使您能够以更少的开发工作量制作专业的用户界面小部件。

这本书是为任何有兴趣用更少的代码做更多事情的人而写的！您应该对JavaScript有一个基本的了解。我回顾了一些基本的JavaScript编程概念，比如Event API，但我不会深入到关于JavaScript语言本身的详细内容。您需要至少对文档对象模型(DOM)和基本的JavaScript编程语法有一个基本的了解。此外，您还需要了解如何使用css和html，因为还需要了解这些技术。一个完全的初学者可能能够理解本书中的示例中发生的事情，但可能不理解初学者指南中介绍的某些术语和编程概念，所以如果您是初学者并坚持继续下去，我建议您也使用手头的一本入门Java书来这样做。具体来说，我推荐以下WROX书籍，以获得更多关于基础知识的帮助：

• 使用HTMLXHTML.css入门网络编程，第2版。(2008)，乔恩·达克特著
• 入门css：网页设计的级联样式表，第二版。(2007)，也是你真心写的。
• 《开始》，第三版。(2007)，保罗·威尔顿和杰里米·麦克皮克著

要获得超出本书所涵盖内容的更多关于JavaScript的知识，我推荐Web开发人员专业版，第二版。(2009)，尼古拉斯·C·扎卡斯著。