jQuery 1.6 Major Changes

Practical demo of the major changes in jQuery 1.6

HTML

<p data-content-type="first paragraph"></p>

<p>
    <input type="text" value="blank" /><br />
    Current Value: <span id="curValue"></span><br />
    Current Prop Value: <span id="curPropValue"></span>
</p>

<p>
    <input id="chkTmp" type="checkbox" checked /> Check this to update attr() and prop()<br />
    Checkbox attribute $.attr(): <span id="chkAttr"></span><br />
    Checkbox property $.prop(): <span id="chkProp"></span>
</p>
    
<p>
    <input id="chkTest" type="checkbox" checked /> This is a checkbox<br />
    <a id="lnkToggleCheck" href="#">Toggle checked attribute</a>
</p>

<p id="map"></p>

<p id="css">This container has a random height; click it to increase it's height relatively by 10px</p>

<p id="animate"></p>

CSS

html { font:normal 11px Arial; }

p {
    width:100%;
    background-color:#f8f8f8;   
    border:solid 1px #d0d0d0;
    padding:10px;
    margin:10px 0;
}    

p[data-content-type="first paragraph"] {
   font-size:14px;
   background-color:#fff;
   border:dotted 1px #d0d0d0;
}

input [type="text"] {
    padding:5px;
    margin:20px 0 10px 0;   
    display:block;
}

#css { cursor:pointer; }

JavaScript

var outputHTML;

// Case-mapping of data- attributes
// This would return undefined in jQuery 1.5.2
$('p:first').text( 
    "data-content-type = " +
    $('p:first').data('contentType') 
);


// The new .prop() method sets or gets properties on DOM elements
// The attr() method returns the default HTML property
$('#curValue').text( $('input').attr('value') );

$('input').bind('keyup', function(e) {
    $('#curValue').text( $('input').attr('value') );
    $('#curPropValue').text( $('input').prop('value') );
});


// The checked "attribute" value is undefined but the checked "property" value is true.
// Before jQuery 1.6, .attr("checked") returned the Boolean property value (true) but as of jQuery 1.6 it returns the actual value of the attribute (undefined)
$('input:checkbox:first').bind('click', function() {
     $('#chkAttr').text( $('input:checkbox').attr('checked') );
     $('#chkProp').text( $('input:checkbox').prop('checked') );
});


// In jQuery 1.6 Boolean attributes (such as selected, checked, etc.) can now be toggled by passing in true or false to .attr() to either add or remove them.
$('#lnkToggleCheck').bind('click', function(e) {
    var $chkbx = $('#chkTest');
    
    if( $chkbx.is(':checked')) {
        $chkbx.attr("checked", false);
    } else {
        $chkbx.attr("checked", true);
    }

    return false;
});


// It’s now possible to map the properties of a JavaScript object using the jQuery.map method.
var obj = { first: 1, second: 2, third: 3, fourth: 4 }, 
    output = "";

obj = $.map( obj, function( value ) {
    output += value++ + ', ';
});
$('#map').text(output);


// You can now prefix a CSS value with “+=” or “-=” to update the property relatively
$('#css').bind('click', function(e) {
    $(this).css('height', '+=10px');
});


// jQuery objects can now return a Promise to observe when all animations on a collection have completed
$('#animate').text('animating...').animate({
    width: "50%",
    height: "+=60px"
}, 5000);

$.when(...