find and filter in jQuery when and how to use

Thanks to JQuery, handling javascript has never been easy. Bigger things while working on the client side would be querying the DOM for specific components. Among the tremendously many options, I would discuss the find and filter.
For illustration of the discussion let’s have the following example HTML:

<div class="upper"><p>Upper text goes here</p><div>
<div class="upper"><p>Another <b>Upper text goes</b> here</p><div>
<div class="middle"><p>middle <b>text goes</b> here</p><div>
<div class="lower">lower <b>text goes</b> here<div>
<div class="lower"><p>still another lower <i>text goes</i> here</p><div>

Using Filter

Filter would provide all the given components which are screened by the given condition. the query:
jQuery(‘div’).filter(‘.upper’) would provide two elements of div that have class upper on them. so alert(jQuery(‘div’).filter(‘.upper’).length) would alert two. Changing the class to middle and lower would result one and two respectively.

Using Find

Find, like the filter would provide elements and unlike filter, it would apply filtering on the children of the given component. Here is an example


This query would select the ‘p’ tag under every div element and would apply the class ‘border-it’ to the ‘p’ element only. Which means, it would iterate on the given condition on the parent component.

Finding all the bolds and underlining them would be:

jQuery('div').find('p').find('b').css('text-decoration', 'underline');

Also, this can be done ins succinct way as:

jQuery('div p b').css('text-decoration','underline');

How about if we want to select both the parent and the selected child:

In this case the handy method andSelf() would be there. Say if we want to border only the bold text and that of the enclosing div, we would have:

jQuery('div').find('p').find('b').andSelf().css('border', '1px black solid');

Adding multiple javascript files to page

I was pulling my hair just for some silly stuff. All I wanted was to put two external javascript file for my floundering page – that was it!! and I do it as

<script language="javascript" src="sourceone" />
<script language="javascript" src="sourcetwo" />

BTW, I am using firefox on ubuntu, then when I try to run the page it would turn white. Astonishingly, the kick for the error was

<script language="javascript" src="sourceone"></script>
<script language="javascript" src="sourcetwo" ></script>

Hidden Frame Pattern / Pre-Ajax

This is one of the knows patterns in the web devs. The idea would be having two – or possibly more – frames and making one the front one for interaction while would be HIDDEN.
Why Hidden?
The visible frame would pass make a request to the hidden frame to make the server side interaction behalf of it. Doing so would make the visible frame to remain loaded. The hidden would play the rest of the game by consulting the server and grabbing all the required data. Of course, how do they talk? well, Mr. Javascript will be the ‘man in the middle’ – don’t wanna mention the security flaw known by this name 😉

Let’s see a quick example: the example will show how to interact with the server side script without page reload. For demo purpose, A page will accept first name and last name and will display the concatenated full name. Though the logic done is is too easy to accomplish, one has to bear in mind that any complex logic can be done in the same way.

First create a simple index file containing the frames

		<frameset rows="100%, 0" style="border: 0px">
			<frame name="visibleframe" src="enterName.html" noresize="noresize"></frame>
			<frame name="hiddenframe" src="about:blank" noresize="noresize"></frame>

Making the frameset row 100% will assure the full visibility.
Then have the page for first and last name.

	//get full name by delegating the task to the php 
	function getFullName(){
		var firstName = document.getElementById("txtFirstName").value;
		var lastName = document.getElementById("txtLastName").value;
		top.frames["hiddenframe"].location = "concateName.php?firstName="+firstName+"&lastName="+lastName;
	//display it on the front page 
	function showFullName(fullName){
		showdiv = document.getElementById("fullName");
		showdiv.innerHTML = fullName;
Your First Name <input type="text" id = "txtFirstName" name="txtFirstName" /> <br>
YOur Last Name<input type="text" id="txtLastName" name="txtLastName" /> <br>

<input type="submit" name="subGetFullName" value = "concate" onClick="getFullName();" /> <br>
<textArea id="fullName" name="fullName"></textArea>

This file contains two javascripts: one for sending the form values to the hidden frame and the other to accept and display the result from the hidden frame.
Since the hidden frame had no source initially, the getFullName() function would be responsible for assigning the file to it.

Now lets build the server side script which will combine and return the full name

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
    window.onload = function(){
       var fullNameDiv = document.getElementById("fullName");
        $firstName = $_GET['firstName'];
        $lastName = $_GET['lastName'];
        $fullName = $firstName . $lastName;
        <body><div id="fullName"><?php echo "FULL name is " . $fullName ?>

Now we are done. :)
The concateName.php would get the parameters from the enterName.html through hiddenframe. Once it access the values, it will concatenate them and will deploy the result in the “fullName” div.
The defined window.onload would wait until things are in place and it will fire the result back to the “visibleframe” through javascript.
Now – the user has no what is going on behind he scene – as she will not see the page being reloaded on refreshed.

reference: Professional Ajax 2nd edition Wrox

jQuery – Simple & Powerful

jQuery seems the new player as far the client side manipulation is the issue. I had always thanked JavaScript for allowing us to do the dirty job on the client side starting from validation to amazing animations and magics – as it was seen on the Google earth, we should due credit.
Then comes Ajax, yup I have loved and played with it and it is so logical. Why do I have to submit the whole page while the intension is to submit only, say, a single value like an email for subscription. Of course it has done even more than that.
And now, jQuery which is a bundle of the two nice tools. JQuery is collection of JavaScript libraries that would make coding easy, fast navigation experience and almost a shortcut to Ajax.
The functions in the jQuery are human friendly and easy to remember.
It is possible to access an element only, or a group of elements or elements under the same class in easier way. Above all uses nicely callback functions – cooool.
All one has to do to start jQuery is to download the library from and locate it like any other JavaScript code:
Following this, be ready to plough. The main character in play would be the jquery object itself. Accessing it could be done either by directly calling it or using its alias($) – which is the custom to go. How it does is: first it would select single or group of elements and then apply tasks like editing, hide/show, replacing, assigning new style and many more. Let us use the following simpe XHTML code for illustration

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="" xml:lang="en" lang="en">
<title> Sample jQuery </title>
<script src="JQuery/jquery-1.3.2.min.js" type="text/javascript" ></script>
<style type="text/css">
background-color: palegreen;
font-family: verdana;
color: black;
font-size: 12px;
width: 300px;
text-weight: bold;
border: solid 1px blue;
width: 300px;


<p id="description" class="highlight">This is for the illustration purpose</p>
<p id="attention" class="emphasis">give attention for this</P>
<a href="">More examples</a>
<input type="button" id="toggler" value="toggle" />

Basic jQuery statement would have the following format:

<script type="text/javascript">
       $(document).ready( function(){
               logic goes here;

Here the ‘$’ is an alias for the jQuery object, document is the representation of documents as in DOM. The ready method makes sure if the page is ok to proceed or not.
function() inside the ready() method is the callback function. The beauty begins here, we can define any function of our own as we like.
Lets remove the highlight style from description and assign it emphais
The first part “p#description” would select the paragraph with id description. Had it been “p”, it would select all paragraphs.
In this particular case it is also possible to say (“#description”).
removeClass and addClass are self-explanatory.
The chaining is possible as a dot operated methods because each selection would return an object.
Remember how to toggle in JavaScript? Had to use if .. how about in jQuery.
Lets make a click on the first paragraph to hide and show the second paragraph.

        $("#description").click( function(event){

That is all. A single line would keep our fingers from being tired.

Here, the click method would accept the callback function. This call back function is specific to the call only. Say if I have used (“p”), then when I click on a particular <p>, the click method would be applicable only to the clicked paragraph element.


The above snippet shows only one paragraph at a time. But it shows them alternatively.

This is just to give a very highlight about jQuery. There are a lot of things especially on the selection area.

The following are are good sources of jQuery tutorial and references