I have been busy dealing with jQuery lately with a project in hand which has given me a lot of hands on with jQuery. Therefore, I would like to share some of the things I came across when I was working with jQuery. If you still confuse what i am talking about you may want to visit my previous post on jQuery.

1.     jQuery id and class selector.

jQuery selector can only selects one id but is able to select multiple classes. For example, you have a multiple id with the same name,

<div id='sameid'></div>
<div id='sameid'></div>

with a declaration of selector as follow,

$('div#sameid')

jQuery will only retrieve the first id it sees. However, if your declaration is a class instead of id,

<div class='sameid'></div>
<div class='sameid'></div>

with a declaration of selector as follow,

$('div.sameid')

it will provide you with a set of jQuery object that contains the two object above.

2.     jQuery animation lag during hover on multiple objects.

jQuery has an event 'hover' which act exactly similar to 'hover' in CSS. However, when we try to render hover on multiple set of elements, an animation lag may occur that doesn't seem smooth. This may be a problem with the way the code has been written. Let me show you what i meant here, take a look at playgroundblues.com, notice they have a nice navigation bar on the left hand side which display nicely on the left corner. The problem with this navigation bar is when you try to move very fast across the multiple objects several times, you will notice the animation continues to perform although your hover has already ended.

If we look at his code written for the menu,

You will notice that there are two selector of $('#navigation > li') where one assign the hover function while the other perform the nice welcome sliding when visitor enters their side. There are no problems with the logic on the code above but because the codes for animation are being separated to two assignments, it created the lag during the animation. If all the assignment is done on a single selector of $('#navigation > li') through chaining, the animation lag will be eliminated.

3.  $(this) and 'this' .

Often enough i find myself getting confuse with when to use $(this) and 'this' in jQuery. The differences are $(this) refers to ALL jQuery objects while 'this' refers to the calling object in javascript.  For example, we want to use .each and fadeIn() of jQuery after a selector such as below,

$('div#product').each(function(){
$(this).fadeIn()
})

since fadeIn() is a jQuery effect function, we use $(this) but if we are not dealing with jQuery objects we used 'this' instead.

$('div.product').each(function(){
var myClass = this.className; // provided you have multiple class product
})

The reason why 'this' can be used here is due to the function of jQuery .each which look into each DOM object. Simple to say, this refer to the normal DOM object while when you have the extra $(xxxx), it will refer it to a jQuery object which allows you to use jQuery method.

4. find() function in jQuery

Being a forgetful person (which is why i have this blog), i often find myself forgetting what does the code $('a', this) in jQuery means. It basically means, find anchor object in 'this'. It is just a shortcut for jQuery to subsitute find () method.

5. ',' in jQuery selector.

You may have a chance to see $("div#idx, div#idc") and confuse got confuse with it as this doesn't look like anything on the api of jQuery! It is just another quick function in jQuery to do a selector in a single declaration instead of multiple statement. The ',' comma represent the 'OR' condition which is similar to '||' in java or javascript. So the selector i wrote means "select div with id idx or div with id idc".

That is all I can remember from what had happen during my coding with jQuery. If there are any more tips that I have come across during my coding, i will update here! Hope these helps! Cheers!

There are many powerful methods used by the wrapper of jQuery. But i can't really discuss it right here as it will take too long to read. However, i will explain the api of each section of jQuery! This way it will make life easy for us when we are searching the api at jQuery official site!

jQuery Core:

jQuery Core contain all the functions available in jQuery that you need to extend, create, manipulate jQuery objects

Selectors:

It's like what the section name said! This section give you all the functions used by jQuery wrapper to filter its selection!

Attributes:

Attributes section provide you with all the functions available in jQuery to manipulate Attributes of DOM. This include CSS, attributes and properties.

Traversing:

This section provides all the functions jQuery have when chaining with jQuery.

Manipulation:

jQuery text/DOM Manipulation functions.

CSS:

jQuery CSS functions that manipulate the data in or css file.

Events:

All the add-on event that developers can use with jQuery other than the default javascript events available.

Effects:

All the special effects available in jQuery.

Ajax:

jQuery ajax functions that help reduce the risk of using Ajax technology and shorten the need to write lengthy codes for it.

Utilities:

jQuery Utilities function which provides extra feature other than the one given in JavaScript.

jQuery UI:

This is the official documentation for jQuery UI, jQuery's visual controls. jQuery UI features a wide range of core interaction plugins as well as many UI widgets. The project homepage is located at jqueryui.com. Please visit these pages for downloading UI and many demos. (taken from the offical site)

Well, i believe once you guys have read the first basic tutorial of jQuery, this is basically just a lookup for people who want to know what each individual api is for. And seriously speaking, once you have done the first part of jQuery, working with jQuery isn't that difficult as long as you can read the api provided by jQuery team. For people who have foundation of such api from Java, this is a piece of cake!

Introduction

jQuery is one of the many framework provided online to help developers to minimize the time needed to write advance coding. It provides many useful feature to help developers to overcome cross browser issues. Best of all, it is extremely light-weight for optimization! jQuery has a large community and available plugin for different purposes. What jQuery can do for you? Powerful stuff! Check out their plugin made by other developers all over the world!

Since i am also new to jQuery, i believe there will always be new comer entering new technology and feature. So here i am writing this article to introduce some of the basic i learn in jQuery and hope it will help others too. Please bear in mind before we start, jQuery selection will always return you a set of jQuery object which you can use to do a chain operation(chaining is the powerful part of jQuery).

Element Manipulation

Let's start with jQuery element manipulation. For starters, jQuery is written in the following two ways,

$(selector)

or

$jQuery(selector)

This is the basic thing a jQuery programmer will need to know when dealing with jQuery. This is more like a declaration for jQuery.  The '$' symbol and jQuery is the namespace used in jQuery. With just this knowledge, you can do a lot of things in jQuery. Below listed different way of manipulating the element in jQuery.

$("p a")

retrieve the group of links nested inside a

element

$("div.notLongForThisWorld").fadeOut();

fade out all

$("div.notLongForThisWorld").fadeOut().addClass("removed");

$("#someElement").html("I have added some text to an element");

$("#someElement")[0].innerHTML ="I have added some text to an element");

$("p:even");

$("tr:nth-child(1)");

$("body > div");

$("a[href$=pdf]");

$("body > div:has(a)")

$('img[alt],img[title]')

$(document).ready(function() {$("table tr:nth-child(even)").addClass("even");});

$(function() {$("table tr:nth-child(even)").addClass("even");});

$("<p>Just like this</p>")

$.fn.disable = function() {	return this.each(function() {	if (typeof this.disabled != "undefined") this.disabled = true;	});}

These are some of the JavaScript way of writing that one usually do not know by learning on some basic web site such as w3schoo.com

Declaring many variables at once

You can declare many variable at once by doing the following,

var test,test1,test2,test3,test4
OR
var test=1,test1=2,test2=3,test3=4,test4=5

Assignment operator shortcuts

you can do a assignment operator in short instead of writing long code.

x+3=x -> 1+=3
x-4=-x -> x-=4
x*1=x -> x*= 1
x/1=x -> x/=1
x+1=x -> x++
x-1=x -> x--

The "with" statement

The 'with' statement basically help you reduce some code. The meaning of with can be read as 'with this'. For example,

<script type="text/javascript">
document.write('Hi there, how are you?")
document.write('Fine, thanks. And you?')
document.write('Great!')
</script>

You can write as

<script type="text/javascript">
with(document)
{
write('Hi there, how are you?")
write('Fine, thanks. And you?')
write('Great!')
}
</script>

By using the 'with' statement, everything that falls inside of its brackets ({ }) default to the object specified in it's parameter. That way, you only need to type the object name once.

Remember, the "with" statement can be used with any JavaScript object to avoid having to repeatedly write the object out when referencing it multiple times.

The "?" conditional expression statement

This is a shortcut for if-else statement and it will return a Boolean value. For example, instead of writing this

if(x==1)
do something..
else
don't do it..

We can write something shorter such as this,

x==1 ? do something.. : don't do it..

The format for this is as follow,

(condition) ? doiftrue : doiffalse

Conclusion

The reason for doing all these shortcut is to improve efficiency of the code to help improve performances. Especially on large application where efficiency holds a key to whether its a good or bad application. Every line of code contribute greatly on the performance of the application. One will have to remember that speed in web application holds a key on whether anyone will visit or use your application/site.

Length values

Length values come in two varieties:

• Relative lengths, which vary depending on the computer being used.
• Absolute values, which remain constant regardless of the hardware and software being used.

Relative lengths values:

• em: Em dash
• ex: x-height
• px: pixel

Absolute length values:

• pt: Point
• pc: Picas
• mm: millimeters
• cm: centimeters
• in: Inches

Color values

Color can be written in different way,

• #RRGGBB
• rgb(R#, G#, B#)
• rgb(R%, G%, B%)
• name

Percentage

The behavior of percentage value depends on the property being used.

URLs

A uniform resource locator (URL) is the unique address of something on the Web.  URL can be written so that it cancel itself

<a href="#">Link</a>

or

<a href="javascript: void('')">Link</a>

In some situation placing any URL in the href will interfer with the DHTML functions so the latter code will be used instead. These function simply tells the link to do absolutely nothing.