Prototype使用学习手册指南之dom.js

我拼了命去爱8

我拼了命去爱8

2016-02-19 16:35

下面是个超简单的Prototype使用学习手册指南之dom.js教程,图老师小编精心挑选推荐,大家行行好,多给几个赞吧,小编吐血跪求~

  DOM定义对操作一个文档对象的节点结构提供了实用的方法,它提供了像执行对象插入,更新,删除,克隆等这些常用的方法。这部分提供了很多(写的都有点烦了)方便的操作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的可见性

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

  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’)

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

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

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

展开更多 50%)
分享

猜你喜欢

Prototype使用学习手册指南之dom.js

Web开发
Prototype使用学习手册指南之dom.js

Prototype使用指南之dom.js

Web开发
Prototype使用指南之dom.js

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Prototype使用学习手册指南之form.js

Web开发
Prototype使用学习手册指南之form.js

Prototype使用学习手册指南之ajax.js

Web开发
Prototype使用学习手册指南之ajax.js

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

prototype使用学习手册指南之Position.js

Web开发
prototype使用学习手册指南之Position.js

Prototype使用学习手册指南之Selector.js

Web开发
Prototype使用学习手册指南之Selector.js

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

C++ Builder中保持控件的位置及大小

C++ Builder中保持控件的位置及大小

Win 8系统实现F8进入安全模式的方法

Win 8系统实现F8进入安全模式的方法
下拉加载更多内容 ↓