{"id":435,"date":"2013-05-28T15:16:33","date_gmt":"2013-05-28T15:16:33","guid":{"rendered":"http:\/\/a1webdesignteam.com\/blog\/?p=435"},"modified":"2013-05-28T15:16:33","modified_gmt":"2013-05-28T15:16:33","slug":"top-jquery-tips-tricks-jquery-programmers-2","status":"publish","type":"post","link":"https:\/\/a1webdesignteam.com\/blog\/top-jquery-tips-tricks-jquery-programmers-2\/","title":{"rendered":"Top JQuery Tips & Tricks For JQuery Programmers"},"content":{"rendered":"

1. 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

2. 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

3. 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

4. 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

5. Use jQuery data method<\/h2>\n

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

6. 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

7. 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

8. 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>\u00a0Dynamically 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

9. 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

10. 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

11. 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

12. 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

13. 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

14. 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

15. 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

16. Make an element to \u201cFLASH\u201d<\/h2>\n
\n
\n\n\n\n
\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<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

17. Center an element on the Screen<\/h2>\n
\n
\n\n\n\n
\n
\n
jQuery.fn.center = <\/code>function<\/code> () {<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>this<\/code>.css(<\/code>\"position\"<\/code>,<\/code>\"absolute\"<\/code>);<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>this<\/code>.css(<\/code>\"top\"<\/code>, ( $(window).height() - <\/code>this<\/code>.height() ) \/ 2+$(window).scrollTop() + <\/code>\"px\"<\/code>);<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>this<\/code>.css(<\/code>\"left\"<\/code>, ( $(window).width() - <\/code>this<\/code>.width() ) \/ 2+$(window).scrollLeft() + <\/code>\"px\"<\/code>);<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>return<\/code> this<\/code>;<\/code><\/div>\n
}<\/code><\/div>\n
<\/div>\n
\/\/Use the above function as:<\/code><\/div>\n
$(element).center();<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

18. Getting Parent DIV using closest<\/h2>\n

If you want to find the wrapping DIV element (regardless of the ID on that DIV) then you\u2019ll want this jQuery selector:<\/p>\n

\n
\n\n\n\n
\n
\n
$(<\/code>\"#searchBox\"<\/code>).closest(<\/code>\"div\"<\/code>);<\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n

19. Disable right-click contextual menu<\/h2>\n

There\u2019s many Javascript snippets available to disable right-click contextual menu, but JQuery makes things a lot easier:<\/p>\n

\n
\n\n\n\n
\n
\n
$(document).ready(<\/code>function<\/code>(){<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>$(document).bind(<\/code>\"contextmenu\"<\/code>,<\/code>function<\/code>(e){<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/code>return<\/code> false<\/code>;<\/code><\/div>\n
\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

20. Get mouse cursor x and y axis<\/h2>\n

This script will display the x and y value \u2013 the coordinate of the mouse pointer.<\/p>\n

\n
\n\n\n\n
\n
\n
$().mousemove(<\/code>function<\/code>(e){<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>\/\/display the x and y axis values inside the P element<\/code><\/div>\n
\u00a0\u00a0\u00a0\u00a0<\/code>$(<\/code>'p'<\/code>).html(<\/code>\"X Axis : \"<\/code> + e.pageX + <\/code>\" | Y Axis \"<\/code> + e.pageY);<\/code><\/div>\n
});<\/code><\/div>\n
<\/div>\n
<p><\/p>\u00a0 <\/code><\/div>\n<\/div>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

1. Optimize performance of complex selectors Query a subset of the DOM when using complex selectors drastically improves performance: var subset = $(“”); $(“input[value^=”]”, subset); 2. 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 […]<\/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":[6],"tags":[],"_links":{"self":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/435"}],"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=435"}],"version-history":[{"count":0,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/posts\/435\/revisions"}],"wp:attachment":[{"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/media?parent=435"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/categories?post=435"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/a1webdesignteam.com\/blog\/wp-json\/wp\/v2\/tags?post=435"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}