How to use jQuery to examine the DOM

At the base of jQuery is the $ character which is a method. The $ method is the entry point for all jQuery features. When the browser receives HTML, the browser parses it and renders it on screen. During parsing, it also creates an internal representation of the controls and organizes them hierarchically. This internal representation is called the DOM.

When Web developer has to to refer to a control in JavaScript, he/she has to use the GetElementById method of the Document class. Doing this isn’t hard, but it requires a long statement. jQuery makes things much faster. The next snippet illustrates the idea of the power of jQuery:

 

Classic JavaScript:
document.getElementById(“objId”);

 

jQuery:
$(“#objId”);

In this case, the $ method accepts a string representing the object to retrieve. By using getElementById Web developer can find only one object, jQuery offers a pattern to retrieve as many objects as Web developer needs in many possible ways. The # character is used to specify that Web developer’s looking for an object by its ID. The # character is used in CSS to identify an object by its ID. jQuery leverages CSS syntax to enable Web developer to query the DOM by using just a string.

 

Web developer can retrieve all objects of a given type using the next snippet:

$(“span”);

If Web developer has to find all span tags that have the blue CSS class, he/she has to use the following snippet:

$(“span.blue”);

Sometimes Web developer needs to start from a known object and then traverse the DOM to look for its immediate children, its indirect children, or its siblings.

 

If the page has a set of check boxes and

 

<div id=”checkColor”>
   <input type=”checkbox” /><span>Red</span><br />
   <input type=”checkbox” /><span>Blue</span><br />
   <input type=”checkbox” /><span>Green</span><br />
   <input type=”checkbox” /><span>Orange</span><br />
   <input type=”checkbox” /><span>Yellow</span><br />
   <input type=”button” value=”check” onclick=”checkOptions()” />
</div>

 

Web developer has to retrieve the option selected by the user, he/she can do this, by using the code:

 

$(“:checkbox:checked”);

 

The :checkbox command is a shortcut to retrieve check boxes; :checked is another shortcut to retrieve only the checked items. If Web developer wants to show a message to the user with selected options, he/she needs to retrieve the span next to the check box:

$(“:checkbox:checked + span”);

The + character instructs jQuery to retrieve span tags that are next to the check box.

If the page has treeview built using ul and li tags

<ul id=”tree”>
   <li>Security
      <ul>
         <li>ASP.NET security </li>
         <li>ASP.NET authentication and authorization</li>
      </ul>
   </li>
   <li>Data access fundamentals
      <ul>
         <li>Using ADO.NET to access data</li>
         <li>Reading and writing XML</li>
      </ul>
   </li>
</ul>

 

Web developer can extract all nodes of the tree view, by using this query:

$(“#tree li”);

The query simply retrieves the element with id tree and then takes all its direct and indirect children li tags.

Web developer can extract only the direct children, by using this query:

$(“#tree > li”);

The > char does the trick of taking only the direct children. This query returns only the Security and Data access fundamentals elements of the HTML shown in previous snippet.

If you want to host ASP.NET AJAX application then you will need ASP.NET AJAX hosting provider which supports AJAX Framework.