Few simple and effective usages for jQuery......

jQuery is a powerful tool that can enhance our capabilities to deal with data in a better way. Following are few ways to effectively use jQuery within a given application ( I had used it mostly with MVC style of applications).

To update a value within a span tag.

<span id="testspan"></span>

<script>

$("#testspan").text("updating span tag value");

</script>

When you run the app, span tag will be updated with the new value.

To enable and disable a field in UI using jQuery

<input type="text" id="txtField"/>

• To disable, just use -  $("#txtField").attr("disabled", "disabled");
• To enable, $("#txtField").removeAttr("disabled");

To hide and display a field

<input type="text" id="txtField"/>

• To hide, just use $("#txtField").hide()
• To display, use $("#txtField").show()
• To add animation while displaying, try $("#txtField").show("slow")

To check if an element is enabled or disabled

<input type="text" id="sample"/>

jQuery to check enabled / disabled status...

if($('#sample').is(':disabled') == false)
{
    alert("text box is not disabled...");
}

Above line of code will check if it is enabled and if so will given an alert.

To disable a given element

<input type="text" id="sample"/>

$('#sample').prop('disabled', true);

To disable a given element and its children

<div id="divtest">
  <input type="text" value="test" id="text1"/>
   <input type="button" id = "btnTest"/>
</div>

$('#divtest').children().prop('disabled', true);

Above line of code will disable all elements that exists within the div tag.

To check if an element exists

if ($('#dividtest').length > 0)
{
    //element exists
}
else
{
    // no such element exists.
}

To enable a Kendo UI drop down list

A simple usage to enable (or even disable) a given Kendo UI drop down.

$('#kendoddl').data("kendoDropDownList").enable(true);

Similarly, other kendo UI controls can be handled too.

To modify height of a div tag at run time

A very easy and simple way to do this using jQuery is :

<div id="1"></div>
<script>
$("#1").css('height', '400px');
</script>

To know if an element is visible

<div id="1"></div>

<script>
$("#1").is(':visible');
</script>