10 Common jquery Code Snippets

jquery is used on pages of countless websites and is one of the most widely used JavaScript libraries. The popularity of jquery is part of its simplicity. It can do most of the complex work with simple statements. There are a number of jquery fragments that we use repeatedly every day, and here we summarize 10 pieces of jquery code you have to know.

Back to Top

<classhref= "#">back to top</A  >

// Back to Top $ (' A.top '). Click (function() {    0},800);     return false ;});

As shown above, animate and scrolltop with jquery make it easy to create a special effect that returns to the top.

We can control the scroll bar by changing the value of the scrolltop. In the example above, the value is set to 0 so that the page scrolls to the top.

The above animation effect scrolls from the bottom of the page to the top of the page within 800MS.

Check to see if the picture is finished loading

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

Sometimes you need to check if the picture is fully loaded in order to complete the subsequent script. The three jquery statements above will help you accomplish this task.

Automatic repair of damaged images

$ (' img '). Error (function() {    $ (this). attr (' src ', ' img/broken.png ');}); 

It's not easy for us to fix a few images on some pages occasionally. Using the code above can help you solve this problem quickly.

Even if you do not have any broken links, writing the above statement will not cause any loss.

Mouse-Over switch class

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

This jquery fragment adds a slide-over style when the user slides over the linked element with the mouse, while the mouse leaves the slider to remove the style. Style control requires that you write in a CSS file.

Make the input field unavailable

true);

Sometimes you might want a button or an input field in the form to be unavailable until the user triggers a condition, for example: Click "I agree to the XXX agreement ..." ”。 You can make the input field unavailable by using the code above. To make the input field available, you call the following code:

$ (' input[type= ' "submit"]). Removeattr ("Disabled");

Prevent Hyperlinks from jumping

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

Sometimes we don't want to jump to another page or reload the page after clicking the hyperlink. We want to click on the hyperlink to trigger execution of some scripts, which can be blocked by the jquery code snippet above to block the browser's default behavior.

Toggle Fade/slide Effect

// Fade $ (". BTN" ). Click (function () {    $ (". Element"). Fadetoggle ("slow");}); // Toggle $ (". BTN" ). Click (function () {    $ (". Element"). Slidetoggle ("slow");})

The swipe and fade effects are the most common jquery animations we've used.

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

The thing you need to do to use this script is to write a necessary HTML structure code.

Make two Div heights the same

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

Sometimes you want two div to have the same height and different content, this jquery fragment can solve this problem. It makes the div have the same height by setting "Min-height".

Unordered list Interlaced color

$ (' li:odd '). CSS (' background ', ' #E8E8E8 ');

With this code you can easily create an unordered list of interlaced colors, and you can also port it to a table, div, or other element.

10 Common jquery Code Snippets