jQuery Properties

jQuery properties provide useful metadata and configuration details about the jQuery library and its instances. These properties allow you to access jQuery’s version, extend its capabilities, or configure its behavior for specific use cases.

1. Core jQuery Properties

Property Description Example
jQuery.fn Alias for jQuery.prototype. You can use this to add custom methods to all jQuery objects. jQuery.fn.myPlugin = function() { ... };
jQuery.fn.init The jQuery object initialization function. Used internally when creating jQuery objects. console.log(jQuery.fn.init);
jQuery.expando A unique string generated for internal use to store data on elements. console.log($.expando);
jQuery.support Contains feature detection results for determining browser support for certain features. console.log($.support.boxModel);
jQuery.fx.interval Controls the speed of animations by adjusting the interval (in milliseconds). Default is 13. jQuery.fx.interval = 20;

2. Version and Build Information

Property Description Example
jQuery.fn.jquery Contains the current version of jQuery being used. console.log($.fn.jquery); // "3.6.4"
jQuery.version Synonym for jQuery.fn.jquery (both return the same value). console.log($.version); // "3.6.4"

3. Configuration and Behavior

Property Description Example
jQuery.ajaxSettings Default settings for AJAX requests. Allows configuration of global AJAX behavior. console.log($.ajaxSettings);
jQuery.cssHooks Contains hooks for CSS properties, allowing custom behavior when getting or setting styles. console.log($.cssHooks);
jQuery.event.special Contains special event hooks for custom event types. console.log($.event.special);
jQuery.fx Controls global animation behavior, including enabling/disabling animations. jQuery.fx.off = true;

4. jQuery Instance-Specific Properties

Property Description Example
.length Returns the number of elements in a jQuery object. let count = $("div").length;
.selector Stores the selector used to create the jQuery object. (Deprecated in jQuery 3.0) console.log($("div").selector);
.context The context in which the jQuery object was created. console.log($("div").context);
.prevObject Stores the previous jQuery object in the chain. let prev = $("div").end();

5. Example Code Snippets

1. Accessing jQuery Version

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery Version</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script>
        $(document).ready(function() {
            console.log("jQuery Version:", $.fn.jquery);
        });
    </script>
</head>
<body>
</body>
</html>

Try It Now

2. Adding a Custom Method to jQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom jQuery Method</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script>
        jQuery.fn.highlight = function(color) {
            return this.css("background-color", color || "yellow");
        };

        $(document).ready(function() {
            $("p").highlight();
        });
    </script>
</head>
<body>
    <p>This paragraph will be highlighted.</p>
</body>
</html>

Try It Now

3. Modifying Animation Interval

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animation Interval</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script>
        jQuery.fx.interval = 50;

        $(document).ready(function() {
            $("#box").animate({ left: "300px" }, 2000);
        });
    </script>
    <style>
        #box {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>

Try It Now

 

4. Using jQuery.support for Feature Detection

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Feature Detection</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
    <script>
        $(document).ready(function() {
            if ($.support.boxModel) {
                console.log("Box Model is supported.");
            } else {
                console.log("Box Model is not supported.");
            }
        });
    </script>
</head>
<body>
</body>
</html>

Try It Now

Key Points

  1. Global vs Instance Properties:
    • Global properties like $.fn.jquery and $.ajaxSettings control the global behavior of jQuery.
    • Instance-specific properties like .length and .context apply to individual jQuery objects.
  2. Customization:
    • Use jQuery.fn to add reusable methods or plugins to jQuery.
    • Modify jQuery.fx.interval or jQuery.fx.off to control animation performance.
  3. Debugging and Compatibility:
    • Use jQuery.support for feature detection and debugging cross-browser issues.
    • Refer to $.expando and .prevObject for advanced debugging of chained calls.