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. We’ll start with some basic tricks, and move to some more advanced stuff like actually extending jQuery’s methods and filters. #1 – Delay with Animate() This is a very quick, easy way to cause delayed actions in jQuery without using setTimeout. For instance, let’s say that you wanted to open a dialog and then fade it away after 5 seconds. Don’t you just love jQuery chaining? UPDATE: jQuery 1.4 has eliminated the need for this hack with a method called delay(). #2 – Loop through Elements Backwards One of my personal favorites is being able to loop backwards through a set of elements. #3 – Is There Anything in the jQuery Object? Voila! Wrapping Up
hoverIntent jQuery Plug-in What is hoverIntent? hoverIntent is a plug-in that attempts to determine the user's intent... like a crystal ball, only with mouse movement! It is similar to jQuery's hover method. Why? Download hoverIntent r7 (fully-commented, uncompressed) Download hoverIntent r7 (minified) Examples <p><em>If you can see this message <strong>JavaScript is disabled</strong>. jQuery's hover (for reference) $("#demo1 li").hover( makeTall, makeShort ); hover ignores over/out events from children jQuery's built-in hover calls handlerIn and handlerOut functions immediately. .hoverIntent( handlerIn, handlerOut ) $("#demo2 li").hoverIntent( makeTall, makeShort ); hoverIntent also ignores over/out events from children hoverIntent is interchangeable with jQuery's hover. .hoverIntent( handlerInOut ) $("#demo3 li").hoverIntent( toggleHeight ); hoverIntent can also take a single handlerInOut, just like jQuery's hover. .hoverIntent( handlerIn, handlerOut, selector ) $("#demo4").hoverIntent( makeTall, makeShort, 'li' ); over: out:
5 easy tips on how to improve code performance with huge data sets in jQuery Monday, February 09, 2009 Sitting on jQuery's support mailing list I noticed that developers use jQuery with huge data sets and their code becomes very slow. Examples would be generating very long tables with a lot of rows using AJAX to get JSON data. Or iterating through a long (very long) list of data, etc. So I compiled a list of 5 easy tips on how to improve your code performance while working with huge data sets in jQuery. 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
Home | BookedUp Blog Archive » jQuery Performance Rules Once upon a time, all we needed to worry about was reducing Bytes and Requests and playing around with load order to make things faster. Nowadays, we are increasingly impacting one more major component in performance – CPU utilization. Using jQuery and other frameworks that make selecting nodes and DOM manipulation easy can have adverse affects if you’re not careful and follow some simple practices for reducing the work the browser has to do. 1. Always Descend From an #id The fastest selector in jQuery is the ID selector ($('#someid')). Selecting Single Elements <div id="content"><form method="post" action="/"><h2>Traffic Light</h2><ul id="traffic_light"><li><input type="radio" class="on" name="light" value="red" /> Red</li><li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li><li><input type="radio" class="off" name="light" value="green" /> Green</li></ul><input class="button" id="traffic_button" type="submit" value="Go" /></form></div> Selecting Multiple Elements
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. That’s why i created a small list of 26 cool and useful jQuery tips, tricks and solutions. 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. 2. Hide when clicked in the search field, the value. 3. 4. 5. 6. 7. 8. 9. 11. 12.
jQuery Table Manipulation: Part 1 | Packt Publishing Technical & IT Book Store Exclusive offer: get 50% off this eBook here jQuery 1.4 Reference Guide — Save 50% This book and eBook is a comprehensive exploration of the popular JavaScript library by Jonathan Chaffer Karl Swedberg | August 2007 | AJAX Open Source Web Development In this article by Karl Swedberg and Jonathan Chaffer, we will use an online bookstore as our model website, but the techniques we cook up can be applied to a wide variety of other sites as well, from weblogs to portfolios, from market-facing business sites to corporate intranets. In this article, we will use jQuery to apply techniques for increasing the readability, usability, and visual appeal of tables, though we are not dealing with tables used for layout and design. But this is not the place for an extended discussion on the proper role of tables. Some of the techniques we apply to tables in this article can be found in plug‑ins such as Christian Bach's Table Sorter. One of the most common tasks performed with tabular data is sorting.
this, is boomerang 日本語 boomerang always comes back, except when it hits something. what? boomerang is a piece of javascript that you add to your web pages, where it measures the performance of your website from your end user's point of view. boomerang is opensource and released under the BSD license, and we have a whole bunch of documentation about it. how? Use cases — Just some of the uses of boomerang that we can think ofHow it works — A short description of how boomerang works internallyBugs, hugs and code — This is where the community comes inTODO — There's a lot that we still need to do. who? boomerang comes to you from the Exceptional Performance team at Yahoo! where? 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
Drag Drop Shopping Cart Using JQuery There are a lot tutorial about creating drag and drop shopping cart, in this post I want to share my version still with JQuery, but the different is this example only shows the code on the client side, which mean all of data are hardcoded on the html, and counting price and total items will be handle by javascript. The drag and drop feature used from JQuery UI, this will be used on the item list and on the cart item list to see all the items on the cart by dragging the cart horizontally. View Demo | Download Source The Html Like I said there is no server side scripting, so this code just a hardcoded item list, this example use 10 items, but the code below shows only two to make it simple. {*style:<b> </b>*} < label class = "title" >T-Shirt 1</ label > < label class = "price" >$ 20</ label > < label class = "title" >T-Shirt 2</ label > < label class = "price" >$ 24</ label > < span >Shopping Cart</ span > < a href = "" id = "btn_next" >></ a > < a href = "" id = "btn_clear" >Clear Cart</ a > The CSS