jQuery Prototype Chain
In this page:
What is $.fn?
$.fn is the object jQuery uses as the prototype for every jQuery-wrapped selection, which is why adding a method to $.fn makes that method available on every result of $(...) afterward. This single object is the mechanism behind jQuery's entire extensibility model.
Example: What is $.fn?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p>Text</p>
<script>
$.fn.shout = function() {
return this.text($(this).text().toUpperCase());
};
$("p").shout();
</script>
</body>
</html>Return this for Chaining
A plugin should normally return this when it finishes changing the selected elements, since this refers to the jQuery object the method was called on. Returning it is what allows other jQuery methods to be chained immediately afterward, matching the behavior users expect from built-in methods.
Example: Return this for Chaining
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p>Text</p>
<script>
$.fn.highlight = function() {
return this.css("background", "yellow");
};
$("p").highlight().css("padding", "10px");
</script>
</body>
</html>Work with Multiple Elements
A jQuery plugin should usually operate on every element in the current selection, not just the first one, since $(...) can match multiple elements at once. The each() method is the standard way to loop through them and apply logic to each element individually inside a plugin.
Example: Work with Multiple Elements
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p>One</p><p>Two</p>
<script>
$.fn.shout = function() {
return this.each(function() {
$(this).text($(this).text().toUpperCase());
});
};
$("p").shout();
</script>
</body>
</html>Use Plugin Scope Safely
Plugin code should avoid creating unnecessary global variables, since those can silently collide with other scripts on the same page. Wrapping a plugin's code in a function expression keeps its helper variables private and inaccessible from outside the plugin.
Example: Use Plugin Scope Safely
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<script>
(function($) {
$.fn.highlight = function() {
const privateColor = "yellow";
return this.css("background", privateColor);
};
})(jQuery);
</script>
</body>
</html>Small Prototype Project
This prototype pattern — attaching functions to $.fn that return this for chaining — is the standard, expected way to add new chainable methods to jQuery, which is why virtually every published jQuery plugin follows it.
Example: Small Prototype Project
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
<p>Text</p>
<script>
$.fn.highlight = function() {
return this.css("background", "yellow");
};
$("p").highlight();
</script>
</body>
</html>Chapter Quiz — Complete all 4 topics to unlock
0/4 topics done
Complete these topics first: