Tips to use jQuery selectors efficiently

It is pretty important to understand how to write efficient element selection statement. One has to be very careful while jquery selector statement. Below are some tips on how to use your jQuery selectors efficiently.

1. Always try to use ID as selector 

You can use ID as selector in jQuery. See below jQuery code.

1	$("#elmID");

When IDs are used as selector then jQuery internally makes a call to getElementById() method of Java script which directly maps to the element. 

When Classes are used as selector then jQuery has to do DOM traversal.So when DOM traversal is performed via jQuery takes more time to select elements. In terms of speed and performance, it is best practice to use IDs as selector.

2. Use class selector with tags

You can use CSS classes as selector. For example, to select elements with "myCSSClass" following jQuery code can be used.

1	$(".myCSSClass");

As said earlier, when classes are used DOM traversal happens. But there could be a situation where you need to use classes as selector. For better performance, you can use tag name with the class name. See below

1	$("div.myCSSClass");

Above jQuery code, restricts the search element specific to DIV elements only.

3. Keep your selector simple, don't make it complex

Avoid complex selectors. You should use make your selectors simple, unless required.

1	$("body .main p#myID em");

Instead of using such a complex selector, we can simplify it. See below.

1	$("p#myID em");

4. Don't use your selector repeatedly.

See below jQuery code. The selectors are used thrice for 3 different operation.

1	$("#myID").css("color", "red");

2	$("#myID").css("font", "Arial");

3	$("#myID").text("Error occurred!");

The problem with above code is, jQuery has to traverse 3 times as there are 3 different statements.But this can be combined into a single statement.

1	$("p").css({ "color": "red", "font": "Arial"}).text("Error occurred!");

5. Know how your selectors are executed

Do you know how the selectors are executed? Your last selectors is always executed first. For example, in below jQuery code, jQuery will first find all the elements with class ".myCssClass" and after that it will reject all the other elements which are not in "p#elmID".

  $("p#elmID .myCssClass");


Thanks,
Rajasekhar.

CSS3 Web fonts

Q:What is web fonts? Ans:The term Web fonts generally refers to the use of @font-face.Font-face allows us to specify which fonts are used within our sites. Q:What is the advantage of Web fonts? Ans:It eliminates the complicated workaround for designers. History of font face @font-face was part of css2 specification but it was dropped in css2.1 specification. But again it introduced in CSS3 specification. Browser support for @font-face Browser Name font-face support format supported IE 4+ Yes eot Mozilla Firefox 3.5+ Yes woff Chrome 4+ Yes ttf,off Opera 10+ Yes ttf,otf,svg Safari 4+ Yes ttf,otf

@font-face Syntax @font-face   {     font-family:'fontfamilyname';     src:url('../Folder wherefonts are stored/downloadedfont.eot'); /*For IE*/     src:local('?'),url('../Folder wherefonts are stored/downloadedfont.woff')format('woff'),         url('../Folder wherefonts are stored/downloadedfont.ttf')format('truetype'),         url('../Folder wherefonts are stored/downloadedfont.svg#webfont4CzPTNtF')format('svg');     font-weight:normal;     font-style:normal; }     Q;How to use ? Ans:It can be uses as a normal syntax for font-family; eg.         body         {             background: #fff;             color: #000;             font-family:fontfamilyname;             margin: 40px 0;         } Good Luck... :)

Role of in HTML

In HTML document from very first line we can notice one tag i.e <!DOCTYPE…< This is not a HTML tag. This doctype refers to a Document Type Declaration(DTD).Most of the time we don't bother for such tag. In HTML programming we use different versions of HTML like HTML 4.01 Strict, HTML 4.01 Transitional, XHTML 1.0 Strict etc. All these are defined in a machine-readable language taking the legal structure, elements and attributes. This is nothing but the job of DTD to categorise all version of HTML according to version definitions specified on W3c standard. As Web Accessibility has a key role in web development so this doctype inclusion is nothing but an addition. <!DOCTYPES are also essential for rendering and functioning of web documents in compliant browsers..       There are few examples given below regarding the tags and it's properties.

Examples: XHTML 1.0:    1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> This DTD contains all HTML elements and attributes. Framesets are not allowed. The markup must also be written as well-formed XML. 2.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> This DTD is used when a webpage follows basic XHTML rules and uses some HTML presentational tags for user convenience but doesn't support CSS. 3.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> This DTD is same as Transitional DTD  except the use of <frameset> tag over <body> HTML 4.01:     1.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> This DTD excludes the presentation attributes and elements that W3C expects to phase out as support for style sheets matures. 2.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Transitional DTD allows some older elements and attributes that have been deprecated.3.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> This declares the document to be HTML 4.01 Frameset. HTML 4 Frameset is a variant of HTML 4 Transitional for documents that use frames             In order to get list of DTDs you can follow http://www.w3.org/QA/2002/04/valid-dtd-list.html. Thanks, Rajasekhar.

CSS Hack: Using images with space character in file name

For us the following two file names may not hold much difference but when using CSS we have to take care of the space between the file names. 1. Page background.jpg 2. Page_background.jpg For instance, to set a background image of a page using CSS we would have to add the following two lines of code - background:#F7F9fa url(../Images/Page background.jpg); background-repeat:repeat-x; The above code would run fine on Internet Explorer but not on Firefox or Safari.  The reason is the space character in the file name.

So to be in safe side you can use some work around for it. Enclose with qoute(')  background:#F7F9fa url('../Images/Page background.jpg'); Using Encode charecterbackground:#F7F9fa url('../Images/Page%20background.jpg' Thanks, Rajasekhar.

How To Attach Events To HTML Elements Created Dynamically

In one of my recent applications I had to use a jQuery plugin which need to run when the HTML <li> elements are ready. This plugin creates fancy tool tips for HTML elements having title attribute.   The <li> elements were created and appended dynamically to document body, by javascript. So I found that the plugin is not recognizing the title attributes of the li elements. I made use of document.ready, li.ready etc. to run the plugin, but non of them worked for me.   So after making a good search I found one jQuery event handler called live(). This method can help in attaching events to any HTML element, whether it is created dynamically or not. So if you are setting any event to any element/ selector, then it is automatically attached to that particular selector/element in future also, if they are created dynamically.

Syntax: .live( events, handler(eventObject) ) Example: $("li").live("onmouseover",function(){    //do your stuffs }); This has different versions per different plugins. $(selector).live(events, data, handler);                // jQuery 1.3+ $(document).delegate(selector, events, data, handler);  // jQuery 1.4.3+ $(document).on(events, selector, data, handler);        // jQuery 1.7+ Thanks,