jQuery() JQ Home  <<  Core & Internals  <<  jQuery()

• <<    Core & Internals
• jQuery.holdReady()     >>

Wrap an entity in a jQuery object.

Shorthand version $()

Description

The jQuery() method selects the specified entity or entities to wrap in the returned jQuery object.

Syntax

Parameters

Return

A jQuery object either containing the elements matched or empty.

jQuery( selector [, context] ) ExamplesCore  <<  Top

A string containing a CSS or jQuery selector with optional context to wrap in a jQuery object.

Searches the DOM for any elements that match the provided selector within the optional context and create a new jQuery object referencing these elements.

This example turns all paragraph text to indigo on left button press and any paragraph text within a form element to red on right button press:

$(function(){                      // jQuery(document).ready(function(){
  $('#btn1').on('click', function(){     // Here we select relevant click event
    alert('To indigo');
    // selector only
    $('p').css('color', 'indigo'); // Here we select paragraphs
  });
  $('#btn2').on('click', function(){{     // Here we select relevant click event
    alert('To red');
    // selector and optional context
    $('p', 'form').css('color', 'red'); // Here we select form paragraphs
  });
});

As you can see when you press the left button all paragraph text is changed to the colour indigo. We are returning all 'p' nodes from the DOM as our wrapped set and then chaining the .css() function to our wrapped set to change the styling.

When you press the right button we have set a form context so only paragraph text within a form is changed to the colour red. We are returning all 'p' nodes that reside within a 'form' node from the DOM as our wrapped set and then chaining the .css() function to our wrapped set to change the styling.

jQuery( element ) Example Core  <<  Top

A DOM element to wrap in a jQuery object.

Use the jQuery library on a previously selected element.

This example hides the left button if it is pressed and shows left button if hidden on right button press:

$(function(){          
  $('#btn3').on('click', function(){ // Here we select relevant click event
     $(this).slideUp();        // Hide this button
  });
  $('#btn4').on('click', function(){ // Here we select relevant click event
     $(#btn3).slideDown();     // Show above button
  });
});

jQuery( elementArray ) Example Core  <<  Top

An array of DOM elements to wrap in a jQuery object.

Use the jQuery library on a previously selected array of elements.

This example first selects all 'p' nodes and then turns all text red on button press:

$(function(){
  $('#btn5').on('click', function(){ // Here we select relevant click event
    var $para = $('p'); // Create an elementArray of 'p' only nodes
    $($para).css('color', 'red'); // Turn items in elementArray to red
  });
});

jQuery( object ) Example Core  <<  Top

A plain JavaScript object to wrap in a jQuery object.

Wrap a plain JavaScript object so we can use jQuery methods on it.

At the time of writing, version 3.5.1, the only operations supported on plain JavaScript objects wrapped in jQuery are: .data(), .prop(), .on(), .off(), .trigger() and .triggerHandler().

Using the .data() on a plain JavaScript object will result in a new property on the object called jQuery{randomNumber}.

In this example when the button is pressed we firstly create a plain JavaScript object with some properties and wrap it with jQuery. We then do some tests on the wrapped object and hold the results within an array which we alert at the end.

(function(){
  $('#btn6').on('click', function(){ // Here we select relevant click event
    var anArray = new Array(3);
    var plainObj = {aProp:'Ring', bProp:'Ding'}; // Our Plain JS Object
    var $plainObj = $(plainObj); // Wrap our JS object with jQuery
    anArray[0] = $plainObj.prop('aProp'); // Access property
    $plainObj.prop('aProp', 'Wing'); // Set property 
    anArray[1] = $plainObj.prop('aProp'); // Access changed property 
    $plainObj.data('aKey', 'aValue'); // Using .data()
    console.log($plainObj); // Check in Firebug to see new property
    $plainObj.bind('anEvent', function (){
                 anArray[2] = 'eventName was called';});
    $plainObj.trigger('anEvent');
    alert(anArray); 
  });
});

jQuery( jQuery object ) Example Core  <<  Top

Clone the specified jQuery object.

This example creates a jQuery object containing 'p' nodes and then clones it.

$(function(){
  $('#btn7').on('click', function(){ // Here we select relevant click event
    var $para = $('p'); // Create an elementArray of 'p' only nodes
    var $paraB = $($para); // Here we clone our jQuery object
    console.log($paraB); // Check in Firebug to see cloned jQuery object
  });
});

jQuery() Example Core  <<  Top

Return an empty jQuery object.

This example returns an empty jQuery object and then checks the length of the object to prove it has been created.

$(function(){
  $('#btn8').on('click', function(){ // Here we select relevant click event
    var $para = $(); // Create an empty jQuery object
    alert('Length of $para is ' + $para.length); // length property
  });
});

jQuery( html [, ownerDocument ) ExamplesCore  <<  Top

Creates DOM elements as needed from the specified string of raw HTML, into the optional ownerDocument when specified

When the HTML is more complex than a single HTML element without attributes, as shown in our examples below, the creation of the elements is handled by the browser's innerHTML mechanism.

Clicking the left button will add some HTML before the left button below every time the button is clicked. Clicking the right button will wrap some HTML in a jQuery object and then iterate through it.

$(function(){
  $('#btn9').on('click', function(){ // Here we select relevant click event
    // Add some HTML
    $('<p><strong>Button <em>text</em>.</strong>></p>').appendTo('#para9'); 
  });
  $('#btn10').on('click', function(){ // Here we select relevant click event
    var anArray = new Array(3);
    // Create and Iterate over the created HTML
    $('<div><p>P1</p><p>P2</p><p>P3</p></div>').find('p').each(function(i) {
      anArray[i] = (i + 1) + ' = ' + $(this).text() + '\n';
    });
    alert(anArray);
  });
});

jQuery( htmlElement, attributes ) Example Core  <<  Top

A string defining a single, standalone, HTML element with optional specification of attributes.

This example displays an image, below the button, when the button is pressed the first time. It also opens an alert window, displaying the images title text, when the image is clicked on.

$(function(){
  $('#btn11').one('click', function(){ // Here we select relevant click event
    // Below we create our single HTML element and its properties
    $('<img>', {
      src: '../../../images/thaigreencurrysmall.webp',
      alt: 'Thai Green Curry',
      title: 'Hot and Spicy Thai Green Curry, Yummy',
      click: function(){
        alert($(this).attr('title'));
      }
    })
    // Below we add some CSS
    .css({
      cursor: 'pointer',
      border: '2px solid blue',
      padding: '20px',
      backgroundColor: 'green'
    })
    .appendTo('#div11'); // Here we append our HTML
  });
});

jQuery( callback ) Example Core  <<  Top

Binds a function to be executed when the DOM has finished loading.

Some HTML was added after code below when the DOM was ready.

$(function(){
  // Add some HTML when DOM is ready
  $('<p><strong>This <em>text added</em> when the DOM ready.</strong>></p>')
    .appendTo('#para12'); 
  });
});

Related Tutorials

jQuery Basic Tutorials - Lesson 2 - jQuery Core & Internals

• <<    Core & Internals
• jQuery.holdReady()     >>