|
選擇器
大多數(shù)JavaScript框架可實現(xiàn)某種形式的快速元素選擇。一般來說，這些選擇器使獲取一個元素的引用更加快捷，并允許你通過ID、class、元素類型或一些偽類選擇符來選取元素。
例如，使用通常的JavaScript，你可以使用下面的代碼借助ID來取得DOM元素。
var theElement = document.getElementById('the_element');
與其他幾個框架一樣，MooTools提供了一個執(zhí)行該操作的快捷方法。除了選擇元素，MooTools通過自己一系列的功能函數(shù)擴展了元素。
var theElement = $('the_element');
$函數(shù)在幾個流行的框架（并非全部）中可用，其語法大致相同。Prototype更深一層，通過ID在任何時候可以選擇多個元素，返回的是一個元素數(shù)組。與
MooTools一樣，這些元素利用Prototype的實用函數(shù)擴展。利用Prototype庫在任何時候選擇多個元素的語法是這樣的：
var elementArray = $('element_one', 'element_two', 'element_three');
在實用函數(shù)這一部分，你將了解到JavaScript框架提供的一些函數(shù)迭代我們的集合更加容易。
在前面的例子，你必須提供你欲選擇元素的ID。但是，你要選擇多個元素該怎么辦？所有image、擁有特定className的表格的每一行。MooTools（其它的幾個庫）提供了一個非常簡單的方法來做到這一點－－$$函數(shù)。除了元素的ID外，他還可以接受以下參數(shù)：元素的名字、類名以及偽類選擇器，其工作原理與$函數(shù)相似。例如，使用MooTools獲取頁面上所有的圖片，你可以使用下面的代碼：
var allImages = $$('img');
這將得到文檔中所有imag的數(shù)組，每一個通過$函數(shù)和其實用函數(shù)進行擴展。
通過tag標簽來選取對象是非常有用的，但如果你只想基于元素的class選取它的部分子集，遮蓋怎么辦？同樣很簡單。在下面的例子中，MooTools將選擇table中class為“odd”的行，這在對每行進行操作時很有用（交替變換表格每一行的顏色）。
var allOddRows = $$('tr.odd');
事實上，MooTools提供了一個更好的方法執(zhí)行行操作。在前面的例子中，假定table的奇數(shù)行授予了類名“odd”。那么下面的代碼不需要在table的每一行上定義任何類名。
var allOddRows = $$('tbody <IMG class=wp-smiley alt=:o src="http://www.denisdeng.com/wp-includes/images/smilies/icon_surprised.gif"> dd');
這是一個偽類選擇器的例子，它返回匹配規(guī)范的任何對象。在這個例子中，結(jié)果為頁面中tbody元素中所有奇數(shù)行的子元素。MooTools其它偽類元素的例子包括：
- checked 所有被選中的元素（例如：選中的復選框）；
- enabled 所有可用的元素；
- contains 所有包含文本（作為參數(shù)傳遞給選擇器）的元素。
如前所述，并非所有的JavaScript框架都使用$函數(shù)來選取DOM元素。在YUI（Yahoo用戶界面）的第三個版本中，下面的代碼是通過ID來選取元素的（注意：YUI3需要在ID前加上字符#）。
var theElement = Y.one('#the_element');
同樣，通過tag或class來選取元素也不是使用$$函數(shù)，在YUI中你要使用Y.all來代替。
var allOddRows = Y.all('tr.odd');
ExtJS以同樣的方式工作，通過ID選擇元素用下面的語法：
var theElement = Ext.get('the_element') ;
而通過tag和class來獲取元素則用下面的語法：
var allOddRows = Ext.select('tr.odd');
在下一章中，你將了解到如何使用JavaScript框架來輕松遍歷DOM對象，換句話說，找到與選定元素有父子和兄弟關系的元素。
轉(zhuǎn)載地址：http://www.denisdeng.com/?p=699
原文地址：http://www.ibm.com/developerworks/web/library/wa-jsframeworks/index.html
本文鏈接：http://www.95time.cn/tech/web/2010/7523.asp 
出處：
責任編輯：bluehearts
◎進入論壇網(wǎng)頁制作、WEB標準化版塊參加討論，我還想發(fā)表評論。
|
