應該了解的10個jQuery代碼片段

jQuery是一個深受開發喜歡的強大JS庫。下面是10個你應該了解的jQuery代碼片段。

10. Zebra Stripped Unordered List

$(‘li:odd’).css(‘background’, ‘#E8E8E8’);

You can easily create a zebra striped unordered list using this little snippet. This would place your defined background on every odd list item so you can place the default for the even ones in your CSS file. That’s where the zebra thing comes in. This snippet can be added to any type of markup, from plain divs to tables; anything you can come across that can be zebra striped.

9. Make Two Divs the Same Height

$(‘.div’).css(‘min-height’, $(‘.main-div’).height());

As the name suggests, if you have two divs to have the same height you can simply use this snippet and it would enable just that. It does not matter what sort of content the divs may contain, this snippet would just work. In this particular case the height is set at minimum by default which means that it can be bigger than the main div but would never be small. This comes in very handy for a  lot of different websites.

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

You can use this script for a quick accordion. It is a very simple method and you do need is the code which we pasted for your convenience.

7. Toggle Fade/Slide

// Fade
$( “.btn” ).click(function() {
$( “.element” ).fadeToggle(“slow”);
});

// Toggle
$( “.btn” ).click(function() {
$( “.element” ).slideToggle(“slow”);
});

This is perhaps one of the more common animations used on the web all thanks to jQuery. Sometimes you would want to show an element when you click something and for that, this little snippet is just perfect.

6. Stop Loading of Links

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

There are times when a designer does not want the links to redirect to a certain page or reload them. Sometimes, designer would want the link to trigger some other script. If that is the case, you may want to give a look at this very light little snippet because this little piece of code will manage to do just that.

5. Disabling Input Fields

$(‘input[type="submit"]‘).attr(“disabled”, true);

There are times when a designer would want the submit button of a form to be disabled. There are cases when a designer would even want some text inputs to be disabled. The designer would want to keep this intact until the user performs a certain action for example when at the end of a registration you check the tick box that asks if you agree to the terms and conditions. Use this line of code and it will do just that.

4. Toggle Class on Hover

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

You notice that visual change on a clickable element when you hover over it? Well, if you are designer, you definitely love that effect. It is only natural. When we hover over something, we want some sort of a visual change which should suggest that the item is either clickable or something like that. This particular snippet mentioned above accomplishes just that. It would add a class to your element when a user is hovering. If the user stops hovering, the said class is removed. All you need to is add the necessary styles in CSS and voila.

3. Fix Broken Images Automatically

$(‘img’).error(function(){
$(this).attr(‘src’, ‘img/broken.png’);
});

There are times when several broken image links appear on a particular website. When that happens, a designer would usually replace them one by one. That is time-consuming and honestly, very dull. It’s not even very easy to do; imagine a thousand pictures that need replacement. Well, thank God for jQuery, because the tiny little snippet mentioned above will replace those images for you and save you loads of time and headache. Even if you don’t have any broken images link, adding the above snippet will not harm you just in case.

2. Checking if Images are Loaded

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

Sometimes a designer would need to check if the images are fully loaded in order to continue with the scripts and other coding work. Well, adding this little snippet will help you do just that and very easily too. You can also check if one particular image was loaded by replacing the img tag with an ID or otherwise a class. See ti is easier that way.

1. Back to Top Button

// Back To Top
$(‘a.top’).click(function(){
$(document.body).animate({scrollTop : 0},800);
return false;
});

//Create an anchor tag
<a class=”top” href=”#”>Back to top</a>