今天在研究jQuery Cycle Plugin这个关于图片特效的插件的源码时,发现了jQuery对象的两个属性selector和context,一开始一点都摸不着头脑,然后在百度和谷歌上面查了好久,也没查到个所以然来,后来还是在jQuery API文档中发现了这个jQuery对象的selector属性和context属性。呵呵~所以说呀~有空的时候,还是先把jQuery API文档先翻一遍熟悉一下,也好过像我这样,明明API文档中有的东西,还在网上到处找,还找不到,多郁闷呀~
如果看到这篇文章的同学,还不知道这两个属性的意思的话,那正好在此学习一下吧,其实这两个属性的最大的用处是用在编写插件。下面梦三秋来带领大家熟悉一下这两个属性。
jQuery(expression, [context])
大家对上面的这个式子可熟悉啊?呵呵~~不熟悉的,赶紧去翻API文档吧。
上面这个式子也就相当于
$(expression, [context])
这是jQuery的最核心的函数了,建议大家好好滴在API文档中认真地阅读一边,现在最新的jQuery API中文文档都已经是1.4.4版本的了呢!什么?你还没有?莫非你在搞笑!
jQuery_API_1.4.4.zip
赶快拿走吧,换掉你的老版本吧。
API文档中说了:
默认情况下, 如果没有指定context参数,$()将在当前的 HTML document中查找 DOM 元素;如果指定了 context 参数,如一个 DOM元素集或jQuery对象,那就会在这个 context 中查找。在jQuery 1.3.2以后,其返回的元素顺序等同于在context中出现的先后顺序。
而$(expression, [context]).selector的值正好就是expression
例如:
1 2 3 |
$( "div ul" ).selector //值为“div ul”
$( "div.test" ).selector //值为“div.test”
$( "#test ul li:first" ).selector //值为“test ul li:first”
|
也就是说expression是什么,selector就是啥,
$(expression, [context]).context是一个DOM对象。关于这个DOM对象,在使用不同的$(expression, [context]),取得的context对象还有不同。
通过测试,我总结了一下:
Context参数需要是一个正常工作的节点对象(DOM对象,而不jQuery对象)。虽然传递jQuery对象也可以起到限定查找范围的作用,但是这样的话,那么jQuery对象的context属性就会变成整个Document对象。
如果您看完了DEMO,有一些不同的看法的话,请尽管拍砖,不甚感激。
恩~~通过上面的篇幅以及DEMO,大家已经基本上知道了jQuery对象的两个属性selector和context到底是什么东西了吧。
呵呵~~知道了是什么是一回事,知道可以用到哪里又是另外一回事了。对吧。(其实我也还不算是很明白有什么用。^_^)
好吧,我们来看一下jQuery Cycle Plugin这个插件的源码中怎么运用这两个jQuery对象的属性的。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$.fn.cycle = function (options, arg2) {
var o = { s: this .selector, c: this .context };
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 ;
}
log( 'terminating; zero elements found by selector' + ($.isReady ? '' : ' (DOM not ready)' ));
return this ;
}
return this .each( function () {
var opts = handleArguments( this , options, arg2);
if (opts === false )
return ;
............省略了一千多行代码..............
}
}
|
大家应该看到了吧,在代码的第二行就出现了这两个jQuery对象的属性。
看了上面的代码,大家能理解代码从第二行到第十三行,是做了些什么工作吗?
我认为主要是实现了这样的一个错误处理的功能,应该是防止用户在调用此插件的时候,忘记了将代码放到$(document).ready()中运行。
如果当用户真的没有将插件调用代码放到$(document).ready()里面去运行的时候,这里给出了这样的处理:
首先判断调用插件的选择器是否获取到元素,如果没有获取到而且options 参数不等于stop,那么再进行判断如果HTML文档没有加载完成且“o.s”(jQuery对象的selector属性)是定义了的,那么这种情况下就说明用户忘记了将插件调用代码放到里面去运行,然后插件的代码给出的处理是将插件调用代码放到$(document).ready()中运行,然后阻止这次的调用(return this)
上面讲叙的比较乱,可能有点难理解,我自己也不知道该怎么讲。呵呵~~不理解也没多大事,慢慢学~功到自然成。
下面再将上面的插件代码加上注释给大家看看,不知道效果怎么样?呵呵
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
$.fn.cycle = function (options, arg2) {
var o = { s: this .selector, c: this .context }; //声明变量o,存储的是jQuery对象的selector属性和context属性
if ( this .length === 0 && options != 'stop' ) { //如果参数options不为“stop”,而且没有找到调用元素
if (!$.isReady && o.s) { //如果HTML文档没有加载完成且“o.s”(jQuery对象的selector属性)是有定义的
log( 'DOM not ready, queuing slideshow' ); //提交log记录
$( function () { //重新将插件运行代码放到$(document).ready()中运行
$(o.s,o.c).cycle(options,arg2); //相当于重新运行了插件代码
});
return this ; //阻止插件代码进一步执行,返回当前jQuery对象
}
log( 'terminating; zero elements found by selector' + ($.isReady ? '' : ' (DOM not ready)' ));
return this ;
}
return this .each( function () {
var opts = handleArguments( this , options, arg2);
if (opts === false )
return ;
............省略了一千多行代码..............
}
}
|