[JQuery tutorial] a farmer's jQuery journey (3) getting started with jQuery

So far, we have used all selectors to select sub-elements or filter existing selection items. Now it is time to study and select the first or last element, which is called siblings. Consider a FAQ page where all the answers are hidden at the beginning and are displayed only when the question is clicked. The jQuery code is as follows:

CODE: $ (document). ready (function (){
$ ('# Faq'). find ('dd'). hide (). end (). find ('dt'). click (function (){
$ (This). next (). slideToggle ();
});
});
Click to view the farmer's demo

Here we use some links to reduce the number of codes and achieve better performance, because "# faq" is selected only once. By using end (), the first find () is not executed, so we can start searching from the next find () in the # faq element without searching its dd sub-element.

By using the click handle, this method is passed to the click () method. We use $ (this ). next () to find the next sibling starting from the current dt, which is the answer to the clicked question.

Further, you can also select the parent element (like ancestors, which is more similar to XPath ). Maybe you want to hover the parent element section of the link to highlight the reality, and try to do this:

CODE: $ (document). ready (function (){
$ ("A"). hover (function (){
$ (This). parents ("p"). addClass ("highlight ");
}, Function (){
$ (This). parents ("p"). removeClass ("highlight ");
});
});
Click to view the farmer's demo

For all floating links, their parent element section is found and a "highlight" class is added and removed.

Let's take a step back before proceeding to the following research: jQuery makes it easier to read and maintain code reduction. The following code is a lite version of $ (document). ready (callback) code:

CODE: $ (function (){
// Code to execute when the DOM is ready
});
For the hello world example, the code of the following side ends:

CODE: $ (function (){
$ ("A"). click (function (){
Alert ("Hello world! ");
});
});
Now, based on the knowledge we have mastered, we are about to explore other aspects and start our AJAX.

Interesting links related to this part of content:
JQuery API documentation
Visual jQuery-A categorized browsable API documentation
JQuery Selectors
JQuery Events
JQuery DOM Traversing

The rest of the content involves the Server programming language. I should first study and understand the basic things, so the rest will be translated later. Please stay tuned.

Let me get started: Use results

Simple animation effects can be achieved through jQuery's show () and hide.

CODE: $ (document). ready (function (){
$ ("A"). toggle (function (){
$ (". Stuff"). hide ('low ');
}, Function (){
$ (". Stuff"). show ('fast ');
});
});



With animate (), you can create any animation, such as fade-in and fade-out slides.

CODE: $ (document). ready (function (){
$ ("A"). toggle (function (){
$ (". Stuff"). animate ({height: 'hide ', opacity: 'hide'}, 'low ');
}, Function (){
$ (". Stuff"). animate ({height: 'show', opacity: 'show'}, 'low ');
});
});

Click the first link :)

More effects can be achieved through the interface plug-in collection. This site provides demo and user documentation. There are many other interfaces on the top of jQuery's plugin list. The following section shows how to use the tablesorter plug-in.

Interesting links related to this part of content:
JQuery Effects Documentation
Interface plugin