How about if we want to make our own, though? Even though it might sound daunting, it’s not too bad. Let’s look at a small example:
$.fn.bluey = function() {
this.css( "background-color", "blue" );
};
We define the function with the $.fn, and then name it bluey. Not sure if that is a word or not, but hey, why not?!
Then, the function() keyword creates the function, and the CSS applies the styles to whatever element uses the bluey function.
So, what does the whole page look like?
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$.fn.bluey = function () {
this.css("background-color", "blue");
};
$(function () {
$("button").click(function () {
$("#changeDiv").bluey();
});
});
</script>
</head>
<body>
<div id="changeDiv">Test information</div>
<button id="btnSubmit">Click</button>
</body>
</html>
If you were to run this page, the background color of our div tag would turn blue when you click the button. Low and behold, we have a new look based on our function.
We can have it apply to any tags we want. And we can add more changes to the same jQuery plugin function. It might look like this:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$.fn.bluey = function () {
this.css("background-color", "blue");
this.css("color", "white");
this.css("font-size", 24);
};
$(function () {
$("button").click(function () {
$("#changeDiv").bluey();
});
});
</script>
</head>
<body>
<div id="changeDiv">Test information</div>
<button id="btnSubmit">Click</button>
</body>
</html>
For this to work in a chaining situation and survive in the real world, we must make some changes to the plugin. First, we have to return this. This will return the object so that more functions can be chained to our plugin. The function definition needs to be put into a Immediately Invoked Function Expression and then we need to pass the function jQuery so that it knows that it is a jQuery plugin and won’t conflict with anything else.
The new fully qualified jQuery plugin looks like this now:
(function($){
$.fn.bluey = function () {
this.css("background-color", "blue");
this.css("color", "white");
this.css("font-size", 24);
return this;
};
}(jQuery));
What this means is that we can do something like this now:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
(function($){
$.fn.bluey = function () {
this.css("background-color", "blue");
this.css("color", "white");
this.css("font-size", 24);
return this;
};
}(jQuery));
$(function () {
$("button").click(function () {
$("#changeDiv").bluey().fadeOut("slow").fadeIn("slow");
});
});
</script>
</head>
<body>
<div id="changeDiv">Test information</div>
<button id="btnSubmit">Click</button>
</body>
</html>
At this point, you can create a simple jQuery plugin. Come on, that’s pretty cool!