15 Powerful jQuery Tips and Tricks for Developers Martin Angelov In this article we will take a look at 15 jQuery techniques which will be useful for your effective use of the library. We will start with a few tips about performance and continue with short introductions to some of the library’s more obscure features. 1) Use the Latest Version of jQuery With all the innovation taking place in the jQuery project, one of the easiest ways to improve the performance of your web site is to simply use the latest version of jQuery. You can even include jQuery directly from Google’s servers, which provide free CDN hosting for a number of JavaScript libraries. The latter example will include the latest 1.6.x version automatically as it becomes available, but as pointed out on css-tricks, it is cached only for an hour, so you better not use it in production environments. 2) Keep Selectors Simple However, you should still try to optimize the way you retrieve elements. Selecting by id is the fastest. 3) jQuery Objects as Arrays 4) The Selector Property
jQuery Tips Purpose This page lists some tips, tricks, and code samples for the jQuery Javascript Framework. It very well may duplicate solutions found elsewhere, but will focus on things that I have found very useful or interesting. JQuery Cheat Sheet A few different versions of my jQuery Cheat Sheet are available here. Expandable "Detail" Table Rows A common UI is to have a table of data rows, which when clicked on expand to show a detailed breakdown of "child" rows below the "parent" row. The only requirements are: Put a class of "parent" on each parent row (tr) Give each parent row (tr) an id Give each child row a class of "child-ID" where ID is the id of the parent tr that it belongs to Example Code $(function() { $('tr.parent') .css("cursor","pointer") .attr("title","Click to expand/collapse") .click(function(){ $(this).siblings('.child-'+this.id).toggle(); }); $('tr[@class^=child-]').hide().children('td'); }); Example Table (click a row) Simple Tree Structure Example CSS Example Tree Item 1 Item 1.1 Item 2
26 cool and useful jQuery tips, tricks & solutions 26 cool and useful jQuery tips, tricks & solutions By: OSH Editorial In: Javascript Tips and tricks jQuery The use of the jQuery library is growing and growing(just released jQuery 1.4), more and more people are using this useful javascript library. This means that more and more useful jQuery tips, tricks and solutions are coming available. jQuery has a lot of very useful plugins that can help you with almost anything, but there are a couple of plugins that aren’t that smart to use, why? As many of you already know, jQuery can do a lot of things in more than just one way, so if you see a tip, trick or solution and think/know this can be done better, smarter or faster please let me know, post and share it in a comment below of just email me this, so that i can use this for part 2. 1. Disable right-click contextual menu. $(document).ready(function(){ $(document).bind("contextmenu",function(e){ return false; }); }); 2. Hide when clicked in the search field, the value. 3. 4. 5. 6. 7. 8. 9.
24 Irresistible jQuery Tips to Power Up Your JavaScript Skills jQuery makes using JavaScript easy even for most designers because of it’s huge community and supply of really useful plugins. Using plugins is great for sure but knowing a bit more of what is going on behind the curtain can make you more powerful than you would expect. Digging into the coding details may not be that simple but with the good examples, tips and tricks in this article you should have a good chance. Advertisement Storing Data Use data method and avoid storing data inside the DOM. $('selector').attr('alt', 'data being stored'); // later the data can be retrieved using: $('selector').attr('alt'); HTML attributes is not meant to store data like that and the “alt” as a parameter name does not really make sense. $('selector').data('paramtername', 'data being stored'); // then later getting the data with $('selector').data('paramtername'); Demo here Columns of equal height This tip show you how to use two CSS columns, and make them having exactly the same height? Target blank links ...
8 awesome JQuery tips and tricks Target blank links Do you use the target=blank attribute on links? If yes, you might know that XHTML 1.0 Strict don’t allow it. A good solution to this problem should be using JQuery to make links opening in new windows: $('a[@rel$='external']').click(function(){ this.target = "_blank"; }); /* Usage: <a href=" rel="external">lepinskidesign.com.br</a> */ Get the total number of matched elements That what I call a very simple, but very useful tip: This will return the number of matched elements: $('element').size(); Preloading images When you’re using images in Javascript, a good thing is to preload it before you have to use it. jQuery.preloadImages = function() { for(var i = 0; i Detect browser Although it is better to use CSS conditionnal comments to detect a specific browser and apply some css style, it is a very easy thing to do with JQuery, which can be useful at times. //A. Remove a word in a text Do you ever wanted to be able to remove words in a text?
20 Top jQuery tips & tricks for jQuery programmers Following are few very useful jQuery Tips and Tricks for all jQuery developers. I am sharing these as I think they will be very useful to you. Disclaimer: I have not written all of the below code but have collected from various sources from Internet. 1. Query a subset of the DOM when using complex selectors drastically improves performance: 2. On the core jQuery function, specify the context parameter when. 3. Set an event handler for any element that matches a selector, even if it gets added to the DOM after the initial page load: 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. Likewise, to stop the live event handling: These live event handlers have a few limitations compared to regular events, but they work great for the majority of cases. 4. 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 The following is easier:
10 Easy jQuery Tricks for Designers There are plenty of jQuery tricks and techniques out there, and the vast and powerful jQuery library can meet almost anyone’s JavaScript’ing needs. Since jQuery makes JavaScript accessible to designers who want to add simple interaction and visual techniques into their design without knowing extensive programming knowledge, it’s worth a few moments to explore this excellent library. As any designer knows, adding small bits of extra visual detail and user-friendliness can add professionalism and appeal to any web design. In addition, for designers that sell templates, WordPress themes, and other types of web designs, the use of jQuery in a design can be a great selling point. Let’s take a look at ten simple, effective, and useful tricks and techniques from several excellent jQuery developers and sites around the web that leverage the library to take your designs to another level. 1. The function and snippets for this approach is from CSSNewbie. 2. Here’s a sample div HTML structure: 3. 4.
20 Helpful jQuery Methods you Should be Using So you've been playing with jQuery for a while now, you're starting to get the hang of it, and you're really liking it! Are you ready to take your jQuery knowledge to level two? Today, I'll demonstrate twenty functions and features you probably haven't seen before! 1 after() / before() Sometimes you want to insert something into the DOM, but you don't have any good hooks to do it with; append() or prepend() aren't going to cut it and you don't want to add an extra element or id. You can also do this if you're working primarily with the element you want to insert; just use the insertAfter() or insertBefore functions. 2 change() The change() method is an event handler, just like click() or hover(). The change() event is perfect for client-side validation; it's much better than blur(), because you won't be re-validating fields if the user doesn't change the value. 3 Context Context is both a parameter and a property in jQuery. So where would this be useful? 4 data() / removeData() JavaScript