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. These two functions might be what you need. 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. 5 Things You Might Not Know about jQuery. 30 Pro jQuery Tips, Tricks and Strategies. Whether you’re a developer or a designer, a strong jQuery skillset is something you can’t afford to be without. Today, I’m going to show you 30 handy jQuery coding tricks that will help you make your scripts more robust, elegant and professional. Getting Started These tips and tricks all have one thing in common- they are all smashingly useful. With this stuff in your back pocket, you’ll be ready to go change the world, and even better, write jQuery like you know what you’re doing. It’s gonna be fun. We’ll start with some basic tricks, and move to some more advanced stuff like actually extending jQuery’s methods and filters. Improve your jQuery - 25 excellent tips.
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. 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. 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. Optimize performance of complex selectors 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: 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. Every release of the library introduces optimizations and bug fixes, and most of the time upgrading involves only changing a script tag. 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 7) Use CSS Hooks.
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?
jQuery Tips and Tricks. 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.