I would like to know the correct way, by following good practices, to create functions in jQuery.
I've used it like this:
var focusToEnd = function() {
...
}
And also like this:
; (function($) {
$.fn.focusToEnd = function() {
return this.each(function() {
var v = $(this).val();
$(this).focus().val("").val(v);
});
};
But I do not know which one is right, or if it has no difference.
To extend jQuery (read plugin) there is the function jQuery.fn.extend () .
Example:
$.fn.extend({
alertar: function () {
return this.each(function () {
alert($(this).text());
});
},
exibirNoConsole: function () {
return this.each(function () {
console.log($(this).text());
});
}
});
$('.comment').alertar(); // exibe os textos dos elementos com a classe '.comment' como alert
$('.comment').exibirNoConsole(); // mesmo do acima só que no console
Pay attention not to be confused with the $ .extend function that works for any object. $.fn.extend(funcoes) is equivalent to $.extend($.fn, funcoes) .
jQuery is a JavaScript library that offers you manipulation of HTML documents (DOM), events, animation, ajax, JavaScript utilities in general, among others.
If the function you have developed makes sense be close to this range of functionalities consider joining it next to jQuery (via the method shown above). Think of your role as a plugin .
Note that I have answered how to create a function in jQuery (the library) and not in JavaScript
In JavaScript it's very simple:
function hello() {
alert('Hello World');
}
I noticed from your question that there was some confusion between what a JavaScript function is and a jQuery function . There are no jQuery functions , they are all JavaScript at the end of the day. What is possible is to link a function that you have developed to the jQuery object (the famous $ ).
I recommend studying the basics of JavaScript before using any library (especially if extensive like jQuery) so you do not mix the concepts in learning.
jQuery is just a library built with JavaScript, and functions are a language feature, not jQuery.
Your two examples are valid ways to create functions, and there are still other ways. As ways of creating functions, they are not so different. But its use is quite different.
In the first case, var focusToEnd = function... you are creating a function and assigning it to the focusToEnd variable. From here, you can call your function with focusToEnd() .
In the second case, you are "hanging" the function in $.fn , which is a special jQuery object used as prototype of all objects created with $('um_seletor_aqui') . The function can not be called with focusToEnd() , only as a method of a jQuery object - for example, $('um_seletor_aqui').focusToEnd() .
In the second case, therefore, you are creating a jQuery plugin. In the first, a common function.
The syntax for creating a function is:
function nomeDaFuncao(){
//conteúdo...
}
After that you can call her in various ways ...