简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

Several classic and commonly used jQuery tips_jquery

WBOY
Release： 2016-05-16 18:33:42
Original
1131 people have browsed it
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. Several classic and commonly used jQuery tips_jquery
> 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.
Several classic and commonly used jQuery tips_jquery
> 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="http://files.jb51.net/upload/2010-3/20100301221315903.gif" 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 ...

Several classic and commonly used jQuery tips_jquery
Related labels：
jquery Tips
source：php.cn
Previous article：Summary of methods to obtain QueryString using js_javascript skills Next article：Eight-point dragging code to modify div size implemented in js_javascript skills
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Submit form without button using Javascript/Jquery I'm trying to submit a form without a button by calling a JavaScript function and executin...
From 2024-04-06 14:54:03
0
2
421
How to retrieve values ​​of unselected rows in HTML data table using jquery I'm trying to get the value of all rows where the button was not clicked. For example, whe...
From 2024-04-05 09:26:49
0
1
1418
Need a jquery script to move selected options from a select box based on the end user's current selection I have an HTML page where the end user can rank our items via a select box element. See th...
From 2024-04-04 18:40:04
0
1
3528
I've created an element in pure CSS via bookmarks. It is created but not visible My code is as follows: g=document.createElement('div');g.setAttribute("id","...
From 2024-04-04 17:27:27
0
1
417
Unable to send form data on Safari/Firefox iOS This works on all platforms except Safari/Firefox on iOS: jQuery("#gform_1").one...
From 2024-04-04 12:53:48
0
1
303
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！