關於jQuery物件的兩個屬性selector和context
阿新 • • 發佈：2019-01-28
Context引數需要是一個正常工作的節點物件（DOM物件，而不jQuery物件）。雖然傳遞jQuery物件也可以起到限定查詢範圍的作用，但是這樣的話，那麼jQuery物件的context屬性就會變成整個Document物件。
如果您看完了DEMO，有一些不同的看法的話，請儘管拍磚，不甚感激。
如果您看完了DEMO，有一些不同的看法的話，請儘管拍磚，不甚感激。
恩~~通過上面的篇幅以及DEMO，大家已經基本上知道了jQuery物件的兩個屬性selector和context到底是什麼東西了吧。
呵呵~~知道了是什麼是一回事，知道可以用到哪裡又是另外一回事了。對吧。（其實我也還不算是很明白有什麼用。^_^）
好吧，我們來看一下jQuery Cycle Plugin這個外掛的原始碼中怎麼運用這兩個jQuery物件的屬性的。
01 |
$.fn.cycle = function(options, arg2) {
|
02 |
var
o = { s: this.selector, c:
this.context };
|
03 |
if
(this.length === 0 && options !=
'stop') {
|
04 |
if
(!$.isReady && o.s) { |
05 |
log('DOM not ready, queuing slideshow');
|
06 |
$(function() {
|
07 |
$(o.s,o.c).cycle(options,arg2);
|
08 |
});
|
09 |
return
this;
|
10 |
}
|
11 |
log('terminating; zero elements found by selector'
+ ($.isReady ? ''
: ' (DOM not ready)'));
|
12 |
return
this;
|
13 |
}
|
14 |
return
this.each(function()
{ |
15 |
var
opts = handleArguments(this, options, arg2);
|
16 |
if
(opts === false)
|
17 |
return;
|
18 |
............省略了一千多行程式碼..............
|
19 |
}
|
20 |
} |
大家應該看到了吧，在程式碼的第二行就出現了這兩個jQuery物件的屬性。
看了上面的程式碼，大家能理解程式碼從第二行到第十三行，是做了些什麼工作嗎？
我認為主要是實現了這樣的一個錯誤處理的功能，應該是防止使用者在呼叫此外掛的時候，忘記了將程式碼放到$(document).ready()中執行。
如果當用戶真的沒有將外掛呼叫程式碼放到$(document).ready()裡面去執行的時候，這裡給出了這樣的處理：
首先判斷呼叫外掛的選擇器是否獲取到元素，如果沒有獲取到而且options 引數不等於stop，那麼再進行判斷如果HTML文件沒有載入完成且“o.s”（jQuery物件的selector屬性）是定義了的，那麼這種情況下就說明使用者忘記了將外掛呼叫程式碼放到裡面去執行，然後外掛的程式碼給出的處理是將外掛呼叫程式碼放到$(document).ready()中執行，然後阻止這次的呼叫（return this）
上面講敘的比較亂，可能有點難理解，我自己也不知道該怎麼講。呵呵~~不理解也沒多大事，慢慢學~功到自然成。
下面再將上面的外掛程式碼加上註釋給大家看看，不知道效果怎麼樣？呵呵
01 |
$.fn.cycle = function(options, arg2) {
|
02 |
var
o = { s: this.selector, c:
this.context };//宣告變數o，儲存的是jQuery物件的selector屬性和context屬性
|
03 |
if
(this.length === 0 && options !=
'stop') {//如果引數options不為“stop”，而且沒有找到呼叫元素
|
04 |
if
(!$.isReady && o.s) {//如果HTML文件沒有載入完成且“o.s”（jQuery物件的selector屬性）是有定義的
|
05 |
log('DOM not ready, queuing slideshow');//提交log記錄
|
06 |
$(function() {//重新將外掛執行程式碼放到$(document).ready()中執行
|
07 |
$(o.s,o.c).cycle(options,arg2);//相當於重新運行了外掛程式碼
|
08 |
});
|
09 |
return
this;//阻止外掛程式碼進一步執行，返回當前jQuery物件
|
10 |
}
|
11 |
log('terminating; zero elements found by selector'
+ ($.isReady ? ''
: ' (DOM not ready)'));
|
12 |
return
this;
|
13 |
}
|
14 |
return
this.each(function()
{ |
15 |
var
opts = handleArguments(this, options, arg2);
|
16 |
if
(opts === false)
|
17 |
return;
|
18 |
............省略了一千多行程式碼..............
|
19 |
}
|
20 |
} |