Most common JavaScript operations using jQuery

We all know that jQuery is one of the most popular JavaScript Framework. It provides lot of functionality and here in this article listing the most common JavaScript functionality performed using jQuery.

Hide Table Row by Class Name using jQuery

   $('#' + tableName + ' tr.' + className).hide();

Iterate through JSON Object in jQuery

   $.each([KEY VALUE MAP], function(key,value) {
     alert("Key : " + key + " and value : " + value);
   });

Sort Select Drop Box Value using jQuery

   $("#" + selectBoxId).html($("#" + selectBoxId + " option").sort(function (a, b) {
     return a.text == b.text ? 0 : a.text < b.text ? -1 : 1;
   }));

Adding CSS to particular element using jQuery

 $("#divName").css([CSS PROPERTY],[VALUE]);
 
Eg. $("#divName").css("display","none"); //This will set display as none

Adding onClick event to an element using jQuery

 $("#elementName").click(function() {
alert("Element Clicked");
});

Adding attribute to an element using jQuery

 $("#elementName").attr("class","CSS Class Name");

Removing particular drop box option by value using jQuery

 $("#elementName option[value='" + valueVar + "']").remove();

Checking CSS value using jQuery

 var displayValue = $("#elementName").css("display"); //This would return the value set for display property

Get selected drop box element text using jQuery

 $("#elementName option:selected").text();

Check whether element has particular class using jQuery

 var classCheck = $("#"+elementName).hasClass("minus");

Adding class to an element using jQuery

 $("#" + elementName).addClass("[CLASS NAME]");

Removing class from an element using jQuery

 $("#" + elementName).removeClass("[CLASS NAME]");

Find specific element from the container using jQuery

 var elementObject = $('#divContainer').find("#elementToBeSearched");

Remove all the child objects from parent container using jQuery

 $('#elementName').children().remove();

Check whether particular element is visible using jQuery

 var isVisible = $("#elementName").is(":visible");

Select first option from drop box using jQuery

 $("#elementName option:eq(0)").attr('selected', 'selected');

Uncheck check-box using jQuery

 $("#checkBoxName").prop("checked", false);


Related Articles:

About Hitesh Agrawal

Wait... checking
Tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>