Here are the most top 5 brillant features of jquery, that a jquery-newbie should
know:
1- Switching between DOM elements and jQuery:
To convert your jquery object to DOM element just use the indexer
like the following since jquery object contains an array of matched elements:
$('#elementid')[0].innerHTML = "New data";
On the contrary you can convert the DOM element to jquery using $() function:
$(document.getElementById('elementid')).html("New data");
2- Filters:
$(':hidden').show(); // Show all hidden elements
if($('#elementid').is(':visible'))$('#elementid').hide(); // Hides an element if it is visible
$(':empty').remove(); // Remove all emty elements
$("table1 tr:first").css("font-style", "italic"); //Find the first row of table1
$("table1 tr:last").css("font-style", "italic"); //Find the last row of table1
3- each method:
Loops DOM elements inside a jquery object since jquery object contains an array
of DOM elements:
//Display a warning if any input field is empty
$('input[type=text]').each(function(){
if($(this).val() == '')alert(this.id + " is empty!");
});
4- trim whitespace:
var trimmed = $.trim(" Text to be trimmed ");
5- Inserting elements inside/outside other elements:
With jquery creating elements on the fly, inserting, removing or replacing them
are much easier:
append() : append an element right after the last element inside
the given element:
$('#container').append("<div>A new child</div>");
prepend() : append an element right before the first element inside
the given element:
$('#container').prepend("<div>A child at the first order</div>");
after() : append an element right after the given element:
$('#elementid').after("<div>A new nextsibling element</div>");
before() : append an element right before the given element:
$('#elementid').before("<div>A new previoussibling element</div>");
replaceWith() : replaces and element with another:
$('#elementid').replaceWith("<div>Element to replace</div>");
1794bc85-cc8f-4e97-930c-c62e822aed2d|0|.0