精通jQuery：实践指南

需积分: 10 41 浏览量更新于2024-07-21 收藏 6.5MB PDF 举报

"Practical jQuery" 是一本由 Apress 在2015年出版的书籍，旨在帮助读者在实际开发环境中掌握jQuery的运用。本书详细介绍了如何下载并逐步使用jQuery，直至编写自己的插件和利用QUnit测试DOM。jQuery是当前最受欢迎的JavaScriptWeb应用开发框架之一，虽然入门容易，但要充分利用其功能并避免常见错误却需要深入理解。书中涵盖了jQuery的强大DOM操作工具，教你如何动态更新网站内容。通过学习，你可以学会如何在jQuery框架上构建自定义插件，实现元素动画，创建自定义jQuery元素，并遵循最佳实践。此外，你将了解到如何使用jQuery进行单元测试和代码重构，体会其表达力强且简洁的代码结构以及高效开发的优势。本书内容包括：jQuery的发展历程、开始使用jQuery、使用jQuery遍历DOM、DOM操作、jQuery中的事件处理、实际场景中的事件处理、jQuery中的动画效果、使用jQuery进行Ajax交互、创建jQuery插件、整合jQuery插件、利用jQuery框架以及使用QUnit测试jQuery代码。每一章都深入浅出，帮助读者从基础到高级全面掌握jQuery。作者和审稿人都是经验丰富的专业人士，他们的见解和经验贯穿全书，确保读者能够从实践中学习并提升技能。书中的附录和索引提供了方便的导航，让读者能够快速找到所需的信息。无论你是有一定JavaScript基础想要深入jQuery的开发者，还是正在项目中寻找提高效率方法的团队成员，"Practical jQuery" 都是一本不可多得的实用指南，它能帮助你在面对紧迫的项目期限时，更好地发挥jQuery的潜力，确保项目的性能达到最优状态。

CHAPTER 1 ■ EVOLUTION OF JQUERY

Just the same, there would be problems deleting the implicit globals on IE8 or older versions. So, if there

is a need to remove the variable apressAuthors, the following code could create problems. Thus, while

delete window.apressAuthors;

followed by

alert(apressAuthors);

would alert “undefined” on Chrome and Firefox, etc., it would show an error, “Object doesn’t support this

action,” under IE.

Again, reworking would be required to overcome this challenge. You could probably use exception

handling to solve this problem. So, you could write the following code:

try{

delete window.apressAuthors;

} catch( error ) {

window['apressAuthors'] = undefined

}

There are a number of challenges, then, in working with JavaScript, although it may appear that

JavaScript is quite a versatile and powerful language to deal with web development problems web

developers face in their day-to-day activities. Therefore, there had to be some way out, and developers had

to find the means to eliminate the problems of compatibility and cross-platform functionality.

Need for a Revolution

There was increasing discontent among developers who had to write extra lines of code to achieve the

desired functionality across browsers. People used to pay the same amount of money to developers. But

since developers had to do more work for less pay, there was a growing demand in the community to have

some omnipotent solution.

The document that was rendered in the web browser had to be manipulated by using lengthy JavaScript

code, and that, too, without the guarantee of being functional across browsers. Even if the code would work

on various browsers, the developers still had to write long lines of code. For example, considering the HTML

<div id="test"></div> as in the following code is perfectly okay to create a new container for an error

message for all browsers that support JavaScript:

var div = document.createElement("div");

div.setAttribute("class", "error");

div.innerHtml = "There was an error";

var testDiv = document.getElementById("test");

testDiv.appendChild(div);

What does the code do? The steps are as summarized.

1. Create a new element in the document (the web page).

2. Set the class attribute of this element to be error. (The CSS for error has

already been defined previously. Assume that some external CSS or even some

style tag containing the definition has been written elsewhere.)

www.it-ebooks.info

CHAPTER 1 ■ EVOLUTION OF JQUERY

3. Set the text inside this div as “There was an error.”

4. Locate a div in the document that has the id as test.

5. Append the newly created div inside this located div. Because this located div

is already in the document, the newly created div will also get added to the

document.

Let us take up a case in which we have to manipulate some CSS attributes via JavaScript. Let us assume

that there is a div with some preset CSS attributes, and we have to change the opacity of the div using

JavaScript. Thus, the code snippet that follows is worth looking at.

var div = document.getElementById("test");

div.style.opacity = 0.5;

div.style.filter = "alpha(opacity=50) ";

Now, what has happened here is that browsers prior to IE8 did not understand the opacity attribute;

they understood filter. So, to achieve a single objective, more code had to be written in the form of code

that the individual browser could understand and, therefore, interpret.

You can easily see that the task that was performed was rather simple but that many lines of code

still had to be written. This was becoming unacceptable to developers. Someone had to take charge of the

situation, and out of the blue, something had to lead the way for web developers. Developers desperately

wanted to cut down on the amount of code they had to write. They wanted to be able to focus on the

business logic rather than the underlying browser’s CSS and JavaScript implementation. They wanted some

code that would run across all systems uniformly.

Who Was the Revolutionary?

There was this gentleman, John Resig, who used to write web applications, and he was among the same

community of developers who felt the heat writing lengthy JavaScript code, and that, too, without the

guarantee of using a hack-less approach. He continued web development and, in the course of doing so,

gathered a number of libraries he required and merged them gradually. This merger resulted in a new

bundle, and Resig continued to refine the bundle, by making necessary modifications to the existing code.

Ultimately a new bundle with the name jQuery became available to the community. Because Resig was

targeting the DOM manipulation capabilities significantly, and there was a CSS library with the name

cssQuery, the name jQuery became influential and, hence, coined.

Having done the homework all the while, Resig was creating a bundle, which he released as a

framework on August, 26, 2006. The world came to know about a new framework that was to revolutionize

the way front-end programming for the Web occurred. Even after having revolutionized front-end Web

development, Resig did not stop there. He is currently located in Brooklyn, New York, and is working as

dean of computer science at an academy while still breaking new barriers to help the web development

community a great deal.

■ Note You can obtain more information about John Resig from the Wikipedia page located at

https://en.wikipedia.org/wiki/John_Resig.

www.it-ebooks.info

CHAPTER 1 ■ EVOLUTION OF JQUERY

Why jQuery?

An act becomes a revolution when people can see the inherent advantages associated with it. And it takes

time as well. Thus, as the word about jQuery started spreading across the web development community,

jQuery began to gain importance and popularity. There were a number of reasons web front-end developers

started to use jQuery. The most important reasons included the following:

• Minimal and easy coding

• Readable/clean code

• Easy CSS handling

• Animation methods

• Intuitive function calls

We will discuss each of these reasons in the following sections.

Minimal and Easy Coding

jQuery was developed on top of JavaScript, so jQuery can be safely termed a JavaScript framework. But

unlike the lengthy coding style inherent in JavaScript, jQuery was designed to be simple. The lengthy

JavaScript code can be easily replaced by the compact code of jQuery. Consider the following HTML:

and the corresponding JavaScript code:

var testDiv = document.getElementById("test");

testDiv.setAttribute("class", "error");

testDiv.innerHtml = "There was an error";

The following jQuery code can be written to attain the same result as simply as

$("#test").addClass("error").html("There was an error"));

The result in both the cases would be the HTML code <div id="test" class="error">There was

an error</div>. The jQuery code would work fine, because it looks for the id attribute to search the target

element. We will take up in detail the syntax and the semantics that jQuery follows in the coming chapters,

but for a quick reference, the ID is selected using the name that has been specified in the id attribute

preceded by a hash symbol (#).

Considering another replacement of the lengthy JavaScript code by a smaller and more readable jQuery

code, if you have the HTML <div class="apress">Hello Apress!</div> and the JavaScript code to access

this HTML node as document.getElementsByClassName("madhav")[0].innerHTML, the same purpose can

be achieved by using $(".apress").html(). As a quick explanation of how the same purpose can be served

by two different codes (we will take this up in detail in the coming chapters), the jQuery code looks up an

element by its class name as well, with the selector defined as dot(.), followed by the name specified in the

class attribute. As a keen observer, you will have noted that there have been two uses of the same method

(html). On observing the previous code and comparing it with the example immediately preceding, we

easily see that the same method html behaved differently on the passed arguments. This makes jQuery easy

to write, as a developer does not have to remember a lot of methods and their signatures to achieve similar

functionality. Summing up, the html method, when passed no arguments, returns the text that has been

written inside the target node, whereas if some valid string is passed as the argument, the same method sets

the text inside the target node, as the string that has been passed on.

www.it-ebooks.info

CHAPTER 1 ■ EVOLUTION OF JQUERY

Readable/Clean Code

Another reason for you to switch to jQuery is the readability quotient that is added to the code that is written

using jQuery. Readability is that programming language feature that enables the next person working on

a code (which is written by someone else) to be able to read and understand it as much as possible. Thus,

jQuery adds readability to the code, because the syntax is quite simple—all elements having an ID attribute

that can be selected in the same manner. Similarly, all elements having a specified class attribute can be

selected in the same manner. In short, one aspect of jQuery adding readability to the code that is written is

the facility with which an element can be selected. The following discussion offers a number of examples to

support this assertion.

Taking the HTML <div class='apress'>Hello Apress Fans!</div>, the text inside this node can be

selected by writing the JavaScript code

document.getElementsByClassName("madhav")[0].innerHTML;

and the jQuery code as well:

$(".madhav").html();

Similarly, if there is the following JavaScript code to make all text color inside all divs across the

rendered web page red:

document.getElementsByTagName("div")[0].style.color = 'red';

the same objective can be achieved by writing the jQuery code as

$("div").css({'color', 'red'});red'});

As further demonstration of its utility, there is a method provided by jQuery that you can use to switch

the visibility of certain node(s) identified by some selector from on to off and from off to on. In short, you

can hide or show the matched element by using a single method: toggle. A detailed explanation to this

method is provided later on. For now, if the HTML code is <div class="test">This will demonstrate

<strong>toggle</strong></div>, in order to toggle the visibility of the strong HTML node between on and

off you just have to write the jQuery code following:

$(.test).on('click', function(){

$('strong').toggle();

});

It is clearly visible from the examples that jQuery adds readability to the code that you write. Long and

error-prone lines of JavaScript do have an alternative in the form of clean jQuery, for solving common

problems.

www.it-ebooks.info

CHAPTER 1 ■ EVOLUTION OF JQUERY

Easy CSS Handling

As stated earlier in the chapter, the motivation and inspiration behind the creation of jQuery was cssQuery.

A framework intended to ease the use of CSS, jQuery has been designed to make handling CSS easier. There

is a method with the name css. In order to be able to use this method, you have only to remember the

original syntax, if you can remember the JavaScript way of writing CSS. So, to set a single CSS attribute to

some selector available in the document, you only have to choose from among the three usages available:

$('html-selector').css('css-property', 'css-value '); // Setting a single attribute

$('html-selector').css({'css-property': 'css-value', ...}); //Setting multiple attributes

the CSS way

$('html-selector').css({cssProperty: 'css-value', ...}), ...}); // Setting multiple

attributes the JavaScript way

Thus, all of the CSS manipulation that you can think of is brought about with the help of this method

(css) itself, ranging from simple text color change to complicated transition effects. All that is required is the

plain old CSS attribute and the corresponding required value. The simplicity and ease in CSS handling is as

shown following:

$("div").css('color', 'red'); //change the text color inside all the divs available inside

the document to red

$("div").css({'color': 'red', 'border': '1px solid #000', 'background-color': '#fefefe'});

// Setting multiple attributes

■ Note Multiple CSS properties are passed on as JSON to this method.

Similarly, if there is a need to add some CSS class, there is a method addClass that would add some CSS

class to some specified selector. The signature of the method is

$('html-selector').addClass('some-css-class');

The use of the method is quite simple. Let us take one of the previous examples and write it the jQuery

way. Considering the HTML code <div id="test"></div>, if you want to add a CSS class attribute to this

node, you need to write the following jQuery code:

$("#test").addClass("error");

The effect of the jQuery code would be the modified HTML which would be the same as

<div id="test" class="error"></div>. Thus, all the properties available with the class error will now be

added to the matched div. This easily demonstrates the easy CSS handling provided by jQuery.

Animation Methods

If you ask a web developer for a reason to have started jQuery, the most probable answer would be

animation. jQuery provides a number of methods that support some really fantastic animation,

including animate, fadeIn, fadeOut, fadeTo, etc., which provide handy ways to animate any element

you would wish. The most common out of these methods is the animate method. The animate method

www.it-ebooks.info

剩余304页未读，继续阅读

vanridin

粉丝: 108
资源: 1187

精通jQuery：实践指南

Full Stack JavaScript(Apress,2015)

Apress.Practical.Apache.Struts2.Web.2.0.Projects.ZIP

Apress.Practical.Web.2.0.Applications.With.PHP.RETAiL.eBOOk-sUppLeX.rar

人工智能项目实践-Python基于BP神经网络实现鸢尾花的分类源码+文档说明

物联网智能设备制作-第7章-物联网网关-智能微型气象站制作-源代码与库文件汇总

物联网智能设备制作-第4章-智能设备PCB电路板设计-源代码与库文件汇总

yolo算法-安全帽工人数据集-3065张图像带标签hard-hat-workers-ywzyc.zip

yolo算法-腐烂水果检测器数据集-3196张图像带标签rotten-fruit-detector.zip

YOLO标签可视化源代码

鞍山师范学院等大学在陕西2020-2024各专业最低录取分数及位次.pdf

最新资源