jQuery Copy, Data & Type UtilitiesS2C Home « jQuery Copy, Data & Type Utilities

In this lesson we take a look at the jQuery copy, data and type utility methods, which will conclude our investigation of the many jQuery utilities available.

jQuery Copy, Data & Type Utilities Description
Copy Utilities
.clone()Create a 'deep copy' of the set of matched elements.
Data Utilities
.data()Store and retrieve arbitrary data associated with the set of matched elements.
jQuery.data()Store and retrieve arbitrary data associated with the specified element.
jQuery.dequeue()Execute the next function on the queue for the specified element.
jQuery.hasData()Return a boolean dependant upon whether an element has any jQuery data associated with it.
jQuery.queue()Show or manipulate the queue of functions to be executed on the matched element.
.removeData()Remove the specified data that was previously stored.
jQuery.removeData()Remove the specified data that was previously stored.
Type Utilities
jQuery.isArray() **DEPRECATED**
Return a boolean dependant upon the specified object being a JavaScript Array object.
jQuery.isEmptyObject()Return a boolean dependant upon the specified object having properties or not.
jQuery.isFunction() **DEPRECATED**
Return a boolean dependant upon the specified object being a JavaScript Function object.
jQuery.isNumeric() **DEPRECATED**
Return a boolean dependant upon the specified value being numeric.
jQuery.isPlainObject()Return a boolean dependant upon the specified object having been created as a plain JavaScript object.
jQuery.isWindow() **DEPRECATED**
Return a boolean dependant upon the specified argument being a window.
jQuery.isXMLDoc()Return a boolean dependant upon the specified DOM node being within / an XML document XML document.

Copy Utilities

The .clone() Method  Top

Create a 'deep copy' of the set of matched elements.

We use this methods only signature .clone( [withDataAndEvents] [, deepWithDataAndEvents] ) in our examples below, which will create a deep copy of the set of matched elements.

Examples of using this method with the optional boolean flags are available in the reference section.

When we press the button the first time we clone the 'div1clone' element and append it to itself. We are not setting any optional flags so it is just a straight clone. If you click on the cloned 'div1clone' or 'para1clone' elements after clicking the button the outer 'div1clone' colour changes. This is because it is just a straight clone without any event handlers or data being copied over. Therefore when you click the cloned 'div1clone' or 'para1clone' elements it it just the same as clicking the original 'div1clone' element.


$(function(){
   $('.div1clone').on('click', function(){
     $(this).toggleClass('redbg');
   });
   $('.para1clone').on('click', function(){
     $(this).toggleClass('olivebg');
   });
   $('#btn8').one('click', function(){
     $('.div1clone').clone()
               .appendTo('.div1clone'); 
   });
});

class of 'para1clone' inside class of 'div1clone'.


Press the button below to action the above code:


Data Utilities

The .data() Method  Top

Store and retrieve arbitrary data associated with the set of matched elements.

We will use the .data( setKey, value ) signature in our example below, which will store a key-value pair associated with the matched set.

The second signature .data( objectMap ) will store a map of key-value pairs associated with the matched set.

The third signature .data( getKey ) will retrieve arbitrary data from the first element within the matched set for the specified key.

The fourth signature .data() will retrieve all arbitrary data from the first element within the matched set.

Examples of these signatures are available in the reference section.

In the example below when we press the button the first time, we check for arbitrary data before and after attaching it to the 'div8' element below and output some messages.


$(function(){
  $('#btn11').one('click', function(){
    $('#div8').append('Arbitrary data attached to the "div8" element: ' +  
                       $('#div8').data('aKey') + '<br>');
    $('#div8').data('aKey', 101);
    $('#div8').append('Arbitrary data attached to the "div8" element: ' +  
                       $('#div8').data('aKey') + '<br>');
  });
});

div8. Some initial text.

Press the button below to action the above code:


The jQuery.data() Method  Top

Store and retrieve arbitrary data associated with the specified element.

  • The jQuery.data() method is a low-level method which we are showing for completeness.
  • We suggest using the .data() method instead.

The jQuery.dequeue() Method  Top

Execute the next function on the queue for the specified element.

The jQuery.hasData() Method  Top

Return a boolean dependant upon whether an element has any jQuery data associated with it.

We use this methods only signature jQuery.hasData( element ) in our examples below, which will return a boolean dependant upon whether an element has any jQuery data associated with it.

When we press the button the first time, we check for arbitrary data before and after attaching it to the 'div12' element below and output some messages.


$(function(){
  $('#btn15').one('click', function(){
    var $div12 = jQuery('#div12');
    $('#div12').append('Arbitrary data attached to the "div12" element: ' +  
                        $.hasData($div12) + '<br>');
    $.data($div12, 'aKey', 101);
    $('#div12').append('Arbitrary data attached to the "div12" element: ' +  
                        $.hasData($div12) + '<br>');
  });
});

div12. Some initial text.

Press the button below to action the above code:


The jQuery.queue() Method  Top

Show or manipulate the queue of functions to be executed on the matched element.

  • The jQuery.queue() method is a low-level method which we are showing for completeness.
  • We suggest using the .queue() and .dequeue() methods for queue functionality.

The .removeData() Method  Top

Remove the specified data that was previously stored.

We use this methods only signature .removeData( [keyOrArrayOfKeys] ) in our examples below, which will remove the specified data that was previously stored, optionally passing a key or array of keys to select the data.

When we press the left button the first time, we attach some arbitrary data to the 'div13' element below and output a message displaying the attached data. We then remove all data and output another message displaying any remaining attached data.

When we press the middle button the first time, we attach some arbitrary data to the 'div13' element below and output a message displaying the attached data. We then remove 'dKey' data and output another message displaying any remaining attached data.

When we press the right button the first time, we attach some arbitrary data to the 'div13' element below and output a message displaying the attached data. We then remove an array of key data and output another message displaying any remaining attached data.


$(function(){
  $('#btn16').one('click', function(){
    $('#div13').data({ aKey: [0,1,2,3], bKey: { a: 'prop1', b: 'prop2' } });
    $('#div13').append('Arbitrary data attached to the "div13" element: ' +  
                       JSON.stringify($('#div13').data()) + '<br>');
    $('#div13').removeData();
    $('#div13').append('Arbitrary data attached to the "div13" element: ' +  
                       JSON.stringify($('#div13').data()) + '<br>');
  });
  $('#btn17').one('click', function(){
    $('#div13').data({ cKey: [0,1,2,3], dKey: { a: 'prop1', b: 'prop2' } });
    $('#div13').append('Arbitrary data attached to the "div13" element: ' +  
                       JSON.stringify($('#div13').data()) + '<br>');
    $('#div13').removeData( 'dKey' );
    $('#div13').append('Arbitrary data attached to the "div13" element: ' +  
                       JSON.stringify($('#div13').data()) + '<br>');
  });
  $('#btn18').one('click', function(){
    $('#div13').data({ aKey: [0,1,2,3], bKey: [2,2,2], cKey: [52,33], 
                       dKey: { a: 'p1', b: 'p2' } });
    $('#div13').append('Arbitrary data attached to the "div13" element: ' +  
                       JSON.stringify($('#div13').data()) + '<br>');
    $('#div13').removeData( ['aKey','dKey','cKey'] );
    $('#div13').append('Arbitrary data attached to the "div13" element: ' +  
                       JSON.stringify($('#div13').data()) + '<br>');
  });
});

div13. Some initial text.

Press the button below to action the above code:

                   


The jQuery.removeData() Method  Top

Remove the specified data that was previously stored.

Type Utilities

The jQuery.isArray() Method     **DEPRECATED** Top

Return a boolean dependant upon the specified object being a JavaScript Array object.

We use this methods only signature jQuery.isArray( object ) in our example below, which will return a boolean dependant upon the specified object being a JavaScript Array object.

When we press the button the first time, we create some variables and test to see if they are Array objects.


$(function(){
  $('#btn1').one('click', function(){
    var obj1 = 'A string', obj2 = [], obj3 = {}, obj4 = new Object;
    $('#div1').append('Is obj1 an Array object? ' +  $.isArray( obj1 ) + '<br>');
    $('#div1').append('Is obj2 an Array object? ' +  $.isArray( obj2 ) + '<br>');
    $('#div1').append('Is obj3 an Array object? ' +  $.isArray( obj3 ) + '<br>');
    $('#div1').append('Is obj4 an Array object? ' +  $.isArray( obj4 ) + '<br>');
  });
});

div1. Some initial text.

Press the button below to action the above code:



The jQuery.isEmptyObject() Method  Top

Return a boolean dependant upon the specified object having properties or not.

We use this methods only signature jQuery.isEmptyObject( object ) in our example below, which will return a boolean dependant upon the specified object having properties or not.

When we press the button the first time, we create some variables and test to see if they are plain JavaScript objects. If they are we test to see if they are empty objects and in all cases output a message.


$(function(){
  $('#btn5').one('click', function(){
    var array1 = [obj0 = 'aaa', obj1 = [], obj2 = {}, obj3 = { a: 'b' }, obj4 = new Object];
    for (var i=0; i<array1.length; i++) {
      if ($.isPlainObject(array1[i])) {
        if ($.isEmptyObject(array1[i])) {
           $('#div5').append('obj' + i + ': Plain JavaScript object with no properties <br>');
        } else {
           $('#div5').append('obj' + i + ': Plain JavaScript object with properties <br>');
        }
      } else {
        $('#div5').append('obj' + i + ': is not a Plain JavaScript object <br>');  
      }
    }
  });
});

div5. Some initial text.

Press the button below to action the above code:



The jQuery.isFunction() Method     **DEPRECATED** Top

Return a boolean dependant upon the specified object being a JavaScript Function object.

We use this methods only signature jQuery.isFunction( object ) in our example below, which will return a boolean dependant upon the specified object being a JavaScript Function object.

When we press the button the first time, we create some variables and test to see if they are Function JavaScript objects.


$(function(){
  $('#btn4').one('click', function(){
    var obj1 = 'aaa', obj2 = new Function('a', 'return a * a'), obj3 = {}, obj4 = new Object;
    $('#div4').append('Is obj1 a function? ' +  $.isFunction(obj1) + '<br>');
    $('#div4').append('Is obj2 a function? ' +  $.isFunction(obj2) + '<br>');
    $('#div4').append('Is obj3 a function? ' +  $.isFunction(obj3) + '<br>');
    $('#div4').append('Is obj4 a function? ' +  $.isFunction(obj4) + '<br>');
    $('#div4').append('Is function(){} a function? ' +  $.isFunction(function(){}) + '<br>');
  });
});

div4. Some initial text.

Press the button below to action the above code:



The jQuery.isNumeric() Method     **DEPRECATED** Top

Return a boolean dependant upon the specified value being numeric.

We use this methods only signature jQuery.isNumeric( value ) in our example below, which will return a boolean dependant upon the specified value being numeric.

When we press the button the first time, we test some values to see if they are numeric.


$(function(){
  $('#btn3').one('click', function(){
    $('#div3').append('Is null numeric? ' +  $.isNumeric(null) + '<br>');
    $('#div3').append('Is undefined numeric? ' +  $.isNumeric(undefined) + '<br>');
    $('#div3').append('Is "a" numeric? ' +  $.isNumeric("a") + '<br>');
    $('#div3').append('Is "-1" numeric? ' +  $.isNumeric("-1") + '<br>');
    $('#div3').append('Is -1 numeric? ' +  $.isNumeric(-1) + '<br>');
    $('#div3').append('Is +1 numeric? ' +  $.isNumeric(-1) + '<br>');
    $('#div3').append('Is 1.23 numeric? ' +  $.isNumeric(1.23) + '<br>');
    $('#div3').append('Is "1.6456456456e+1?" ' +  $.isNumeric("1.6456456456e+1") + '<br>');
    $('#div3').append('Is "0x00" numeric? ' +  $.isNumeric("0x00") + '<br>');
    $('#div3').append('Is false numeric? ' +  $.isNumeric(false) + '<br>');
    $('#div3').append('Is true numeric? ' +  $.isNumeric(true) + '<br>');
    $('#div3').append('Is NaN numeric? ' +  $.isNumeric(NaN) + '<br>');
    $('#div3').append('Is Infinity numeric? ' +  $.isNumeric(Infinity) + '<br>');
  });
});

div3. Some initial text.

Press the button below to action the above code:



The jQuery.isPlainObject() Method  Top

Return a boolean dependant upon the specified object having been created as a plain JavaScript object.

We use this methods only signature jQuery.isPlainObject( object ) in our example below, which will return a boolean dependant upon the specified object having been created as a plain JavaScript object.

When we press the button the first time, we create some variables and test to see if they are plain JavaScript objects.


$(function(){
  $('#btn2').one('click', function(){
    var obj1 = 'A string', obj2 = [], obj3 = {}, obj4 = new Object;
    $('#div2').append('Is obj1 plain JavaScript object? ' +  $.isPlainObject(obj1) + '<br>');
    $('#div2').append('Is obj2 plain JavaScript object? ' +  $.isPlainObject(obj2) + '<br>');
    $('#div2').append('Is obj3 plain JavaScript object? ' +  $.isPlainObject(obj3) + '<br>');
    $('#div2').append('Is obj4 plain JavaScript object? ' +  $.isPlainObject(obj4) + '<br>');
  });
});

div2. Some initial text.

Press the button below to action the above code:



The jQuery.isWindow() Method     **DEPRECATED** Top

Return a boolean dependant upon the specified argument being a window.

We use this methods only signature jQuery.isWindow( object ) in our example below, which will return a boolean dependant upon the specified argument being a window.

When we press the button the first time, we test some entities to see if they are window objects and output a message.


$(function(){
  $('#btn6').one('click', function(){
    $('#div6').append('Is window a window object? ' +  $.isWindow( window ) + '<br>');
    $('#div6').append('Is #div6 a window object? ' +  $.isWindow( '#div6' ) + '<br>');
  });
});

div6. Some initial text.

Press the button below to action the above code:



The jQuery.isXMLDoc() Method  Top

Return a boolean dependant upon the specified DOM node being within / an XML document XML document.

We use this methods only signature jQuery.isXMLDoc( node ) in our example below, which will return a boolean dependant upon the specified DOM node being within / an XML document XML document.

When we press the button the first time, we test some DOM nodes.


$(function(){
  $('#btn7').one('click', function(){
    $('#div7').append('Is document in/an XML document? ' +  $.isXMLDoc( document ) + '<br>');
    $('#div7').append('Is div7 in/an XML document? ' +  $.isXMLDoc( 'div7' ) + '<br>');
  });
});

div7. Some initial text.

Press the button below to action the above code:



Lesson 10 Complete

In this lesson we took a look at the jQuery copy, data and type utilities.

Related Tutorials

jQuery 3.5 Intermediate - Lesson 9: jQuery General Utilities

What's Next?

This concludes the intermediate section of our jQuery tutorials. We start the advanced section with a look at the lessons available for the section.