JQuery without a selector?

Question

I'm trying to develop a cycling image slider and have a question about a document I'm referencing for development.

The JQuery function doesn't actually call a selector and I'm not exactly sure how to read it.

$.fn.cycle = function(options, arg2) {
var o = { s: this.selector, c: this.context };

The script above is in my javascript document and the method below is in my HTML doc calling to the script above.

$(document).ready(function() {
$('.headline').cycle({
    fx: 'fade', // choose your transition type, ex: fade, scrollUp, shuffle, 
    cleartypeNoBg:true
});

.headline is a class that is defined in the HTML document. I'm confused because this has a selector and $.fn.cycle does not.

Is .headline passing in the value to .fn? If so, how is it passing in only to that section of the variable?

If you wish to see the full JQuery function it is here:

$.fn.cycle = function(options, arg2) {
var o = { s: this.selector, c: this.context };

// in 1.3+ we can fix mistakes with the ready state
if (this.length === 0 && options != 'stop') {
    if (!$.isReady && o.s) {
        log('DOM not ready, queuing slideshow');
        $(function() {
            $(o.s,o.c).cycle(options,arg2);
        });
        return this;
    }
    // is your DOM ready?  http://docs.jquery.com/Tutorials:Introducing_$(document).ready()
    log('terminating; zero elements found by selector' + ($.isReady ? '' : ' (DOM not ready)'));
    return this;
}

// iterate the matched nodeset
return this.each(function() {
    var opts = handleArguments(this, options, arg2);
    if (opts === false)
        return;

    opts.updateActivePagerLink = opts.updateActivePagerLink || $.fn.cycle.updateActivePagerLink;

    // stop existing slideshow for this container (if there is one)
    if (this.cycleTimeout)
        clearTimeout(this.cycleTimeout);
    this.cycleTimeout = this.cyclePause = 0;

    var $cont = $(this);
    var $slides = opts.slideExpr ? $(opts.slideExpr, this) : $cont.children();
    var els = $slides.get();
    if (els.length < 2) {
        log('terminating; too few slides: ' + els.length);
        return;
    }

    var opts2 = buildOptions($cont, $slides, els, opts, o);
    if (opts2 === false)
        return;

    var startTime = opts2.continuous ? 10 : getTimeout(els[opts2.currSlide], els[opts2.nextSlide], opts2, !opts2.rev);

    // if it's an auto slideshow, kick it off
    if (startTime) {
        startTime += (opts2.delay || 0);
        if (startTime < 10)
            startTime = 10;
        debug('first timeout: ' + startTime);
        this.cycleTimeout = setTimeout(function(){go(els,opts2,0,(!opts2.rev && !opts.backwards))}, startTime);
    }
});

Answer 1

Your new function $.fn.cycle will be called in the context of the jQuery object:

var $foo;
$foo = $('.foo') //a jQuery object created by the factory function
$.fn.bar = function (a, b, c) {
  //within the function, `this` is the jQuery selection
  console.log(this, a, b, c);
};
$foo.bar(1, 2, 3); //will output $foo, 1, 2, 3

---

Typically jQuery plugins return this to maintain chainability. Additionally, they typically need to iterate over every element in the selection, so a common pattern to see is:

$.fn.foo = function () {
  //in foo, `this` is a jQuery.init object
  return this.each(function (index, element) {
    //in each, `this` is a DOM node
    var $this;
    $this = $(this);
    //do stuff
  });
};

Answer 2

The selector is this in the plugin.

For example:

$.fn.cycle = function() {
   console.log(this);
};

$('.headline').cycle(); //logs the `.headline` jQuery element

See fiddle: http://jsfiddle.net/maniator/eE6q2/