javascript - 没有选择器的 JQuery？

Question

我正在尝试开发一个循环图像 slider ，并对我在开发中引用的文档有疑问。

JQuery 函数实际上并没有调用选择器，我不确定如何阅读它。

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

上面的脚本在我的 javascript 文档中，下面的方法在我调用上面脚本的 HTML 文档中。

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

.headline 是在 HTML 文档中定义的类。我很困惑，因为它有一个选择器而 $.fn.cycle 没有。

.headline 是否将值传递给 .fn？如果是这样，它如何只传递到变量的那部分？

如果您想查看完整的 JQuery 函数，请在此处查看:

$.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

您的新函数 $.fn.cycle 将在 jQuery 对象的上下文中调用:

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

---

通常 jQuery 插件返回 this 以保持可链接性。此外，他们通常需要遍历选择中的每个元素，因此常见的模式是:

$.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
  });
};