JQuery is a JavaScript library that allows developers to easily manipulate HTML, CSS, and events. A JQuery plugin extends JQuery's functionality by adding new methods to its prototype object. Plugins provide reusable code and save development time. A plugin consists of a function, options, callbacks, and the ability to chain methods. The 'this' keyword refers to DOM elements or JQuery objects depending on the context.

1. JQuery Plugin Development
Faruk Hossen

2. What is JQuery
➢ JQuery is a Javascript Library.
➢ The jQuery library contains the following features:
○ HTML/DOM manipulation
○ CSS manipulation
○ HTML event methods
○ Effects and animations
○ AJAX
○ Utilities

3. ➢jQuery is a javascript object.
var jQuery = function( ) {
//object properties go here.
};
JQuery Object

4. ➢ ‘$’ is shorthand for jQuery
➢ When we call the $() function and pass a selector to it,
we create a new object
$( document );
$(“div.menu”);
$(“div.menu”).click(function(){
$(this).find(“ul”).show();
}
JQuery Object

5. ➢Javascript prototype object is
■ $.fn or
■ jQuery.fn
JQuery Prototype Object

6. ➢ All objects have a prototype property.
➢ The JavaScript prototype property also allows you to add new methods to
an existing prototype.
➢ It is simply an object from which other objects can inherit properties
What is prototype of an object in js

7. function person(first, last, age, eye) {
this.firstName = first;
this.lastName = last;
this.age = age;
this.eyeColor = eye;
}
person.prototype.name = function() {
return this.firstName + " " + this.lastName
};
var myFather = new person("John", "Doe", 50, "blue");
console.log(myFather.name());
What is prototype of an object in js

8. function Person(name) {
this.name = name;
}
Person.prototype.sayHello = function () {
alert(this.name + " says hello");
};
var james = new Person("James");
james.sayHello(); // Alerts "James says hello"
What is prototype of an object in js

9. jQuery.fn = jQuery.prototype.
from jquery source code:
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {
// ...
return this;
}
// jQuery API methods
}
What is $.fn

10. ➢ In object-oriented programming languages, this (or self) is a keyword
which can be used in instance methods to refer to the object
➢ There are really two main contexts of 'this' in jQuery.
○ ‘this’ first refers to a DOM element
○ ‘this’ refers to a jQuery object.
What is ‘this’

11. $( "p" ).click(function() {
$( this ).slideUp();//is it wrong?
this.slideUp() //is it wrong?
});
What is ‘this’ (continues…)

12. jQuery.fn.newTarget = function() {
this.hide(); //will it show error?
$(this).hide(); //will it show error?
}
$(‘p’).newTarget();
What is ‘this’ (continues…)

13. What is JQuery Plugin
➢ A jQuery plugin is simply a new method that we use to extend jQuery's
prototype object.
➢ By extending the prototype object you enable all jQuery objects to inherit
any methods that you add.
➢ As established, whenever you call jQuery() you're creating a new jQuery
object, with all of jQuery's methods inherited.

14. ➢Portability
➢Time
Why JQuery Plugin

15. ➢ Packaging a common function within a jQuery plugin will normally make
it more portable.
➢ Doing so allows you to easily integrate the plugin into any number of
projects within a short amount of time.
➢ Reusability, another buzz word, comes hand in hand with this.
portability

16. ➢ It will save you (and your users) time.
➢ The time it takes to develop a robust plugin is clearly worth it when you
consider what it enables.
Time

17. ➢ jQuery allows methods to be added to its library.
➢ When called, these methods are passed the jQuery object within the
JavaScript ‘this’ object.
➢ The DOM nodes can be manipulated as required
➢ The method should return ‘this’ so other functions can be chained.
How JQuery Plugin Works

18. 1.plugin function
2.options
3.callback
4.ability to chain.
JQuery Plugin Components

19. $( "#clickme" ).click(function() {
$( "#book" ).animate({
opacity: 0.25,
left: "+=50",
height: "toggle"
}, 5000, function() {
// Animation complete.
});
});
JQuery Plugin Components

20. (function($) {
jQuery.fn.hightlight = function(options) { ... };
})(jQuery);
(function($) {
$.fn.hightlight = function(options) { ... };
})(jQuery);
Note: Using ‘jQuery’ rather than ‘$’ ensures there are no conflicts with other
JavaScript libraries.
JQuery Plugin Declaration

21. //default settings
(function($) {
$.fn.highlight = function(options) {
var settings = {‘highlight-color’:’white’,’highlight-background’:’yellow’};
$.extend(settings,options);
};
})(jQuery);
Options in Plugin

22. 1. $(“p”).highlight(); //uses default settings.
1. $(“p”).highlight(//uses color:white,background:yellow
‘color’:’white’;
);
1. $(“p”).highlight(//uses color:white,background:red
‘color’:’white’
‘background’:’red’;
);
Passing Options

23. (function($) {
$.fn.highlight = function(options,callback) {
var settings = {‘highlight-color’:’white’,’highlight-background’:’yellow’};
$.extend(settings,options);
callback.call(this);
};
})(jQuery);
Callback function

24. 1. $(“p”).highlight(//uses color:white,background:red
{
‘color’:’white’
‘background’:’red’
},function(){
//execute after complete
}
);
Callback function

25. (function($) {
$.fn.highlight = function(options,callback) {
var settings = {‘highlight-color’:’white’,’highlight-background’:’yellow’};
$.extend(settings,options);
callback.call(this);
return this; // it is for chaining
};
})(jQuery);
Ability to chain

26. Ability to chain

27. THANKS