JS框架設計讀書筆記之選擇器引擎01

選擇符是指css樣式規則最左邊的部分,例如 p{}，#id{}，.class{}，p.class{} 等等

總共可以分為四大類：

併聯選擇器=> 逗號 => $('div,span')

簡單選擇器=> id,class,tag,attr,* => $('#id')，$('.class')，$('div')，$('[attr]')，$('*')

關係選擇器=> ' '、'>'、'+'、'~' => $('div span')、$('div>span')、$('div+div')、$('div~div')

偽類=> 動作偽類、目標偽類、語言偽類、狀態偽類、結構偽類、取反偽類

關係操作符不可單獨存在，必須在兩個tag之間(引擎可能允許放在開始，預設頭部為*)。

後代選擇器：通常在引擎中構建乙個getall的函式，在傳入乙個元素後，取得元素所有的後代元素。注意ie下使用document.all與document.getelementbytagname可能有將注釋混入結果集。

親子選擇器：如果不打算相容xml，直接用children就可以了。ie下也可能會有混入注釋節點的問題。

function
getchildren(el) 
var ret =;
//用nextsibling遍歷
for (var node = el.firstchild; node; node =node.nextsibling) 
return
ret;
}

相鄰選擇器：取得當前元素向右的第乙個元素節點

function
getnext(el) 
//nextsibling會將回車當成#text 所以要進行判斷
while (el =el.nextsibling) 
}}

兄長選擇器：取得右邊所有同級元素節點

動作偽類：包括:visited,:link,:hover,:active,:focus

目標偽類：即target偽類，指id或者name屬性與url中#後面的部分匹配。

比如說：有to div與got it

這個div就是target

'target': function
(elem)

語言偽類：內容用的少，不寫了，這玩意還有繼承性

狀態偽類：標記乙個元素當前狀態，由 :checked、:enabled、:disabled、:indeterminate組成，可以通過元素checked,disabled,indeterminate判定。

話說這個:indeterminate啊，是checkbox的乙個屬性，可以console.dir('checkbox節點')檢視，預設為false。然後只能通過js**將其設為true，效果就是checkbox核取方塊預設中間加了個減號，點選後恢復正常的checkbox，沒什麼卵用。

結構偽類：分為根偽類、子元素過濾偽類、空偽類三種。根偽類由它在文件的位置判定，子元素過濾偽類根據它在其父親所有孩子的位置或標籤型別判定，空偽類是根據它孩子的個數判定。

:root 偽類用於選取根元素，html文件通常是html元素。

:nth-child 是所有子元素過濾偽類的藍本，帶有引數，可能包含字母n或數字。

:empty 用於選取那些不包含任何元素節點、文字節點、cdata節點的元素

待續...

JS框架設計讀書筆記之 選擇器引擎01