jQuery cheatsheet

Thanks Abhinay Rathore for providing always up-to-date cheatsheet for jQuery API .

Check the up-to-date cheat sheet here.

jQuery - Coding Standards & Best Practices

These are some of the common standards and best practices for writing better code with jQuery . These standards do not cover JavaScript standards or best practices. Browse the jQuery Cheatsheet for API reference.

Thanks to Abhinay Rathore for such a good article.

The original article can be found Here.

kreate.js

What is Kreate?

Kreate is a tiny helper method for jQuery that can quickly generate DOM elements as a standard jQuery object. You can "Kreate" a single element (such as a <div>) or up to however many elements your browser can handle before crashing*.

To study more & download, Visit - http://itsjonq.github.io/kreate/

Some useful jQuery Extentions

• Extended ':contains'-selector that ignores case while comparing text

$.expr[':'].containsIgnoreCase = function (n, i, m) {
    /// <summary>
    /// This is an overridden selector of Jquery selector - ":contains".
    /// This selector works as it is alike ":contains" with additional ability of case insensitivity.
    /// </summary>
    return jQuery(n).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};

Update:

In jQuery 1.8 the API for this changed, the jQuery 1.8+ version of this would be:

jQuery.expr[":"].Contains = jQuery.expr.createPseudo(function(arg) {      return function( elem ) {            return jQuery(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;      };});

Reference: http://stackoverflow.com/a/2196683

• Extended 'attr'-function that appends value, instead replace

/*
 * .attrExtend(attrName, attrValue)
 * Adds the specified attrValue for specified attrName to each of the set of matched HTML elements.
 */
$.fn.attrExtend = function (attrName, attrValue) {
    /// <summary>
    /// Adds the specified attrValue for specified attrName to each of the set of matched HTML elements.
    /// </summary>
    /// <param name="attrName" type="string">Attribute name, e.g. class</param>
    /// <param name="attrValue" type="string">Attribute value, e.g. Testclass</param>
    $(this).attr(attrName, function (index, existingAttrValues) {
        var re = new RegExp(attrValue, 'g');
        if (existingAttrValues
            && typeof (existingAttrValues) == 'string') {
            if (existingAttrValues.match(re) != null
            && existingAttrValues.match(re).length > 0) {
                return existingAttrValues;
            }
            else {
                return existingAttrValues + ' ' + attrValue;
            }
        }
        else {
            return attrValue;
        }
    });
    return this;
};

• Extended 'removeAttr'-function that removes value, instead remove whole attribute

/*
 * .removeAttrExtend(attrName, attrValue)
 * Removes the specified attrValue for specified attrName to each of the set of matched HTML elements.
 */
$.fn.removeAttrExtend = function (attrName, attrValue) {
    /// <summary>
    /// Removes the specified attrValue for specified attrName to each of the set of matched HTML elements.
    /// </summary>
    /// <param name="attrName" type="string">Attribute name, e.g. class</param>
    /// <param name="attrValue" type="string">Attribute value, e.g. Testclass</param>
    $(this).attr(attrName, function (index, existingAttrValues) {
        var re = new RegExp(attrValue, 'g');
        if (existingAttrValues
            && typeof (existingAttrValues) == 'string') {
            return existingAttrValues.replace(re, '');
        }
        else {
            return existingAttrValues;
        }
    });
    return this;
};

Update:

• Extended version of JavaScript method - "hasOwnProperty", that checks if JavaScript object has property that contains string specified by "likeString".

$.hasOwnPropertyLike = function (obj, likeString) {
    /// <summary>
    /// This is an extended version of JavaScript method - "hasOwnProperty".
    /// This method checks if JavaScript object has property that contains string specified by "likeString"
    /// </summary>
    /// <remarks>
    /// Creator:    Vihang Shah
    /// Created on: 21-Apr-2015
    /// Modification History:
    /// Modified by     |       Date        |   Description
    ///
    /// </remarks>
    return ($.propertiesLike(obj, likeString).length > 0);
}

•  Method enlists property, JavaScript object has and those contains string specified by "likeString",  and returns the list of property-names.

$.propertiesLike = function (obj, likeString) {
    /// <summary>
    /// This method enlists property, JavaScript object has and those contains string specified by "likeString",
    /// and returns the list of property-names
    /// </summary>
    /// <remarks>
    /// Creator:    Vihang Shah
    /// Created on: 21-Apr-2015
    /// Modification History:
    /// Modified by     |       Date        |   Description
    ///
    /// </remarks>
    var properties = [];
    $.each(obj, function (propertyKey, property) {
        if (obj.hasOwnProperty(property)
            && propertyKey.toLowerCase().indexOf(likeString.toLowerCase()) >= 0) {
            properties.push(propertyKey);
        }
    });
    return properties;
}

•  Javascript : Getting and Setting Caret Position in Textarea

$.fn.getCaret = function () { // adapted from http://blog.vishalon.net/index.php/javascript-getting-and-setting-caret-position-in-textarea
    var ctrl = this[0];
    var CaretPos = 0; // IE Support
    if (document.selection) {
        ctrl.focus();
        var Sel = document.selection.createRange();
        Sel.moveStart('character', -ctrl.value.length);
        CaretPos = Sel.text.length;
    } else if (ctrl.selectionStart || ctrl.selectionStart == '0') { // Firefox support
        CaretPos = ctrl.selectionStart;
    }
    return (CaretPos);
};

•  priceField

$.fn.priceField = function () {
    $(this).keydown(function (e) {
        var val = $(this).val();
        var code = (e.keyCode ? e.keyCode : e.which);
        var nums = ((code >= 96) && (code <= 105)) || ((code >= 48) && (code <= 57)); //keypad || regular
        var backspace = (code == 8);
        var specialkey = (e.metaKey || e.altKey || e.shiftKey);
        var arrowkey = ((code >= 37) && (code <= 40));
        if (specialkey && !arrowkey)
            return false;
        var Fkey = ((code >= 112) && (code <= 123));
        var decimal = ((code == 110 || code == 190) && val.indexOf('.') == -1);
        // UGLY!!
        var misckey = (code == 9) || (code == 144) || (code == 145) || (code == 45) || (code == 46) || (code == 33) || (code == 34) || (code == 35) || (code == 36) || (code == 19) || (code == 20) || (code == 92) || (code == 93) || (code == 27);
        var properKey = (nums || decimal || backspace || specialkey || arrowkey || Fkey || misckey);
        var properFormatting = backspace || specialkey || arrowkey || Fkey || misckey || ((val.indexOf('.') == -1) || (val.length - val.indexOf('.') < 3) || ($(this).getCaret() < val.length - 2));
        if (!(properKey && properFormatting)) {
            return false;
        }
    });
    $(this).blur(function () {
        var val = $(this).val();
        if (val === '') {
            $(this).val('0.00');
        } else if (val.indexOf('.') == -1) {
            $(this).val(val + '.00');
        } else if (val.length - val.indexOf('.') == 1) {
            $(this).val(val + '00');
        } else if (val.length - val.indexOf('.') == 2) {
            $(this).val(val + '0');
        }
    });
    return $(this);
};

What is jQuery Connect ? How to use jQuery Connect?

This is a jQuery plugin that is used to connect / bind a function to another function. It is more of assigning a handler for another function. Connect is used to execute a function whenever a function from another object or plugin is executed. We can connect to an event of a DOM element too using this function. In the sense same connect function can be used for both DOM elements and for the functions.

1.$.connect(refobj,refFuncName, connObj,connFunc);

This means that, when the reference function is executed, the connected function gets executed automatically after it. To understand more please analyze the following example

view source

print?

01.function A(){

02.this.fun1 = function(){

03.called1 = 'calssA-fun1';

04.}

05.}

06.var a = new A();

07.function B(){

08.this.fun2 = function(){

09.called2 = 'classB-fun1';

10.}

11.}

12.var b = new B();

13.$.connect(a,'fun1',b,fun2);

Here we connected "fun2" of object b to "fun1" of object a. When we call b.fun2, a.fun1 will also execute automatically.
This is very handy to execute some function when some other function is executed from the plug-in . In order to play with it follow these steps.

• Download jquery.connect.js file.
• Include this file in your html file.
• Take help of $.connect function as illustrated to connect a function to another function.