Full list of jQuery Snippets for Sublime 2

As I was learning the snippet shorthands for Sublime 2 I found it very useful to have this list of the main jQuery snippets so I could just flick through and learn them. So here is basically a dump of the best jQuery snippets in the awesome new text editor called Sublime 2. They are listed in order of relevance (in my opinion the most frequently used/useful ones first). Happy Scrolling!

Related posts:

• How to Setup Sublime 2 Text Editor
• Sublime2 vs Notepad++
• Making jQuery Easy with Sublime 2 Text Editor
• Mapping a new tab command in Sublime 2 Text

jQuery Document Ready
Trigger: $.ready (tab)

version 1

$.jQuery(document).ready(function($) {
    // Stuff to do as soon as the DOM is ready. Use $() w/o colliding with other libs;
});

version 2

$.jQuery(document).ready(function() {
    // Stuff to do as soon as the DOM is ready;
});

version 3

$.$(document).ready(function() {
    // Stuff to do as soon as the DOM is ready;
});

jQuery Ajax
Trigger: $.ajax (tab)

$.ajax({
  url: '/path/to/file',
  type: 'POST',
  dataType: 'xml/html/script/json/jsonp',
  data: {param1: 'value1'},
  complete: function(xhr, textStatus) {
    //called when complete
  },
  success: function(data, textStatus, xhr) {
    //called when successful
  },
  error: function(xhr, textStatus, errorThrown) {
    //called when there is an error
  }
});

jQuery Each
Trigger: $.each (tab)

$.each(function(index) {
  this.innerHTML = this + " is the element, " + index + " is the position";
});

$.each(array/object, function(index, val) {
  //iterate through array or object
});

jQuery getJSON
Trigger: $.getJSON (tab)

$.getJSON('/path/to/file', {param1: 'value1'}, function(json, textStatus) {
  //optional stuff to do after success
});

jQuery getScript
Trigger: $.getScript (tab)

$.getScript('path/to/file', function(data, textStatus) {
  //optional stuff to do after getScript
});

Script Include
Trigger script (tab)

<script src="/javascripts/application.js" type="text/javascript" charset="utf-8" async defer></script>

jQuery Animate
Trigger: $.animate (tab)

version 1

$.animate({param1: value1, param2: value2}, speed, function() {
  // stuff to do after animation is complete
})

version 2

$.animate({param1: value1, param2: value2}, speed)

jQuery DOM Attr Property
Trigger: .attr (tab)

version 1

.attr({
  attribute1: 'value1',
  attribute2: 'value2'
})

version 2

.attr('attribute', 'value')

jQuery Map
Trigger: $.map (tab)

version 1

$.map(function(index, elem) {
  return something;
})

version 2

$.map(array, function(item, index) {
  return something;
});

jQuery CSS
Trigger: .css (tab)

Version 1

.css({
  property1: 'value1',
  property2: 'value2'
})

Version 2

.css('property', 'value')

jQuery Bind
Trigger: .bind (tab)

.bind('event name', eventData, function(event) {
  // Act on the event
});

jQuery Live
Trigger: .live (tab)

.live('event type(s)', function(event) {
    // Act on the event
});

jQuery Plugin
Trigger: plugin (tab)

Version 1

jQuery.fn.myeffect = function(speed, easing, callback) {
  return this.animate({param1: 'value'}, speed, easing, callback);
};

Version 2

(function($) {
  $.extend($.expr[':'], {
    selectorName: function(element, index, matches, set) {

      return something;
    }
  });
})(jQuery);

Version 3 <-- awesome!

(function($) {
// What does the pluginName plugin do?
$.fn.pluginName = function(options) {

  if (!this.length) { return this; }

  var opts = $.extend(true, {}, $.fn.pluginName.defaults, options);

  this.each(function() {
    var $this = $(this);

  });

  return this;
};

// default options
$.fn.pluginName.defaults = {
  defaultOne: true,
  defaultTwo: false,
  defaultThree: 'yay!'
};
})(jQuery);

Key Value Pair
Trigger : (tab)

key: "value",

jQuery Wrap
Trigger: .wrap (tab)

Version 1

.wrap('<div class="extra-wrapper"></div>')

Version 2

.wrapAll('<div class="extra-wrapper"></div>')

Version 3

.wrapInner('<div class="extra-wrapper"></div>')

jQuery Toggle
Trigger: .toggle (tab)

Version 1

.toggle('slow/400/fast')

Version 2

.toggle(function() {
    // Stuff to do every *odd* time the element is clicked;
}, function() {
    // Stuff to do every *even* time the element is clicked;
});

jQuery Trigger
Trigger: .trigger (tab)

Version 1

.trigger('event name')

Version 2

.triggerHandler('event name')

These are the main ones but there are like 30-40 more snippets which are not mentioned here that can be found in the full List of jQuery Snippets on GitHub: https://github.com/kswedberg/jquery-tmbundle/tree/master/Snippets.

Other Snippets I found Useful:

HTML
Trigger: html (tab)

<html>
<head>
    <title></title>
</head>
<body>

</body>

</html>

HTML 4 Doctype Transitional
Trigger: html:4t (tab)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
</head>
<body>

</body>
</html>

XHTML 1 Doctype Transitional
Trigger: html:xt (tab)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
</head>
<body>

</body>
</html>

Read the full/original article at jQuery4u

• 

Related Posts

• Mapping a new tab command in Sublime 2 Text
• Sublime2 vs Notepad++
• Sublime 2 Notepad++ Theme Download