var backup_src = 'http://domain.ext/images/backup.png';
var wanted_src = 'http://domain.ext/images/wanted.png';
var image = $(''); //or point to an image that is already on the page!
image.on('error', function () {
    image.prop('src', backup_src);
});

image.prop('src', wanted_src);

Here is an example,

$(function(){
  $('#id').change(function(){
    //do stuff
  });

  $('#id').css('border-color', '#ff0000');
  var val = $('#id').val();
});

See what is happening here?
There are several calls to $(‘#id’).

The reasoning

Why is this so bad?
Well, imagine the DOM as a giant pool of all elements on your page, every time you call $(‘#id’) you are diving into the pool and swimming around until you find the element you need. That adds some serious overhead on every call!

The solution

Caching!

$(function(){
  var element = $('#id'); //see what we are doing!
  element.change(function(){
    //do stuff
  });

  element.css('border-color', '#ff0000');
  var val = element.val();
});

See what we have done here?
We cut down our diving to only one call, keeping with the fish analogy think of it as, after storing the selector we now have it on a fishing rod, every time we want it we simply reel in the line and have our element!

Actually, There is one more thing we can do to improve this, method chaining!

$(function(){
  var element = $('#id'); //see what we are doing!
  element.change(function(){
    //do stuff
  }).css('border-color', '#ff0000');
  var val = element.val();
});

Well, hopefully after reading this post you will no longer commit this crime, and pass this message along to anyone you know that commits this crime!

/*
 * First we start off with the closure
 * Notice that we pass in $ to the closure?
 * This is so that we can use $ as an alias to jQuery
 */
(function($) {

  /* First line defines the name of your widget */
  $.widget("ui.widgetName", {
    /*
     * Next line contains an object containing all the default options
     * that you want to use in your plugin
     */
    options: {},

    /*
     * Then we have the _create function
     * This function gets called as soon as your widget is invoked
     * Think of it as the initialization function.
     */
    _create: function() {

      /*
       * Its a good idea to store a reference to the object
       * That way you can reference "self" inside anything that changes
       * The scope of "this"
       *
       * "this" references the plugin instance
       * "this.element" references the dom element the widget was called on
       */
      var self = this;
    },

    /*
     * Next we can declare any private functions to be used internally by the widget
     * Although I'm not sure if jQuery does anything to protect these functions when
     * you prefix the name with an "_" it's not a bad design idea as you can instantly
     * recognize that the function is an internal function not to be called publicly
     */
    _myPrivateFunction: function() {
      /*
       * You can reference "this" in the same scope as "_create"
       * This function is designed to be called using "this._myPrivateFunction()"
       */
    },

    /*
     * Next we can declare any public functions to be called externally to modify or
     * interact with the widget. This is one of the most powerful features of the
     * jQuery UI Widget Factory
     */
    myPublicFunction: function() {
      /*
       * You can reference "this" in the same scope as "_create"
       * This function is designed to be called using "$('#elementId').widgetName('myPublicFunction')"
       */
    },

    /*
     * It is a good idea to write your own destroy function. The idea behind this is to remove any dom
     * changes you have made, or any variables you have left lying around.
     * jQuery will deal with removing the instance of the plugin.
     */
    destroy: function() {}
  });
  /*
   * Remember what I said in the first comment?
   * we pass in jQuery here so it gets aliased as $
   */
})(jQuery);

Features

• Convenient way for users to enter a list of items
• Fully integrated with jQuery ui auto complete
• Automatically adds current input as tag if input loses focus
• Easy to use public methods
• Easy to theme (single css file)
• Customizable accept keys
• Backspace on empty input deletes previous tag
• Ability to provide initial tags on creation though options
• Ability to provide initial tags on creation via list items
• Option to toggle usage of a hidden select so the tags can be sent using a normal form!
• Ability to sort tags via drag and drop!
• Optional Themeroller Compatibility

Demo

Instead of a whole pile of blabing how about you just check out the demo.

Download from GitHub

These useful functions will take your form and spit out something you can send off in your ajax requests.
“Awesome” you exclaim! “I’ll use it to send my post“.

Not so fast!
Turns out these functions are more or less useless for post requests.
That’s where this nifty little function comes in handy. call $('form').serializePost() on your form and it will serialize your post data and return a nice little javascript object ready to send off. On the other end you can access it as if you had submitted the form normally using $_POST['myField'].

(function($) {
    $.fn.serializePost = function() {
        var data = {};
        var formData = this.serializeArray();
        for (var i = formData.length; i--;) {
            var name = formData[i].name;
            var value = formData[i].value;
            var index = name.indexOf('[]');
            if (index > -1) {
                name = name.substring(0, index);
                if (!(name in data)) {
                    data[name] = [];
                }
                data[name].push(value);
            }
            else
                data[name] = value;
        }
        return data;
    };
})(jQuery);

On many a website to select a color you are given a html select box with a list of color names, or hex values.

Something like this

FFFFFF FFDFDF FFBFBF FF9F9F FF7F7F FF5F5F FF3F3F FF1F1F FF0000 DF1F00 C33B00 A75700 8B7300 6F8F00 53AB00 37C700 1BE300 00FF00 00DF1F 00C33B 00A757 008B73 006F8F 0053AB 0037C7 001BE3 0000FF 0000df 0000c3 0000a7 00008b 00006f 000053 000037 00001b 000000

This is both unintuitive and downright ugly. My thinking was that there has to be a better way. And thats where the Jquery Color Picker comes in.

The big difference between the Jquery Color Picker and other Jquery powered color pickers is the Jquery Color Picker takes a normal html select like above and turns it into an intuitive, cross browser, color picker.

This allows you to control the colors that can be picked, and send the chosen value through a form without having to manipulate the output.

Demo

Normally the select element is hidden, for the demo we have shown it.

FFFFFF FFDFDF FFBFBF FF9F9F FF7F7F FF5F5F FF3F3F FF1F1F FF0000 DF1F00 C33B00 A75700 8B7300 6F8F00 53AB00 37C700 1BE300 00FF00 00DF1F 00C33B 00A757 008B73 006F8F 0053AB 0037C7 001BE3 0000FF 0000df 0000c3 0000a7 00008b 00006f 000053 000037 00001b 000000

<select id="picker">
<option value="FFFFFF">FFFFFF</option>
<option value="FFDFDF">FFDFDF</option>
...
<option value="00001b">00001b</option>
<option value="000000">000000</option>
</select>
<link rel="stylesheet" href="jquery.colorpicker.css" type="text/css" media="screen" /> 
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.colorpicker.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#picker').colorpicker({
        size: 20,
        label: 'Color: ',
        hide: false
    });
});
</script>

Options

Download from GitHub