Some useful JavaScript and jQuery snippets to share_jquery

Add CSS class to the specified element:

A very clean way to change the look and feel of an element by adding CSS classes instead of adding inline styles. Using jQuery, this is easy to do:

$('#myelement').addClass('myclass');

Remove CSS class from specified element:

You may think that adding CSS classes is awesome, but we also need to know how to remove unnecessary CSS classes. The following code does this:

$('#myelement').removeClass('myclass');

Detects whether the specified element has a certain CSS class:

Being able to detect whether an element has a certain CSS class becomes very useful if your application or website frequently involves adding or removing CSS classes from a given element.

$(id).hasClass(class)

Toggle CSS using jQuery:

As we can see, adding or removing CSS styles from an element using jQuery is very simple and convenient. But what if you want to completely remove the entire CSS file and attach a new style file (such as common page color switching and other effects)? It's actually quite simple, as the following example shows:

$('link[media='screen']').attr('href', 'Alternative.css');

Source: http://addyosmani.com/blog/50-jquery-snippets-for-developers/

Append HTML code to an element:

When you need to append some HTML content to an element, the append() method saves time and effort:

$('#lal').append('sometext');

Detect whether an element exists:

When working with JavaScript, we often need to check whether an element exists. Using jQuery and the length property, it's very simple: if the length is 0, the page does not have that element, otherwise it does.

if ($('img').length) {  log('We found img elements on the page using "img"');} else {  log('No img elements found');}

Source: http://jqueryfordesigners.com/element-exists/

Get the parent element of the specified element:

Working with the DOM you may need to know the direct parent element of an element. The closest() method will let you know:

var id = $("button").closest("div").attr("id");

Source: http://stackoverflow.com/questions/545978/finding-the-id-of-a-parent-div-using-jquery

Get the sibling nodes of an element:

The siblings() method for getting the sibling nodes of an element is a very convenient tool. As shown below, it is very simple to use this method:

$("div").siblings()

Removing an option from a select list:
When using a select list, you may need to update content based on user actions. To remove an option from a select list, use the following code:

$("#selectList option[value='2']").remove();

Source: http://calisza.wordpress.com/2009/03/29/6-jquery-snippets-you-can-use-to-manipulate-select-inputs/

Get the text content of the list option:

This method is useful when you need to quickly detect the option the user selected from a selection menu.

$('#selectList :selected').text();

Apply the "zebra" effect (color change every other row) in the table:

When using tables, a color-changing style is a good solution for better readability. Using jQuery, this is easily possible without any extra HTML markup.

$("tr:odd").addClass("odd");

Source: http://web.enavu.com/tutorials/top-10-jquery-snippets-including-jquery-1-4/

Calculate the number of child nodes of an element:

If you want to see how many div child elements the #foo element contains, the code below will let you know. Simple yet effective!

$("#foo > div").length<br><p>来源：<a href="http://tympanus.net/codrops/2010/01/05/some-useful-javascript-jquery-snippets/" target="_blank">http://tympanus.net/codrops/2010/01/05/some-useful-javascript-jquery-snippets/</a></p>