Pro PHP And jQuery

JASON LENGSTORF

1 Introducing jQuery

To fully understand jQuery and its applications in modern web programming, its important to take a moment and look back at where jQuery came from, what needs it was built to fill, and what programming in JavaScript was like before jQuery came around.In this chapter youll learn about JavaScript libraries and the needs they seek to fulfill, as well as why jQuery is the library of choice for the majority of web developers. Youll also learn the basics of jQuery,including how to make the library available for use in your applications and how the core of jQuery—its powerful selector engine—works.

1.1 Choosing jQuery over JavaScript

JavaScript has a reputation for being rather unwieldy in web applications. A lack of consistent browser support, difficult debugging, and an intimidating syntax can make learning JavaScript feel impossible.To be fair, all the things that make JavaScript seem difficult are part of what make it so powerful, but that doesnt make it any more inviting to a novice web developer looking to add JavaScript to his arsenal.

1.2 Understanding JavaScript Libraries

The steep learning curve associated with JavaScript has been a sore spot for developers for years, and as frustrations grew, several ambitious developers started building JavaScript libraries, also referred to as JavaScript frameworks. These libraries aimed to simplify the use of JavaScript to make it more accessible to both new and existing developers by creating easy-to-use control functions that remove some of the heavy lifting from everyday JavaScript tasks. Libraries are especially useful in the realm of Asynchronous JavaScript and XML (AJAX) due to the complexity of performing the same tasks using straight JavaScript.

1.3Understanding the Benefits of jQuery

Every JavaScript framework has its own benefits; jQuery is no exception, providing the following benefits:

Small file size (approximately 23KB as of version 1.4)

Extremely simple syntax

Chainable methods

Easy plug-in architecture for extending the framework

A huge online community

Great documentation at http://api.jquery.com

Optional extensions of jQuery for added functionality, such as jQueryUI

1.4 Understanding the History of jQuery

The brain child of developer John Resig jQuery was first announced at BarCamp NYC in early 2006 (for more on BarCamp, see http://barcamp.org). Resig noted on his web site, that he created jQuery because he was unhappy with the currently available libraries and felt that they could be vastly improved by reducing “syntactic fluff” and adding specific controls for common actions(http://ejohn.org/blog/selectors-in-javascript/).

JQuery was a big hit in the development community and quickly gained momentum. Other developers came on to help refine the library, ultimately resulting in the first stable release of jQuery,version 1.0, on August 26, 2006.

1.5 SETTING UP A LOCAL TESTING ENVIRONMENT

Though setting up a local testing environment is not required for the exercises presented in this book,doing so is a good development practice. Testing locally allows for quicker, more secure development and is generally easier than trying to develop on a remote server.

1.6 Including jQuery in Web Pages

To use jQuery in a project, the library needs to be loaded in your HTML document to give your script access to the libraryrsquo;s methods. If the library is not loaded first, any scripts using jQuery syntax will likely result in JavaScript errors. Fortunately, loading jQuery is very simple, and there are several options available to developers to do so.Including a Downloaded Copy of the jQuery Library.

1.7 Using the Google AJAX Libraries API

Google Code also offers an option for loading jQuery called the AJAX Libraries API (see http://code.google.com/apis/ajaxlibs). In Googlersquo;s words, “The AJAX Libraries API is a content distribution network and loading architecture for the most popular, open source JavaScript libraries.”

Using the AJAX Libraries API is simple and straightforward, and this is method that will be used throughout this book. To include jQuery in your web site using the AJAX Libraries API, use the following snippet:

lt;script type='text/javascript'

src='http://www.google.com/jsapi'gt;lt;/scriptgt;

lt;script type='text/javascript'gt;

google.load('jquery', '1.4.2');

lt;/scriptgt;

1.8 Setting up a Test File

Now that your testing environment is set up, create a new folder in the htdocs folder within your XAMPP installation called testing, and create a new file inside it called index.html. In the editor of your choice, insert the following HTML markup:

lt;!DOCTYPE htmlgt;

lt;htmlgt;

lt;headgt;

lt;titlegt;Testing jQuerylt;/titlegt;

lt;/headgt;

lt;bodygt;

lt;pgt;Hello World!lt;/pgt;

lt;p class='foo'gt;Another paragraph, but this one has a class.lt;/pgt;

lt;pgt;lt;spangt;This is a span inside a paragraph.lt;/spangt;lt;/pgt;

lt;p id='bar'gt;Paragraph with an id.

lt;span class='foo'gt;And this sentence is in a span.lt;/spangt;

lt;/pgt;

lt;script type='text/javascript'

src='http://www.google.com/jsapi'gt;lt;/scriptgt;

lt;script type='text/javascript'amp;g

剩余内容已隐藏，支付完成后下载完整资料

---

PHP和jQuery

Jason Lengstorf[美]

1jQuery的介绍

为了充分了解jQuery和它在现代网络编程中的应用，我们抽出一点时间来探讨jQuery来自哪里，它的建立是为了填补什么需求，并在jQuery产生之前JavaScript编程是什么样的，这些对于学习来说是非常重要的。在这一章中你将学习JavaScript库，它想要完成哪些的需求以及为什么jQuery是多数Web开发者选择的插件。你也将学习jQuery的基础知识，包括如何让它在你的应用中可以使用，以及jQuery的核心，即强大的选择器引擎是如何工作的。

1.1越过JavaScript选择jQuery

众所周知JavaScript它在应用程序中相当不便利。缺乏一致的浏览器支持、调试困难和令人生畏的语法让我们觉得仅仅学习JavaScript是不可行的。公平地说，一切让JavaScript看起来似乎很难的东西却是使它如此强大的原因。即使它很强大也并不会有更多的新手开发者愿意将JavaScript添加到他们的工具库中。

1.2理解JavaScript库

与JavaScript相关的艰难的学习曲线对开发者来讲，已经是多年的痛苦了。为了从挫折中获得成长，一些野心勃勃的开发商开始建造的JavaScript库，也被称为JavaScript框架。

这些库的目的是简化JavaScript的使用，使其更容易获得新的和现有的、通过创建易于使用的控制功，解除JavaScript开发人员的一些繁重的日常任务。库在异步JavaScript和XML（AJAX）领域特别有用，因为直接利用JavaScript执行相同任务会相对复杂一点。

1.3了解jQuery的优点

每一个JavaScript框架都有自己的优势，jQuery也不例外，它有以下的优点：

1. 较小的文件大小（约23kb作为1.4版本）
2. 极其简单的语法
3. 可链接的方法
4. 简单的插件体系结构扩展框架
5. 大型在线社区

jQuery的添加功能扩展选项，如JQueryUI

1.4了解jQuery的历史

jQuery的开发者John Resig在2006年初的纽约首次宣布jQuery的雏形。Resig在他的网站中指出，他创建了jQuery是因为他使用目前可用的库有弊端，觉得他们可以通过减少“语法错误”来大大提高加入共同行动的控制性。

jQuery对社区发展迅速的势头是一个巨大的打击。他与其他的开发人员合作改进库，在2006年8月26日，最终jQuery的第一个稳定版本1版发布。

1.5建立本地测试环境

在这里提出的练习并不需要建立一个本地的测试环境，这样做只是一个很好的发展实践。在本地测试允许更快，更安全的开发和一般比试图在远程服务器上开发更容易。

1.6网页中包含的jQuery

在一个项目中使用jQuery，需要在HTML文档中加载库，以便给你的脚本提供使用说明方法。如果库不先安装，任何使用jQuery语法的脚本，结果将可能显示JavaScript错误。幸运的是，加载jQuery是非常简单的，也有提供给开发者做选择的几个选项，包括下载jQuery库。

1.7使用谷歌Ajax库的API

为了加载jQuery，谷歌的代码也提供了一个叫Ajax库的API调用的选项（请查询网站）。用谷歌的话来说，“Ajax库API是一个最受欢迎的内容分发网络和加载架构，开源的JavaScript库。” Ajax库API的使用很简单直接，这是将贯穿本书的方法。包括在您的网站，也在使用jQuery Ajax库API，例如使用下面的代码段：

lt;script type='text/javascript'

src='http://www.google.com/jsapi'gt;lt;/scriptgt;

lt;script type='text/javascript'gt;

google.load('jquery', '1.4.2');

lt;/scriptgt;

1.8设置一个测试文件

现在，建立你的测试环境，在XAMPP的htdocs文件夹下，创建一个的新文件夹，里面创建一个名为index.html的新文件。在你已经选择的html编辑器中，对下面的HTML进行标记：

lt;!DOCTYPE htmlgt;

lt;htmlgt;

lt;headgt;

lt;titlegt;Testing jQuerylt;/titlegt;

lt;/headgt;

lt;bodygt;

lt;pgt;Hello World!lt;/pgt;

lt;p class='foo'gt;Another paragraph, but this one has a class.lt;/pgt;

lt;pgt;lt;spangt;This is a span inside a paragraph.lt;/spangt;lt;/pgt;

lt;p id='bar'gt;Paragraph with an id.

lt;span class='foo'gt;And this sentence is in a span.lt;/spangt;

lt;/pgt;

lt;script type='text/javascript'

src='http://www.google.com/jsapi'gt;lt;/scriptgt;

lt;script type='text/javascript'gt;

google.load('jquery', '1.4.2');

lt;/scriptgt;

lt;/bodygt;

lt;/htmlgt;

图1-1, 我们在浏览器中加载的文件

在这个脚本文件中使用jQuery的基本操作。

2常用的jQuery的属性和方法

现在你知道元素是如何进行挑选的，你就可以开始学习了jQuery如何简化了与网页互动的基础。在本章中你可以自己动手去了解jQuery的最常见和最有用的方面。本章将读起来更像一个参考，有时可能有点晦涩，但它肯定在你最感兴趣的地方，提供的一些示例帮助你了解。对这些方法的工作原理有一个基本的了解，当你开始在这本书中开始着手做这个示例项目时，会发现这些内容将是非常宝贵的。

2.1了解jQuery脚本的基本属性

一个jQuery的最方便的特点是，几乎所有的方法都是连贯性的，这意味着方法可以一个接一个的执行。这将使代码清晰，简洁，很容易遵循，例如：

$(p)

.addClass(new-class)

.text('Im a paragraph!')

.appendTo(body);

使用链接的方法是可行的，因为每个方法返回后，jQuery对象本身修改。起初，这个概念似乎很难理解，但你通过本章上述的例子，应该更加清晰。

2.2了解jQuery的方法

jQuery更适合几种常见编程任务。乍一看，它简化了JavaScript开发，提供了以下强大的工具：

（1）DOM元素的选择使用CSS语法（你在1章学到的）

（2）简单的遍历和修改DOM

（3）简单的语法处理浏览器事件（如单击和鼠标旁白）

（4）访问一个元素的所有属性，包括CSS样式属性，并能修改动画及其他影响

（5）简单的AJAX控件

2.3遍历DOM元素

遍历jQuery是指从一个移动到另一个遍历DOM元素，本质上是最初选择完毕后进行过滤的另一种形式。这很有用，因为它允许开发人员完成一个指令，然后移动到DOM的另一部分，这个过程不需要通过选择器执行另一个搜索。它也有助于开发人员在影响的元素的周围，立即修改被操纵的元素或以其他方式使用的脚本。可以通过添加一个类到父元素的范围，以指示活动将所有不活动的窗体元素禁用，操纵任何其他有用的任务的数目。

2.4介绍JQuery($)方法

jQuery的核心是jQuery函数。在jQuery中，这个是jQuery功能和用于在每个实例的心脏和灵魂。在大多数jQuery的实现中，快捷$（）代替jquery()保持代码简洁。我们不会深入的进行编程，使这一功能实现。但它基本上创建了一个jQuery对象和评估表达式作为参数来传递。然后，它决定了应该如何回应，并相应地进行修改。注意，某些其他JavaScript库也使用$（）函数，所以试图同时使用多个库时可能会发生冲突。jQuery提供了一个解决这个情况noconflict() 函数。

2.5进入PHP高级编程

在这一点上，你要把你的新的jQuery知识留出一点和PHP在后台集中使用。分成2部分教你如何计划和实施一个面向对象的事件。你以后使用jQuery的新知识的后台解决方案方面会有显著的提高。本书假设你对PHP的基本概念一个听起来很合理的把握（变量、函数、基本语言结构）；刷新你的PHP基础知识，然后再去看看PHP的初学者。如果程序运行正常，您现在可以使用jQuery增强应用程序来改善用户体验。在接下来的章节中，你将创建一个层的JavaScript代码，会覆盖上你的应用程序添加的Ajax功能。

2.6认识对象和类的区别

抛开复杂问题不谈，面向对象中就有一个大的问题：有一个在面向对象的困惑：经验丰富的开发人员在开始谈论对象和类时，认为它们似乎是可互换的术语。然而，事实上不是这样的情况，虽然开始时解除这种差异可能会比较艰难。例如，一个班级就像一个房子的蓝图。即使房子不存在，它也要首先定义了房子的形状，与房子的不同部分之间的关系，清楚地定义和计划，一个对象就像是根据该蓝图的实际房子。

存储在对象中的数据像是用木头、电线和混凝土组成房子：如果没有按图纸进行组装，只不过是一堆东西而已。然而，当所有的一切都在一起，它成为一个有组织的房子。类构成了数据和行为的结构，并使用该信息来构建对象。一个以上的对象可以同时从同一个类中建立，每个对象都是独立的。与我们的建筑类比，这是类似的方式，一个完整的细分可以建立从相同的蓝图：150个不同的房子，所有外观相同，但有不同的家庭和不同的内装饰。

剩余内容已隐藏，支付完成后下载完整资料

---

资料编号：[30102]，资料为PDF文档或Word文档，PDF文档可免费转换为Word