Noob to jQuery -- learning about jQuery.fn.whatever

[csdude55]

As I've mentioned before, I'm just now starting to play with jQuery. I never needed it until I started making my site more mobile friendly, and since I had no choice but to include jQuery for a swipe function, I figure that now's the time to use it for other features.

One of my first working functions was:

jQuery.fn.ajax = function(whichID, url) {
 if (url) {
  var this_url = url.substr(0, url.indexOf('?'));
  var query_string = url.substring(url.indexOf('?') + 1);

  $(document).ready(function() {
   $('#' + whichID).load(
    this_url + '?' + $.param({ query_string })
   );
  });
 }

 else document.getElementById(whichID).style.display = 'none';
}

// Usage
<div onClick="$().ajax('id', 'http://www.example.com')"></div>

At the time, I thought that jQuery.fn.ajax was required to define the function as using jQuery in advance, but now that I've played around a little, I realize that I was wrong. This works just fine:

function ajax(whichID, url) {
 if (url) {
  var this_url = url.substr(0, url.indexOf('?'));
  var query_string = url.substring(url.indexOf('?') + 1);

  $(document).ready(function() {
   $('#' + whichID).load(
    this_url + '?' + $.param({ query_string })
   );
  });
 }

 else document.getElementById(whichID).style.display = 'none';
}

// Usage
<div onClick="ajax('id', 'http://www.example.com')"></div>

So for the sake of my own understanding and education, what, exactly, is the purpose behind using jQuery.fn.ajax?

Am I correct in understanding that if I used jQuery.fn.ajax then I could have removed "whichID" from the parameters, used $(this) in the function instead of whichID, and then called the function using $('#id').ajax('http://www.example.com')? Like so:

// UNTESTED !
jQuery.fn.ajax = function(url) {
 if (url) {
  var this_url = url.substr(0, url.indexOf('?'));
  var query_string = url.substring(url.indexOf('?') + 1);

  $(document).ready(function() {
   $(this).load(
    this_url + '?' + $.param({ query_string })
   );
  });
 }

 else $(this).css('display', 'none');
}

// Usage
<div onClick="$('#id').ajax('http://www.example.com')"></div>

Assuming that's correct, is there an advantage to doing it this way?

[Fotiman]

jQuery.fn.whatever is how you create a jQuery plugin that works on a jQuery object. After calling $('#id'), this (within a chained jQuery function) would be the jQuery object, so you wouldn't need to do $(this).load, instead you would just use this.load.

Note, there is already a jQuery function named "ajax", so you may want to give your function a different name to avoid confusion.

One advantage would be if you want to chain multiple methods.

[csdude55]

That makes sense. I kept reading that jQuery.fn is just a shortcut for jQuery.prototype, but no real explanation of what that meant. It makes sense now, though.

Other than the ability to chain multiple methods, is there any other advantage to declaring it as a plugin rather than using a regular JS function? Speed, browser compatibility, CPU usage, etc?

[csdude55]

After calling $('#id'), this (within a chained jQuery function) would be the jQuery object, so you wouldn't need to do $(this).load, instead you would just use this.load.

Just FYI, I tested it and this didn't work for me. I tried this.load in the third function I posted before (which is the exact function I'm working with), and had an error that "this.load is not a function". I also tried $(this).load, and while I didn't get an error, it didn't do anything, either.

The only thing I've been able to make work is to assign var whichID = this; at the beginning of the function, then use $(whichID).load.

jQuery.fn.ajax = function(url) {
 var whichID = this;

 if (url) {
 var this_url = url.substr(0, url.indexOf('?'));
 var query_string = url.substring(url.indexOf('?') + 1);

 $(document).ready(function() {
  $(whichID).load(
  this_url + '?' + $.param({ query_string })
  );
 });
 }

 else $(whichID).css('display', 'none');
}

[Fotiman]

Other than the ability to chain multiple methods, is there any other advantage to declaring it as a plugin rather than using a regular JS function?

Not really, unless it was a plugin you wanted to share with others, or you thought you might want to use for multiple projects.

[Fotiman]

Just FYI, I tested it and this didn't work for me

Oh, right. That's because you're calling it within another function (the anonymous function passed to $(document).ready). The "this" variable within that function is a running in a different scope. By assigning whichID to this, the inner function can access it thanks to the closure, and doesn't get confused about what "this" really is. :)

[csdude55]

Oh, right. That's because you're calling it within another function (the anonymous function passed to $(document).ready). The "this" variable within that function is a running in a different scope. By assigning whichID to this, the inner function can access it thanks to the closure, and doesn't get confused about what "this" really is. :)

Makes sense :-) Although, I have to admit that I'm not entirely sure what $(document).ready actually accomplishes. I understand that it tells the script not to proceed until the document is ready, but I don't know what that actually means...

[Fotiman]

It means, make sure the DOM is finished loading. In other words, it's safe for you to start finding and manipulating elements within the DOM once the document is ready. For example:

<body>
<script>
var foo = document.getElementById('foo');
// element with id foo hasn't loaded yet, so foo = null
foo.innerHTML = "foo bar"; // causes error
</script>
<div id="foo"></div>
</body>

As opposed to:

<body>
<script>
$(document).ready(function () {
  var foo = document.getElementById('foo');
  // this function doesn't execute until the DOM has loaded
  // so element with id foo can be found nowl
  foo.innerHTML = "foo bar"; // no error
});
</script>
<div id="foo"></div>
</body>