Several classic jQuery tips

> Well, this topic has been around for a long time and should be changed. You can find out if there are any topics that suit your appetite.
> In other words, I recently went a little bit towards PHP. I found that I was greedy and chewy, so I went back to the topic again (* ^__ ^.

1. Call the Jquery Library:

> Well, I believe many children's shoes have been around for a long time, but I still have to mention it. Just forget it.
> The first is the commonly used jQuery library address in Google hosting.
> The second is the library address of the official jQuery website. You can get the latest version at any time.

Copy codeThe Code is as follows:
<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"
Type = "text/javascript"> </script>

<Script src = "http://code.jquery.com/jquery-latest.js"> </script>

2. Load () function:

> This is also very good. It can be used in many places.
> For example, you want to add a prompt before some images are loaded.
> You can also use the last element in the page loading process to provide the loading prompt for the entire page.
> The following is a simple example. The selector selects the Img tag.
> Then, search for the property. The property type is Src, that is, the image address, followed by the image address.
> After the image is loaded, a prompt box is displayed, indicating that the image has been loaded.
> Note !! Please be sure to fill in the Src exactly the same as that in the target element, otherwise the cup will be available.
Copy codeThe Code is as follows:
<Script>
JQuery (document). ready (function ($ ){
$ ('Img '). attr ('src','/global/tool/picroom/save/beauty/snapshot 1.jpg ')
. Load (function (){
Alert ('image loaded ');
});
});
</Script>

> Demo page Portal: http://www.evlos.org/global/demo/jquery_load

3. Simple vertical center:

> The Height () function is used here. The document in the selector indicates the entire page.
> The following figure shows the elements whose Class is Move and whose It_height is defined as the element height.
> Then, the variable Global_height is defined as the height of the entire page, that is, the distance from the top of the page to the bottom of the page.
> Then, adjust the distance from the element to the top to half the height of the entire page.

> Well, I believe that you can give a similar picture to any interested shoes.
> JQuery's ability to adjust CSS is a very powerful O (dirty _ dirty) O.
Copy codeThe Code is as follows:
<Script>
JQuery (document). ready (function ($ ){
Var global_height = $ (document). height ();
Var it_height = $ ('. move'). height ();
Detail ('.move'detail .css ({'position': 'absolute ', 'top ':
Global_height/2-it_height/2 });
});


> Demo page Portal: http://www.evlos.org/global/demo/jquery_height

4. Combination of jQuery and Onclick events:
Copy codeThe Code is as follows:
<Div onclick = "var global_height = $ (document). height ();
Var it_height = $ ('. move'). height ();
Detail ('.move'detail .css ({'position': 'absolute ', 'top ':
Global_height/2-it_height/2}); "> Move It! </Div>

> Place the above Code here, and click the DIV to execute the code.

5. ReplaceWith function:

> The code below is to find the elements whose Class is Demo and replace them with the entire one.
> The entire meaning is that the front and back labels are included, so do not forget to write the labels in the replacement function.

 Copy codeThe Code is as follows:
<Script>
JQuery (document). ready (function ($ ){
$ ('. Demo'). replaceWith (' <div style = "padding-top: 30px"> Replaced! </Div> ');
});
</Script>

> Demo page Portal: http://www.evlos.org/global/demo/jquery_replace

6. Use the Load () function (page loading prompt ):

> First, write the CSS file and go to the upper right corner of the page.

Copy codeThe Code is as follows:
# Loading {
Position: absolute; z-index: 900; text-align: center;
Background-color: # eef2fa; border: 1px solid # d8e3e8;
Color: #000; font-size: 12px; padding: 3px; width: 80px;
Right: 0; top: 0;
}

> Then, use jQuery to hide the Loading DIV after all the images are loaded.
> Don't forget to load the jQuery library. The address was wrong when I tested the code. I almost went crazy.
Copy codeThe Code is as follows:
<Script>
JQuery (document). ready (function ($ ){
$ ('Img '). load (function (){
Certificate ('{loading'{.css ("display", "none ");
});
});
</Script>

> Just insert a DIV somewhere, and O (partition _ partition) O haha.

<Div id = "loading"> Loading... </div>