快捷搜索:  as  test  1111  test aNd 8=8  test++aNd+8=8  as++aNd+8=8  as aNd 8=8

伟德国际1949始于英国_酒文化网进入



这部分供给了很多(写的都有点烦了伟德国际1949始于英国)方便的操作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): 伟德国际1949始于英国扩展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") 待续。。

//update 2006-11-30 09:40

up(element, expression, index):使用Selector.findElement措施找到el伟德国际1949始于英国ement元素的先人节点中相符表达式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表达式的元素组成的数组

ge伟德国际1949始于英国tElementsByClassName(element, className):返回element中的子孙节点中相符clsssName的元素

readAttribute(element, name):return $(element).getAttribute(name),之以是添加这个措施是由于在IE和Safari(Mac)中getAttribute不是一个真正的函数,它没有call、apply等措施,以是在很多时刻调用会呈现差错(Prototype中很多地方应用了函数的这两个措施),例如下面的例子(官方文档中的一个例子),就只能应用readAttribute:

...

...

...

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

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

//Update 2006-12-1

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.伟德国际1949始于英国Before:将内容插入到元素的前面,内容在元素外貌

Insertion.Top:将内容插入到元素的顶部,内容在元素里面

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

Insertion.After:将内容插入到元素后面,内容在元素外貌

应用它们的措施对照简单:new Insertion.where(element, content),此中where表示上面的Before、Top等,content是html字符串,留意此中javascript片断会履行

终于写完了,Prototype的Element措施还真不少

虽然曩昔感觉自己对Prototype还对照认识,写的也有点累,然则发明自己劳绩仍旧挺大年夜的,为了写出这些措施的详细感化和用法,必须逼迫自己一行行的把Prototype的代码弄清楚,使自己对Prototype中很多精美的写法有了更深刻的熟识和理解

写这个教程的主要目的是为了给大年夜家一个快速的参考,大年夜家照样对比着源代码看才会真正有所前进

这时我第一次写对照完备的一个教程,差错稚子的处所在所难免,盼望大年夜家品评斧正,相互进修前进,

假如我写的东东对你有一些些小小的赞助,我就会异常痛快了

免责声明:以上内容源自网络,版权归原作者所有,如有侵犯您的原创版权请告知,我们将尽快删除相关内容。

您可能还会对下面的文章感兴趣: