Maneuver DOM Elements in ASP.Net with JQuery

JQuery, a popular open source JavaScript library, is CSS3 compliant. With JQuery, you can easily maneuver the DOM elements in your web page. Basically, it allows you to add/delete DOM elements to your HTML based content.

If you want to manipulate the DOM elements using JQuery and Visual Studio, you basically need to install the following tools to your system

  1. Visual Studio 2008 and 2008 SP1
  2. JQuery Library
  3. The VS 2008 JQuery Plugin

Let's see how to manipulate the elements using jQuery plugin

Manipulating the DOM Elements

You simply need a few CSS classes to begin the manipulation process. Use the following code to add a CSS class to the DOM element

$('#DOMElement').addClass('CSSClassName'); 

You can use the following code to remove a CSS class associated with a DOM element

$('#DOMElement').removeClass('CSSClassName');

With the following code, you can easily check if a CSS class is bound to a DOM element

$(#DOMElement).hasClass(myCSSClass)

To know if an element exists, use the length property through the following code

if ($('Image1').length)     
{ 
 alert("Found");
} 
else
{
alert("Image object not found"); 
}

Making it simpler, is the following code

if ($("#Image1").length)
alert("Found");
else
alert("Not found");

Here is a code if you want to set values to the various CSS attributes. An example of color as the attribute is being considered here

$('#ErrorDiv').css("color","red");

Here is the code to retrieve an element's property

$('#MyDiv').css('font-weight');

In JQuery the.append() and .appendTo() work in pretty much the same way; they differ only in their syntax

<div class="test">
<div class="first">Hello</div>
<div class="last">World</div>
</div> 

If you use AppendTo () the code transforms as follows

$('<p>This is a sample text</p>').appendTo('.first');

Let's have a look at the final HTML code

<div class="test"> 
<div class="first">
 Hello 
<p>This is a sample text</p> 
</div> 
<div class="last"> 
World 
<p>This is a sample text</p>
</div>
</div>

Conclusion:

You can easily manipulate the elements associated with DOM in ASP.Net web page that you have created. You will need to use Visual Studio in combination with JQuery to get started. Semaphore Software is a leading ASP.Net development company that offers web applications suited to meet your needs.

Deepa Ranganathan
  • asp.net
  • DOM elements
  • jquery
  • css
By Deepa Ranganathan On 31 Aug, 15  Viewed: 886

Other blogs you may like

Readonly textbox postback issues and solutions

In many cases we need to use read only text box so user cannot edit the value but readonly textbox will lost its value after postback. Let’s say you have a read only text box to set date by using ajax calendar so after post back date will be lost, other case might be you are setting some value in... By Ali Adravi   On 24 Apr 2013  Viewed: 4,219

Call code behind method from JavaScript in asp.net

There are ways to call a web service method JavaScript, for more detail you can see [how to retrieve data from database using JavaScript in asp.net][1], but is there any way to call a normal method from JavaScript? And the answer is No; show how we can call a code behind method from JavaScript,... By Jonathan King   On 08 Apr 2013  Viewed: 12,445

Gridview paginated data with search and sort functionality in asp.net

Most of the times we need to use GridView control to show tabular data in our asp.net application. We simply write procedure to search the records and bind them with GridView and show 10 to 20 records per page. Have you ever thought that why you are fetching all the records and show only 10 to 20... By Ali Adravi   On 16 Feb 2013  Viewed: 8,387

ASP.Net 4.5 new feature Model Binding

A nice feature with ASP.Net is the model binding, it reduced our code and effort to bind our well know controls like GridView, DataList, Repeater etc. So let’s see how we can bind our old controls in new and easy way. Let’s see how we bind the our grid before 4.5 1. We write the code to get... By Mike .Net   On 17 Jan 2013  Viewed: 3,200

Upload multiple image in multiple size with progress bar in asp.net

In asp.net there is not control to select multiple files and upload them once with progress bar, so we will use a small third party DLL to achieve this functionality. We will use Flajaxian FileUploader, you can download it from [http://www.flajaxian.com][1] We will create three different images... By Hamden   On 12 Jul 2012  Viewed: 6,546