Started learning jQuery

Reprint: OneChen's Blog
Read some basic knowledge about the Jquery. Posted about sharing. A lot of good articles online. Study hard in ~

With the rise of JavaScript, JavaScript libraries have a series of flourishes. From the Early Prototype, Dojo 2006 jQuery, and then in 2007 ExtJs. Can be found, the Internet is being whipped up a storm JavaScript. In this financial turmoil, jQuery for its unique and elegant posture, and always at the center of the storm, more and more and more people are in hot pursuit of.

About 1.1 jQuery

jQuery is the Prototype after another excellent JavaScript library, created by John Resig in January 2006. It simplifies HTML document traversing, operation DOM, handling events, animation and Ajax implementation of the operation. Its unique and elegant style to change the JavaScript code programmers programming design methods and thinking.

Whether you are a website designer, background developers, project managers or amateur, but also whether you are a beginner or a JavaScript master JavaScript, you have many reasons to learn jQuery, because it is for any person.

1.2 add jQuery

Introduction 1.2.1 JavaScript

JavaScript is a dynamic web page in order to meet the needs of the production of the birth of a programming language. It was developed by Netscape as a scripting language (scripting language). The emergence of JavaScript allows Web pages and users a real-time implementation, dynamic, interactive relationship between the web pages to include more active and more exciting elements of the content. However, almost every Web developer has cursed have JavaScript experience. The involvement of the controversial language of its complex known as the Document Object Model (DOM) programming model, the achievement of poor and debugging tools, and browser inconsistencies. Until now, many developers still think JavaScript is the language of an offensive.

WEB2.0 With the rise of Web development as a widely used scripting language, JavaScript began to become increasingly important, JavaScript to recover some of the industry leaders have also started to re-examine such a programming language. Such as Ajax (Asynchronous JavaScript + XML) programming technology such as Web pages more attractive, and a complete Web development framework, such as Apache Cocoon (a use of XML and take full advantage of the power of the release of the framework), then allow the application of JavaScript more and more limited than it is a Web page used to create a simple script.

1.2.2 JavaScript library and contrast the role of

JavaScript library to help relax you have set up web2.0 features highly interactive rich client-side page, which with a lot of predefined objects and utility functions. The following are currently several popular JavaScript libraries to introduce and contrast:

Prototype (http://www.prototypejs.org/)
Figure 1-1

This is the first one forming the JavaScript library, it built JavaScript objects (such as String object, Array object, etc.) to do a lot of expansion. Many projects are now using it, but this is largely due to previous projects has now had to continue to be used. This library can be seen as useful to a lot of good ways to mix JavaScript with a JS library, you can even when you need them to keep the code out a few paragraphs into his own script. But also because it is forming during the morning, in the overall object-oriented programming to grasp the idea is not a place on, resulting in a loose structure.

Dojo (http://dojotoolkit.org/)
Figure 1-2

Dojo powerful is that it provides a lot of other JavaScript libraries do not provide the function. Offline storage such as the API, to generate the components icon, based on the SVG / VML graphics library modest, Comet advantage of a lot of support and so on. Is very suitable for enterprise-class applications a JavaScript library. At the same time, it has also been supported by some large companies, such as IBM, SUN, BEA, etc.. At the same time, it is also a very significant drawback: the steep learning curve, incomplete documents, the most fatal is the API instability, each upgrade all the existing procedures could lead to failure. However, it seems the 1.0 version of the future, the situation improved. Is a great potential for the future of the library.

YUI (http://developer.yahoo.com/yui/)
Figure 1-3

This library is built out of Yahoo's JavaScript library. Full name is The Yahoo! User Interface Library. It offers some of the more abundant on the DOM operation, Ajax applications, such as a series of packages. At the same time, it also includes several core CSS, such as. Is a relatively complete set of rich interactive web pages complete tool set. The document itself extremely well to such an extent that is rarely seen third-party to write the corresponding article. The preparation of the code itself is also the norms, scalability is also a good library.

ExtJS (http://www.extjs.com/)
Figure 1-4

ExtJS, is often referred to as Ext. The original is an extension of YUI, mainly used to create front-end user interface, it provides an extremely rich component. Today has been developed can be used to include the jQuery framework, including a variety of JavaScript libraries as a foundation, and the Ext library as an extension of the interface to use. However, due to focus on the interface, so comparing their bloated, non-compressed, then the document trillion (MB), so please consider before. Please note, Ext is not completely free of charge, if used for commercial purposes, is authorized to pay for permission.

MooTools (http://mootools.net/)
Figure 1-5

This is a lightweight JavaScript library, is a simple, modular, Object-Oriented JavaScript framework. The syntax is almost the same with the Prototype, but it provides greater functionality and better scalability and compatibility. Its excellent modular thinking, the core code is only 8K. What modules are available for immediate use to import, even if the full version is not more than 160K. It was also completely full object-oriented programming ideas, simple and intuitive syntax, perfect document.

jQuery (http://jquery.com)
Figure 1-6

The focus of this book is also jQuery is a lightweight library, which has a strong selection, and the excellent operation of the DOM, event handling and reliable, excellent compatibility, as well as chain operations, etc., which attract a number of advantages JavaScript developers grant to study it, research it. The following section details the advantages of jQuery.

1.2.3 jQuery advantage

jQuery Writing Our goal is to emphasize the small, many do (write less, do more). Selector to its unique, chain mode of operation of the DOM, event binding mechanism Ajax packages are perfect to catch up with the other JavaScript libraries.

(1) Lightweight. jQuery is very lightweight, the use of Dean Edwards's Packer (http://dean.edwards.name/packer/) compressed, less than 30KB in size, if the server-side enable gzip compression, or even the size of only 16KB!

(2) a strong selector. jQuery will allow the operator to use the CSS 1 from almost all CSS 3 selectors, as well as original jQuery Senior and complex selector. If you need, but also by adding plug-ins to support XPath selector! The next chapter we will explain you in detail the powerful jQuery selectors.

(3) excellent package DOM operations. jQuery package a great deal of common DOM operations, to enable you to prepare the relevant DOM operation procedure can be handy, to complete a variety of elegant operation was very complex, so that novices can write JavaScript excellent procedure. Chapter III will focus on you in the elegant jQuery Introduction DOM operation.

(4) a reliable mechanism to deal with the case. jQuery mechanism lessons deal with the case of JavaScript experts prepared by Dean Edwards case deal with the essence of function, the jQuery Event Binding deal fairly reliable time. Set aside at retreat (graceful degradation) aspects, jQuery is also very good to do. Chapter IV will introduce you the focus of the case deal with jQuery.

(5) complete Ajax. jQuery will package all of the Ajax operation to a function $. ajax Village, Ajax allows us to deal with the time to concentrate on business logic without having to care about browser compatibility complex and the XMLHttpRequest object to create and use. Chapter VI focuses on jQuery for you in dealing with Ajax.

(6) not pollute the top-level variable. jQuery only set up a jQuery object of all of its methods under this object in. Another alias $ is also to hand over control at any time. Absolutely not the object of other pollution!

(7) excellent browser compatibility. As a popular JavaScript library, browser compatibility is of course one of the conditions required. jQuery in IE 6.0 +, FF 2 +, Safari 2.0 + and Opera 9.0 +, under normal operation. At the same time repairing some of the differences between browsers. So that you do not need to carry out the project in the busy pre-browser compatible with the establishment of a library and burn.

(8) chain operation. jQuery the most unique is its mode of operation of the chain - that is, to occur in a jQuery object with a set of actions can be repeated without a direct link writing to obtain the object. This is so very elegant jQuery code. Please note that in the section 1.3.3, we will discuss the issue of the corresponding code style.

(9) behavior and structure of layer separation layer. Html developers do not need to call the incident again, but the direct use of jQuery selector to select elements, and then add the events directly to the elements.

(10) support a wealth of plug-ins. Anything stronger, if not many people have the support of the development is not always up. jQuery easy scalability, has attracted developers from around the world come together to prepare the expansion of jQuery plug-ins. Now there are more than hundreds of plug-in support of the official. In the seventh chapter, we will introduce several popular plug-ins and guide you to write your own plug-ins do.

(11) to improve the document. jQuery documentation is very rich, at this stage, for English documents, while fewer Chinese documents. Of course, a lot of love in the jQuery team for the efforts, such as translation Turing Education "Learning jQuery".

(12) open source. jQuery is an open source product, anyone can use free.

JQuery since having so many advantages, we have no reason not to learn it? Here we begin formal contacts it, use it.

1.3 to prepare a simple jQuery code

1.3.1 Environment configuration jQuery

l access to jQuery: the latest version

JQuery to enter the official Web site at: http://jquery.com/. As shown in Figure 1-7 at the lower left of the Download jQuery region, download the latest jQuery library (Editor's Note: The current version is 1.2.6) file, this book all examples are based on the jQuery version 1.2.6 to prepare.
Figure 1-7 jQuery Official Website screenshot

l jQuery: Library Type Description

Download jQuery in the region, a total of three types of jQuery: Treasury, namely jQuery 1.2.6 (16kb, Minified and Gzipped), jQuery 1.2.6 (97kb, Uncompressed) and jQuery 1.2.6 (30kb, Packed), the difference between Table 1-1 as follows:

Table 1-1 jQuery library type comparative table

Name
Size
Description

jQuery 1.2.6

(16kb, Minified and Gzipped)
16kb
After gzip compression, the smallest for the application of the product, the version of the project prepared

jQuery 1.2.6

(97kb, Uncompressed)
97kb
Integrity and non-compressed version, for testing, learning and the development of version prepared

jQuery 1.2.6 (30kb, Packed)
30kb
Packer after compression, as the server does not support gzip version prepared

Table 1-1 Comparison of several types of jQuery library

For the unification of the book to explain, it is recommended to choose to download jQuery 1.2.6 (97kb, Uncompressed) version.

l jQuery environment configuration

jquery-1.2.6.js download has finished, will be placed in its directory of specific projects can be easily invoked jQuery library.

l the introduction of jQuery on the page

Agreed this book: This book will be on the jquery-1.2.6.js under the scripts directory, for example jQuery for the convenience of debugging, invoke the use of relative path. In actual projects, readers can be adjusted in accordance with the actual path of jQuery library.

Following the procedure shown in the introduction of <head> tag jQuery library:

<! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Strict / / EN"

"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>

<head>

<! - Tags in the head with the introduction of jQuery ->

<script src="../scripts/jquery-1.2.6.js" type="text/javascript"> </ script>

</ head>

<body>

</ body>

</ html>

Note that in the back of the book in all chapters, if not specified, jQuery library are imported by default.

1.3.2 the preparation of simple jQuery code

Environment configured, you may want to can not wait to try jQuery. In our first jQuery beginning the procedures to prepare before a clear point: the library in jQuery, jQuery $ is a shorthand form, such as $ ( "# foo") and jQuery ( "# foo") are equivalent, $. ajax and jQuery.ajax are equivalent. If not specified, the program of $ symbols are a shorthand form of jQuery.

Now we begin the preparation of our first jQuery procedures:

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title> 1-1 </ title>

<! - The introduction of jQuery ->

<script src="../scripts/jquery-1.2.6.js" type="text/javascript"> </ script>

<script type="text/javascript">

$ (document). ready (function () (/ / Wait for dom elements loaded.

alert ( "Hello World!"); / / pop up a box.

));

</ script>

</ head>

<body>

</ body>

</ html>

Running, the test results shown in Figure 1-8:
Figure 1-8 the output Hello World!

There is a code may be used has never been our thing, and that is:

$ (document). ready (function () (

... ...

));

This then what does that mean? In fact, it is similar to window.onload, but still with some of the difference between window.onload.

See the following comparison table:

Table 1-2 window.onload and $ (document). Ready () comparison table

window.onload
$ (document). ready ()

The implementation of the timing
Must wait for all of the contents of the page after loading (including pictures) can be implemented.
All the DOM structure of page after rendering has finished the implementation.

The preparation of the number of
At the same time can not be more than prepared.

For instance:

window.onload = function () (

alert ( "test1")

);

window.onload = function () (

alert ( "test2")

);

The results will only output "test2".
Can be more than prepared.

For instance:

$ (document). ready (function () (

alert ( "Hello World!");

));

$ (document). ready (function () (

alert ( "Hello again!");

));

The results are output twice.

Simplify the writing
Without
$ (document). ready (function () (

...

));

Can be simplified into:

$ (function () (

...

));

1-2 window.onload form and $ (document). Ready () compared

1.3.3 jQuery code style

Using jQuery to write the project for a long time to see friends during complained, saying that the chain operation jQuery looks very elegant, very comfortable to use, and his party to get a lot of operations, that feeling is incomparable. However, such changes will go back to a time when its own code, not A wrinkled brow , a large number of his party to get the code, a single look very elegant, very many on the look of the messy, time goes by, do not know What is written .

Give me the actual code in a project as an example (a navigation bar):

<! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title> 1-3 </ title>

<style>

# menu (

width: 300px;

)

. has_children (

background: # 555;

color: # fff;

cursor: pointer;

)

. highlight (

color: # fff;

background: green;

)

ul (

list-style: none;

padding: 0;

)

ul li (

background: # 888;

display: none;

)

</ style>

</ head>

<body>

<div"menu">

<ul"has_children"> Chapter 1 - Know what jQuery

<li> 1.1-jQuery Introduction </ li>

<li> 1.2-adding jQuery </ li>

<li> 1.3-prepared jQuery code </ li>

<li> 1.4-jQuery objects and DOM objects </ li>

<li> 1.5-solution jQuery and other libraries of conflict </ li>

<li> 1.6-summary </ li>

</ ul>

<ul"has_children"> Chapter 2 of the selector-jQuery

What is <li> 2.1-selector </ li>

<li> 2.2-jQuery selector advantage </ li>

<li> 2.3-jQuery selector </ li>

<li> 2.4-selector in the treatment with special symbols </ li>

<li> 2.5-javascript to operate some of the potential contrast </ li>

<li> 2.6-to make a picture showing the effect of </ li>

<li> 2.7-summary </ li>

</ ul>

<ul"has_children"> Chapter 3-jQuery's DOM operations

<li> 3.1-introduced the importance of DOM operations </ li>

<li> 3.2-jQuery's DOM operation </ li>

<li> 3.3-to create a picture Museum </ li>

<li> 3.4-summary </ li>

</ ul>

</ div>

</ body>

</ html>
Figure 1-9 Initialization navigation bar

Project needs to be a navigation bar, click on different sections, showing the contents of the corresponding, at the same time highlight the currently selected section.

And we use jQuery implementation:

$ ( ". Has_children"). Click (function () (

$ (this). addClass ( "highlight"). children ( "li"). show (). end (). siblings (). removeClass ( "highlight"). children ( "li"). hide ();

));

The role of this code is that when the mouse clicks to the class contains. Has_children the time element, to add a highlight of the class, then all internal li child element is displayed and was clicked on. Has_children element elements of the peer to remove a highlight of the class, as well as internal li hide all sub-elements.

Results are as follows:
Figure 1-11 Effect 1

Figure 1-12 the effect of 2

Figure 1-13 Effect of 3

Check it out, and this is a powerful jQuery chain operations, single line of code to the navigation bar had to do it. However, please note that, so the wording is at the time of the preparation yourself dripping there is a sense of fun, but the latter will bring teamwork to maintain and endless suffering.

Therefore, we recommend a more appropriate format with the code style:

$ ( ". Has_children"). Click (function () (

$ (this). addClass ( "highlight") / / increase for the current element type highlight

. children ( "li"). show (). end () / / will be the li element child nodes are displayed and re-positioning of the elements of the last operation

. siblings (). removeClass ( "highlight") / / element access the element's brother, and remove the highlight of their category

. children ( "li"). hide (); / / elements will be brothers under the hide of the li elements

));

Right, is not it look better?

Perhaps you have read the above code may still not understand the essentials, we are here summed up the four kinds of situations:

(1) for an object not more than three operations can be written in a direct line, such as:

$ ( "Li"). Show (). Unbind ( "click");

(2) for the operation of many small operations, each object can be his, if related to sub-elements, indent may consider appropriate. For example, the above-mentioned code:

$ (this). addClass ( "highlight")

. children ( "li"). show (). end ()

. siblings (). removeClass ( "highlight")

. children ( "li"). hide ();

(3) for a more targeted operation, it is proposed to write a per line, or distinction by function block. For example:

$ (this). removeClass ( "mouseout")

. addClass ( "mouseover")

. stop ()

. fadeTo ( "fast", 0.6)

. fadeTo ( "fast", 1)

. unbind ( "click")

. click (function () (

/ / Do something ....

));

For the above code, if you suspect a few too many lines of code, and that function to block line is a good idea. The first two operations on the class, followed by the operation of the three is the animation, and finally the cancellation and re-bind the click event handler, it is written in such a good choice:

$ (this). removeClass ( "mouseout"). addClass ( "mouseover")

. stop (). fadeTo ( "fast", 0.6). fadeTo ( "fast", 1)

. unbind ( "click"). click (function () (

/ / Do something ....

));

(4) for a number of more targeted operations, suggested that to do Article 2,3.

jQuery also its powerful selectors known for some very complex issue when it can easily get his selector. However, the preparation of their code also should pay attention to a problem. See the following example, this example is the Chinese Forum jQuery has been asked a question:

$ ( "# Table> tbody> tr: has (td: last: has (: checkbox: enabled ))"). css (" background "," red ");

This line is what does this mean? Ha ha, I am afraid that even experienced programmers jQuery have a good response to a few seconds to see the meaning of this code.

This role is at the tbody of a table, each line in the last one if there is no checkbox is disabled, while the background of this line is set to red. jQuery selector of the strong is not it? Common to write JavaScript to use is not a lot of lines of code? However, please write in the future of a proud time for the selector, please do not forget to add this note, it is very important, Lee & ! Add the following note on the good:

/ / In a table id for the tbody of the table, each line in the last one if there is no checkbox is disabled, the background of this line is set to red

$ ( "# Table> tbody> tr: has (td: last: has (: checkbox: enabled ))"). css (" background "," red ");

1.4 jQuery objects and DOM objects

1.4.1 Introduction DOM objects and jQuery object

The first time to learn jQuery, which is often not clear is the jQuery object, which is a DOM object, so we are here to talk about focus.

1. DOM object

Document Object Model (DOM, Document Object Model).

Each can be expressed in a DOM tree. Here we have built a very basic web page:
Figure 1-14 a very basic web page

Corresponding to the page code is as follows:

<! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title> 1-4 </ title>

</ head>

<body>

<h3> examples 1-4 </ h3>

<p title=" Select your favorite fruit ."> your favorite fruit is? </ p>

<ul>

<li> apple </ li>

<li> orange </ li>

<li> pineapple </ li>

<li> other </ li>

</ ul>

</ body>

</ html>

Above, we can build a DOM tree structure of pages. Figure 1-15 below:
Figure 1-15 for the page elements that the document tree

DOM tree in the tree, <h3>, <p>, <ul> and <ul> the three <li> element child nodes are DOM nodes. We can getElementsByTagName in JavaScript to access them. Like getElementById or getElementsByTagName get through the DOM is the DOM element object. DOM objects can use the JavaScript method, such as:

var domObj = document.getElementById ( "id"); / / get DOM object

alert ( "Thank you for your support! you can continue to operate!");

)

))

))

Figure 1-18 Click the check box, the agreement

Of course, we can directly determine the way in jQuery:

$ (document). ready (function () (/ / wait for dom elements loaded.

var $ cr = $ ( "# cr"); / / jQuery object

$ cr.click (function () (

if ($ cr.is ( ": checked")) (/ / jQuery way to judge

alert ( "Thank you for your support! you can continue to operate!");

)

))

))

Editor's Note:. Is ( ": checked") is a jQuery method, to determine whether the jQuery object is selected, return boolean values.

Above example is a simple jQuery objects and DOM objects, namely the use of jQuery's DOM methods and approach.

1.5 solve the jQuery library and other conflicts

If you have a variety of projects JavaScript libraries, such as the existence of prototype.js and jquery.js. $ Object in order to avoid conflict, we can use jQuery's. NoConflict () to resolve the conflict, need to pay attention to the introduction of the order of JavaScript libraries.

Wording 1:

<! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN"

"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<! - The introduction of Prototype ->

<script src="prototype-1.6.0.2.js" type="text/javascript"> </ script>

<! - The introduction of jQuery ->

<script src="../scripts/jquery-1.2.6.js" type="text/javascript"> </ script>

<script type="text/javascript">

jQuery.noConflict (); / / the variable $ transferred to the control of prototype.js

jQuery (function () (/ / use jQuery

jQuery ( "p"). css ( "color", "red"); / / using jQuery

$ ( "Pp"). Style.display = "none"; / / here is the $ symbol of the method of Prototype

));

</ script>

</ head>

<body>

<p"pp"> testpp <p>

<p> test <p>

</ body>

</ html>

Formulation 2:

<! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN"

"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<! - The introduction of jQuery ->

<script src="../scripts/jquery-1.2.6.js" type="text/javascript"> </ script>

<script language="javascript">

jQuery.noConflict (); / / the variable $ transferred to the control of prototype.js

jQuery (function () (/ / use jQuery

jQuery ( "p"). css ( "color", "red"); / / using jQuery

$ ( "Pp"). Style.display = "none"; / / here is the $ symbol of the method of Prototype.

));

</ script>

<! - The introduction of Prototype ->

<script src="prototype-1.6.0.2.js" type="text/javascript"> </ script>

</ head>

<body>

<p"pp"> testpp <p>

<p> test <p>

</ body>

</ html>

Remember not to put the order wrong!

There are two types of non-use. NoConflict () common way to avoid conflict.

One is if your jQuery (function () (...)) within the non-use of other library code, the adoption of the following form to build the code, before the introduction of jQuery, and then the introduction of other libraries, and then continue to use $ as a jQuery the abbreviated form:

<! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<! - The introduction of jQuery ->

<script src="../scripts/jquery-1.2.6.js" type="text/javascript"> </ script>

<! - The introduction of Prototype ->

<script src="prototype-1.6.0.2.js" type="text/javascript"> </ script>

<script type="text/javascript">

jQuery (function ($) (

$ ( "P"). Css ( "color", "red"); / / function within the $ $ or jQuery.

));

$ ( "Pp"). Style.display = "none"; / / function outside of the $ $ is the Prototype.

</ script>

</ head>

<body>

<p"pp"> testpp <p>

<p> test <p>

</ body>

</ html>

Another is the use of the properties of closure, you are in any local establishment of a closure, in its internal, you can only use $ as a jQuery abbreviation, and not have to worry about the conflict, usually jQuery plug-ins are written using this form of. Of course, is the first introduction of jQuery, and then the introduction of other libraries:

<! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN"

"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<! - The introduction of jQuery ->

<script src="../scripts/jquery-1.2.6.js" type="text/javascript"> </ script>

<! - The introduction of Prototype ->

<script src="prototype-1.6.0.2.js" type="text/javascript"> </ script>

<script type="text/javascript">

(function ($) (

$ ( "P"). Css ( "color", "red"); / / function within the $ $ or jQuery.

)) (jQuery);

$ ( "Pp"). Style.display = "none"; / / function outside of the $ $ is the Prototype.

</ script>

</ head>

<body>

<p"pp"> testpp <p>

<p> test <p>

</ body>

</ html>

This is the simplest solution to the conflict, of course, have other ways, but old wine in new bottle, here we introduce these methods.

1.6 Summary

The first part of this chapter describes the origin of jQuery and advantages, as well as some of the current popular JavaScript library and contrast introduction. In addition, I have written a jQuery one of the most simple process - in the proceedings, we recognize the $ (document). Ready (), In addition we have also agreed the jQuery code style and the style variable.

Focuses on the latter part of the jQuery object and the difference between DOM objects and their mutual conversion between the middle to insert a simple registration of the Forum agreed that the examples used to strengthen the jQuery object and DOM object understanding. Finally, explain how to solve the JavaScript library jQuery and other problems of conflict of projects to help those who have friends of other JavaScript libraries.

Chapter I, we specifically stressed the importance of variable style and the style code, jQuery objects and DOM objects, hoping to arouse the attention of beginners.
  • del.icio.us
  • StumbleUpon
  • Digg
  • TwitThis
  • Mixx
  • Technorati
  • Facebook
  • NewsVine
  • Reddit
  • Google
  • LinkedIn
  • YahooMyWeb

Related Posts of Started learning jQuery

  • and analysis of the use of DWR

    1. Download dwr.jar, to add it to WEB-INF/lib directory 2. Modify web.xml file, add the mapping DWRServlet <servlet> <servlet-name> dwr-invoker </ servlet-name> <servlet-class> org.directwebremoting.servlet.DwrServlet </ se ...

  • Javascript in the browser environment (vi) incident

    Matter Examples of a lot of events. Such as user input, the click of a button and so on. Can put a javascript function assigned to an event (this can be called the event listener or event handler), when the incident happened, and will perform this functio

  • Topic: Shoes - Construction Ruby client gadget

    http://www.javaeye.com/topic/295829 Shoes Ruby are cross-platform GUI applications, recently released a new version, it is a very interesting Ruby GUI client, the following are some characteristics of Introduction: 1. Cross-platform support for windo ...

  • Talk about the "design mode"

    Now more and more frameworks; model appears to reduce the use of the opportunity, then mean that we do not have to grasp the mode of the case? In fact, in order to study the actual training model mode of thinking, modes of thinking help to understand ...

  • Ruby Symbol

    Ruby is a completely cross-platform object-oriented scripting language, built on the Ruby-based Web framework Ruby on Rails (ROR) is the field of web development is gaining increasing acceptance. ROR substantial use of the Ruby language features, Symbol i

  • hibernate brief introduction

    1: hibernate, what are? 1: hibernate is a JDBC package is responsible for object persistence, in the middle layer, in the application and database has played a role as a bridge between a mapping tool. Second: Why is the use of hibernate? 1: the use of hib

  • Shoes - Construction Ruby client gadget

    Shoes Ruby are cross-platform GUI applications, recently released a new version, it is a very interesting Ruby GUI client, the following are some characteristics of Introduction: 1. Cross-platform support for windows / linux / mac os 2. Very small, t ...

  • hibernate load delay

    Lazy loading: Lazy loading mechanism is in order to avoid unnecessary performance overhead and put forward the so-called lazy loading is required when the real data at a time when the real implementation of the data load operation. At Hibernate provides f

  • Building Scalable java EE application (2)

    When the number of concurrent users marked the beginning of growth, you may be dissatisfied with a single machine can provide the performance, or because of a single JVM instance gc restrictions, you can not expand your java application, in such circumsta

  • [Reprint] Java professionals required books and list of sites

    Concurrent Programming in Java: Design Principles and Patterns (Doug Lea) Concurrent Programming in Java: Design Principles and Patterns, 2nd edition (Doug Lea; Addison-Wesley, 1999 years) Java Concurrent Programming - Design principles and patterns (seco

blog comments powered by Disqus
Recent
Recent Entries
Tag Cloud
Random Entries