Wednesday, November 14, 2012

data(), attr() and prop() APIs

data(key, value) - Store arbitrary data associated with the matched elements.
Due to the way browsers interact with plugins and external code, the .data() method cannot be used on <object> (unless it's a Flash plugin), <applet> or <embed> elements. To retrieve the value's attribute as a string without any attempt to convert it, use the attr() method.

removeData() - Remove a previously-stored piece of data
As of jQuery 1.4.3, calling .removeData() will cause the value of the property being removed to revert to the value of the data attribute of the same name in the DOM, rather than being set to undefined. Removing data from jQuery's internal .data() cache does not effect any HTML5 data- attributes in a document

Data events: 
Besides of jQuery object, we can also use the data() on JavaScript objects, and handle 3 events

Sample code:

var obj = {};
$(obj).data('name', 'jim');
$(obj).bind('setData', function (e, key, value) {
}).bind('getData', function (e, key, value) {
$(obj).data('age', 36);

attr(key) - Get the value of an attribute for the first element in the set of matched elements.
.attr() should not be used on plain objects, arrays, the window, or the document.
To retrieve and change DOM properties, use the .prop() method.

attr(key, value) - Set one or more attributes for the set of matched elements.

removeAttr() - Remove an attribute from each element in the set of matched elements.

prop(key) - Get the value of a property for the first element in the set of matched elements.

prop(key, value) - Set one or more properties for the set of matched elements.

removeProp() - Remove a property for the set of matched elements.
In general, it is only necessary to remove custom properties that have been set on an object, and not built-in (native) properties. Do not use this method to remove native properties such as checked, disabled, or selected. 
Use .prop() to set these properties to false instead.

Performance wise, prop() is much faster than attr() and data().

The confusing part is when to use each of these APIs. data() is to store arbitrary data in jQuery cache, and it also loads html5 data-attribute. attr() is for HTML attribute, while prop() is for DOM property. One of the reference articles gives a very good explanation the difference between attribute and property, and summarizes with below table. 

DOM Properties vs HTML Attributes
Standard DOM properties and attributes (like id, class/className, href, value etc) are synced, but the values are not always the same. For details, need refer to W3C specs.


Wednesday, November 7, 2012

Browser installed plugins

Help -> Installed plug-ins

Tools -> Add-ons




Friday, November 2, 2012

XMLDocument in javascript

XML was so popular in XHR calls before JSON, and at that time (before jQuery) web developers used native Javascript APIs to convert XML string to XMLDocument (DOMParser) and vice versa (XMLSerializer). The following 2 functions are examples.

function StringtoXML(str) {
    // second parameter mimetype is required
    return (new DOMParser()).parseFromString(str, 'text/xml')

function XMLtoString(xmldoc){
    var serialized;
    try {
        serialized = (new XMLSerializer()).serializeToString(xmldoc);
    catch (e) {
        // Internet Explorer has a different approach to serializing XML
        serialized = xmldoc.xml;
    return serialized;

This pair is similar to JSON.parse and JSON.stringify for conversion between JSON object and String.

Now that we have jQuery, converting between XMLDocument and String is easier.
jQuery utitlity has 2 methods for XMLDocument
$.isXMLDoc() to test an XML document
$.parseXML() to parse String to XMLDocument

However, jQuery doesn't provide the utility method to convert XMLDocument to String. We can use above native window.XMLSerializer object.

Sometimes if we need manipulate XML data, we can wrap to jQuery object and leverage plenty of jQuery APIs. For instance, if we need change id attribute in XML data, we can use below methods.

$(xml).attr('id', 'new_id')[0].outerHTML
$("<p/>").append($(xml).attr('id', 'new_id')).html()