{"id":207,"date":"2013-01-18T15:27:26","date_gmt":"2013-01-18T15:27:26","guid":{"rendered":"http:\/\/a1webdesignteam.com\/blog\/?p=207"},"modified":"2013-01-18T15:27:26","modified_gmt":"2013-01-18T15:27:26","slug":"top-jquery-tips-tricks-jquery-programmers","status":"publish","type":"post","link":"https:\/\/a1webdesignteam.com\/blog\/top-jquery-tips-tricks-jquery-programmers\/","title":{"rendered":"Top jQuery Tips & Tricks for jQuery Programmers"},"content":{"rendered":"

Optimize performance of complex selectors<\/h2>\n

Query a subset of the DOM when using complex selectors drastically improves performance:<\/p>\n

\n
\n\n\n\n
\n
\n
var<\/code> subset = $(<\/code>\"\"<\/code>);<\/code><\/div>\n
$(<\/code>\"input[value^='']\"<\/code>, subset);<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Set Context and improve the performance<\/h2>\n

On the core jQuery function, specify the context parameter when. Specifying the context parameter allows jQuery to start from a deeper branch in the DOM, rather than from the DOM root. Given a large enough DOM, specifying the context parameter should translate to performance gains.<\/p>\n

\n
\n\n\n\n
\n
\n
$(<\/code>\"input:radio\"<\/code>, document.forms[0]);<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Live Event Handlers<\/h2>\n

Set an event handler for any element that matches a selector, even if it gets added to the DOM after the initial page load:<\/p>\n

\n
\n\n\n\n
\n
\n
$(<\/code>'button.someClass'<\/code>).live(<\/code>'click'<\/code>, someFunction);<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

This allows you to load content via ajax, or add them via javascript and have the event handlers get set up properly for those elements automatically.<\/p>\n

Likewise, to stop the live event handling:<\/p>\n

\n
\n\n\n\n
\n
\n
$(<\/code>'button.someClass'<\/code>).die(<\/code>'click'<\/code>, someFunction);<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

These live event handlers have a few limitations compared to regular events, but they work great for the majority of cases. Live event will work starting from jQuery 1.3<\/p>\n

Checking the Index<\/h2>\n

jQuery has .index but it is a pain to use as you need the list of elements and pass in the element you want the index of<\/p>\n

\n
\n\n\n\n
\n
\n
var<\/code> index = e.g $(<\/code>'#ul>li'<\/code>).index( liDomObject );<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

The following is easier:<\/p>\n

if you want to know the index of an element within a set, e.g. list items within a unordered list:<\/p>\n

\n
\n\n\n\n
\n
\n
$(<\/code>\"ul > li\"<\/code>).click(<\/code>function<\/code> ()<\/code><\/div>\n
{<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>var<\/code> index = $(<\/code>this<\/code>).prevAll().length;<\/code><\/div>\n
});<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Use jQuery data method<\/h2>\n

jQuery\u2019s data() method<\/a> is useful and not well known. It allows you to bind data to DOM elements without modifying the DOM.<\/p>\n

Fadeout Slideup effect to remove an element<\/h2>\n

Combine more than one effects in jQuery to animate and remove an element from DOM.<\/p>\n

\n
\n\n\n\n
\n
\n
$(<\/code>\"#myButton\"<\/code>).click(<\/code>function<\/code>() {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>$(<\/code>\"#myDiv\"<\/code>).fadeTo(<\/code>\"slow\"<\/code>, 0.01, <\/code>function<\/code>(){ <\/code>\/\/fade<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>$(<\/code>this<\/code>).slideUp(<\/code>\"slow\"<\/code>, <\/code>function<\/code>() { <\/code>\/\/slide up<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>$(<\/code>this<\/code>).remove(); <\/code>\/\/then remove from the DOM<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>});<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>});<\/code><\/div>\n
});<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Checking if an element exists<\/h2>\n

Use following snippet to check whether an element exists or not.<\/p>\n

\n
\n\n\n\n
\n
\n
if<\/code> ($(<\/code>\"#someDiv\"<\/code>).length) {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>\/\/hooray!!! it exists...<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Add dynamically created elements into the DOM<\/h2>\n

Use following code snippet to create a DIV dynamically and add it into the DOM.
\nFurther Reading:<\/strong> Dynamically Add\/Remove rows in HTML table using JavaScript<\/a><\/p>\n

\n
\n\n\n\n
\n
\n
var<\/code> newDiv = $(<\/code>'<div><\/div>'<\/code>);<\/code><\/div>\n
newDiv.attr(<\/code>\"id\"<\/code>,<\/code>\"myNewDiv\"<\/code>).appendTo(<\/code>\"body\"<\/code>);<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Line breaks and chainability<\/h2>\n

Instead of doing:<\/p>\n

\n
\n\n\n\n
\n
\n
$(<\/code>\"a\"<\/code>).hide().addClass().fadeIn().hide();<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

You can increase readability like so:<\/p>\n

\n
\n\n\n\n
\n
\n
$(<\/code>\"a\"<\/code>)<\/code><\/div>\n
\u00a0\u00a0<\/code>.hide()<\/code><\/div>\n
\u00a0\u00a0<\/code>.addClass()<\/code><\/div>\n
\u00a0\u00a0<\/code>.fadeIn()<\/code><\/div>\n
\u00a0\u00a0<\/code>.hide();<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Creating custom selectors<\/h2>\n
\n
\n\n\n\n
\n
\n
$.extend($.expr[<\/code>':'<\/code>], {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>over100pixels: <\/code>function<\/code>(a) {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>return<\/code> $(a).height() > 100;<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>}<\/code><\/div>\n
});<\/code><\/div>\n
<\/div>\n
$(<\/code>'.box:over100pixels'<\/code>).click(<\/code>function<\/code>() {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>alert(<\/code>'The element you clicked is over 100 pixels high'<\/code>);<\/code><\/div>\n
});<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Cloning an object in jQuery<\/h2>\n

Use .clone() method of jQuery to clone any DOM object in JavaScript.<\/p>\n

\n
\n\n\n\n
\n
\n
\/\/ Clone the DIV<\/code><\/div>\n
var<\/code> cloned = $(<\/code>'#somediv'<\/code>).clone();<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

jQuery\u2019s clone() method does not clone a JavaScript object. To clone JavaScript object, use following code.<\/p>\n

\n
\n\n\n\n
\n
\n
\/\/ Shallow copy<\/code><\/div>\n
var<\/code> newObject = jQuery.extend({}, oldObject);<\/code><\/div>\n
<\/div>\n
\/\/ Deep copy<\/code><\/div>\n
var<\/code> newObject = jQuery.extend(<\/code>true<\/code>, {}, oldObject);<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Test if something is hidden using jQuery<\/h2>\n

We use .hide(), .show() methods in jquery to change the visibility of an element. Use following code to check the whether an element is visible or not.<\/p>\n

\n
\n\n\n\n
\n
\n
if<\/code>($(element).is(<\/code>\":visible\"<\/code>) == <\/code>\"true\"<\/code>) {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>\/\/The element is Visible<\/code><\/div>\n
}<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Alternate way of Document Ready<\/h2>\n
\n
\n\n\n\n
\n
\n
\/\/Instead of<\/code><\/div>\n
$(document).ready(<\/code>function<\/code>() {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>\/\/document ready<\/code><\/div>\n
});<\/code><\/div>\n
\/\/Use<\/code><\/div>\n
$(<\/code>function<\/code>(){<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>\/\/document ready<\/code><\/div>\n
});<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Selecting an element with . (period) in its ID<\/h2>\n

Use backslash in the selector to select the element having period in its ID.<\/p>\n

\n
\n\n\n\n
\n
\n
$(<\/code>\"#Address\\\\.Street\"<\/code>).text(<\/code>\"Enter this field\"<\/code>);<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Counting immediate child elements<\/h2>\n

If you want to count all the DIVs present in the element #foo<\/p>\n

\n
\n\n\n\n
\n
\n
<div id=<\/code>\"foo\"<\/code>><\/code><\/div>\n
\u00a0\u00a0<\/code><div id=<\/code>\"bar\"<\/code>><\/div><\/code><\/div>\n
\u00a0\u00a0<\/code><div id=<\/code>\"baz\"<\/code>><\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code><div id=<\/code>\"biz\"<\/code>><\/code><\/div>\n
\u00a0\u00a0<\/code><\/div><\/code><\/div>\n
\u00a0\u00a0<\/code><span><span><\/code><\/div>\n
<\/div><\/code><\/div>\n
<\/div>\n
\/\/jQuery code to count child elements<\/code><\/div>\n
$(<\/code>\"#foo > div\"<\/code>).size()<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

Make an element to \u201cFLASH\u201d<\/h2>\n
\n
jQuery.fn.flash = <\/code>function<\/code>( color, duration )<\/code><\/div>\n
{<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>var<\/code> current = <\/code>this<\/code>.css( <\/code>'color'<\/code> );<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>this<\/code>.animate( { color: <\/code>'rgb('<\/code> + color + <\/code>')'<\/code> }, duration \/ 2 );<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>this<\/code>.animate( { color: current }, duration \/ 2 );<\/code><\/div>\n
}<\/code><\/div>\n
\/\/Then use the above function as:<\/code><\/div>\n
$( <\/code>'#importantElement'<\/code> ).flash( <\/code>'255,0,0'<\/code>, 1000 );<\/code><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

Optimize performance of complex selectors Query a subset of the DOM when using complex selectors drastically improves performance: var subset = $(“”); $(“input[value^=”]”, subset); Set Context and improve the performance On the core jQuery function, specify the context parameter when. Specifying the context parameter allows jQuery to start from a deeper branch in the DOM, […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0},"categories":[9,6,7],"tags":[117],"_links":{"self":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/207"}],"collection":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/comments?post=207"}],"version-history":[{"count":0,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/207\/revisions"}],"wp:attachment":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media?parent=207"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/categories?post=207"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/tags?post=207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}