セレクタのない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 
}); 

。見出しは、HTMLドキュメントで定義されているクラスです。これはセレクタがあり、$ .fn.cycleはありませんので、私は混乱しています。

.headで見出しが.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 

がフィドルを参照してください：あなたは$("selector")を実行するとhttp://jsfiddle.net/maniator/eE6q2/

Answer 2

は、その後、jQueryのは、既に適切な要素を選択します。その後、.cycleプラグイン関数が呼び出されます。thisは、一致する要素のセットを参照します。

選択はjQueryコアで行い、プラグインでは行いません。プラグインは、単にそれに渡される要素で何かを行います。 $("selector");でも要素を選択しますが、要素は選択されます。あなたの新しい機能$.fn.cycle

Answer 3

は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のプラグインがchainabilityを維持するために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 
    }); 
};