http://sunxboy.iteye.com/blog/191496
关键字: prototype
prototype.js常用函数:
函数名 | 解释 | 举例 |
Element.toggle | 交替隐藏或显示 | Element.toggle(''div1'',''div2'') |
Element.hide | 隐藏 | Element.hide(''div1'',''div2'') |
Element.show | 显示 | Element.show(''div1'',''div2'') |
Element.remove | 删除 | Element.remove(''div1'',''div2'') |
Element.getHeight | 取得高度 | Element.getHeight(''div1'') |
Toggle.display | 和Element.toggle相同 | Toggle.display(''div1'',''div2'') |
Insertion.Before | 在DIV前插入文字 | Insertion.Before(''div1'',''my content'') |
Insertion.After | 在DIV后插入文字 | Insertion.After(''div1'',''my content'') |
Insertion.Top | 在DIV里最前插入文字 | Insertion.Top(''div1'',''this is a text'') |
Insertion.Bottom | 在DIV里最后插入文字 | Insertion.Bottom(''div1'',''this is a text'') |
PeriodicalExecuter | 以给定频率调用一段JavaScript | PeridicalExecutor(test, 1)"这里test是Javascript的函数,1是频率(1秒). |
$ | 取得一个DIV, 相当于getElementById() | $(''div1'') |
Field.clear | 清空一个输入框 | Field.clear(''textfield1'') |
Field.focus | 把 焦点集中在输入框上 | Field.focus(''select1'') |
Field.present | 判断内容是否为空 | alert(Field.present(''textfield1''))" |
Field.select | 选择输入框的内容 | Field.select(''textfield1'')" |
Field.activate | 把 焦点集中在输入框上并选择输入框的内容 | Field.activate(''textfield1'')" |
Form.serialize | 把表格内容转化成string | |
Form.getElements | 取得表格内容为数组形式 | |
Form.disable | disable表格所有内容 | Form.disable(''form1'') (这个好象不work) |
Form.focusFirstElement | 把焦点集中在表格第一个元素上 | Form.focusFirstElement(''form1'') |
Form.reset | Reset表格 | Form.reset(''form1'') |
Form.Element.getValue | 取得表格输入框的值 | Form.Element.getValue(''text1'') |
Form.Element.serialize | 把表格中输入框内容转化成string | Form.Element.serialize(''text1'') |
$F | 等同于Form.Element.getValue() | $F(''text1'') |
Effect.Highlight | 高亮特效. | Effect.Highlight(''text1'') |
Effect.Fade | 褪色特效 | |
Effect.Scale | 放大缩小(百分比) | Effect.Scale(''text1'', 200) 这里200 = 200%, 即两倍 |
Effect.Squish | 消失特效.文字缩小后消失 | Effect.Squish(''text1'') |
Effect.Puff | 消失特效.文字放大后消失 | Effect.Puff(''text1'') |
Effect.Appear | 出现特效 | |
Effect.ContentZoom | ZOOM特效. | |
Ajax.Request | 传送Ajax请求给服务器 | Ajax.Request(''http://server/s.php'') |
Ajax.Updater | 传送Ajax请求给服务器并用答复的结果更新指定的Container | Ajax.Updater(''text1'',''http://server/s.php'') |
基本用法:prototype.js给每个主要的类都分了一个Class,使用起来很方便.要产生特定的效果,只要用new Class.function(<argument>)就可以了.例如:
<pre><DIV id="div1"><a href="#" οnclick="new Element.toggle('div2')">Click Me</a></DIV>
<DIV id="div2">Hello!</DIV><!-- -->pr e>
当点击Click Me的时候,div2就会交替隐藏或显示.注意,你可以给toggle加上无限个parameter,比如Element.toggle(''div2'',''div3'',''div4'',...)
<script type="text/javascript"><!-- google_ad_client = "pub-6865176685514262"; google_ad_slot = "6268214656"; google_ad_width = 728; google_ad_height = 90; //--></script><script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"> </script><script src="http://pagead2.googlesyndication.com/pagead/expansion_embed.js"></script><script src="http://googleads.g.doubleclick.net/pagead/test_domain.js"></script><script>google_protectAndRun("ads_core.google_render_ad", google_handleError, google_render_ad);</script>
评论
Js代码 <embed type="application/x-shockwave-flash" width="14" height="15" src="http://sunxboy.iteye.com/javascripts/syntaxhighlighter/clipboard_new.swf" flashvars="clipboard=%E4%BB%8A%E5%A4%A9%E4%BB%8B%E7%BB%8D%E4%B8%80%E4%B8%8B%20DOM%20%E6%A8%A1%E5%9E%8B%E5%92%8C%20Prototype%E6%A1%86%E6%9E%B6%E7%9A%84%E4%B8%80%E4%BA%9B%E5%AF%B9%E8%B1%A1%E5%92%8C%E7%B1%BB%EF%BC%8C%0A%E4%BB%80%E4%B9%88%E6%98%AF%20DOM%E6%A8%A1%E5%9E%8B%20--Document%20Object%20Module%20%E5%B0%B1%E6%98%AF%E6%96%87%E6%A1%A3%E5%AF%B9%E8%B1%A1%E7%B1%BB%E5%9E%8B%EF%BC%8C%E5%8F%AF%E4%BB%A5%E7%9C%8B%E6%88%90%E6%98%AF%E7%BB%93%E6%9E%84%E5%8C%96%E7%9A%84%E6%A0%91%E5%BD%A2%E7%9A%84%E6%95%B0%E6%8D%AE%0A%EF%BC%8C%E9%97%B2%E8%A8%80%E5%B0%91%E5%8F%99%E4%B9%A6%E5%BD%92%E6%AD%A3%E4%BC%A0%EF%BC%8C%E4%B8%8B%E9%9D%A2%E6%98%AF%E6%88%91%E6%9C%80%E8%BF%91%E5%AD%A6%E4%B9%A0js%E6%90%9C%E9%9B%86%E5%88%B0%E7%9A%84%E4%B8%80%E4%BA%9Bdocument%E7%9A%84%E6%96%B9%E6%B3%95%EF%BC%8C%E5%BE%88%E5%AE%9E%E7%94%A8%E7%9A%84%E3%80%82%E4%B8%8B%E9%9D%A2%E5%B0%86%E4%BB%8B%E7%BB%8D%E5%AE%83%E5%8C%85%E5%90%AB%E7%9A%84%E5%AF%B9%E8%B1%A1%E6%96%B9%E6%B3%95%E3%80%82%0A%E4%B8%8B%E9%9D%A2%E6%9C%89%E4%B8%8B%E8%BD%BD%E6%96%87%E4%BB%B6%EF%BC%9A%E8%83%BD%E8%AF%BB%E6%87%82%E7%9A%84%E5%B0%B1%E7%9C%8B%E7%9C%8B%E4%B8%8B%E9%9D%A2%E7%9A%84prototype.js%0A%0AElement%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%96%B9%E6%B3%95%EF%BC%9A%0A%0Avisible%3A%20function(element)%EF%BC%9A%E5%88%A4%E6%96%ADelement%E6%98%AF%E5%90%A6%E5%8F%AF%E8%A7%81%2C%20%E5%8F%82%E6%95%B0element%E5%8F%AF%E4%BB%A5%E6%98%AF%E5%85%83%E7%B4%A0%E6%9C%AC%E8%BA%AB%E6%88%96%E5%85%83%E7%B4%A0id(%E4%B8%8B%E9%9D%A2%E7%9A%84%E6%96%B9%E9%9D%A2%E7%9A%84%E5%8F%82%E6%95%B0%E5%9F%BA%E6%9C%AC%E4%B8%8A%E9%83%BD%E6%98%AF%E8%BF%99%E6%A0%B7%E7%9A%84)%0A%0Atoggle%3A%20function(element)%EF%BC%9A%E5%8F%8D%E8%BD%ACelement%E7%9A%84%E5%8F%AF%E8%A7%81%E6%80%A7%0A%0Ahide%3A%20function(element)%EF%BC%9A%E9%9A%90%E8%97%8F%E5%85%83%E7%B4%A0%0A%0Ashow%3A%20function(element)%EF%BC%9A%E6%98%BE%E7%A4%BA%E5%85%83%E7%B4%A0%0A%0Aremove%3A%20function(element)%EF%BC%9A%E7%A7%BB%E9%99%A4%E5%85%83%E7%B4%A0%0A%0Aupdate%3A%20function(element%2C%20html)%20%EF%BC%9A%E4%BD%BF%E7%94%A8html%E6%9B%B4%E6%96%B0element%E7%9A%84%E5%86%85%E5%AE%B9%EF%BC%8Chtml%E4%B8%AD%E7%9A%84script%E4%BC%9A%E6%89%A7%E8%A1%8C(%E4%B8%8B%E5%90%8C)%0A%0Areplace%3A%20function(element%2C%20html)%EF%BC%9A%E5%B0%86element%E6%9B%BF%E6%8D%A2%E4%B8%BAhtml%0A%0Ainspect%3A%20function(element)%EF%BC%9Aelement%E7%9A%84%E5%AD%97%E7%AC%A6%E4%B8%B2%E8%A1%A8%E7%A4%BA%0A%0AElement%E5%AF%B9%E8%B1%A1%E7%9A%84%E6%96%B9%E6%B3%95%EF%BC%9A%0A%0Avisible%3A%20function(element)%EF%BC%9A%E5%88%A4%E6%96%ADelement%E6%98%AF%E5%90%A6%E5%8F%AF%E8%A7%81%2C%20%E5%8F%82%E6%95%B0element%E5%8F%AF%E4%BB%A5%E6%98%AF%E5%85%83%E7%B4%A0%E6%9C%AC%E8%BA%AB%E6%88%96%E5%85%83%E7%B4%A0id(%E4%B8%8B%E9%9D%A2%E7%9A%84%E6%96%B9%E9%9D%A2%E7%9A%84%E5%8F%82%E6%95%B0%E5%9F%BA%E6%9C%AC%E4%B8%8A%E9%83%BD%E6%98%AF%E8%BF%99%E6%A0%B7%E7%9A%84)%0A%0Atoggle%3A%20function(element)%EF%BC%9A%E5%8F%8D%E8%BD%ACelement%E7%9A%84%E5%8F%AF%E8%A7%81%E6%80%A7%0A%0Ahide%3A%20function(element)%EF%BC%9A%E9%9A%90%E8%97%8F%E5%85%83%E7%B4%A0%0A%0Ashow%3A%20function(element)%EF%BC%9A%E6%98%BE%E7%A4%BA%E5%85%83%E7%B4%A0%0A%0Aremove%3A%20function(element)%EF%BC%9A%E7%A7%BB%E9%99%A4%E5%85%83%E7%B4%A0%0A%0Aupdate%3A%20function(element%2C%20html)%20%EF%BC%9A%E4%BD%BF%E7%94%A8html%E6%9B%B4%E6%96%B0element%E7%9A%84%E5%86%85%E5%AE%B9%EF%BC%8Chtml%E4%B8%AD%E7%9A%84script%E4%BC%9A%E6%89%A7%E8%A1%8C(%E4%B8%8B%E5%90%8C)%0A%0Areplace%3A%20function(element%2C%20html)%EF%BC%9A%E5%B0%86element%E6%9B%BF%E6%8D%A2%E4%B8%BAhtml%0A%0Ainspect%3A%20function(element)%EF%BC%9Aelement%E7%9A%84%E5%AD%97%E7%AC%A6%E4%B8%B2%E8%A1%A8%E7%A4%BA%0A%0Aup(element%2C%20expression%2C%20index)%EF%BC%9A%E5%88%A9%E7%94%A8Selector.findElement%E6%96%B9%E6%B3%95%E6%89%BE%E5%88%B0element%E5%85%83%E7%B4%A0%E7%9A%84%E7%A5%96%E5%85%88%E8%8A%82%E7%82%B9%E4%B8%AD%E7%AC%A6%E5%90%88%E8%A1%A8%E8%BE%BE%E5%BC%8Fexpression%E7%9A%84%E6%89%80%E6%9C%89%E5%85%83%E7%B4%A0%E7%BB%84%E6%88%90%E7%9A%84%E6%95%B0%E7%BB%84%E7%B4%A2%E5%BC%95%E4%B8%BAindex%E7%9A%84%E5%85%83%E7%B4%A0%EF%BC%8C%E4%B9%9F%E5%8F%AF%E4%BB%A5%E5%BF%BD%E7%95%A5expression(%E9%BB%98%E8%AE%A4%E4%B8%BA*%EF%BC%8C%E8%A1%A8%E7%A4%BA%E5%8C%B9%E9%85%8D%E6%89%80%E6%9C%89%E5%85%83%E7%B4%A0)%E5%92%8Cindex(%E9%BB%98%E8%AE%A4%E4%B8%BA0)%EF%BC%8C%E7%9B%B4%E6%8E%A5%E8%BF%99%E6%A0%B7%E8%B0%83%E7%94%A8%20up(element%2C%20index)%E6%88%96up(element)%0A%0Adown(element%2C%20expression%2C%20index)%EF%BC%9A%E8%B7%9Fup%E4%B8%80%E6%A0%B7%EF%BC%8C%E5%8F%AA%E6%98%AF%E8%BF%94%E5%9B%9E%E7%9A%84%E6%98%AF%E5%AD%90%E5%AD%99%E8%8A%82%E7%82%B9%0A%0Aprevious(element%2C%20expression%2C%20index)%EF%BC%9A%E8%BF%94%E5%9B%9E%E5%89%8D%E9%9D%A2%E7%9A%84%E5%85%84%E5%BC%9F%E8%8A%82%E7%82%B9%0A%0Anext(element%2C%20expression%2C%20index)%EF%BC%9A%E8%BF%94%E5%9B%9E%E5%90%8E%E9%9D%A2%E7%9A%84%E5%85%84%E5%BC%9F%E8%8A%82%E7%82%B9%0A%0AgetElementsBySelector(element%2Cargs)%EF%BC%9ASelector.findChildElements(element%2C%20args)%E7%9A%84%E5%B0%81%E8%A3%85%EF%BC%8Cargs%E8%A1%A8%E7%A4%BA%E5%8F%AF%E4%BB%A5%E4%BC%A0%E9%80%92%E5%A4%9A%E4%B8%AA%E5%8F%82%E6%95%B0%EF%BC%8C%E6%AF%8F%E4%B8%AA%E5%8F%82%E6%95%B0%E6%98%AF%E4%B8%80%E4%B8%AAcss%20selector%E8%A1%A8%E8%BE%BE%E5%BC%8F%EF%BC%8C%E8%BF%94%E5%9B%9Eelement%E7%9A%84%E5%AD%90%E5%AD%99%E8%8A%82%E7%82%B9%E4%B8%AD%E7%AC%A6%E5%90%88%E4%BB%BB%E4%BD%95%E4%B8%80%E4%B8%AAcss%20selector%E8%A1%A8%E8%BE%BE%E5%BC%8F%E7%9A%84%E5%85%83%E7%B4%A0%E7%BB%84%E6%88%90%E7%9A%84%E6%95%B0%E7%BB%84%0A%0AgetElementsByClassName(element%2C%20className)%EF%BC%9A%E8%BF%94%E5%9B%9Eelement%E4%B8%AD%E7%9A%84%E5%AD%90%E5%AD%99%E8%8A%82%E7%82%B9%E4%B8%AD%E7%AC%A6%E5%90%88clsssName%E7%9A%84%E5%85%83%E7%B4%A0%0A%0AhasClassName%3A%20function(element%2C%20className)%20%EF%BC%9A%E5%88%A4%E6%96%ADelement%E6%98%AF%E5%90%A6%E5%90%AB%E6%9C%89className%0A%0AaddClassName%3A%20function(element%2C%20className)%20%EF%BC%9A%E7%BB%99element%E6%B7%BB%E5%8A%A0%E4%B8%80%E4%B8%AAclass%0A%0AremoveClassName%3A%20function(element%2C%20className)%20%EF%BC%9A%E7%A7%BB%E9%99%A4%E5%85%83%E7%B4%A0%E4%B8%AD%E7%9A%84%E4%B8%80%E4%B8%AAclass%0A%0Aobserve()%EF%BC%9A%E8%B0%83%E7%94%A8Event%E5%AF%B9%E8%B1%A1(Prototype%E4%B8%AD%E7%9A%84%EF%BC%8C%E5%B0%86%E5%9C%A8%E5%90%8E%E9%9D%A2%E4%BB%8B%E7%BB%8D)%E7%9A%84observe%E6%96%B9%E6%B3%95%E4%B8%BA%E5%85%83%E7%B4%A0%E6%B3%A8%E5%86%8C%E4%BA%8B%E4%BB%B6handle%0A%0AstopObserving()%20%EF%BC%9A%E7%A7%BB%E9%99%A4%E6%B3%A8%E5%86%8C%E7%9A%84%E4%BA%8B%E4%BB%B6handle%0A%0AcleanWhitespace%3A%20function(element)%EF%BC%9A%E7%A7%BB%E9%99%A4%E5%85%83%E7%B4%A0%E4%B8%AD%E7%A9%BA%E7%99%BD%E7%9A%84%E6%96%87%E6%9C%AC%E5%AD%90%E8%8A%82%E7%82%B9%0A%0Aempty%3A%20function(element)%EF%BC%9A%E5%88%A4%E6%96%AD%E5%85%83%E7%B4%A0%E6%98%AF%E5%90%A6%E4%B8%BA%E7%A9%BA%0A%0AchildOf%3A%20function(element%2C%20ancestor)%20%EF%BC%9A%E5%88%A4%E6%96%ADelement%E6%98%AF%E5%90%A6%E4%B8%BAancestor%E7%9A%84%E5%AD%90%E5%AD%99%E8%8A%82%E7%82%B9%0A%0AscrollTo%3A%20function(element)%20%EF%BC%9A%E6%BB%9A%E5%8A%A8%E6%9D%A1%E7%A7%BB%E5%8A%A8%E5%88%B0%E5%85%83%E7%B4%A0%E6%89%80%E5%9C%A8%E7%9A%84%E5%9C%B0%E6%96%B9%0A%0AgetStyle%3A%20function(element%2C%20style)%20%EF%BC%9A%E5%BE%97%E5%88%B0%E5%85%83%E7%B4%A0%E6%9F%90%E4%B8%AAcss%E6%A0%B7%E5%BC%8F%E7%9A%84%E5%80%BC%EF%BC%8C%E4%BE%8B%E5%A6%82%24(element).getStyle(%22float%22)%0A%0AsetStyle%3A%20function(element%2C%20style)%20%EF%BC%9A%E8%AE%BE%E7%BD%AE%E5%85%83%E7%B4%A0%E7%9A%84css%E6%A0%B7%E5%BC%8F%EF%BC%8Cstyle%E5%8D%81%E4%B8%80%E4%B8%AA%E5%AF%B9%E8%B1%A1%EF%BC%8C%E4%BE%8B%E5%A6%82element.setStyle(%7Bleft%3A%20%2240px%22%2C%20%22background-color%22%3A%22%23666%22%7D)%0A%0AgetDimensions%3A%20function(element)%20%EF%BC%9A%E5%BE%97%E5%88%B0%E5%85%83%E7%B4%A0%E7%9A%84%E5%B0%BA%E5%AF%B8%EF%BC%8C%E5%8D%B3%E4%BD%BF%E5%85%83%E7%B4%A0%E6%98%AF%E9%9A%90%E8%97%8F%E7%9A%84%E4%B9%9F%E5%8F%AF%E4%BB%A5%E6%AD%A3%E7%A1%AE%E7%9A%84%E8%BF%94%E5%9B%9E%EF%BC%8C%E8%BF%94%E5%9B%9E%20return%20%7Bwidth%3A%20originalWidth%2C%20height%3A%20originalHeight%7D%E8%BF%99%E6%A0%B7%E7%9A%84%E5%85%B3%E8%81%94%E6%95%B0%E7%BB%84%0A%0AmakePositioned%3A%20function(element)%20%EF%BC%9A%E5%BD%93%E5%85%83%E7%B4%A0%E7%9A%84position%20css%E5%B1%9E%E6%80%A7%E4%B8%BAstatic%E6%88%96%E4%B8%8D%E5%AD%98%E5%9C%A8%E4%BD%BF%EF%BC%8C%E5%B0%86%E6%AC%A1%E5%B1%9E%E6%80%A7%E6%9B%B4%E6%94%B9%E4%B8%BArelative%0A%0AundoPositioned%3A%20function(element)%20%EF%BC%9A%E8%B7%9FmakePositioned%E7%9B%B8%E5%8F%8D%E7%9A%84%E6%93%8D%E4%BD%9C%0A%0AmakeClipping%3A%20function(element)%20%EF%BC%9A%E6%8A%8A%E5%85%83%E7%B4%A0%E5%8F%98%E6%88%90clipping(%E5%88%87%E7%89%87)%EF%BC%8C%E4%B9%9F%E5%B0%B1%E6%98%AF%E8%AE%BE%E7%BD%AE%E5%85%83%E7%B4%A0%E7%9A%84overflow%E5%B1%9E%E6%80%A7%E4%B8%BAhidden%0A%0AundoClipping%3A%20function(element)%EF%BC%9A%E5%8F%8D%E8%BD%AC%E4%B8%8A%E9%9D%A2%E7%9A%84%E6%96%B9%E6%B3%95%E5%AF%B9%E5%85%83%E7%B4%A0%E6%89%80%E5%81%9A%E7%9A%84%E4%BF%AE%E6%94%B9%0A%0AhasAttribute(element)%EF%BC%9A%E5%88%A4%E6%96%AD%E5%85%83%E7%B4%A0%E6%98%AF%E5%90%A6%E6%9C%89%E6%9F%90%E4%B8%AA%E5%B1%9E%E6%80%A7%0A%0AInsertion.Before%EF%BC%9A%E5%B0%86%E5%86%85%E5%AE%B9%E6%8F%92%E5%85%A5%E5%88%B0%E5%85%83%E7%B4%A0%E7%9A%84%E5%89%8D%E9%9D%A2%EF%BC%8C%E5%86%85%E5%AE%B9%E5%9C%A8%E5%85%83%E7%B4%A0%E5%A4%96%E9%9D%A2%0A%0AInsertion.Top%EF%BC%9A%E5%B0%86%E5%86%85%E5%AE%B9%E6%8F%92%E5%85%A5%E5%88%B0%E5%85%83%E7%B4%A0%E7%9A%84%E9%A1%B6%E9%83%A8%EF%BC%8C%E5%86%85%E5%AE%B9%E5%9C%A8%E5%85%83%E7%B4%A0%E9%87%8C%E9%9D%A2%0A%0AInsertion.Bottom%EF%BC%9A%E5%B0%86%E5%86%85%E5%AE%B9%E6%8F%92%E5%85%A5%E5%88%B0%E5%85%83%E7%B4%A0%E7%9A%84%E5%BA%95%E9%83%A8%EF%BC%8C%E5%86%85%E5%AE%B9%E5%9C%A8%E5%85%83%E7%B4%A0%E9%87%8C%E9%9D%A2%0A%0AInsertion.After%EF%BC%9A%E5%B0%86%E5%86%85%E5%AE%B9%E6%8F%92%E5%85%A5%E5%88%B0%E5%85%83%E7%B4%A0%E5%90%8E%E9%9D%A2%EF%BC%8C%E5%86%85%E5%AE%B9%E5%9C%A8%E5%85%83%E7%B4%A0%E5%A4%96%E9%9D%A2%0A%0A%E4%BB%A5%E4%B8%8A%E7%9A%84%E8%BF%99%E4%BA%9B%E6%96%B9%E6%B3%95%E7%BB%8F%E5%B8%B8%E4%BC%9A%E4%BD%BF%E7%94%A8%E5%88%B0%E7%9A%84%EF%BC%8C%E4%B8%8D%E8%BF%87%E9%87%8C%E9%9D%A2%E6%9C%89%E5%BE%88%E5%A4%9A%E6%96%B9%E6%B3%95%E6%88%91%E4%B9%9F%E6%B2%A1%E6%9C%89%E4%BD%BF%E7%94%A8%E8%BF%87%EF%BC%8C%E6%9C%89%E4%BA%9B%E6%98%AF%E5%9C%A8%E7%BD%91%E4%B8%8A%E6%90%9C%E9%9B%86%E7%9A%84%EF%BC%8C%E6%9C%89%E7%9A%84%E6%98%AF%E5%9C%A8%E4%B9%A6%E4%B8%8A%E6%89%BE%E5%88%B0%E7%9A%84%EF%BC%8C%E9%87%8C%E9%9D%A2%E6%9C%89%E5%BE%88%E5%A4%9A%E5%9C%A8%E6%9C%80%E8%BF%91%E5%88%B6%E4%BD%9Cgoogle%E6%97%A5%E5%8E%86%E6%97%B6%E7%94%A8%E5%88%B0%E4%BA%86%EF%BC%8C%E5%9C%A8js%E5%88%9B%E5%BB%BA%E8%A1%A8%E6%A0%BC%EF%BC%8Cdiv%E4%BB%80%E4%B9%88%E8%99%BD%E7%84%B6%E5%85%B7%E6%9C%89%E6%8C%91%E6%88%98%EF%BC%8C%E6%AF%94%E8%B5%B7%E5%85%B6%E4%BB%96%E4%BD%BF%E7%94%A8%E8%B5%B7%E6%9D%A5%E9%BA%BB%E7%83%A6%E5%A4%9A%E4%BA%86%EF%BC%8C%E4%BD%86%E6%98%AF%E5%BE%88%E6%9C%89%E9%80%BB%E8%BE%91%E6%80%A7%E7%9A%84%E3%80%82%0A%E5%B8%8C%E6%9C%9B%E4%B8%8A%E9%9D%A2%E8%83%BD%E7%BB%99JavaScript%E7%9A%84%E5%AD%A6%E4%B9%A0%E4%BD%BF%E7%94%A8%E7%9A%84%E5%90%8C%E4%BB%81%E5%B8%A6%E6%9D%A5%E6%96%B9%E4%BE%BF%EF%BC%8C%E8%BF%99%E9%87%8C%E5%8F%AF%E6%98%AF%E5%AE%9E%E7%8E%B0Ajax%E7%9A%84%E5%85%B3%E9%94%AE%E5%9B%A0%E7%B4%A0%E3%80%82%0A%0A%E6%8F%90%E4%BE%9B%E7%BB%99%E5%A4%A7%E5%AE%B6%E5%8F%82%E8%80%83%E5%AD%A6%E4%B9%A0%EF%BC%8C%E8%BF%99%E6%98%AF%E7%BB%8F%E5%B8%B8%E7%94%A8%E5%88%B0%E7%9A%84%E3%80%82%0A" quality="high" allowscriptaccess="always" pluginspage="http://www.macromedia.com/go/getflashplayer"></embed>
- 今天介绍一下 DOM 模型和 Prototype框架的一些对象和类,
- 什么是 DOM模型 --Document Object Module 就是文档对象类型,可以看成是结构化的树形的数据
- ,闲言少叙书归正传,下面是我最近学习js搜集到的一些document的方法,很实用的。下面将介绍它包含的对象方法。
- 下面有下载文件:能读懂的就看看下面的prototype.js
-
- 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的字符串表示
-
- 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的字符串表示
-
- 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的元素
-
- 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):判断元素是否有某个属性
-
- Insertion.Before:将内容插入到元素的前面,内容在元素外面
-
- Insertion.Top:将内容插入到元素的顶部,内容在元素里面
-
- Insertion.Bottom:将内容插入到元素的底部,内容在元素里面
-
- Insertion.After:将内容插入到元素后面,内容在元素外面
-
- 以上的这些方法经常会使用到的,不过里面有很多方法我也没有使用过,有些是在网上搜集的,有的是在书上找到的,里面有很多在最近制作google日历时用到了,在js创建表格,div什么虽然具有挑战,比起其他使用起来麻烦多了,但是很有逻辑性的。
- 希望上面能给JavaScript的学习使用的同仁带来方便,这里可是实现Ajax的关键因素。
-
- 提供给大家参考学习,这是经常用到的。