How to create a jQuery function a new jQuery method or plugin

Question

I know that in JavaScript the syntax is as follows   function myfunction param       some code     Is there a way to declare a function in jQuery that can be added to an element  For example       my div   myfunction

User · Answer

Simplest example to making any function in jQuery is  jQuery fn extend       exists  function     return this length        if   selector  exists      do something here

User · Answer

You can always do this   jQuery fn extend      myfunction  function param             code here           OR jQuery extend      myfunction  function param             code here             element  myfunction param

User · Answer

Yup     what you   re describing is a jQuery plugin   To write a jQuery plugin  you create a function in JavaScript  and assign it to a property on the object jQuery fn   E g   jQuery fn myfunction   function param           Some code     Within your plugin function  the this keyword is set to the jQuery object on which your plugin was invoked  So  when you do       my div   myfunction     Then this inside myfunction will be set to the jQuery object returned by     my div     See http   docs jquery com Plugins Authoring for the full story

User · Answer

It sounds like you want to extend the jQuery object via it s prototype  aka write a jQuery plugin   This would mean that every new object created through calling the jQuery function    selector DOM element   would have this method   Here is a very simple example     fn myFunction   function          alert  it works         Demo

User · Answer

From the Docs    function            fn myfunction   function           alert  hello world          return this             jQuery      Then you do       my div   myfunction

User · Answer

You can also use extend  the way you create jQuery plugins      fn extend        myfunction  function                       myfunction2  function                       Usage        my div   myfunction

User · Answer

function            declare function        fn myfunction   function              return true                document  ready function            call function         my div   myfunction

User · Answer

You can write your own jQuery plugins function which can be called on selected elements  like below    function             fn myFunc   function param1  param2             this - jquery object holds your selected elements           jQuery      Call it later like      div   myFunc 1  null

User · Answer

In spite of all the answers you already received  it is worth noting that you do not need to write a plugin to use jQuery in a function  Certainly if it s a simple  one-time function  I believe writing a plugin is overkill  It could be done much more easily by just passing the selector to the function as a parameter  Your code would look something like this   function myFunction  param        param hide        or whatever you want to do           myFunction     my div       Note that the   in the variable name  param is not required  It is just a habit of mine to make it easy to remember that that variable contains a jQuery selector  You could just use param as well

User · Answer

While there is a plethora of documentation   tutorials out there  the simple answer for your question is this      to create a jQuery function  you basically just extend the jQuery prototype     using the fn alias     fn myfunction   function             blah      Inside that function  the this variable corresponds to the jQuery wrapped set you called your function on  So something like     fn myfunction   function          console log this length           foo   myfunction          will flush to the console the number of elements with the class foo   Of course  there is a bit more to semantics than that  as well as best practices  and all that jazz   so make sure you read up on it

User · Answer

Create a  colorize  method     fn colorize   function custom colorize some color        this css  color   some color       return this      Use it       my div   colorize  green      This simple-ish example combines the best of How to Create a Basic Plugin in the jQuery docs  and answers from  Candide   Michael    A named function expression may improve stack traces  etc  A custom method that returns this may be chained   Thanks  Potheek

User · Answer

Yes  methods you apply to elements selected using jquery  are called jquery plugins and there is a good amount of info on authoring within the jquery docs   Its worth noting that jquery is just javascript  so there is nothing special about a  jquery method

User · Answer

To make a function available on jQuery objects you add it to the jQuery prototype  fn is a shortcut for prototype in jQuery  like this   jQuery fn myFunction   function            Usually iterate over the items and return for chainability         this  is the elements returns by the selector     return this each function                  do something to each item matching the selector           This is usually called a jQuery plugin   Example - http   jsfiddle net VwPrm

[javascript] How to create a jQuery function (a new jQuery method or plugin)?

Examples related to javascript

Examples related to jquery

Examples related to function