A basic introduction to jQuery and some concepts you need to understand when using it
Original Source: http://docs.jquery.com/Tutorials:How_jQuery_Works
Author: John Resig
Translation: ItFarmer
Basic
This is a basic guide designed to help you get started with jQuery. If you have not created a test page, create a new HTML page containing the following content:
CODE: <Head>
<Script type = "text/javascript" src = "path/to/jquery. js"> </script>
<Script type = "text/javascript">
// Your code goes here
</Script>
</Head>
<Body>
<A href = "http://jquery.com/"> jQuery </a>
</Body>
</Html>
Edit the src attribute in the tag to point to your jquery. js copy. For example, if jquery. js is in the same directory as your HTML file, you can write it as follows:
CODE: <script type = "text/javascript" src = "jquery. js"> </script>
You can download your own jQuery from the Downloading jQuery page.
Start code when the document is ready
Most Javascript developers need to add the following code to their programs:
CODE: window. onload = function (){...}
The code in this example allows you to execute the processing when the page is loaded. The problem is that the Javascript code is executed only when all the images on the page are loaded (including banner advertisements in the header. The reason for putting window. onload at the top is that when you run your code for the first time, the HTML 'document' has not been loaded yet.
To solve this problem, you can use jQuery as a simple program (I confirmed with lausong that statement is the meaning of the program body), called the ready event.
CODE: $ (document). ready (function (){
// Your code here
});
This section of code checks the document and does not perform any operations before the document determines whether it can be used-this is exactly what we need. So paste the above Code into your test page.
Make some things happen when you click
The first thing we need to do is when a link is clicked. In ready's function, add the following code:
CODE: $ ("a"). click (function (){
Alert ("Thanks for visiting! ");
});
Save your HTML page and reload it in the browser. Click the link on the page. A pop-up alert will appear before leaving the main jQuery page.
For click and other events, you can avoid their default behavior. Here, under the jquery.com link, false is returned from the event handle:
CODE: $ ("a"). click (function (){
Alert ("Thanks for visiting! ");
Return false;
});
Add a class
Another common task is to add (or remove) classes from an object, for example:
CODE: $ ("a"). addClass ("test ");
If you want to add some style information in your code header, follow these steps below:
CODE: <style type = "text/css"> a. test {font-weight: bold ;}</style>
Then add the call to the above addClass-all your A labels will all become bold. To remove this class, you should use removeClass.
Special effect (effect)
JQuery provides two very easy-to-get results, which can make your website more outstanding. Add this to your test page, and the link will change:
CODE: $ ("a"). click (function (){
$ (This). hide ("slow ");
Return false;
});
Now, if you click any link, the link will gradually disappear.
Chainability (jQuery magic)
JQuery uses an interesting concept to make its code short and concise. Similar to object-oriented programming, this concept is easy to understand.
In a nutshell: In jQuery, each method returns the request object itself, allowing you to bind it ('chain' upon it), for example:
CODE: $ ("a"). addClass ("test" example .show(example .html ("foo ");
Each returned jQuery object in these independent methods (addClass, show, and html) allows you to continue using the current element.
You can use this method to add or remove elements from the selection, modify these elements, and then reply to the original selection, for example:
CODE: $ ("a"). filter (". clickme"). click (function (){
Alert ("click! ");
}). End (). filter (". hideme"). click (function (){
$ (This). hide ();
});
The methods selected by jQuery and ended with end () can be modified as follows:
Add ()
Children ()
Eq ()
Filter ()
Find ()
Gt ()
Lt ()
Next ()
Not ()
Parent ()
Parents ()
Siblings ()
For more details, see the API documentation.
Callback, method, and "this"
A callback is a method that is passed as a variable to another method and executed only after its parent method is executed. A major feature of callback is that the method behind the parent method can be executed before the callback is executed.
Another thing you need to know is how to pass the callback correctly. This is an attribute syntax that I often forget.
Callback without Parameters
You can pass a callback without parameters as follows:
CODE: pai.get('myhtmlpage.html ', myCallBack );
Note that the second parameter is just a simple method name (instead of a string without curly brackets ).
Callback with Parameters
"If you have parameters to pass, what should you do ?" You may ask yourself.
Error
Incorrect method (does not work)
CODE: pai.get('myhtmlpage.html ', myCallBack (param1, param2 ));
This will not work because it calls myCallBack (param1, param2) and then uses the returned result as the second parameter of $. get.
Correct
Correct Method
CODE: pai.get('myhtmlpage.html ', function (){
MyCallBack (param1, param2 );
});
Therefore, by passing an unknown method (the part...
CODE: function (){
/* Function callinside */
});
It will call your method with parameters, so you have succeeded.
This method takes effect because it passes the unknown method as the second parameter to $. get () without executing it first.
Word Learning:
Concept n. Concepts and concepts
Tutorial n. Guide
Circumvent vt. Surround, surround, and wisdom
Statement n. statement, statement, summary
Manipulate vt. (skilled) operation, use (machines, etc.), manipulate (people or market price, market), use, cope with, fake
Snippet n. Small pieces, clips, excerpt, <mouth> famous people, young people who do not know the depth of the sky
Stick v. stick and paste
Prevent v. prevent and prevent
Handy adj. handy, nearest, readily available, convenient, agile, and easy to get
Straight-forward direct, straight, simple
Chain vt. Hold on with a chain
Revert v. Reply
Syntax n. [language] syntax, ordered arrangement, sentence structure, syntax
Parentheses n. parentheses, insertion, and episode
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
