2

Question 1

I've just started learning jQuery and one thing that puzzles me is function() with a parameter in it, ie: function(e).

[Example 1]

 $("#rating a").click(function(e){
     // stop normal link click
     e.preventDefault();
 }

What is e in function(e)?

[Example 2]

$.post("test.php", function(data) {
    alert("Data Loaded: " + data);
});

How do you know what data is? I assume data is different from e in example 1.

I'm confused as to why function() is different in different senarios...

Question 2 Since we are talking about basic jQuery, here's another jQuery question. What is the difference between this and $(this)?

[Example 3]

$(document).ready(function() {
 // use this to reset several forms at once
$("#reset").click(function() {
    $("form").each(function() {
        this.reset();
    });
});

[Example 4]

   $("a").hover(function(){
       $(this).parents("p").addClass("highlight");
   },function(){
       $(this).parents("p").removeClass("highlight");
   });

});

Nyxynyx
  • 61,411
  • 155
  • 482
  • 830
  • 5
    You should learn JavaScript before diving into jQuery! – Claudiu Jun 22 '11 at 23:34
  • yes i just refreshed my Javascript before getting into jQuery.. may I ask which part should be learnt when learning Javascript? – Nyxynyx Jun 22 '11 at 23:36
  • All of them, those are not jQuery specifics really. Here's something that should help you out: http://ontwik.com/javascript/fundamentals-for-great-jquery-development/ – Claudiu Jun 22 '11 at 23:40
  • Ask different questions separately; don't combine them into one. – Sophie Alpert Jun 22 '11 at 23:46
  • 1
    You ask *"How do you know what `data` is"* ?? Ahem... read the [documentation for `$.post`](http://api.jquery.com/jQuery.post/)... What kind of programmer are you? `:)` – Šime Vidas Jun 22 '11 at 23:51

4 Answers4

3

function(e) -> this is passing in the event object as a parameter. Without e you just don't have access to the event object.

"this" is the object in context to whatever you're doing. If you wrap "this" like $(this) then you have access to all the extensions that jQuery gives you. To be more clear, "this" is usually a DOM object, $(this) is a jQuery object.

xanadont
  • 7,493
  • 6
  • 36
  • 49
2

You can declare functions in one of two ways in JavaScript.

This way:

function MyFunction() {
     //Functiony stuff
}

And this way:

var MyFunction = function() {

};

Using the second method, you can then pass that function to other functions as an argument. Those functions that receive it can then provide it arguments. If you don't define those arguments in your function, then you can't access them. Here's a bit more:

var MyFunction1 = function(message) {
      alert(message);
};

var MyFunction2 = function(alertFunction) {
      if(alertFunction != null)
           alertFunction("Here's another method!");
};

//You  can then call MyFunction and pass it arguments, even if that argument is a function.

MyFunction2(MyFunction1);

Had you not defined the message variable in MyFunction1, you would have never gotten the message that was passed to it via MyFunction2. Hope I didn't make that more complicated than it needed to be... Basically, you can pass functions around, and if you don't provide the variables that methods will pass to it, you can't use them. This is what you're doing when you say something like:

$("MySelector").click(function(e) {
    //Stuff here
});

You're sending an anonymous function to the click function. If you don't provide for the variables that it will pass to you, you can't use them.

Once I realized you could do this a long time ago, it changed the way I wrote JavaScript quite a lot. I'm sure it'll probably do the same for you.

jamesmillerio
  • 3,154
  • 4
  • 27
  • 32
  • 2
    Some factual errors in your post: (1) It doesn't matter whether you use the `function myFunction(){}` or `var myFunction = function(){};` syntax - either way allows you to pass that function as an argument to another function like `someOtherFunction(myFunction);`. – nnnnnn Jun 23 '11 at 01:19
  • 2
    (2) "If you don't define those arguments in your function, then you can't access them" - yes you can. In fact you can pass any number of arguments to a function regardless of how many that function declares explicitly, and the function being called can access those parameters using the `arguments` property - see https://developer.mozilla.org/en/JavaScript/Reference/functions_and_function_scope/arguments. – nnnnnn Jun 23 '11 at 01:19
  • I was aware of your first point, I was just trying to explain it in terms he might understand (assigning something to a variable) so thanks for pointing it out. The second one was news to me so thanks yet again. – jamesmillerio Jun 23 '11 at 04:56
  • This is a helpful answer, and I kind of see what you're saying, but the MyFunction1 / MyFunction2 example isn't completely clear to me. For example, what is alertFunction() and where did that come from? My assumption is that you meant to type MyFunction1() in that place..? And the syntax of how to apply MyFunction2(MyFunction1) is not clear to me, having no frame of past reference to comprehend it. For my lone functioning brain cell, it would help if you expanded the example a bit to make it a complete, working example rather than somewhat abbreviated code. I really want to understand this. – cssyphus Nov 10 '12 at 17:42
1

In your first example:

 $("#rating a").click(function(e){
     // stop normal link click
     e.preventDefault();
 }

e is the event object. It's preventDefault method prevents the default for the used event. In this case click will not have any effect. It is used like return false; but some browser may have different actions. This works for all.

As for this vs $(this)

While inside a function, if this refers to the DOM element that triggered the event, $(this) is still the DOM element that triggered the event, only it is wrapped in a jQuery element by wrapping a $() around it.

check this question on SO jQuery: What's the difference between '$(this)' and 'this'?

Community
  • 1
  • 1
Sinan
  • 5,819
  • 11
  • 39
  • 66
  • Note: JQuery will call the function you provide passing its event object, but the parameter in your function doesn't have to be called 'e' any more than the `$.post` example has to call its parameter 'data' - the parameter name can be anything you like, though obviously 'e' implies 'event' much better than, say, 'x'. If you don't need access to the event object (or to the data, depending on context) in your function you can omit the parameter (though JQuery would still pass it and you could access it via the function `arguments` property). – nnnnnn Jun 23 '11 at 01:32
1

function(x) { ... }

is an anonymous function (i.e. you're not giving it an explicit name) being passed as an argument to those functions (in your examples, passed as an argument to click() and post()). This is usually used for callbacks. The click() function does some stuff and then later on down the line, your anonymous function is invoked as a response to something (a click event, in this case).

The x indicates that this anonymous function takes one parameter and its name within the function's scope will be x. You can name it whatever you want (in one example it's e, in another it's data, but in neither case does it have to use those names). In general, you could make it take as many parameters as you want, like function(x, y, z) { return (x + y + z); } but, in the examples you gave, jQuery is looking for a certain prototype.

Jonathan
  • 1,487
  • 11
  • 12