Javascript 没有选择器的JQuery?
我正在尝试开发一个循环图像滑块,对一个文档有一个问题,我正在参考这个文档进行开发 JQuery函数实际上并不调用选择器,我也不确定如何读取它Javascript 没有选择器的JQuery?,javascript,jquery,Javascript,Jquery,我正在尝试开发一个循环图像滑块,对一个文档有一个问题,我正在参考这个文档进行开发 JQuery函数实际上并不调用选择器,我也不确定如何读取它 $.fn.cycle = function(options, arg2) { var o = { s: this.selector, c: this.context }; 上面的脚本在我的javascript文档中,下面的方法在调用上面脚本的HTML文档中 $(document).ready(function() { $('.headline').cyc
$.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);
}
});
$.fn.cycle=函数(选项,arg2){
var o={s:this.selector,c:this.context};
//在1.3+中,我们可以用就绪状态修复错误
if(this.length==0&&options!='stop'){
如果(!$.isReady&&o.s){
日志(“DOM未就绪,正在排队播放幻灯片”);
$(函数(){
美元(o.s,o.c.)。周期(选项,arg2);
});
归还这个;
}
//你的DOM准备好了吗?http://docs.jquery.com/Tutorials:Introducing_$(文档).ready()
日志('终止;选择器'+($.isReady?'':'(DOM未就绪)''找到零个元素);
归还这个;
}
//迭代匹配的节点集
返回此值。每个(函数(){
var opts=handleArguments(此,选项,arg2);
如果(选项===false)
返回;
opts.updateActivePagerLink=opts.updateActivePagerLink | |$.fn.cycle.updateActivePagerLink;
//停止此容器的现有幻灯片放映(如果有)
if(this.cycleTimeout)
clearTimeout(this.cycleTimeout);
this.cycleTimeout=this.cyclePause=0;
var$cont=$(本);
var$slides=opts.slideExpr?$(opts.slideExpr,this):$cont.children();
var els=$slides.get();
如果(els.长度<2){
日志('终止;幻灯片太少:'+els.length);
返回;
}
var opts2=构建选项($cont、$slides、els、opts、o);
如果(opts2==false)
返回;
var startTime=opts2.continuous?10:getTimeout(els[opts2.currside]、els[opts2.nextSlide]、opts2、!opts2.rev);
//如果是自动幻灯片,请将其启动
如果(开始时间){
开始时间+=(opts2.delay | | 0);
如果(开始时间<10)
起始时间=10;
调试('第一次超时:'+startTime);
this.cycleTimeout=setTimeout(函数(){go(els,opts2,0,(!opts2.rev&&!opts.backwards))},startTime);
}
});
选择器是插件中的此
例如:
$.fn.cycle = function() {
console.log(this);
};
$('.headline').cycle(); //logs the `.headline` jQuery element
请参阅fiddle:当您运行$(“选择器”)
时,jQuery已经选择了适当的元素。之后,调用.cycle
插件函数,其中此
引用匹配的元素集
选择是由jQuery核心完成的,而不是由插件完成的。插件“仅仅”对传递给它的元素执行某些操作。即使
$(“选择器”);
也会选择元素,尽管您没有对它们执行任何操作。您的新函数$.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插件返回
这个,以保持链接性。此外,它们通常需要迭代选择中的每个元素,因此常见的模式是:
$.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
});
};
$.fn.cycle
这是一个jquery插件而不是一个函数这是一个很好的起点-@mgraph:typeof$.fn.cycle
不同意。当然,这是一个函数,但它被用来扩展jquery,这使它成为一个插件。$.fn.cycle=function()
使用一个可以在jquery对象上使用的插件扩展jquery,比如;$('.headline')。循环(…);
$.fn.cycle
意味着cycle
成为一个jQuery方法,这意味着可以在jQuery实例上调用它。在创建新的jQuery实例时,选择器用于选择各种元素。创建新的jQuery实例后,可以在其上调用cycle
。这很有意义。我在上搜索了.fnjquery.com,没有遇到任何问题。不过现在有了意义。我想我需要开发一个插件哈哈。谢谢你的帮助!谢谢你的提琴!这是一个很好的例子。@JustinBoyd没问题^ ^很乐意帮助!