Jquery uses 12 minor functions and jquery uses 12 functions.

Jquery uses 12 minor functions and jquery uses 12 functions.

Jquery12 common functions are excellent. Come and watch it!

Back to Top
You can use the animate and scrollTop methods of JQuery to create an animation that simply returns the top:

// Back to top$('a.top').click(function (e) { e.preventDefault(); $(document.body).animate({scrollTop: 0}, 800);});

There is a button in HTML:

<!-- Create an anchor tag --><a class="top" href="#">Back to top</a>

You can change the value of scrollTop to locate the position of the scroll bar.

Image pre-loading
If the page uses a lot of images that are not visible when it is initially loaded, it is necessary to pre-load them:

$.preloadImages = function () { for (var i = 0; i < arguments.length; i++) { $('img').attr('src', arguments[i]); }};$.preloadImages('img/hover-on.png', 'img/hover-off.png');

Determine whether the image is fully loaded
The following script can be used to perform subsequent operations only when images are fully loaded:

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

You can also use the img tag with id or class to determine whether a specific image is fully loaded.

Automatic repair of damaged Images
If the image is damaged, you can replace it with another one:

$('img').on('error', function () { $(this).prop('src', 'img/broken.png');});

Hover status class switching
When a user's mouse pointer is suspended on an element that can be clicked, you can add a class to change its visual effect. When the mouse pointer leaves the element, remove the added class:

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

A simpler method is to use toggleClass:

$('.btn').hover(function () { $(this).toggleClass('hover');});

Note:CSS may be a faster solution in this case but it's still worthwhile to know this. The input box cannot be edited.
Sometimes, you want to change the form submission button or text box to uneditable, until the user completes a specific action, by modifying the disabled attribute of the input element to achieve:
$ ('Input [type = "submit"] '). prop ('Disabled', true );
Call the prop method again to change the disabled value to false to change the element status:
$ ('Input [type = "submit"] '). prop ('Disabled', false );

Stop link Loading
If you don't want to click a link to jump to another page or reload the page, you just want to let it do something else. For example, to trigger other scripts, You need to prevent the default behavior of the link:

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

Fade/Slide switchover
Slideing and fading are commonly used JQuery animations. If you want to display an element when a user generates a click event, you can use fadeIn or slideDown. To achieve the effect of clicking the display element for the first time and clicking the hidden element for the second time, you can refer to the following script:

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

Simple accordion
The following script implements the 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;});

Let the two Div levels be high
Sometimes, you need to keep the two divs high, regardless of the content of the two divs:

$('.div').css('min-height', $(.main-div).height());var $columns = $('.column');var height = 0;$columns.each(function () { if ($(this).height() > height) { height = $(this).height(); }});$columns.height(height);

In the preceding example, an element set is cyclically iterated and the height of the element is set to the highest height in the element set. To keep all columns at the same height, you can do this:

var $rows = $('.same-height-columns');$rows.each(function () { $(this).find('.column').height($(this).height());});

Open external links in new Tab/Window
Open the external link in the new Tab/Window of the browser, and open the link of the same source in the same Tab/Window:

$('a[href^="http"]').attr('target','_blank');$('a[href^="//"]').attr('target','_blank');$('a[href^="'+window.location.origin+'"]').attr('target','_self');

Note: window. location. origin doesn't work in IE10. This fix takes care of the issue.
Search for elements by text
You can use the contains () selector of JQuery to find an element that contains a specific text. If the text does not exist, the element is hidden:

var search = $('#search').val();$('div:not(:contains("'+search+'"))').hide();

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.