"jquery Tutorial" Farmer's jquery Tour (iii) start using jquery

So far, we've used all the selectors (selectors) to select child elements or filter existing selections. Now it's time to look at the selection of the first or last element, which is called siblings. Consider a FAQ page where all the answers are initially hidden and are displayed when the problem 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 on the farmer's demo

Here we use some links to reduce the number of code and get better performance because "#faq" is only selected once. By using end (), the first find () is not executed, so we can start the search in the #faq element from the next find () without searching for his DD child elements.

With the click Handle, this method is passed to the click () method, and we use $ (this). Next () to find the next sibling starting with the current DT, which is the answer to the question that we can quickly find the clicked problem.

As a further step, you can also select the parent element (which is considered to be ancestors more similar to XPath). Maybe you want to hover the parent element paragraph of the link to highlight the reality, try to do this:

CODE:

$ (document). Ready (function () {
$ ("a"). Hover (function () {
$ (this). Parents ("P"). AddClass ("highlight");
},function () {
$ (this). Parents ("P"). Removeclass ("highlight");
});
});

Click on the farmer's demo

For all floating links, their parent element passages are found and a "Highlight" Class (class) is added and removed.

Let's take a step back before we continue with the research below: jquery makes it easier to read and maintain on how to reduce code. The code below is a compact version of $ (document). Ready (callback) code:

CODE:

$ (function () {
Code to execute as the DOM is ready
});

For the Hello World example, we end with the following code:

CODE:

$ (function () {
$ ("a"). Click (function () {
Alert ("Hello world!");
});
});

Now, based on what we have mastered, we're going to start exploring other aspects of knowledge and starting our Ajax.

Interesting links to this part of the 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-side programming language, I still first study understand the basic things, so the rest of the remaining part of the translation, please pay attention.

Let me move: Use effect

Simple animation effects can be achieved through the show () and Hide () of jquery.

CODE:

$ (document). Ready (function () {
$ ("a"). Toggle (function () {
$ (". Stuff"). Hide (' slow ');
},function () {
$ (". Stuff"). Show (' fast ');
});
});

With animate (), you can create any animations, such as fade-and-fade sliding.

CODE:

$ (document). Ready (function () {
$ ("a"). Toggle (function () {
$ (". Stuff"). Animate ({height: ' hide ', opacity: ' Hide '}, ' slow ');
},function () {
$ (". Stuff"). Animate ({height: ' show ', Opacity: ' Show '}, ' slow ');
});
});

More effects can be achieved through the Interface plug-in collection (interface plugin collection). This site provides demo and use documentation. The interface is at the top of the jquery ' s plugin list, and there are many others. The next section shows how to use the Tablesorter plug-in.