How to bind plugin with element

Question

I decide to write a plugin, but there is a moment I don't know,and i can't find documentation about it so I decide to ask here.

For example when we wrote

$("#some_element").nameOfPlugin();

There are a lot of functions in nameOfPlugin, but how some_element connects with the plugin?

An example, or a link to some documentation will be very helpful.

Thanks.

Answer 1

you need to read plugins authoring for that.

this blog post is also a great sample to read.

Answer 2

nameOfPlugin is the prototypal method which when inserted with the script element, extends jQuery so any jQuery objects can contain the method.

All the internal code of nameOfPlugin happens inside of that prototypal method and the scope which is defined.

Simple example of how you are extending jQuery, using Human instead of jQuery.

function Human(){};
Human.prototype.attack = function() { alert('attack') };
var john = new Human;
john.attack();

As far as $() connecting to it, $() returns an array of DOM elements ( one or many ). The plugin gets invoked in the context of each of these, since the object owns the method because it is an instance of the jQuery constructor which owns the plugin methods you've been adding.

$('body').hide() translates to calling the jQuery.prototype.hide method using document.body the DOM reference as the context.

I suggest reading up on prototypal inheritance to understand this. A good resource would be Eloquent JS, particularly chapter 8.

Answer 3

In the jQuery prototype, the this keyword represents the elements selected.

F.ex:

$('#some_element').myPlugin();

$.fn.myPlugin = function() {
  console.log(this); // this = #some_element (jQuery instance)

  // looping through elements and returning the instance 
  // to allow further chaining:
  return this.each(function() {
    console.log(this) // this = #some_element (HTML element)
  });
}

Answer 4

i don't know how search documentation about it

made my day!

http://www.jquery.com

It took me whole 5 seconds to get to http://docs.jquery.com/Plugins/Authoring for instance.