Cheatsheet. Gallery. jQuery Performance Rules - Best Practices for Speeding Up jQuery. 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')).
This is because it maps directly to a native JavaScript method, getElementById(). Selecting Single Elements Selecting the button like this is slower: var traffic_button = $('#content .button'); Instead, select the button directly: var traffic_button = $('#traffic_button'); Selecting Multiple Elements Once we start talking about selecting multiple elements, we are really talking about DOM traversal and looping, something that is slow. 3. 4. 5. 6. 7. 8. 9. 10. jQuery Link Repository. Getting Started With jQuery QUnit for Client-Side Javascript Tes. First of all, I’m assuming you’re already using jQuery. If not, you should be :) QUnit may help you for non-jQuery testing, but it’ll work better with jQuery. Second, you should start by downloading and setting up QUnit (from this link). QUnit consists of a single JS file (testrunner.js) and a CSS file (testsuite.css). Third, I recommend grabbing a patched testrunner.js from here (Ticket 3215).
We, at Dovetail, submitted this patch to the jQuery team. To start testing, you’ll need to start by creating an HTML page (MyFooTests.htm, for example). If you save that HTML and open it in a browser, you should see something to the effect of: Modules and Tests QUnit has the concept of “modules” and “tests.” Let’s create our first module and first test case. First, near the bottom of the HTML, before the closing </body> tag, add a div with an id “testDiv”: Then, up higher, where the “TODO” is in our JavaScript, add a new test, like so: Which should yield two successes: About Chad Myers. jQuery Form Serialization without ASP.NET ViewState. If you're doing AJAX callbacks to the server with POST data from ASP.NET pages you might be inclined to do something like this: var post = $("#form1").serialize(); $.post("MethodCallback.aspx?
Callback=ListPanel", post, function(result) { alert(result) }); This works fine, but it will pick up all of your ViewState and EventValidation making the post back to the server a heck of a lot bigger than it should be especially if you have a page where ViewState is heavily used. Now I tend to turn off ViewState on most of my pages but you still get at least some ViewState and EventValidation content on the page and in most Ajax scenarios sending that to the server is just wasted bandwidth. Fortunately it's quite easy to exclude ViewState et al. with code like this: var res = $("#form1") .find("input,textarea,select,hidden") .not("#__VIEWSTATE,#__EVENTVALIDATION") .serialize(); $.post("MethodCallback.aspx?
Which then allows you to do: var res = $("#form1").serializeNoViewState(); CoDe Magazine - Article: jQuery Puts the Fun Back into Browser S. Ok, I admit it. For many, many years I hated JavaScript. I hated writing JavaScript code, and even more I hated the pain that goes along with dealing with different browsers using reams of script code. I got into ASP.NET and stuck to server code. After all, that’s what ASP.NET makes really easy. Today I still hate the same JavaScript problems as they haven’t gone away, but thanks to a recently gained better understanding of JavaScript and a small JavaScript client library called jQuery, I no longer dread the days when I have to write client-centric AJAX or UI script code.
Looking back, it was not until the AJAX wave started forming a few years back that I even considered getting more seriously interested in JavaScript. The JavaScript library that really grabbed me is jQuery. jQuery is a relatively small library that is based on a few very simple and intuitive principles. jQuery can bring tremendous productivity gains and it’s easy to learn and work with. Key Features of jQuery. The Website of the Freelancer Koller Jürgen » The ultimate jQuer. jQuery is definitely my favourite Javascript Library and this ultimate jQuery Plugin List is for all other jQuery Lovers out there. At the moment there are about 240+ awesome Plugins in the List I'm sure that there are a lot of other plugins out there - so if you knew one that's not in the list please post a comment and i will add it.
Thanks! File upload Ajax File UploadjQUploaderMultiple File Upload pluginjQuery File StyleStyling an input type fileProgress Bar Plugin Form Validation jQuery ValidationAuto HelpSimple jQuery form validationjQuery XAV - form validationsjQuery AlphaNumericMasked InputTypeWatch PluginText limiter for form fieldsAjax Username Check with jQuery Form - Select Box stuff jQuery ComboboxjQuery controlled dependent (or Cascadign) Select ListMultiple SelectsSelect box manipulationSelect Combo PluginjQuery - LinkedSelectAuto-populate multiple select boxesChoose Plugin (Select Replacement) Form Basics, Input Fields, Checkboxes etc. Time, Date and Color Picker Rating Plugins. jQuery for JavaScript programmers. When jQuery came out back in January 2006, my first impression was that it was a cute hack. Basing everything around CSS selectors was a neat idea (see getElementsBySelector) but the chaining stuff looked like a bit of a gimmick and the library as a whole didn't look like it would cover all of the bases.
I wrote jQuery off as a passing fad. Over the past few months it's become clear to me exactly how wrong I was. jQuery is an exceptionally clever piece of engineering. It neatly encapsulates an extraordinary range of common functionality, and provides a clever plugin API for any functionality not included by default. Most introductions to jQuery focus on designers and inexperienced developers. Namespacing The key to writing good, reusable JavaScript is to zealously manage your namespace.
jQuery introduces just one symbol to the global namespace: the jQuery function/object. What about language enhancements? The infamous $ function Selecting some elements jQuery('div.panel') jQuery('p#intro')