jQuery实战指南：从基础到高级应用

5星 · 超过95%的资源需积分: 10 139 浏览量更新于2024-07-23 收藏 23.89MB PDF 举报

"精通jQuery(2012年版)" 是一本全面介绍jQuery技术的书籍，旨在帮助读者深入了解和熟练运用这个流行的JavaScript库。书中分为多个部分，详细讲解了jQuery的基础知识、数据处理与Ajax、jQuery UI以及jQuery Mobile等多个主题。在第一部分"准备开始"中，作者首先介绍了jQuery的背景和它在Web开发中的位置，然后通过HTML基础、CSS基础和JavaScript基础的回顾，确保读者对前端开发有扎实的理解。这部分是为后续深入学习jQuery打下基础。第二部分"使用jQuery"是书的核心，涵盖了jQuery的基本用法，如选择元素、操作DOM、处理事件、应用效果等。第5章至第11章详细讲解了这些概念，包括如何选取页面元素，如何高效地操作文档对象模型（DOM），如何绑定和触发事件，以及如何利用jQuery丰富的动画效果。第11章还提供了实战案例的重构，帮助读者将理论知识应用于实际项目。第三部分"处理数据和Ajax"进一步深入，介绍了如何使用数据模板和处理表单，以及如何利用Ajax技术实现异步数据交互。这部分分为两个章节讨论Ajax的使用，涵盖基本概念和高级应用，使读者能够构建动态、数据驱动的Web应用程序。第四部分"使用jQuery UI"讲解了如何利用jQuery UI库创建各种交互式组件，如按钮、进度条、滑块、自动完成、手风琴、日期选择器、对话框和拖放功能等。这一部分详细介绍了每个组件的设置和用法，帮助开发者提升用户体验。第五部分"使用jQuery Mobile"则专注于移动设备开发，指导读者如何开始使用jQuery Mobile框架构建响应式、触摸友好的移动Web应用。这部分涵盖了页面和导航、对话框、主题和布局、按钮、可折叠块、表单、列表等内容，以及如何在移动环境中优化和重构代码。 "精通jQuery(2012年版)"是一本全面且深度的教程，适合希望提升jQuery技能的前端开发者。通过学习，读者不仅可以掌握jQuery的基本操作，还能了解到如何在实际项目中有效地利用jQuery进行数据处理、构建交互界面以及适应移动平台的开发。

CHAPTER 2  HTML PRIMER

#oblock {display: block; margin-left: auto; margin-right: auto; width: 700px;}

</style>

</head>

<body>

<h1>Jacqui's Flower Shop</h1>

<img src="astor.png"/><label for="astor">Astor:</label>

</div>

<img src="daffodil.png"/><label for="daffodil">Daffodil:</label>

</div>

</div>

<img src="peony.png"/><label for="peony">Peony:</label>

</div>

<img src="primula.png"/><label for="primula">Primula:</label>

</div>

<img src="snowdrop.png"/><label for="snowdrop">Snowdrop:</label>

</div>

<div id="buttonDiv"><button type="submit">Place Order</button></div>

</form>

</body>

</html>

This is a short and basic HTML document, but it contains some of the most important

characteristics associated with HTML. You can see how this document appears in a browser in

Figure 2-1.

CHAPTER 2  HTML PRIMER

Listing 2-2. Defining an Attribute

<label for="astor">Astor:</label>

This is a label element, and it defines an attribute called for. I have emphasized the attribute to

make it easier to see. Attributes are always defined as part of the start tag. This attribute has a name and

a value. The name is for, and the value is astor. Not all attributes require a value; just defining them

sends a signal to the browser that you want a certain kind of behavior associated with the element.

Listing 2-3 shows an example of an element with such an attribute.

Listing 2-3. Defining an Attribute That Requires No Value

This element has three attributes. The first two, name and value, are assigned a value like with the

previous example. (This can get a little confusing. The names of these attributes are name and value. The

value of the name attribute is snowdrop, and the value of the value attribute is 0.) The third attribute is just

the word required. This is an example of an attribute that doesn’t need a value, although you can define

one by setting the attribute value to its name (required="required") or by using the empty string

(required="").

The id and class Attributes

Two attributes are particularly important in this book: the id and class attributes. One of the most

common tasks you need to perform with jQuery is to locate one or more elements in the document so

that you can perform some kind of operation on them. The id and class attributes are very useful for

performing the location stage.

Using the id Attribute

You use the id attribute to define a unique identifier for an element in a document. No two elements are

allowed to have the same value for the id attribute. Listing 2-4 shows a very simple document that uses

the id attribute.

Listing 2-4. Using the id Attribute

<!DOCTYPE html>

<html>

<head>

<title>Example</title>

</head>

<body>

<h1 id="mainheader">Welcome to Jacqui's Flower Shop</h1>

<h3 id="holidays">(closed on national holidays)</h3>

</body>

</html>

CHAPTER 2  HTML PRIMER

I have defined the id attribute on three of the elements in the document. The h1 element has an id

value of mainheader, the h2 element has an id value of openinghours, and the h3 element has an id value

of holidays. Using the id value lets you find a specific element in the document.

Using the class Attribute

You use the class attribute to arbitrarily associate elements together. Many elements can be assigned to

the same class, and elements can belong to more than one class, as shown in Listing 2-5.

Listing 2-5. Using the class Attribute

<!DOCTYPE html>

<html>

<head>

<title>Example</title>

</head>

<body>

<h1 id="mainheader" class="header">Welcome to Jacqui's Flower Shop</h1>

<h3 class="info">(closed on national holidays)</h3>

</body>

</html>

In this example, the h1 element belongs to the header class, the h2 element belongs to the header and

info classes, and the h3 element belongs just to the info class. As you can see, you can add an element to

multiple classes just by separating the class names with spaces.

Understanding Element Content

Elements can contain text, but they can also contain other elements. Here is an example of an element

that contains other elements:

</div>

The div element contains three others: an img, a label, and an input element. You can define

multiple levels of nested elements, not just the one level shown here. Nesting elements like this is a key

concept in HTML because it imparts the significance of the outer element to those contained within

(this is a theme I will return to later). You can mix text content and other elements, like this:

Here is some text content

Here is some more text!

</div>

CHAPTER 2  HTML PRIMER

Understanding Void Elements

Not all elements can contain content. Those that can’t are called void elements, and they are written

without a separate end tag. Here is an example of a void element:

A void element is defined in a single tag, and you add a / character before the last angle bracket (the

> character). Strictly speaking, there should be a space between the last character of the last attribute

and the / character, like this:

However, browsers are very tolerant toward interpreting HTML, and you can happily omit the space

character. Void elements are often used when the element refers to an external resource. In this case, the

img element is used to link to an external image file called rose.png.

Understanding the Document Structure

In any HTML document, some key elements define the basic structure. These are DOCTYPE, html, head,

and body. Listing 2-6 shows the relationship between these elements with the rest of the content

removed.

Listing 2-6. The Basic Structure of an HTML Document

<!DOCTYPE html>

<html>

<head>

...head content...

</head>

<body>

...body content...

</body>

</html>

Each of these elements has a very specific role to play in an HTML document. The first, the DOCTYPE

element, tells the browser that this is an HTML document and, more specifically, that this is an HTML5

document. Earlier versions of HTML required additional information. For example, here is the DOCTYPE

element for an HTML4 document:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

The html element denotes the region of the document that contains the HTML content. This

element always contains the other two key structural elements, head and body. As I said at the start of this

chapter, I am not going to cover the individual HTML elements. There are too many of them, and

describing HTML5 completely took me more than 1,000 pages in my HTML5 book. That said, I will

provide brief descriptions of the elements I use so that you have a good idea of what a document does.

Table 2-1 summarizes the elements used in the example document, some of which I describe in a little

more detail later in this chapter.

剩余988页未读，继续阅读

樊潇洁

粉丝: 87
资源: 36

jQuery实战指南：从基础到高级应用

Jquery 1.8.1开发版

jquery从入门到精通

telerik ui kendo for jquery 2022源码版

jquery easyui 1.4.5版 api 中文版

不同版本的jquery

jquery版本共存_如何在一个页面上让多个jQuery版本共存

如何检测 jquery 的版本 xss

jquery官网切换版本

jQuery版本安全漏洞

jquery3.6.0 jquery2.1 区别

最新资源