Focus on jquery skills to improve jquery skills of front end development essentials

  • 2020-09-16 07:20:33
  • OfStack

A collection of simple tips to help you improve your jQuery skills.

Matt Smith started a small project and now has 14 tips. Bole online will continue to follow up updates.

Back to top button
Preloaded image
Check that the image has been loaded
Automatic repair of damaged images
Class switch on Hover
Disable the input field
Stop link loading
Fade in and fade out/slide switch
Simple folding effect
Set both Div to the same height
Open the external link in a new window
Find the text element
Toggles visible and hidden triggers

Back to top button

By using the animate and scrollTop methods in jQuery, you can create a simple back to top animation without a plug-in:

JavaScript


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

JavaScript


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

Change the value of scrollTop to where you want scrollbar to stop. And then what you do is, you set it to go back to the top in 800 milliseconds.

Preloaded image

If your page USES a lot of images that are not initially visible (such as bound to hover), preloading them is 10 points useful:

JavaScript


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

Check that the image has been loaded

Sometimes you may want to check that the image is fully loaded before you can do anything else in the script:

JavaScript


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

You can also check that a particular image has been loaded by replacing the img tag with ID or class.

Automatic repair of damaged images

If you find that the link to your website's image is down, it's a hassle to replace it one by one. This simple piece of code can help a lot:

JavaScript


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

Even if you don't have any broken links, adding this code won't make a difference.

Class switch on Hover

If the user hovers over a clickable element on a page, you want to change the visual appearance of that element. You can use this code to add an class to the element when the user hovers. Remove class when the user mouse away:

JavaScript


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

You only need to add the necessary CSS. If you need a simpler approach, you can also use the toggleClass method:

JavaScript


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


Note: CSS might be a faster solution to this example, but it's still worth knowing.

Disable the input field

Sometimes you might want to make the form's submit button or its text entry box unavailable until the user performs a specific action (such as a check box to confirm that "I read this item"). Add disabled attribute to your input to achieve the desired effect:

JavaScript


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

When you want to change the value of disabled to false, you simply run the prop method once more on that input.

JavaScript


$('input[type="submit"]').prop('disabled', false);

Stop link loading

Sometimes you don't want to link to a page or reload it, but you want to be able to do something else, such as trigger another script. Here's a tip for disabling default behavior:

JavaScript


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

Fade in and fade out/slide switch

Fade-in and fade-out and sliding are the animations we often make with jQuery. Maybe you just want to show an element when a user clicks on something. fadeIn and slideDown are both great. But if you want the element to appear on the first click and disappear on the second, the following code does the job nicely:

JavaScript


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

Simple accordion effect

This is a quick  accordion effect of simple method:

JavaScript


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

After adding this script, all you need to do is check to see if the script is working properly in the required HTML.

Make both Div heights 1 the same

Sometimes you might want both div to have the same height, no matter what's in them:

JavaScript


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

This example sets min-ES193en, meaning it can be larger than the main div, but can never be smaller. But there is a more flexible approach is to traverse the 1 set of  element set, then put the high peak in the set for the element:

JavaScript


var $columns = $('.column');
var height = 0;
$columns.each(function () {
 if ($(this).height() &gt; height) {
  height = $(this).height();
 }
});
$columns.height(height);

If you want all columns to have the same height:

JavaScript


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

In a new TAB/window open  inbound links
Open the external link in a new TAB or window and make sure that the in-site link opens in the same TAB or window:

JavaScript


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

Note: window.location.origin is not available in IE 10, the issue restoration method.

Find the element through the text

You can find the text in an element by using the contains() selector in jQuery. If the text does not exist, the element will be hidden:

JavaScript

var search = $('#search').val();


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

Visual change trigger
JavaScript is triggered when the user focuses on, or returns to, another tag:

JavaScript


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

Error handling for the Ajax call

Error handling is performed when an Ajax call returns a 404 or 500 error. But if this processing is not defined, the rest of the jQuery code may stop working. You can define a global Ajax error handling using this code:

JavaScript


$(document).ajaxError(function (e, xhr, settings, error) {
 console.log(error);
});

Universal Programmer exchange QQ group 290551701, the programmers in the group are from Baidu, Ali, JINGdong, Xiaomi, Qunar, Ele. me, Langang and other senior programmers, with rich experience. Join us, direct communication technology, the best learning environment, to understand the industry's first hand information. If you want to be strong, then join in and let Daniel take you to the next level!


Related articles: