12 Small Functions Used in jquery

jquery12 commonly used functions are excellent, come and watch!

Back to the top
Using JQuery's animate and scrollTop methods, you can create an animation that simply returns to the top:

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

There must be 1 button in HTML:

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

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

Picture preloading
If the page uses many pictures that are not visible at first load, it is necessary to preload:

$.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 picture is fully loaded
Sometimes the picture needs to be completely loaded before the following operation can be carried out. The following script can be realized:

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

You can also use the img tag with id or class to determine whether a particular picture is fully loaded

Automatically repair damaged pictures
If the picture is damaged, you can replace it with another one:

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

Class Switching of Hover State
When the user's mouse pointer hovers over an element that can be clicked, you can change its visual effect by adding an class. When the mouse pointer leaves the element, the newly added class is removed:

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

A simpler way is to use toggleClass:

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

Note: CSS may be a faster solution in this case but it 's still to know this
Sometimes, you want the Submit button or text box of the form to become non-editable until the user completes a specific action by modifying the disabled attribute of the input element:
$('input[type="submit"]').prop('disabled', true);
You can change the element state by calling the prop method again to change the disabled value to false:
$('input[type="submit"]').prop('disabled', false);

Stop link loading
If you don't want to click on the link to jump to another page or reload the page, but just want it to do something else, such as triggering other scripts, you need to block the default behavior of the link:

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

Fade/Slide Handover
Slideing and fading are commonly used JQuery animations. If you want to display an element when the user clicks, you can use fadeIn or slideDown. To realize the effect of displaying the element for the first time and hiding the 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 can simply realize 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;
});

Make two Div equal height
Sometimes, you need to keep the two Div equal height, regardless of the contents of the two Div:

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

0

In the above example, one element collection is looped and the height of the element is set to the highest height in the element collection. To keep all column at the same height, you can do this:

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

1

Open the outer chain in the new Tab/Window
Open the outer link in the browser's new Tab/Window, and open the homologous link in the same Tab/Window:

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

2

Note: window.location.origin doesn't work in IE10. This fix takes care of the issue.
Find Elements by Text
Using JQuery's contains () selector, you can find an element that contains specific text, and if the text does not exist, the element is hidden:

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