Focus on jquery techniques to improve jquery skills (front-end development must be learned) _jquery

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

A small project, launched by Matt Smith, now has 14 tips. Bole Online will continue to follow up updates.

Back to the top of the button
Pre-loading pictures
Check to see if the picture is finished loading
Automatic repair of damaged pictures
Class switch on the Hover
Disable input Field
Stop link loading
Fade/Slide Switch
Simple folding effect
Set two Div to the same height
Open an external link in a new window
Find text Element
Toggle a visual and hidden trigger

Back to the top of the button

By using the animate and ScrollTop methods in JQuery, you can create a simple return to the top animation without a plugin:

Javascript

Back to top
$ (' A.top '). Click (function (e) {
 e.preventdefault ();
 $ (document.body). Animate ({scrolltop:0},);
});

Javascript

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

Change the value of the scrolltop to where you want the scrollbar to stop. And then all you have to do is set it back to the top in 800 milliseconds.

Pre-loading pictures

If your page uses a large number of images that cannot be initially visible (such as binding on hover), it is useful to preload them:

Javascript

$.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 to see if the picture is finished loading

Sometimes you might want to check that the picture is completely loaded before you can follow up in the script:

Javascript

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

You can also check whether a particular picture is loaded by replacing the IMG tag with an ID or class.

Automatic repair of damaged pictures

If you find yourself on the site of the picture link hanging up, one replacement is very troublesome. This simple piece of code can be a huge help:

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 have any effect.

Class switch on the Hover

If the user's mouse hovers over a clickable element on the page, you want to change the visual representation of the element. You can use this code to add a class to the element when the user hovers, and then remove the class when the user leaves the mouse:

Javascript

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

You only need to add CSS. If you need a simpler way, you can also use the Toggleclass method:

Javascript

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

Note: CSS may be a quicker way to solve this example, but it's still worth knowing.

Disable input Field

Sometimes you might want to make the form's submit button or its text input box unavailable until the user performs a specific behavior (such as confirming the check box "I have read this clause"). Add disabled attribute to your input, you can achieve the desired effect:

Javascript

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

When you want to change the value of disabled to false, you only need to run the prop method again on that input.

Javascript

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

Stop link loading

Sometimes you don't want the link to jump to a page or reload the page, and you want to do something else, such as triggering other scripts. The following code is a trick to prevent default behavior:

Javascript

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

Fade/Slide Switch

Fade and slide are animations that we often use with jQuery. Maybe you just want to show an element when a user clicks on something, and it's great to use FadeIn and Slidedown. But if you want the element to appear on the first click and disappear the second time, the following code can do the job well:

Javascript

Fade
$ ('. btn '). Click (function () {
 $ ('. Element '). Fadetoggle (' slow ');
});
Toggle
$ ('. btn '). Click (function () {
 $ ('. Element '). Slidetoggle (' slow ');
});

Simple accordion effect

This is a quick and easy way to achieve the accordion effect:

Javascript

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

After adding this script, all you need to do is to see if the script works in the necessary HTML.

Make two Div heights the same

Sometimes you might want to have two div with the same height, regardless of what's inside it:

Javascript

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

This example sets the min-height, which means it can be larger than the main Div, but never smaller. But there is a more flexible way to traverse a set of elements and then set the height to the highest value in the element:

Javascript

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

If you want all columns to have the same height:

Javascript

var $rows = $ ('. Same-height-columns ');
$rows. Each (the function () {
 $ (this). Find ('. Column '). Height ($ (this). Height ())
;

Open Outbound links in new tabs/Windows
Open an external link in a new tab or a new window, and make sure that the inbound link opens in the same label or window:

Javascript

$ (' 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 available in IE 10, the issue repair method.

Finding elements from text

By using the CONTAINS () selector in JQuery, you can find the text in an element. If the text does not exist, the element will be hidden:

Javascript

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

$ (' Div:not (: Contains ("' + Search + ') '). Hide ();

Visual change triggers
Triggers JavaScript when the user focus is on another label, or when it is returned to the label:

Javascript

$ (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! ');
 }
);

Error handling for Ajax calls

When an Ajax call returns a 404 or 500 error, error handling is performed. But if the processing is not defined, other jQuery code may stop working. You can define a global Ajax error handling by following this code:

Javascript

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

Universal Programmer Exchange QQ Group 290551701, the group of programmers are from, Baidu, Ali, Jingdong, Millet, where to go, hungry, Blue Harbor and other senior programmers, has a wealth of experience. Join us, straight line communication technology Daniel, the best learning environment, understand the industry's firsthand information. If you want to be strong Daniel, then join in, let Daniel take you super God!