Learning JQuery 1 – Selectors

Not long time ago, it was a hot summer day in Prague, I lost a job opportunity because JQuery was not in my skill-list (ok, it was not the only missing skill…but MVC doesn’t fit in this story). So I won’t miss the chance to learn it now…but I need to be much more careful with this technology… ’cause I’m in love with it! (not that kind of love, let’s say that I really like it).

The project

Realize a visual frontend that allows me to drag tools from a tool box, and drop them in a content panel…like it happens in Visual Studio.

Include: in order to make everything work, the web page must include the jquery.js file, it can be downloaded at http://jquery.com/ it’s possible to obtain a “production” package, but I kindly recommend to use the development, of course…ours are development purposes! Also, in this example some elements will be draggable, so you need to include also the jqyery-ui package :  www.jqueryui.com

In this pill : I will prepare the toolbox. It will be composed of 2 groups of draggable tools.

In this example I select elements referencing them by class (css class).

Writing $(“.block”) I get at once all the elements that have block as style class.

Other selectors

$(“#objectID”) gets a specific objects, like document.getElementById(objectID)

$(“div”) gets all the objects of type div

$(“div, .className”) combines selectors, it will get all div and all element having class = className

That’s only the surface. Really useful are those getting objects going thru the hierarchy.

$(“#myObject”).children(“img”) this will get all the images children of myObject.

Mandatory is the knowledge of attribute filters. With these selectors I can inspect the value of objects’ attributes and get those that meet my requirement

$(“img[name*='icon']“) this will get all the images which name contains the string icon.

I’ve listed just those I found more useful, but there are a lot of them. Have a look at http://visualjquery.com

Ok but…what happens when I get a collection of objects?

To iterate thru this collection JQuery exposes each(function). Function will be the code used to manipulate the current object, this.


$("div").each(function(){

$(this).addClass('anotherClass');

});

The code above goes thru all the div in a document and adds the style class anotherClass to them.

To the project…

JQuery

$(document).ready(function() {


$(".block").draggable({helper:'clone'});.


$(".drop").droppable({
accept: ".block",
activeClass: 'droppable-active',
hoverClass: 'droppable-hover',
drop: dropAction
});


});


HTML

<div id="accordion">
<h3><a href="#">DEVICES</a></h3>
<div name="menuItem">
<div class="block" >
<img id="imgBT" src="img/n_bluetooth.png" alt="bluetooth" /> bluetooth
</div>
<div class="block" >
<img id="imgET" src="img/n_ethernet.png" alt="ethernet" /> ethernet
</div>
<div class="block" >
<img id="imgIN" src="img/n_internet.png" alt="internet" /> internet
</div>
<div class="block" >
<img id="imgSA" src="img/n_satellite.png" alt="satellite" /> satellite
</div>
<div class="block" >
<img  id="imgSI" src="img/n_signal.png" alt="signal" /> signal
</div>
<div>
<img id="imgWI" src="img/n_<span class=" alt="" />wifi.png" alt="wifi" /> wifi
</div>
</div>
<h3><a href="#">SERVICES</a></h3>
<div name="menuItem" >
<div class="block" >
<img id="imgAP" src="img/s_applications.png" alt="applications" /> applications
</div>
<div class="block" >
<img id="imgFO" src="img/s_folder.png" alt="shared folders" /> shared folders
</div>
<div class="block" >
<img id="imgVO" src="img/s_voip.png" alt="VoIP" /> VoIP
</div>
<div class="block" >
<img id="imgWE" src="img/s_<span class=" alt="" />webcamera.png" alt="webcamera" /> webcamera
</div>
</div>
</div>

Have a look at:

http://visualjquery.com is a great reference guide to get what you need in a few clicks.

In the next pill: I will prepare the droppable area, so that the drag and drop functionality can be performed, and I will animate the tool box to allow only one tool group to be shown.

Does anyone want a GoogleWave invitation? I have few spare ones.

Advertisement