jQuery Utilities and Extensions
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist
src
test
.gitignore
.jshintrc
.travis.yml
Gruntfile.js
LICENSE
README.md
package.json

README.md

jQuery Utils

Build Status

Sauce Test Status

Supports jQuery 1.8.x to latest 1.11.x

This is a collection of jQuery extensions that provide for a number of actions that I repeat often in jQuery based apps; or have been useful things that were needed that would probably benefit the jQuery user community at some point.

Though some of the concepts are mine; a number were the idea of a co-worker, Tom Bremer.

You can install the modules together or separately, based on need. There are currently two main extensions:

  • Class-like Properties extension
  • DOM Utilities for manipulation
  • String utility methods

Class-like Properties

This extension lets you treat an attribute's value as a collection of names/strings, just like the 'class' attribute.

For example, given a custom attribute called test-prop, you can do the following:

<div  id="my-element" test-prop="a b c"></div>
<script>
    var $elm = $('#my-element');

    // Check for cprop values
    if ($elm.hasCProp('test-prop', 'a')) {
        // Append cprop values
        $elm.addCProp('test-prop', 'd e f');
    }
    else {
        if ($elm.hasCProp('test-prop', 'x y x')) {
            // Remove cprop values
            $elm.removeCProp('test-prop', 'x');
        }
    }

    // toggle a cprop value
    $(document).on('click', function() {
        $elm.toggleCProp('test-prop', 'b');
    });

</script>
  • $.hasCProp(property_name, value)

    Check if the custom property name property_name has any of the names contained in value.

    • property_name {string} - is the string name of the custom property or attribute
    • value {string} - is a string of space separated names to check against.
  • $.addCProp(property_name, value)

    Append the names contained in values to the custom property property_name. Will not duplicate if already exists.

    • property_name {string} - is the string name of the custom property or attribute
    • value {string} - is a string of space separated names to check against.
  • $.removeCProp(property_name, value)

    Remove the names contained in values from the custom property property_name.

    • property_name {string} - is the string name of the custom property or attribute
    • value {string} - is a string of space separated names to check against.
  • $.toggleCProp(property_name [, value, flag])

    Add or remove one or more names from the value of the property_name custom property for each element in the set of matched elements, depending on either the name's presence or the value of the flag argument.

    • property_name {string} - is the string name of the custom property or attribute
    • value {string} - is a string of space separated names to add or remove
    • flag {boolean} - a boolean value determining whether the names in value are added (true) or removed (_false).

DOM Utilities

Some useful extensions for manipulating and managing the DOM.

This extension provides:

  • $.moveTo() - for moving elements to another element
  • $.isElement() - to check if objects are HTMLElements or DOMNodes
  • DOMChanged event - triggered when using jQuery DOM manipulation methods

For example:

<div id="m1" class="moveable">Item</div>
<div id="m2" class="moveable">Item</div>
<div id="m3" class="moveable">Item</div>
<div id="container"></div>

<script>
    var locations = ['inside','before','after'],
        $container = $('#container'),
        $moveables = $('.moveable'),
        i = 0;

    $moveables.each(function() {
        if ($.isElement(this)) {
            $(this).moveTo($container, locations[i++]);
        }
    });
</script>
  • $.isElement(object)

    Retruns true if the object passed in is an HTMLElement or DOM Node. Returns false otherwise.

    • object {mixed} - the object to test
  • $.moveTo(container, location [, wrapper])

    Move every element in the set of matched elements in relation to the target container, based on the passed location and optionally wrapped by wrapper.

    • container {Selector|HTML|Element|jQuery} - the target element in or around which the elements will be moved.
    • location {string} - one of inside, to move the elements inside the target as the first child, after to move them directly after the target, or before to move them directly before the target container.
    • wrapper {Selector|HTML|Element|jQuery} - optional wrapper element to wrap all the match elements after they are moved.
  • DOMChanged Event

    The DOMChanged event is triggered when using any of the jQuery DOM manipulation methods that remove or place an element. The type of method is passed in a data object as a parameter, ie., { 'method': 'append' }.

String methods

This provies a handful of useful string manipulation methods, both as jQuery methods and as extensions to the native String object.

For example,

var html="<p>a string with special chars</p>";
    escaped = html.escapeHtml();

// escaped = "&lt;p&gt;a string with special chars&lt;&#x2F;p&gt;"

var input = "$" + 4.56,
    escaped_input = input.escapeRegExp();

// escaped_input = "\$4\.56"
  • $.escapeHtml(string) or string.escapeHtml()

    Converts html special characters into their respective html entities or escape sequence so they can be output correctly for viewing.

  • $.escapeRegExp(string) or string.escapeRegExp()

    Will escape any regular expression meta characters in a string so that it can be used to build a RegExp object and properly match those meta characters.