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:

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> <br>jQuery(document). ready(function($){ <br>$('img').attr('src', '/global/tool/picroom/save/beauty/00001.jpg') <br> .load(function() { <br>alert('Image Loaded'); <br>}); <br>}); <br></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> <br>jQuery(document). ready(function($){ <br> var global_height = $(document).height(); <br> var it_height = $('.move').height(); <br> $('.move') .css({'position' : 'absolute' , 'top' : <br> global_height/2 - it_height/2}); <br>}); <br><br> </div> <br>> Demo Page portal: http://www.evlos.org/global/demo/jquery_height <br><br>4. Combining jQuery with Onclick events: <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="11695" class="copybut" id="copybut11695" onclick="doCopy('code11695')"><u>Copy code </u></a></span> The code is as follows: </div> <div class="codebody" id="code11695"> <br><div onclick="var global_height = $(document).height(); <BR> var it_height = $('.move ').height(); <BR> $('.move').css({'position' : 'absolute' , 'top' : <BR> global_height/2 - it_height/2});">Move It !</div> <br> </div> <br>> Put the above code here, and the code will be executed after the mouse clicks on this DIV. <br><br>5. ReplaceWith function: <br><br>> The following code looks for the element whose Class is Demo and then replaces it entirely. <br>> The whole meaning includes the tags before and after, so don’t forget to write the tags in the replacement function. <br><img src="/static/imghw/default1.png" data-src="http://files.jb51.net/upload/2010-3/20100301221315903.gif" class="lazy" border="0" alt="Several classic and commonly used jQuery tips_jquery" ><br> <div class="codetitle"> <span><a style="CURSOR: pointer" data="93132" class="copybut" id="copybut93132" onclick="doCopy('code93132')"><u>Copy code</u></a></span> The code is as follows:</div> <div class="codebody" id="code93132"> <br><script> <br>jQuery(document).ready(function($){ <br> $('.demo').replaceWith('<div style="padding-top:30px">Replaced !</div>') ; <br>}); <br></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> <br>jQuery(document). ready(function($){ <br>$('img').load(function(){ <br>                $('#loading').css("display","none"); <br>}) ; <br>}); <br></script>

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

Loading ...