Category: References

  • Utilities

    Jquery provides serveral utilities in the formate of $(name space). These methods are helpful to complete the programming tasks.a few of the utility methods are as show below.

    $.trim()

    $.trim() is used to Removes leading and trailing whitespace

    $.trim( "    lots of extra whitespace    " );
    

    $.each()

    $.each() is used to Iterates over arrays and objects

    $.each(["foo","bar","baz"],function(idx, val){
       console.log("element "+ idx +" is "+ val );});
     
    $.each({ foo:"bar", baz:"bim"},function(k, v){
       console.log( k +" : "+ v );});

    .each() can be called on a selection to iterate over the elements contained in the selection. .each(), not $.each(), should be used for iterating over elements in a selection.

    $.inArray()

    $.inArray() is used to Returns a value’s index in an array, or -1 if the value is not in the array.

    var myArray =[1,2,3,5];if( $.inArray(4, myArray )!==-1){
       console.log("found it!");}

    $.extend()

    $.extend() is used to Changes the properties of the first object using the properties of subsequent objects.

    var firstObject = { foo: "bar", a: "b" };
    var secondObject = { foo: "baz" };
     
    var newObject = $.extend( firstObject, secondObject );
     
    console.log( firstObject.foo ); 
    console.log( newObject.foo );
    

    $.proxy()

    $.proxy() is used to Returns a function that will always run in the provided scope — that is, sets the meaning of this inside the passed function to the second argument

    varmyFunction=function(){
       console.log(this);};var myObject ={
       foo:"bar"};myFunction();// windowvar myProxyFunction = $.proxy( myFunction, myObject );myProxyFunction();

    $.browser

    $.browser is used to give the information about browsers

    jQuery.each( jQuery.browser,function(i, val){$("<div>"+ i +" : <span>"+ val +"</span>").appendTo( document.body );});

    $.contains()

    $.contains() is used to returns true if the DOM element provided by the second argument is a descendant of the DOM element provided by the first argument, whether it is a direct child or nested more deeply.

    $.contains( document.documentElement, document.body );
    $.contains( document.body, document.documentElement );
    

    $.data()

    $.data() is used to give the information about data

    <html lang = "en"><head><title>jQuery.data demo</title><script src = "https://code.jquery.com/jquery-1.10.2.js"></script></head><body><div>
    
         The values stored were &lt;span&gt;&lt;/span&gt;
            and &lt;span&gt;&lt;/span&gt;&lt;/div&gt;&lt;script&gt;
         var div = $( "div" )[ 0 ];
         jQuery.data( div, "test", {
            first: 25,
            last: "tutorials"
         });
         $( "span:first" ).text( jQuery.data( div, "test" ).first );
         $( "span:last" ).text( jQuery.data( div, "test" ).last );
      &lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

    An output would be as follows

    The values stored were 25 and tutorials
    

    $.fn.extend()

    $.fn.extend() is used to extends the jQuery prototype

    <html lang = "en"><head><script src = "https://code.jquery.com/jquery-1.10.2.js"></script></head><body><label><input type = "checkbox" name = "android"> 
    
         Android&lt;/label&gt;&lt;label&gt;&lt;input type = "checkbox" name = "ios"&gt; IOS&lt;/label&gt;&lt;script&gt;
         jQuery.fn.extend({
            check: function() {
               return this.each(function() {
                  this.checked = true;
               });
            },
            uncheck: function() {
               return this.each(function() {
                  this.checked = false;
               });
            }
         });
         // Use the newly created .check() method
         $( "input[type = 'checkbox']" ).check();
      &lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

    It provides the output as shown below −https://www.tutorialspoint.com/jquery/src/fn.utilities.htm

    $.isWindow()

    $.isWindow() is used to recognise the window

    <!doctype html><html lang = "en"><head><meta charset = "utf-8"><title>jQuery.isWindow demo</title><script src = "https://code.jquery.com/jquery-1.10.2.js"></script></head><body>
    
      Is 'window' a window? &lt;b&gt;&lt;/b&gt;&lt;script&gt;
         $( "b" ).append( "" + $.isWindow( window ) );
      &lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

    It provides the output as shown below −https://www.tutorialspoint.com/jquery/src/iswindow.htm

    $.now()

    It returns a number which is representing the current time

    (new Date).getTime()
    

    $.isXMLDoc()

    $.isXMLDoc() checks whether a file is an xml or not

    jQuery.isXMLDoc( document )
    jQuery.isXMLDoc( document.body )
    

    $.globalEval()

    $.globalEval() is used to execute the javascript globally

    functiontest(){
       jQuery.globalEval("var newVar = true;")}test();

    $.dequeue()

    $.dequeue() is used to execute the next function in the queue

    <!doctype html><html lang = "en"><head><meta charset = "utf-8"><title>jQuery.dequeue demo</title><style>
    
         div {
            margin: 3px;
            width: 50px;
            position: absolute;
            height: 50px;
            left: 10px;
            top: 30px;
            background-color: green;
            border-radius: 50px;
         }
         div.red {
            background-color: blue;
         }
      &lt;/style&gt;&lt;script src = "https://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;&lt;/head&gt;&lt;body&gt;&lt;button&gt;Start&lt;/button&gt;&lt;div&gt;&lt;/div&gt;&lt;script&gt;
         $( "button" ).click(function() {
            $( "div" )
            .animate({ left: '+ = 400px' }, 2000 )
            .animate({ top: '0px' }, 600 )
    			
            .queue(function() {
               $( this ).toggleClass( "red" );
               $.dequeue( this );
            })
    			
            .animate({ left:'10px', top:'30px' }, 700 );
         });
      &lt;/script&gt;&lt;/body&gt;&lt;/html&gt;</pre>

  •  Properties

    In jQuery, properties generally refer to the attributes and values associated with DOM elements that can be accessed or manipulated using jQuery methods.

    jQuery Properties

    In the following table, we have listed all the jQuery Properties −

    Sr.No.Methods & Description
    1jqueryThe jquery property returns the version of the jQuery library in use.
    2jQuery.fx.intervalSets the interval (in milliseconds) for running animations. Default is 13ms.
    3jQuery.fx.offIf true, disables all animations. If false, animations are enabled.
    4lengthReturns the number of elements in the jQuery collection.
  • Miscellaneous Reference

    The Miscellaneous methods in jQuery are a set of functions that do not fall into specific categories like DOM manipulation, event handling, or AJAX. They provide additional functionalities that enhance the flexibility and usability of jQuery.

    Common miscellaneous methods include $.each(), $.extend(), $.data(), $.proxy(), and $.noConflict(), etc.

    jQuery Miscellaneous Methods

    In the following table, we have listed all the jQuery Miscellaneous Methods −

    Sr.No.Methods & Description
    1data()Gets or sets data associated with elements.
    2each()Iterates over elements, executing a function for each.
    3get()Retrieves DOM elements by index or as an array.
    4index()Gets the index position of an element among its siblings.
    5removeData()Removes data associated with elements.
    6toArray()Converts the jQuery object to a plain JavaScript array.
  • HTML/CSS Reference

    The jQuery HTML/CSS references are a set of methods provided by jQuery to manipulate HTML content and CSS properties of elements.

    • HTML Methods: These methods allow you to create, modify, and remove HTML elements and content dynamically.
    • CSS Methods: These methods enable you to get and set CSS properties, control element styles, and manage CSS classes.

    jQuery HTML/CSS Methods

    In the following table, we have listed all the jQuery HTML/CSS Methods −

    The methods below work for both HTML and XML documents.

    In the following table, we have listed all the jQuery Effect Methods −

    Sr.No.Methods & Description
    1addClass()It is used to add one or more class named to the selected elements.
    2after()Inserts content after the selected elements.
    3append()Inserts content at the end of the selected elements.
    4appendTo()Inserts HTML elements at the end of the target elements.
    5attr()Gets or sets the value of an attribute for the selected elements.
    6before()Inserts content before the selected elements.
    7clone()Creates a deep copy of the selected elements.
    8css()Gets or sets the style properties of the selected elements.
    9detach()Removes the selected elements from the DOM while keeping their data and events.
    10empty()Removes all child nodes from the selected elements.
    11hasClass()Checks if any of the selected elements have a specified class.
    12height()Gets or sets the height of the selected elements.
    13html()Gets or sets the HTML contents of the selected elements.
    14innerHeight()Gets the inner height (includes padding) of the selected elements.
    15innerWidth()Gets the inner width (includes padding) of the selected elements.
    16innerAfter()Inserts HTML elements after the selected elements.
    17innerBefore()Inserts HTML elements before the selected elements.
    18offset()Gets or sets the offset (position relative to the document) of the selected elements.
    19offsetParent()Gets the closest positioned ancestor element.
    20outerHeight()Gets the outer height (includes padding, border, and optionally margin) of the selected elements.
    21outerWidth()Gets the outer width (includes padding, border, and optionally margin) of the selected elements.
    22position()Gets the current position of the selected elements relative to the offset parent.
    23prepend()Inserts content at the beginning of the selected elements.
    24prependTo()Inserts HTML elements at the beginning of the target elements
    25prop()Gets or sets the properties of the selected elements.
    26remove()Removes the selected elements from the DOM.
    27removeAttr()Removes an attribute from each element in the set of matched elements.
    28removeClass()Removes one or more class names from the selected elements.
    29removeProp()Removes a property for the set of matched elements.
    30replaceAll()Replaces the target elements with the selected elements.
    31replaceWith()Replaces the selected elements with new content.
    32scrollLeft()Gets or sets the horizontal scroll position of the selected elements.
    33scrollTop()Gets or sets the vertical scroll position of the selected elements.
    34text()Gets or sets the text content of the selected elements.
    35toggleClass()Adds or removes one or more class names from the selected elements.
    36unwrap()Removes the parent element of the selected elements.
    37val()Gets or sets the value of form elements.
    38width()Gets or sets the width of the selected elements.
    39wrap()Wraps an HTML structure around each selected element.
    40wrapAll()Wraps an HTML structure around all selected elements.
    41wrapInner()Wraps an HTML structure around the content of each selected element.
  • Effects Reference

    The jQuery Effects are predefined methods in jQuery library that allow us to add animations and transitions to our web elements. These effects can be showing and hiding elements, fading elements in and out, sliding elements, etc.

    Why to use jQuery Effects?

    We can use the jQuery effects in the following cases −

    • Interactive User Experience: By adding smooth transition and animation effects, we can make our web application more interactive and pleasant for the user to use.
    • Visual Appeal: Effects will make our website more attractive and eye–catching, capturing the user’s attention.
    • Easy to Use: jQuery simplifies the implementation of complex animations and effects with easy-to-use methods, which saves the time and effort.

    jQuery Effect Methods

    In the following table, we have listed all the jQuery Effect Methods −

    Sr.No.Methods & Description
    1animate()It is used to perform custom animations on selected elements.
    2clearQueue()It clears the queue of the selected elements.
    3delay()It sets a delay for the execution of the next item in the queue.
    4dequeue()It removes the next function from the queue and executes it.
    5fadeIn()It fades in the selected elements.
    6fadeOut()It fades out the selected elements.
    7fadeTo()It fades the selected elements to a given opacity.
    8fadeToggle()It toggles between fading in and fading out the selected elements.
    9finish()It stops the currently running animations, removes all queued animations, and completes all animations for the selected elements.
    10hide()It hides the selected elements.
    11queue()It shows the queue of functions to be executed on the selected elements.
    12show()It displays the selected elements.
    13slideDown()It slides down the selected elements.
    14slideToggle()It toggles between sliding up and sliding down the selected elements.
    15slideUp()It slides up the selected elements.
    16stop()It stops the currently running animations on the selected elements.
    17toggle()It toggles between hiding and showing the selected elements.
  • Events Reference

    The jQuery Events are actions that happens in the DOM (Document Object Model), which can be detected and used to trigger JavaScript functions.

    jQuery simplifies event handling by providing methods to attach event handlers to elements and to trigger events. Clicking a button, hovering over an element, submitting a form, or resizing a window are common examples of events in jQuery.

    jQuery Events Methods

    In the following table, we have listed all the jQuery Methods used to handle events −

    Sr.No.Methods & Description
    1bind()Attach an event handler function for one or more events to the selected elements.
    2blur()Bind a function to the blur event of each matched element.
    3change()Bind a function to the change event of each matched element.
    4click()Bind a function to the click event of each matched element.
    5dblclick()Bind a function to the dblclick event of each matched element.
    6delegate()Attach a handler to one or more events for all elements that match the selector, now or in the future, based on a specific set of root elements.
    7error()Bind a function to the error event of each matched element.
    8focus()Bind a function to the focus event of each matched element.
    9focusin()Bind a function to the focusin event of each matched element.
    10focusout()Bind a function to the focusout event of each matched element.
    11hover()Bind one or two handlers to the matched elements, to be executed when the mouse pointer enters and leaves the elements.
    12isDefaultPrevented()Determine if the default action has been prevented by an event.
    13isImmediatePropagationStopped()Determine if immediate propagation for an event has been stopped.
    14isPropagationStopped()Determine if propagation for an event has been stopped.
    15keydown()Bind a function to the keydown event of each matched element.
    16keypress()Bind a function to the keypress event of each matched element.
    17keyup()Bind a function to the keyup event of each matched element.
    18live()Attach an event handler function for one or more events to the selected elements.
    19mousedown()Bind a function to the mousedown event of each matched element.
    20mouseenter()Bind a function to the mouseenter event of each matched element.
    21mouseleave()Bind a function to the mouseleave event of each matched element.
    22mousemove()Bind a function to the mousemove event of each matched element.
    23mouseout()Bind a function to the mouseout event of each matched element.
    24mouseover()Bind a function to the mouseover event of each matched element.
    25mouseup()Bind a function to the mouseup event of each matched element.
    26off()Remove an event handler.
    27on()Attach an event handler function for one or more events to the selected elements.
    28one()Attach a handler to an event for the elements. The handler is executed at most once per element.
    29preventDefault()Prevent the default action of the event from being triggered.
    30$.proxy()Take an existing function and return a new one with a particular context.
    31ready()Specify a function to execute when the DOM is fully loaded.
    32resize()Bind a function to the resize event of each matched element.
    33scroll()Bind a function to the scroll event of each matched element.
    34select()Bind a function to the select event of each matched element.
    35stopImmediatePropagation()Stop other handlers from being executed immediately.
    36stopPropagation()Stop the event from bubbling up the DOM tree, preventing parent elements from being notified of the event.
    37submit()Bind a function to the submit event of each matched element.
    38toggle()Display or hide the matched elements based on their visibility.
    39trigger()Execute all handlers and behaviors attached to the matched elements for the given event type.
    40triggerHandler()Execute all handlers attached to an element for an event.
    41undelegate()Remove a handler from the event for all elements which match the current selector, based upon a specific set of root elements.
    42unbind()Remove a previously-attached event handler from the elements.

    Event Attributes

    The following event properties/attributes are available and safe to access in a platform independent manner −

    Sr.No.Methods & Description
    1currentTargetIdentifies the current element within the event bubbling phase.
    2dataThe value, if any, passed as the second parameter to the bind() command when the handler was established.
    3delegateTargetIdentifies the element on which the event handler was attached originally.
    4namespaceSpecifies the namespace specified when the event was triggered.
    5pageXFor mouse events, specifies the horizontal coordinate of the event relative to the document.
    6pageYFor mouse events, specifies the vertical coordinate of the event relative to the document.
    7relatedTargetFor mouse events, identifies the other element involved in the event (e.g., when mouse enters or leaves an element).
    8resultFor specific events, holds the result of the action (e.g., for drag events).
    9targetIdentifies the element that triggered the event.
    10timeStampThe time (in milliseconds) when the event was triggered.
    11typeSpecifies the type of event that was triggered (e.g., click, hover).
    12whichFor keyboard events, specifies the key code of the key that triggered the event. For mouse events, specifies the button that was pressed (1 for left, 2 for middle, 3 for right).

  • Selectors Reference

    The jQuery Selectors are used to “find” (or select) HTML elements based on their name, id, classes, types, attributes, values, etc. jQuery provides set of selectors, including basic selectors, attribute selectors, etc.

    These selectors simplifies the process of identifying and interacting with specific elements, reducing the complexity of JavaScript code.

    jQuery Selectors Reference

    In the following table, we have listed all the jQuery Selectors −

    Sr.No.Methods & Description
    1*Selects all elements.
    2#idSelects an element with the specified id.
    3.classSelects all elements with the specified class.
    4.class,.classSelects all elements with any of the specified classes.
    5elementSelects all elements with the specified tag name.
    6el1,el2,el3Selects all elements with any of the specified tag names.
    7:firstSelects the first element in the set of matched elements.
    8:lastSelects the last element in the set of matched elements.
    9:evenSelects even elements (based on zero-index).
    10:oddSelects odd elements (based on zero-index).
    11:first-childSelects every element that is the first child of its parent.
    12:first-of-typeSelects every element that is the first of its type among its siblings.
    13:last-childSelects every element that is the last child of its parent.
    14:last-of-typeSelects every element that is the last of its type among its siblings.
    15:nth-child(n)Selects every element that is the nth child of its parent.
    16:nth-last-child(n)Selects every element that is the nth child of its parent, counting from the last child.
    17:nth-of-type(n)Selects every element that is the nth of its type among its siblings.
    18:nth-last-of-type(n)Selects every element that is the nth of its type among its siblings, counting from the last.
    19:only-childSelects every element that is the only child of its parent.
    20:only-of-typeSelects every element that is the only one of its type among its siblings.
    21parent > childSelects all child elements that are a direct child of the parent.
    22parent descendantSelects all descendant elements that are a descendant of the parent.
    23element + nextSelects the next element that is immediately preceded by the element.
    24element ~ siblingsSelects all siblings elements that are preceded by the element.
    25:eq(index)Selects the element with the specified index.
    26:gt(no)Selects all elements with an index greater than the specified number.
    27:lt(no)Selects all elements with an index less than the specified number.
    28:not(selector)Selects all elements that do not match the given selector.
    29:headerSelects all header elements (<h1> to <h6&g;).
    30:animatedSelects all elements that are currently being animated.
    31:focusSelects the element that currently has focus.
    32:contains(text)Selects all elements that contain the specified text.
    33:has(selector)Selects all elements that have at least one element matching the specified selector as a descendant.
    34:emptySelects all elements that have no children (including text nodes).
    35:parentSelects all elements that have at least one child node (either an element or text).
    36:hiddenSelects all elements that are hidden.
    37:visibleSelects all elements that are visible.
    38:rootSelects the document’s root element.
    39:lang(language)Selects all elements with the specified language attribute.
    40[attribute]Selects all elements with the specified attribute.
    41[attribute=value]Selects all elements with the specified attribute and value.
    42[attribute!=value]Selects all elements with the specified attribute and not the specified value.
    43[attribute$=value]Selects all elements with the specified attribute ending with the specified value.
    44[attribute|=value]Selects all elements with an attribute value that either exactly matches the specified value or starts with the specified value followed by a hyphen (-).
    45[attribute^=value]Selects all elements with the specified attribute beginning with the specified value.
    46[attribute~=value]Selects all elements with the specified attribute containing the specified value (space-separated list).
    47[attribute*=value]Selects all elements with the specified attribute containing the specified value.
    48:inputSelects all input, textarea, select, and button elements.
    49:textSelects all input elements with type “text”.
    50:passwordSelects all input elements with type “password”.
    51:radioSelects all input elements with type “radio”.
    52:checkboxSelects all input elements with type “checkbox”.
    53:submitSelects all input elements with type “submit”.
    54:resetSelects all input elements with type “reset”.
    55:buttonSelects all button elements and input elements with type “button”.
    56:imageSelects all input elements with type “image”.
    57:fileSelects all input elements with type “file”.
    58:enabledSelects all enabled elements.
    59:disabledSelects all disabled elements.
    60:selectedSelects all selected options in a dropdown.
    61:checkedSelects all checked checkboxes or radio buttons.