The ten most common code snippets of jquery and ten jquery snippets

The ten most common code snippets of jquery and ten jquery snippets

JQuery is used on pages of countless websites. It is one of the most widely used javascript libraries.

　　

JQuery is used on pages of countless websites. It is one of the most widely used javascript libraries. The popularity of jQuery is its simplicity. It can complete most of the complex work through simple statements. There are many jQuery snippets that we use repeatedly every day. Here we summarize 10 jQuery code snippets that you must know.

1.Back to Top

Html code

<a class=”top” href=”#”>Back to top</a>

// Back To Top$('a.top').click(function(){$(document.body).animate({scrollTop : 0},800);return false;});

As shown above, the use of jQuery's animate and scrollTop can easily create a special effect to return to the top.

You can control the scroll bar by changing the value of scrollTop. In the preceding example, the value is set to 0 to scroll the page to the top.

The animation effect above is to scroll from the bottom of the page to the top of the page within Ms.

2.Check whether the image has been loaded.

$(‘img’).load(function() {    console.log(‘image load successful’);});

Sometimes you need to check whether the image is fully loaded to complete subsequent scripts. The above three jQuery statements can help you complete this task.

3.Automatic repair of damaged Images

$('img').error(function(){    $(this).attr('src', ‘img/broken.png’);});

Occasionally, we may mistake links to images on some pages. It is not easy to fix them one by one. The above code can help you solve this problem quickly.

Even if you do not have any broken links, writing the above statements will not cause any loss.

4.Mouse slide out switch CLASS

$(‘.btn').hover(function(){    $(this).addClass(‘hover’);}, function(){    $(this).removeClass(‘hover’);    });

This jQuery fragment adds a slide style when the user slides over the link element with the mouse, and removes the slide style when the mouse leaves. Style control needs to be compiled in the CSS file.

　　5. Make the INPUT field unavailable

$('input[type="submit"]').attr("disabled", true);

Sometimes you may want a button or input field in the form to be unavailable until the user triggers a condition, for example, clicking "I agree to xxx protocol ...". The above Code makes the input field unavailable. To change the input field to available, call the following code:

$('input[type="submit"]').removeAttr("disabled”);

　　

6. Prevent hyperlink jump

$(‘a.no-link').click(function(e){    e.preventDefault();});

Sometimes we do not want to click a hyperlink to jump to another page or reload the page. We hope that clicking the hyperlink will trigger the execution of some scripts. In this case, we can use the jQuery code snippet above to prevent the browser's default behavior.

　　7. Switch the FADE/SLIDE Effect

// Fade$( “.btn" ).click(function() {    $( “.element" ).fadeToggle("slow");});// Toggle$( “.btn" ).click(function() {    $( “.element" ).slideToggle("slow");})

Sliding and fade-in and fade-out effects are the most used jQuery animation effects.

　8. Simple accordion Effect

// Close all Panels$('#accordion').find('.content').hide();// Accordion$('#accordion').find('.accordion-header').click(function(){var next = $(this).next();next.slideToggle('fast');$(‘.content’).not(next).slideUp('fast’);    return false;});

To use this script, you have to write a necessary html structure code.

　　9. Make the two divs have the same height

$('.div').css('min-height', $('.main-div').height());

Sometimes you want the two divs to have the same height and different content. This jQuery fragment can solve this problem. It sets "min-height" to make the div have the same height.

　　10. unordered list

$('li:odd').css('background', '#E8E8E8’);

With this code, you can easily create an unordered list with the color of the line. You can also port it to a table, div, or other elements.