Jquery Chinese Getting Started Guide, translation plus example, jquery's starting point tutorial (1) favorites

 

The following is a tutorial I post, the original post in http://keelsike.blogspot.com/2006/12/jqueryjquery.html

 

Jquery has been around for a long time. Google search is still something. The 15-day series is actually just an article about jquery features, but many people regard it as a tutorial for translation, it is even a translation plan. As for the practical use of jquery, there will be fewer applications. Compared with prototype, the progress in jquery in China is too inadequate. haha :)

In fact, the best getting started article (Tutorial) is here:
Http://jquery.bassistance.de/jquery-getting-started.html, ThanksJörn(Http://bassistance.de/)

I read this article carefully and thought that if I followed it again, jquery will be getting started. This article describes jquery's working methods step by step based on examples. Now I will translate (add my additional instructions) as follows. If it is reprinted, please write a reply to inform me. This article has been published with the consent of the original author.

In addition, I think there are two API documents you can view at any time during the learning process:
Http://jquery.com/api/
Http://visualjquery.com/

------------- Original translation --------------

Jquery Getting Started Guide

This Guide describes the jquery library and requires readers to understand some common knowledge about Dom. It includes a simple hello world example, selector and event basics, Ajax and FX usage, and how to create jquery plug-ins.

This Guide contains a lot of code. You can copy them and try to modify them to see the results.

Contents

1. Install
2. Hello jquery
3. Find me: Use selector and event
4. Rate me: Ajax
5. Animate Me (Let me be vivid): Use FX
6. Sort me (order me): Use the tablesorter plug-in (Table sorting)
7. Plug me: Make your own plug-ins
8. Next steps (next step)

1. Installation
At the beginning, we need a jquery library. The latest download is available.HereFind.
This Guide provides a package containing the instance for download.

Download:Jquery-starterkit

(Translator keel Note: You must download this package. It is definitely not feasible to read articles without practice .)

Download the files and decompress them. Then, use your most experienced editors to open starterkit.html and custom. js files..
(Translator keel Note: all examples are written using these two examples. m.js writes the jquerycode and starterkit.html observes the effect. editplus is recommended)

Now we have made all preparations for this famous "Hello World" example.

Ii. Hello jqueryBefore doing everything, we need jquery to read and process the document's Dom, and we must start to execute the event as soon as possible after Dom loading, we use a ready event as the start to process HTML documents. look at the M m we opened. JS file, which is ready:

$ (Document). Ready (function (){
// Do stuff when Dom is ready // when the document is loaded, the code is executed from this place.
});

Next we will put a simple alert event in a function, because this alert does not need to wait for the Dom to complete loading, so we will slightly complicate the task: an alert is displayed when you click any link.

$ (Document). Ready (function (){
$ ("A"). Click (function (){
Alert ("Hello world! ");
});
});

This will trigger the "Hello World" prompt when you click a link on the page.
(Translator keel Note: follow this code to modify custom.js and save it. Then, use a browser to open starterkit.html to observe the effect .)

Let's take a look at the meaning of these changes. $ ("A") is a jquery selector, where it selects all the tags (Translator keel Note: <A> </a>), $ Is a alias for jquery "class". Therefore, $ () constructs a new jquery object ). The function click () is a method of this jquery object. It binds a click event to all selected tags (all a tags here ), the provided alert method is executed when the event is triggered.
Here is a code for similar functions:

<A href = "#" onclick = "alert ('Hello World')"> link </a>

Obviously, jquery does not need to write onclick events on each a tag, so we have a neat structure document (HTML) and a behavior document (JS ), it achieves the goal of separating structure and behavior, just as we pursue with CSS.

Next we will learn more about selectors and events.

Links of interest:
Jquery Base
Jquery expressions
Jquery basic events

 

Example: http://jquery.bassistance.de/jquery-getting-started.html

Getting Started: http://www.blueidea.com/tech/web/2007/4993.asp