JQuery tutorials for designers (Part 1)

This article contains 10 examples of images to show web designers or beginners how to use jQuery to implement javascript. Jquery is a very good javascript class library that writes less and does more. It includes many Ajax and javascript features, semantic programming, and improved user experience. This is a tutorial on jQuery, so CSS is simplified.

　　How does jQuery work?

Download a copy of The jQuery. js file and insert it into your html source code (preferably inserted in ). Then you can write code to call jQuery. Shows how jQuery works:

　　JQuery Selector

It is relatively easy to write jQuery code (thanks to its excellent documentation ). The key point is to learn how to use the jQuery selector to obtain the elements you want to add.

$ ("# Header") = get the id = "header" element

$ ("H3") = obtain all

$ ("Div # content. photo") = obtain all the elements of class = "photo" in <div id = "content">

$ ("Ul li") = obtain all <li> elements in <ul>

$ ("Ul li: first") = select only the first element in <li> all elements in <ul>

　　1. Simple sliding panel

From a simple sliding panel, you should see a lot of such examples. When you click a link, a panel slides down (Demo ).

Copy to ClipboardReference: [www.bkjia.com] $ (document). ready (function (){
$ (". Btn-slide"). click (function (){
$ ("# Panel"). slideToggle ("slow ");
$ (This). toggleClass ("active ");
});
});

When clicked,

It slides up and down, and adds or deletes CSS class: active .. Active is used to switch the CSS that changes the position of the arrow image to achieve the up-down Conversion of the arrow.

　　2. Simple disappearing Effect

Click the image button, and the text block disappears (Demo ).

Copy to ClipboardReference: [www.bkjia.com] $ (document). ready (function (){
$ (". Pane. delete"). click (function (){
$ (This). parents (". pane"). animate ({opacity: "hide"}, "slow ");
});
});

When the is clicked, jQuery finds <div class = "pane"> and modifies its opacity value. The slow (slow) gradient to the disappears (hide ).

3. Chain Continuous Conversion Effect

Let's take a look at the charm of jQuery's chain effect. Just a few lines of code can fade the blue box into or out of the Fly (Demo ).

　　3. Chain Continuous Conversion Effect

Let's take a look at the charm of jQuery's chain effect. Just a few lines of code can fade the blue box into or out of the Fly (Demo ).

Copy to ClipboardReference: [www.bkjia.com] $ (document). ready (function (){
$ (". Run"). click (function (){
$ ("# Box"). animate ({opacity: "0.1", left: "+ = 400"}, 1200)
. Animate ({opacity: "0.4", top: "+ = 160", height: "20", width: "20"}, "slow ")
. Animate ({opacity: "1", left: "0", height: "100", width: "100"}, "slow ")
. Animate ({top: "0"}, "fast ")
. SlideUp ()
. SlideDown ("slow ")
Return false;
});
});

Each line is implemented as follows:

1. When <a class = "run"> is clicked
2. The transparency of the driver <div id = "box"> is increased to 0.1 + from left to PX.
3. The drive box is changed to opacity = 0.4. The drive box is moved down to 160px relative to the default position and is changed to a square of 20px at slow speed.
4. Then, similarly: opacity = 1, left = 0, height = 100, width = 100, with speed "slow"
5. Likewise: opacity = 1, left = 0, height = 100, width = 100, with speed "slow"
6. top = 0, with speed "fast"
7. Slide the shadow up (default speed = "mormal ")
8. The final decline shows speed = "slow"

Web designer wall Translation: http://www.cnblogs.com/island205/