Some useful JavaScript and jQuery snippets

Add a CSS class to a specified element:

By adding CSS classes to change the appearance and feeling of elements, it is a very clean method, rather than adding inline styles. With jQuery, it is easy:

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

Remove a CSS class from a specified element:

You may think that the operations to add CSS classes are quite cool, but we still need to know how to remove unwanted CSS classes. The following code can do this:

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

Checks whether a specified element has a CSS class:

If an application or website often involves adding or removing CSS classes for a specified element, it will become very useful and be able to detect whether the element has a certain CSS class.

$(id).hasClass(class)

Use jQuery to Switch CSS:

As we can see, using jQuery to add or remove elements is very simple and convenient. But what if you want to completely remove the entire CSS file and add a new style file (such as common page color switching effects )? In fact, this is quite simple, as shown in the following example:

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

Check whether an element exists:

When using JavaScript For work, we often need to check whether an element exists. It is very simple to use the jQuery and length attributes: If the length is 0, the page does not have this element. Otherwise, the page uses this element.

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/

Obtain the parent element of a specified element:

To use 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

Obtain the sibling node of an element:

The siblings () method used to obtain the sibling node of the element is a very convenient tool. As shown in, this method is very simple:

$("div").siblings()

Remove options from the selection list:
When using the selection list, you may need to update the content based on your operations. To delete an option in the selection list, you can 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/

Obtain the text content of the list options:

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

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

Apply the "banma" effect to the table (color change across rows ):

When using a table, for better readability, the line-by-line color change style is a good solution. With jQuery, this is easy to do without any additional HTML tags.

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

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

Number of child nodes of the computing element:

If you want to see how many div subnode elements the # foo element contains, the following code will let you know. Simple and effective!

$ ("# Foo> div"). length
Source: http://tympanus.net/codrops/2010/01/05/some-useful-javascript-jquery-snippets/