Question

我正在尝试开发一个循环图像滑块，并对我正在参考开发的文档提出疑问。

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

Answer 2

插件中的选择器为this。

例如：

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

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

请参阅小提琴：http://jsfiddle.net/maniator/eE6q2/

Answer 3

当你运行$("selector")时，jQuery已经选择了适当的元素。之后，调用.cycle插件函数，其中this引用匹配元素集。

选择由jQuery核心完成，而不是由插件完成。插件“仅仅”对传递给它的元素做了些什么。即使$("selector");，您也会选择元素，但不会对它们执行任何操作。

没有选择器的JQuery？

3 个答案: