15 JQuery tips that front-end programmers should know

Here are some simple tips to help you play with jquery.

• Back to top button
• Pre-load image
• Check if the image is loaded
• Automatic repair of corrupted images
• Hover Switch Class
• Disable input fields
• Stop loading Links
• Toggle Fade In/Slide
• A simple accordion
• Make two Div heights the same
• Open external link in new tab/window
• Find elements by text
• Triggered when changing the visibility
• Ajax Call error Handling
• Chained plug-in calls

Back to top button

By using the animate and ScrollTop methods in jquery, you can create a simple animation that scrolls to the top without a plug-in:

Back to top$ ('. Top '). Click (function (e) {  e.preventdefault ();  $ (' HTML, Body '). Animate ({scrolltop:0}, 800);});

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

Changing the value of scrolltop can change where you want the scroll bar to be placed. All you really need to do is animate the body of the document in 800 milliseconds, until it scrolls to the top of the document.

Note: Be careful with some of the wrong behavior of scrolltop.

Pre-load image

If your Web page is going to use a large number of images that begin to be invisible (for example, hover), you can preload these images:

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

Check if the image is loaded

Sometimes in order to continue the script, you may need to check that the image is fully loaded:

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

You can also use the ID or class substitution tags to check if a particular image is loaded.

Automatic repair of corrupted images

It is very painful to replace the broken image links one after the other. However, this simple piece of code can help you:

$ (' img '). On (' Error ', function () {  if (!$ (this). Hasclass (' Broken-image ')} {    $ (this). Prop (' src ', ' img/ Broken.png '). addclass (' broken-image ');  });

Even if there are no broken links, plus this piece of code will not let you have any loss.

Hover Switch Class

Suppose you want to change the color when the user hovers over a clickable element. Then you can add the class to the element when the user hovers, or delete the class:

$ ('. btn '). Hover (function () {  $ (this). addclass (' hover ');}, function () {  $ (this). Removeclass (' hover ');});

You just need to add the necessary CSS. A simpler approach is to use the Toggleclass method:

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

Note: It is possible in this case that the CSS solution is faster, but it is necessary to understand this approach.

Disable input fields

Sometimes, you may want to disable the Submit button for a table or one of its entries until the user performs a specific action (for example, check the "I have read the terms" checkbox). Add the Disabled property to your input to enable it when you want it:

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

Then you just have to run the input prop method, but the value of disabled is set to false:

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

Stop loading Links

Sometimes you don't need to link to a particular page or reload the page-you might want to link to something else, such as triggering some other script. This is going to be a fuss over blocking the default action:

$ (' A.no-link '). Click (function (e) {  e.preventdefault ();});

Fade In/Slide toggle

Sliding and fading are a lot of things we use when we animate with jquery. If you just want to show an element after the user clicks, then using the Fadein and Slidedown methods is perfect. However, if you want the element to appear at the first click and then disappear at the second click, try the following code:

fade$ ('. btn '). Click (function () {  $ ('. Element '). Fadetoggle (' slow ');}); /toggle$ ('. btn '). Click (function () {  $ ('. Element '). Slidetoggle (' slow ');});

A simple accordion

This is a simple way to quickly create an accordion:

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;});

By adding this script, all you really need to do is add the necessary HTML elements to the page so that it can run the job.

Make two Div heights the same

Sometimes you need to have two div have the same height regardless of what content they contain:

$ ('. Div '). css (' Min-height ', $ ('. Main-div '). Height ());

Set Min-height, which means it can be larger than the main div but definitely not smaller than the main div. However, there is a more flexible way to traverse a set of elements and then set the height to the height of the highest element:

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

If you want all columns to be the same height:

var $rows = $ ('. Same-height-columns '); $rows. each (function () {  $ (this). Find (". Column"). Height ($ (this). Height ()) ;});

Open external link in new tab/window

Open the external link in a new browser tab or window and make sure that the link from the same source can be opened in the same tab or window:

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

Note: Window.location.origin is not valid in IE10. Be careful with this problem when repairing.

Find elements by text

By using the CONTAINS () selector in jquery, you can find the text of the element content. If the text does not exist, then hide the element:

var search = $ (' #search '). Val (); $ (' Div:not (: Contains ("' + Search + ')"). Hide ();

Triggered when changing the visibility

Triggers JavaScript when the user no longer focuses on a tab, or re-focuses on the original tab:

$ (document). On (' Visibilitychange ', function (e) {  if (e.target.visibilitystate = = = "visible") {    console.log (' Tab is now in view! ');  } else if (e.target.visibilitystate = = = "hidden") {    console.log (' tab is now hidden! ');  }});

Ajax Call error Handling

When an Ajax call returns a 404 or 500 error, an error handler is executed. If no handler is defined, the other jquery code may strike on this. Define a global Ajax error handler:

$ (document). Ajaxerror (function (E, XHR, settings, error) {  console.log (error);});

Chained plug-in calls

jquery allows method calls to "chained" plug-ins to mitigate the process of repeatedly querying the DOM and creating multiple jquery objects. For example, the following code snippet represents your plug-in method invocation:

$ (' #elem '). Show (); $ (' #elem '). html (' Bla '); $ (' #elem '). Otherstuff ();

By using chaining, you can greatly improve:

$ (' #elem ').  Show ()  . html (' bla ')  . Otherstuff ();

Another way is to cache elements in the (prefix $) variable:

var $elem = $ (' #elem '); $elem. Hide (); $elem. html (' bla '); $elem. Otherstuff ();

Chaining and caching methods are the best practices in jquery that can make code shorter and faster.

15 JQuery tips that front-end programmers should know