Archive for August, 2010

jQuery and HTML5

As probably most of you know HTML 5 is currently under development as the next major revision of the HTML standard and is expected to be the next step that will change how the web looks.

I will try to show you a couple of the new things added in HTML5 and how much jQuery influenced the HTML5 development.

So what is new:

New selectors

-Finding elements by class:

  1. document.getElementsByClassName("test");

-Finding elements by CSS syntax – very similar with jQuery selectors

  1. document.querySelectorAll("table.test > tr");

Drag and drop

  1. document.addEventListener('dragstart', function(event) {
  2.    event.dataTransfer.setData('text', 'Customized text');
  3.    event.dataTransfer.effectAllowed = 'copy';
  4. }, false);

In this HTML5 javascript example you can see the callback style use like in jQuery.

Web Workers

  1. main.js:
  2.   var worker = new Worker('extra_work.js');
  3.   worker.onmessage = function(event) { alert(event.data); };
  4.  
  5. extra_work.js:
  6.   self.onmessage = function(event) {
  7.     // Do some work.
  8.     self.postMessage(some_data);
  9.   }

So we will have easy-to-use multi-thread support in HTML5.

Web Storage

  1. // use localStorage for persistent storage
  2. // use sessionStorage for per tab storage
  3.  
  4. textarea.addEventListener('keyup', function () {
  5.   window.localStorage['value'] = area.value;
  6.   window.localStorage['timestamp'] = (new Date()).getTime();
  7. }, false);
  8. textarea.value = window.localStorage['value'];

Session support in Javascript.

Read more

How to create a jQuery plugin

For all you jQuery lovers out there I will try to show you how you can create your own jQuery plugins, so you can start developing new and interesting stuff for all the jQuery community.

To create a jQuery plugin, and have it integrated in the jQuery object, we have to attach a function to the jQuery prototype.The prototype property in JavaScript can be used to extend any object with new methods or properties.

Before adding you plugin your function you must wrap it, by creating a private scope for jQuery, like this:

  1. (function($) {
  2. //Your code
  3. })(jQuery);

Now let’s say you want to create a jQuery plugin with the name “test”. You must add your “test” method to the jQuery object by attaching it to $.fn (which is an alias for the prototype property of the jQuery object “jQuery.fn = jQuery.prototype“). So this is how your plugin should look until now:

  1. (function($) {
  2. $.fn.test = function() {
  3. // Your code
  4. }
  5. })(jQuery);

Read more

Verify if an element exists using jQuery

A common and sometimes overlooked question is how to verify if a DOM element exists using jQuery. This can be done very easy using the length property:

  1. if (!$('#example').length)
  2.    alert("Element not found");

So.. if the length property is larger than 0 then the element exists. A common mistake that people tend to do is to use !$(‘#example’), but this is wrong because jQuery will return an object even when not finding the requested DOM element.

Return top