This Is A FineDay

            BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合  :: 管理 ::
            93 隨筆 :: 0 文章 :: 69 評論 :: 0 Trackbacks

          ( ).Prototype 1.5 rc2) 使用指南之 dom.js

          這部分提供了很多 ( 寫的都有點煩了 ) 方便的操作 dom 的方法:包含有名的 $ 方法、 document.getElementsByClassName 方法,以及 Element 對象、 Insertion 對象

          以下部分一個一個的詳細介紹:

          $(element) getElementById 的封裝, element 可以是一個元素的 id 或元素本身,也可以是一個數組,這時返回一個數組,使用 $ 方法,會自動調用 Element.extend(element) 方法,這樣的話使元素可以直接調用 Element 中的方法 , 例如 Element.hide(element) 可以寫成這樣 $(element).hide()

          document.getElementsByClassName(className, parentElement): 根據 class 選擇元素

          Element.extend(element): 擴展 element ,使 element 可以直接調用 Element 、 Form.Element Form 中定義的方法

          Element 對象的方法:

          visible: function(element) :判斷 element 是否可見 , 參數 element 可以是元素本身或元素 id( 下面的方面的參數基本上都是這樣的 )

          toggle: function(element) :反轉 element 的可見性

          hide: function(element) :隱藏元素

          show: function(element) :顯示元素

          remove: function(element) :移除元素

          update: function(element, html) :使用 html 更新 element 的內容, html 中的 script 會執行 ( 下同 )

          replace: function(element, html) :將 element 替換為 html

          inspect: function(element) element 的字符串表示

          recursivelyCollect: function(element, property): 遞歸收集 , 例如 Element.recursivelyCollect(element, "parentNode") 返回 element 所有的祖先節點 , 注意只返回 nodeType == 1 的元素,也就是不返回文本元素

          ancestors: function(element): 等同于上面的例子,返回元素的所有祖先節點

          descendants: function(element): 返回所有子孫節點

          immediateDescendants: function(element) :返回元素的直接的子孫節點 ( 子節點 ) 的數組

          previousSiblings: function(element) :返回元素前面的兄弟節點

          nextSiblings: function(element) :返回位于元素后面的兄弟節點

          siblings: function(element) :返回元素所有的兄弟節點

          match: function(element, selector) :使用 Selector match 方法匹配元素 (Selector 將在后面介紹 ), selector 參數是一個 css selector 表達式或者 Prototype 中的一個 Selector 實例,如果 element 匹配 selector 則返回 true ,否則返回 false ,例如對于一個 className logcss div 來說,下面的表達式返回 true, $(element).match("div.logcss") 待續。。

          up(element, expression, index) :利用 Selector.findElement 方法找到 element 元素的祖先節點中符合表達式 expression 的所有元素組成的數組索引為 index 的元素,也可以忽略 expression( 默認為 * ,表示匹配所有元素 ) index( 默認為 0) ,直接這樣調用 up(element, index) up(element)

          down(element, expression, index) :跟 up 一樣,只是返回的是子孫節點

          previous(element, expression, index) :返回前面的兄弟節點

          next(element, expression, index) :返回后面的兄弟節點

          getElementsBySelector(element,args) Selector.findChildElements(element, args) 的封裝, args 表示可以傳遞多個參數,每個參數是一個 css selector 表達式,返回 element 的子孫節點中符合任何一個 css selector 表達式的元素組成的數組

          getElementsByClassName(element, className) :返回 element 中的子孫節點中符合 clsssName 的元素

          readAttribute(element, name) return $(element).getAttribute(name) ,之所以添加這個方法是因為在 IE Safari(Mac) getAttribute 不是一個真正的函數,它沒有 call 、 apply 等方法,所以在很多時候調用會出現錯誤 (Prototype 中很多地方使用了函數的這兩個方法 ) ,例如下面的例子 ( 官方文檔中的一個例子 ) ,就只能使用 readAttribute

          <div id="widgets">

          ?<div class="widget" widget_id="7">…</div>

          ?<div class="widget" widget_id="8">…</div>

          ?<div class="widget" widget_id="9">…</div>

          </div>

          $$(’div.widget’).invoke(’readAttribute’, 'widget_id’)

          // ["7", "8", "9"]

          getHeight: function(element) :返回元素高度, return element.offsetHeight

          classNames: function(element) :返回一個 Element.ClassNames 對象,改對象提供對元素 class 的操作,包括 add 、 remove set 等,一般很少使用,使用 Element.addClassName 等方法就可以了 ( 就在下面 )

          hasClassName: function(element, className) :判斷 element 是否含有 className

          addClassName: function(element, className) :給 element 添加一個 class

          removeClassName: function(element, className) :移除元素中的一個 class

          observe() :調用 Event 對象 (Prototype 中的,將在后面介紹 ) observe 方法為元素注冊事件 handle

          stopObserving() :移除注冊的事件 handle

          cleanWhitespace: function(element) :移除元素中空白的文本子節點

          empty: function(element) :判斷元素是否為空

          childOf: function(element, ancestor) :判斷 element 是否為 ancestor 的子孫節點

          scrollTo: function(element) :滾動條移動到元素所在的地方

          getStyle: function(element, style) :得到元素某個 css 樣式的值,例如 $(element).getStyle("float")

          setStyle: function(element, style) :設置元素的 css 樣式, style 十一個對象,例如 element.setStyle({left: "40px", "background-color":"#666"})

          getDimensions: function(element) :得到元素的尺寸,即使元素是隱藏的也可以正確的返回,返回 return {width: originalWidth, height: originalHeight} 這樣的關聯數組

          makePositioned: function(element) :當元素的 position css 屬性為 static 或不存在使,將次屬性更改為 relative

          undoPositioned: function(element) :跟 makePositioned 相反的操作

          makeClipping: function(element) :把元素變成 clipping( 切片 ) ,也就是設置元素的 overflow 屬性為 hidden

          undoClipping: function(element) :反轉上面的方法對元素所做的修改

          hasAttribute(element) :判斷元素是否有某個屬性

          Element 對象的方法是不是不少啊,哈哈,下面介紹有關 Insertion 的四個類

          Insertion.Before :將內容插入到元素的前面,內容在元素外面

          Insertion.Top :將內容插入到元素的頂部,內容在元素里面

          Insertion.Bottom :將內容插入到元素的底部,內容在元素里面

          Insertion.After :將內容插入到元素后面,內容在元素外面

          使用它們的方法比較簡單: new Insertion.where(element, content) ,其中 where 表示上面的 Before 、 Top 等, content html 字符串,注意其中 javascript 片斷會執行

          終于寫完了, Prototype Element 方法還真不少

          雖然以前覺得自己對 Prototype 還比較熟悉,寫的也有點累,但是發現自己收獲仍然挺大的,為了寫出這些方法的具體作用和用法,必須強迫自己一行行的把 Prototype 的代碼弄清楚,使自己對 Prototype 中很多精巧的寫法有了更深刻的認識和理解

          寫這個教程的主要目的是為了給大家一個快速的參考,大家還是對照著源代碼看才會真正有所提高

          這時我第一次寫比較完整的一個教程,錯誤幼稚的地方在所難免,希望大家批評指正,互相學習提高,

          ( ).Prototype 使用指南之 Selector

          Selector 是利用 css selector 來匹配選擇頁面元素的,所以要理解 Selector 首先應該對 css selector 有所理解,下面是 css2 selector 的語法,當然很多瀏覽器只是支持其中的一部分, Prototype 中的 Selector 主要支持 tag 選擇器、 class 選擇器和 id 選擇器,還有屬性 (attribute) 選擇器,基本上包含我們平時所用的所有類型

          The following table summarizes CSS2 selector syntax, 詳細的可以看 http://www.w3.org/TR/REC-CSS2/selector.html :

          Pattern

          Meaning

          Described in section

          *

          Matches any element.

          Universal selector

          E

          Matches any E element (i.e., an element of type E).

          Type selectors

          E F

          Matches any F element that is a descendant of an E element.

          Descendant selectors

          E > F

          Matches any F element that is a child of an element E.

          Child selectors

          E:first-child

          Matches element E when E is the first child of its parent.

          The :first-child pseudo-class

          E:link E:visited

          Matches element E if E is the source anchor of a hyperlink of which the target is not yet visited (:link) or already visited (:visited).

          The link pseudo-classes

          E:active E:hover E:focus

          Matches E during certain user actions.

          The dynamic pseudo-classes

          E:lang(c)

          Matches element of type E if it is in (human) language c (the document language specifies how language is determined).

          The :lang() pseudo-class

          E + F

          Matches any F element immediately preceded by an element E.

          Adjacent selectors

          E[foo]

          Matches any E element with the “foo” attribute set (whatever the value).

          Attribute selectors

          E[foo=”warning”]

          Matches any E element whose “foo” attribute value is exactly equal to “warning”.

          Attribute selectors

          E[foo~=”warning”]

          Matches any E element whose “foo” attribute value is a list of space-separated values, one of which is exactly equal to “warning”.

          Attribute selectors

          E[lang|=”en”]

          Matches any E element whose “lang” attribute has a hyphen-separated list of values beginning (from the left) with “en”.

          Attribute selectors

          DIV.warning

          HTML only. The same as DIV[class~=”warning”].

          Class selectors

          E#myid

          Matches any E element ID equal to “myid”.

          ID selectors

          Selector 中包含 Selector 對象和類,

          Selector 對象具有下面兩個方法:

          match(element) :元素是否與本 selector 匹配,在 Element 中已經介紹了
          findElements(parentNode)
          parentNode 中所有匹配本 selector 的子孫元素列表

          使用方法也很簡單 var s=new Selector(expression); s.match(element); s.findElements($(element)) ,其中 expression 可以是如下方式 "div" 、 "#id" 、 ".class" 、 "div#id" 、 "div[attribute]" 、 "div[attribute=fff]" 、 "div[attribute!=sdf]"

          其中 Selector 也有幾個靜態方法,它們分別是:

          matchElements(elements, expression) :返回 elements 中符合 expression 的元素列表
          findElement(elements, expression, index)
          :返回 elements 中符合 expression 的元素列表中索引為 index 的元素
          findChildElements(element, expressions)
          :找出 element 的子孫元素中符合 expressions 的元素列表,其中 expressions 是一個 expression 數組,其中的 expression 支持 "div li.#id" 形式

          $$ 方法:只是簡單的調用 return Selector.findChildElements(document, $A(arguments))

          雖然 Selector 有這么多方法,但是大部分都是內部調用的,我們一般都很少使用,因為我們有個一個方便的方法 $$ ,對于絕大部分情況已經足夠了

          posted on 2008-07-03 21:49 Peter Pan 閱讀(177) 評論(1)  編輯  收藏 所屬分類: JS

          評論

          # re: Prototype(1.5 rc2)使用指南(三) 2008-08-19 17:41 chenjunq58
          寫的太好了,收獲不小,謝謝樓主!  回復  更多評論
            

          主站蜘蛛池模板: 忻州市| 黄浦区| 峨眉山市| 宁安市| 且末县| 南投市| 邹平县| 田阳县| 丽江市| 海原县| 乌鲁木齐县| 德兴市| 塔河县| 赣州市| 舒兰市| 泊头市| 尉犁县| 项城市| 新巴尔虎右旗| 丰台区| 东莞市| 甘南县| 乌什县| 德化县| 同仁县| 进贤县| 应用必备| 祥云县| 沁源县| 湖北省| 堆龙德庆县| 南阳市| 竹山县| 涟源市| 丰都县| 隆德县| 民乐县| 新源县| 吴忠市| 周至县| 天柱县|