Your SlideShare is downloading. ×
  • Like
jQuery Data Manipulate API - A source code dissecting journey
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

jQuery Data Manipulate API - A source code dissecting journey

  • 1,565 views
Published

Represent major data manipulate API in jQuery 1.6; such as .data(), removeData(), index(), globalEval() and so no. Also, HTML5 data-* attributes. I will walk you through with diving into jQuery source …

Represent major data manipulate API in jQuery 1.6; such as .data(), removeData(), index(), globalEval() and so no. Also, HTML5 data-* attributes. I will walk you through with diving into jQuery source code and find out the killing techniques used in jQuery.

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,565
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
18
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. jQuery Data Manipulate
    A source code dissecting journey
    Dean Yan
    http://thefronts.com/
    http://deanyan.com/
    http://www.linkedin.com/in/deanyan/
  • 2. HTML5 data-* Attributes
    <li class="user" data-name="John Resig" data-city="Boston"data-lang="js" data-food="Bacon">    <b>John says:</b> <span>Hello, how are you?</span></li>
    var user = document.getElementsByTagName("li")[0];var pos = 0, span = user.getElementsByTagName("span")[0];var phrases = [  {name: "city", prefix: "I am from "},  {name: "food", prefix: "I like to eat "},  {name: "lang", prefix: "I like to program in "}];user.addEventListener( "click", function(){  var phrase = phrases[ pos++ ];  // Use the .dataset property  span.innerHTML = phrase.prefix + user.dataset[ phrase.name ];}, false);
    REF> http://ejohn.org/blog/html-5-data-attributes/
  • 3. HTML5 data-* Attributes
    The .dataset property behaves very similarly to the the .attributes property (but it only works as a map of key-value pairs)
    span.innerHTML = phrase.prefix +  user.getAttribute("data-" + phrase.name )
  • 4. HTML5 data-* Attributes

    While I firmly believe that useful data should be made visible to users, there are circumstances where data-* attributes make sense. For instance, including data-lat and data-lng attributes in an element containing a street address would allow for easily adding markers to a Google Map on the page:

    <span
    data-lat="38.8951" 
    data-lng="-77.0363">
        1600 Pennsylvania Ave.    Washington, DC
    </span>
    REF> http://www.viget.com/inspire/extending-paul-irishs-comprehensive-dom-ready-execution/
  • 5. HTML5 data-* Attributes
    Taking a step back, we can use data-* attributes on the body element to provide an indication of where we are within an application:
    <body data-controller="<%= controller_name %>" data-action="<%= action_name %>">
    The above code will yield something like:
     <body data-controller="users" data-action="show">
    REF> http://www.viget.com/inspire/extending-paul-irishs-comprehensive-dom-ready-execution/
  • 6. .data()/jQuery.data()
    .data( key, value )
    .data( key, value )
    .data( obj )
    .data( key )
    .data( key )
    .data()
  • 7. .data()/jQuery.data()
    <div>    The values stored were     <span></span>    and    <span></span></div>
    $("div").data("test", { first: 16, last: "pizza!" });$("span:first").text($("div").data("test").first);$("span:last").text($("div").data("test").last);
    <div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>
    $("div").data("role") === "page";$("div").data("lastValue") === 43;$("div").data("hidden") === true;$("div").data("options").name === "John";
  • 8. .data()/jQuery.data()
    var myObj = {};$(myObj).data("city", "Springfield");
    myObj.city = "Springfield"
    var progressBar = {};$(progressBar).bind('setData', function(e, key, value) {    switch (key) {    case "percent":        $("#progress").width(value + "%");        $("#percentText").text(value + "%");        break;    case "color":        $("#progress").css("color", value);        break;    case "enabled":        $('#progress').toggleClass("active", value);        break;    }});$(progressBar).data("enabled", true).data("percent", 21).data("color","green");// You also have easy access to the current values:console.log(progressBar.enabled); // true
  • 9. .data()/jQuery.data()
    getData – triggered before data is read from the object.
    changeData – triggered whenever data is set or changed. It is used in the jQuery datalinkplugin .
  • 10. . removeData()/ jQuery.removeData()
    .removeData( [ name ] )
    <div>value1 before creation: <span></span></div><div>value1 after creation: <span></span></div><div>value1 after removal: <span></span></div>
    $("span:eq(0)").text("" + $("div").data("test1"));
    $("div").data("test1", "VALUE-1");$("div").data("test2", "VALUE-2");
    $("span:eq(1)").text("" + $("div").data("test1"));$("div").removeData("test1");
    $("span:eq(2)").text("" + $("div").data("test1"));$("span:eq(3)").text("" + $("div").data("test2"));
  • 11. jQuery.hasData()
    jQuery.hasData( element )

    The primary advantage of jQuery.hasData(element) is that it does not create and associate a data object with the element if none currently exists. In contrast, jQuery.data(element) always returns a data object to the caller, creating one if no data object previously existed.

  • 12. jQuery.hasData()
    $(function(){  var $p = jQuery("p"), p = $p[0];
      $p.append(jQuery.hasData(p)+" "); /* false */  jQuery.data(p, "testing", 123);
      $p.append(jQuery.hasData(p)+" "); /* true*/  jQuery.removeData(p, "testing");
      $p.append(jQuery.hasData(p)+" "); /* false */});
  • 13. Utilities
    jQuery.isFunction()
    jQuery.globalEval()
    jQuery.isEmptyObject()
    jQuery.merge()
    jQuery.proxy()
    jQuery.each()
    jQuery.trim()
    jQuery.extend()
  • 14. Utilities
    jQuery.isFunction()
    // Populate the class2type mapjQuery.each("Boolean Number String Function Array Date RegExpObject".split(" "), function(i, name) {    class2type["[object " + name + "]"] =name.toLowerCase();});
    type: function(obj) {    return obj == null ? String(obj) :class2type[toString.call(obj)] || "object";},
    // See test/unit/core.js for details concerning isFunction.// Since version 1.3, DOM methods and functions like alert// aren't supported. They return false on IE (#2968).isFunction: function(obj) {    return jQuery.type(obj) === "function";},
  • 15. Utilities
    jQuery.trim()
    // Use native String.trim function wherever possibletrim: trim ?function(text) {    return text == null ? "" : trim.call(text);} :// Otherwise use our own trimming functionalityfunction(text) {    return text == null ? "" :text.toString().replace(trimLeft,"")
    .replace(trimRight, "");},
  • 16. Utilities
    jQuery.isEmptyObject()
    isEmptyObject: function(obj) {    for (var name in obj) {        return false;    }    return true;},
  • 17. Utilities
    jQuery.isPlainObject()
    isPlainObject: function(obj) {    // Must be an Object.    // Because of IE, we also have to check the presence of the constructor property.    // Make sure that DOM nodes and window objects don't pass through, as well    if (!obj || jQuery.type(obj) !== "object" ||obj.nodeType || jQuery.isWindow(obj)) {        return false;    }    // Not own constructor property must be Object    if (obj.constructor && !hasOwn.call(obj,"constructor") 
    &&!hasOwn.call(obj.constructor.prototype,"isPrototypeOf")) {        return false;    }    // Own properties are enumerated firstly, so to speed up,    // if last one is own, then all properties are own.    var key;    for (key in obj) {}    return key === undefined || hasOwn.call(obj,key);},
  • 18. Utilities
    jQuery.globalEval()
    globalEval: function(data) {    if (data && rnotwhite.test(data)) {        // We use execScript on Internet Explorer        // We use an anonymous function so that context is window        // rather than jQuery in Firefox        (window.execScript ||        function(data) {            window["eval"].call(window, data);        })(data);    }},
  • 19. Utilities
    jQuery.proxy()
    // Bind a function to a context, optionally partially applying any// arguments.proxy: function(fn, context) {    if (typeof context === "string") {        var tmp = fn[context];        context = fn;        fn = tmp;    }    // Quick check to determine if target is callable, in the spec    // this throws a TypeError, but we will just return undefined.    if (!jQuery.isFunction(fn)) {        return undefined;    }    // Simulated bind    var args = slice.call(arguments, 2),        proxy = function() {            return fn.apply(context,args.concat(slice.call(arguments)));        };    // Set the guid of unique handler to the same of original handler, so it can be removed    proxy.guid = fn.guid = fn.guid || proxy.guid ||jQuery.guid++;    return proxy;},
  • 20. Utilities
    jQuery.each()
    // args is for internal usage onlyeach: function(object, callback, args) {    var name, i = 0,        length = object.length,        isObj = length === undefined || jQuery.isFunction(object);    if (args) {        if (isObj) {            for (name in object) {                if (callback.apply(object[name], args) === false) {                    break;                }            }        } else {            for (; i < length;) {                if (callback.apply(object[i++], args) === false) {                    break;                }            }        }
  • 21. Utilities
    jQuery.each()
          // A special, fast, case for the most common use of each    } else {        if (isObj) {            for (name in object) {                if (callback.call(object[name], name, object[name]) ===false) {                    break;                }            }        } else {            for (; i < length;) {                if (callback.call(object[i], i, object[i++]) === false) {                    break;                }            }        }    }    return object;},
  • 22. Miscellaneous
    .index()
    .map()
    .get()
    .toArray()
    .slice()
  • 23. Miscellaneous
    .index()
    .index( selector )
    selector A selector representing a jQuery collection in which to look for an element.
    .index( element )
    element The DOM element or first element within the jQuery object to look for.
  • 24. Miscellaneous
    .index()
    On click, returns the index (based zero) of that div in the page.
    <span>Click a div!</span><div>First div</div><div>Second div</div><div>Third div</div><script>   
    $("div").click(function () {        // this is the dom element clicked
            var index = $("div").index(this);        $("span").text("That was div index #" + index);
        });</script>
  • 25. Miscellaneous
    .index()
    Returns the index for the element with ID bar in relation to all <li> elements.
    <ul>    <li id="foo">foo</li>    <li id="bar">bar</li>    <li id="baz">baz</li></ul><div></div><script>$('div').html('Index: ' +  $('#bar').index('li') );</script>
  • 26. Miscellaneous
    toArray()
    toArray: function() {    return slice.call(this, 0);}
    Reversed - <span></span><div>One</div><div>Two</div><div>Three</div><script>
    function disp(divs) {    var a = [];    for (var i = 0; i < divs.length; i++) {        a.push(divs[i].innerHTML);    }    $("span").text(a.join(" "));}disp($("div").toArray().reverse());</script>
  • 27. Miscellaneous
    .map()
    .map( callback(index, domElement) )
    callback(index, domElement)A function object that will be invoked for each element in the current set.
  • 28. Miscellaneous
    .map()
    Equalize the heights of the divs.
    <input type="button" value="equalize div heights"><div style="background:red; height: 40px; "></div><div style="background:green; height: 70px;"></div><div style="background:blue; height: 50px; "></div><script>    $.fn.equalizeHeights = function(){
         return this.height( Math.max.apply(this, $(this).map(function(i,e){ return $(e).height() }).get() ) )    }
        $('input').click(function(){     $('div').equalizeHeights();    });</script>
  • 29. Miscellaneous
    .map()
    map: function(callback) {    return this.pushStack(jQuery.map(this, function(elem, i) {        return callback.call(elem, i, elem);    }));},
  • 30. Miscellaneous
    .map()
    // arg is for internal usage onlymap: function(elems, callback, arg) {    var value, key, ret = [],        i = 0,        length = elems.length,        // jquery objects are treated as arrays        isArray = elems instanceof jQuery || length !== undefined &&typeof length === "number" && ((length > 0 && elems[0] && elems[length -1]) || length === 0 || jQuery.isArray(elems));    // Go through the array, translating each of the items to their    if (isArray) {        for (; i < length; i++) {            value = callback(elems[i], i, arg);            if (value != null) {                ret[ret.length] = value;            }        }        // Go through every key on the object,    } else {        for (key in elems) {            value = callback(elems[key], key, arg);            if (value != null) {                ret[ret.length] = value;            }        }    }    // Flatten any nested arrays    return ret.concat.apply([], ret);},
  • 31. Miscellaneous
    .map()
    // Take an array of elements and push it onto the stack// (returning the new matched element set)pushStack: function(elems, name, selector) {    // Build a new jQuery matched element set    var ret = this.constructor();    if (jQuery.isArray(elems)) {        push.apply(ret, elems);    } else {        jQuery.merge(ret, elems);    }    // Add the old object onto the stack (as a reference)    ret.prevObject = this;    ret.context = this.context;    if (name === "find") {        ret.selector = this.selector + (this.selector ? " " : "") +selector;    } else if (name) {        ret.selector = this.selector + "." + name + "(" + selector +")";    }    // Return the newly-formed element set    return ret;},
  • 32. Miscellaneous
    .index()
    // Determine the position of an element within// the matched set of elementsindex: function(elem) {    if (!elem || typeof elem === "string") {        return jQuery.inArray(this[0],        // If it receives a string, the selector is used        // If it receives nothing, the siblings are used        elem ? jQuery(elem) : this.parent().children());    }    // Locate the position of the desired element    return jQuery.inArray(    // If it receives a jQuery object, the first element is used    elem.jquery ? elem[0] : elem, this);},
  • 33. Miscellaneous
    .get()
    // Get the Nth element in the matched element set OR// Get the whole matched element set as a clean arrayget: function(num) {    return num == null ?    // Return a 'clean' array    this.toArray() :    // Return just the object    (num < 0 ? this[this.length + num] : this[num]);},
  • 34. General Attributes
    .attr()
    .removeAttr()
    .prop()
    .removeProp()
  • 35. General Attributes
    .attr() .removeAttr()
    attr: function(name, value) {    return jQuery.access(this, name, value, true, jQuery.attr);},
    removeAttr: function(name) {    return this.each(function() {        jQuery.removeAttr(this, name);    });},
  • 36. General Attributes
    .prop() .removeProp()
    prop: function(name, value) {    return jQuery.access(this, name, value, true, jQuery.prop);},removeProp: function(name) {    return this.each(function() {        // try/catch handles cases where IE balks (such as removing a property on window)        try {            this[name] = undefined;            delete this[name];        } catch (e) {}    });},