jQuery.zenCoding: Zen Coding plugin for jQuery

Create jQuery objects from Zen Coding abbreviation.


  1. Download jquery.zencoding-v0.6-0.9.zip and extract jquery.zencoding.min.js from the archive.

  2. Include jQuery and Zen Coding plugin from the HTML file. Create jQuery object from the Zen Coding abbreviation like this.

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
      <script type="text/javascript" src="jquery.zencoding.min.js"></script>
      <script type="text/javascript">
      $(function() {
        // Create jQuery object from the abbreviation by $.zenCoding function,
        // and append the jQuery object to the bottom of the body.
        var obj = $.zenCoding('div#page>div.logo+ul#navigation>li*5>a');
        // The following code is same as adove. zenCoding function of jQuery object
        // append the abbreviation to the selected object.
      <div id="d1"></div>
      <div id="d2"></div>


jQuery.zenCoding plugin provides two functions, $.zenCoding and $.fn.zenCoding.


Create jQuery objects from the Zen Coding abbreviation.

Object or String $.zenCoding(String abbr, Object options={})
Return value
Returns the abbreviation expanded jQuery object if resultType is jquery (default). Otherwise returns the abbreviation expanded string.


Append the Zen Coding abbreviation expanded jQuery object.

Object $(selector).zenCoding(String abbr, Object options={})
Same as $.zenCoding, see adove. (resultType property is uneffective.)
Return value
It always returns `this' value.


Expand abbreviation to a jQuery object

$(selector).zenCoding function expands Zen Coding abbreviation.
The following code expand the abbreviation to #replace element.


The following is expanded elements. (Use Firefox and Firebug to visualize the processing result.)

Expand abbreviation to a string

You can get the expanded abbreviation by $.zenCoding function.

var s = $.zenCoding({
    abbr: 'div#page>div.logo+ul#navigation>li*5>a',

The following textarea contains expanded HTML contents of the abbreviation.


MIT License


This plugin includes core files of the Zen Coding Project.