jQuery 1.8 BETA – The Way of Use It

by Kenny on
jQuery 1.8 BETA has been released with ton of new features and bugs fixed. This post show the way of use and code in new jQuery 1.8 BETA.

Look Inside

jQuery 1.8 BETA
jQuery 1.8 BETA

After a long month of coding and debugging, finally I have completed all the projects on hand. And it’s time for me to share something again. =)

Well, just noticed that jQuery 1.8 Beta has been released last week. You can grab the code from jQuery CDN: http://code.jquery.com/jquery-1.8b1.js

I believe most of you should already have gone through the new features of jQuery 1.8 Beta 1, if you haven’t yet, check the announcement here

In the following post I have briefly show the way of use and code these new features of jQuery 1.8. Hope you will find it useful.

 

Custom jQuery

As of jQuery 1.8, you can create custom version of jQuery with excluding one or more modules that you do not need, for instance, AJAX module, CSS module, effects module, dimension module and offset module can be excluded from jQuery library.

In order to have custom builds jQuery, follow this documentation.

 

CSS Vendor Prefixes

Having nightmare to include all vendor prefixed CSS properties into stylesheet or JavaScript? With jQuery 1.8, you could save your time from this. Simply pass the non-prefixed property and jQuery will generate the vendor prefix that is appropriate for the user browser. It can be as simple as this:


$('.box').css({	
	'transition': 'all 1s',
	'box-shadow': '1px 1px 3px #ccc',
	'border-radius': '5px',
	'box-sizing': 'border-box'
});

That’s all! These will automatically add -webkit- prefixes in webkit browsers as well as -moz- in Firefox.

 

New $.parseHTML() Method

This new method allows us to parse strings as HTML. It will be used to replace $() method in the way to parse HTML into a DOM fragment for better XSS protection.

I suppose the way of using it will be like this:


var html1 = $("<p>This is paragraph.</p>");
var html2 = $.parseHTML("<p>This is paragraph.</p>");

$('.box').append(html1);	//output: <p>This is paragraph.</p>
$('.box').append(html2);	//output: <p>This is paragraph.</p>


var html1 = $("<img src='z.jpg' />");
var html2 = $.parseHTML("<img src='z.jpg' />");

$('.box').append(html1);	//output: <img src='z.jpg' />
$('.box').append(html2);	//output: <img src='z.jpg' />


var html1 = $(".object");
var html2 = $.parseHTML(".object");

$('.box').append(html1);	//output: (The object HTML)
$('.box').append(html2);	//output: .object

 

New $.Animation Function

jQuery 1.8 uses a new core for creating an animation object – $.Animation( element, props, opts). It provides support for older browsers without built-in animations and fixes many bugs from previous versions.

However, at the moment there is only preliminary documentation for this. As for me I’m not clear in how to use it yet. Perhaps if you know the way please shares with us.

 

And Much More….

There are much more changes in jQuery 1.8 such as deprecation of APIs and features that are inefficient, ineffective and inadvisable. Of course, to know more about it you could simply read the official blog post.

Don't enjoy alone, share with your friends also
Read Next

BlocksIt.js – Dynamic Grid Layout jQuery Plugin