Several classic and commonly used jQuery tips_jquery

> Well, this theme has been hanging for a long time, and it’s time to change it. Then I’ll look for a theme that suits my taste.
> By the way, I have been leaning towards PHP recently. I found that I could bite off more than I could chew, so I went back to the topic, (*^__^*) hehe.

1. Calling the Jquery library:

> Haha, I believe many children have already known it, but I still have to mention it. If you forget, you will be in trouble.
> The first one is the jQuery library address of the commonly used Google hosting.
> The second one is the library address of the jQuery official website. You can get the latest version at any time, hehe.

Copy code The 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 It’s also very good and can be used in many places.
> For example, you want to add a prompt before some pictures are not loaded.
> Or use it on the last element of the page loading process to provide a loading prompt for the entire page.
> The following is just a simple example, the selector selects the Img tag.
> Then search for attributes, but the attribute type is Src, which is the image address, followed by the content of the image address.
> After the image is loaded, a prompt box will pop up to indicate that the image has been loaded.
> Attention! ! Please be sure to fill in the exact same Src as the one filled in the target element, otherwise it will fail.

Copy code The code is as follows:

<script>
jQuery(document). ready(function($){
$('img').attr('src', '/global/tool/picroom/save/beauty/00001.jpg')
.load(function() {
alert('Image Loaded');
});
});
</script>

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

3. Simple vertical centering:

> The Height() function is used here, and the document in the selector represents the entire page .
> The following is looking for elements whose Class is Move, and It_height is defined as the height of the element.
> Then define the variable Global_height 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 top of this element to half the height of the entire page.

> Haha, I believe those who are interested in children’s shoes can already draw inferences.
> jQuery’s ability to adjust CSS is very powerful O(∩_∩)O.

Copy code The code is as follows:

<script>
jQuery(document). ready(function($){
var global_height = $(document).height();
var it_height = $('.move').height();
$('.move') .css({'position' : 'absolute' , 'top' :
global_height/2 - it_height/2});
});

> Demo Page portal: http://www.evlos.org/global/demo/jquery_height

4. Combining jQuery with Onclick events:

Copy code The code is as follows:

<div onclick="var global_height = $(document).height();
var it_height = $('.move ').height();
$('.move').css({'position' : 'absolute' , 'top' :
global_height/2 - it_height/2});">Move It !</div>

> Put the above code here, and the code will be executed after the mouse clicks on this DIV.

5. ReplaceWith function:

> The following code looks for the element whose Class is Demo and then replaces it entirely.
> The whole meaning includes the tags before and after, so don’t forget to write the tags in the replacement function.

Copy code The 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. Application of Load() function (page loading prompt):

> First write the CSS and position it absolutely to the upper right corner of the page.

Copy code The 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 and hide the Loading DIV after all images are loaded.
> Don’t forget to load jQuery library. When I was testing the code just now, I wrote the wrong address and almost went crazy.

Copy code The code is as follows:

<script>
jQuery(document). ready(function($){
$('img').load(function(){
                $('#loading').css("display","none");
}) ;
});
</script>

> Just insert a DIV anywhere, O(∩_∩)O haha.

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