没有选择器的JQuery？

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

的选择是在插件this。

例如：

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

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

见琴：http://jsfiddle.net/maniator/eE6q2/

Answer 2

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

选择由jQuery核心完成，而不是由插件完成。插件“只是”对传递给它的元素做些什么。即使$("selector");也会选择元素，尽管你不会对它们做任何事情。

Answer 3

您的新功能$.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保持chainability。此外，他们通常需要每一个元素遍历的选择，所以一个共同的模式看到的是：

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