What does function() mean in jQuery? What is the difference between this and $(this)

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).rea开发者_Go百科dy(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");
   });

});

---

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.

---

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.

---

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'?

---

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.