`
- 浏览:
183557 次
- 性别:
- 来自:
北京
-
今天介绍一下 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的关键因素。
提供给大家参考学习,这是经常用到的。
- prototype.rar (26.7 KB)
- 描述: 想使用 prototype 框架下的方法的请看这里的代码,并且要包含到你索引用的模板视图里面
- 下载次数: 12
分享到:
Global site tag (gtag.js) - Google Analytics
相关推荐
在Web开发领域,JavaScript、HTML5、DOM、Prototype和jQuery是不可或缺的核心技术。这份压缩包文件包含了一系列关于这些主题的参考资料,旨在帮助开发者快速查阅和理解相关知识点。 首先,JavaScript是一种广泛使用...
Prototype简化了DOM(文档对象模型)的处理,提供了`$`选择器,类似于jQuery的用法,可以快速选取页面元素。此外,还有`Element`和`Selectors`模块,用于更复杂的元素操作和CSS选择器匹配。 #### 1.2 对象扩展与...
这个资源集合了多个编程语言和技术领域的API,包括HTML5、CSS、JavaScript、DOM、PHP和Prototype。 HTML5是超文本标记语言的最新版本,它引入了许多新特性,如音频和视频元素、离线存储、图形绘制(Canvas)、表单...
2. **DOM操作**:Prototype简化了对HTML文档对象模型(DOM)的操作,如查找元素、创建新元素、修改元素属性等。它还提供了一种基于CSS选择器的元素查找方式,使得操作DOM更加便捷。 3. **Ajax**:Prototype封装了...
Prototype还包括丰富的事件处理功能,它对JavaScript原生事件模型进行了增强,提供了统一的事件绑定和解绑API,如`observe`和`stopObserving`。这使得处理用户交互更加灵活,避免了内存泄漏问题。 在工具性方面,...
7. **Prototype**:Prototype是一个早期的JavaScript库,为JavaScript开发提供了类和面向对象的特性,简化了DOM操作,但目前已被更现代的库如React和Vue取代。 8. **ASP**:ASP(Active Server Pages)是微软开发的...
Prototype是JavaScript库,它为浏览器环境提供了强大的对象扩展和功能,尤其在处理DOM(文档对象模型)和Ajax交互时。这个压缩包包含了Prototype库的多个版本的手册和源代码文件,便于开发者理解和使用。 首先,...
综上所述,Prototype是一个功能丰富的JavaScript库,它通过面向对象的编程模型、强大的DOM操作、高效的Ajax支持、动画效果、JSON处理以及对数组和哈希的辅助方法,极大地提升了JavaScript开发的效率和便利性。...
综上所述,"prototype"在JavaScript中涉及的是原型和原型链的概念,而在描述中的`prototype.js`则可能是指Prototype JavaScript库,该库提供了丰富的DOM操作、事件处理、Ajax等功能,极大地提高了开发效率。
Prototype 的核心特性包括增强的 JavaScript 对象模型、强大的 DOM 操作接口和高效的 Ajax 处理。在 1.7.2 版本中,这些特性得到了进一步优化,以提高性能和兼容性。 2. **对象扩展与类模拟** Prototype 引入了类...
1. **介绍**:解释Prototype的基本概念和目标,以及它如何简化JavaScript编程,特别是对于处理DOM(文档对象模型)和创建AJAX应用。 2. **安装与引用**:说明如何在项目中引入Prototype库,包括通过CDN或本地文件的...
Prototype.js 是一个开源JavaScript库,由Sam Stephenson于2005年创建,主要用于简化DOM(文档对象模型)操作,增强JavaScript的面向对象编程能力,以及提供实用的函数扩展。它在Web开发中扮演着重要的角色,尤其在...
- **DOM操作**:提供了一套强大的DOM(文档对象模型)操作接口,使得元素选择、创建、修改和事件处理更加简便。 - **Ajax 支持**:Prototype 提供了易用的接口进行异步通信,简化了与服务器的数据交换过程。 - **...
在JavaScript的世界里,Prototype和Script.aculo.us是两个非常重要的库,它们极大地提升了开发者的效率,并且为网页应用带来了丰富的交互效果。Prototype是一个强大的JavaScript框架,而Script.aculo.us则是在...
DOM(文档对象模型)操作是Prototype的核心之一。`Element`对象提供了一系列便捷的方法,如`$(selector)`用于选取DOM元素,`Element.Methods`包含了大量用于操作元素的函数,如`update`、`insert`、`remove`等,...
这使得开发者能够构建复杂的对象模型和模块化的代码结构。 六、API文档解读 在压缩包中的"Prototype-v1.6.0.chm"文件是Prototype 1.6.0的官方API文档,包含了详细的类、方法和函数介绍,是学习和查找Prototype库...
Prototype 提供了一套强大的 DOM(文档对象模型)操作接口,允许开发者以简洁的方式选择、创建和修改 HTML 元素。例如,`$` 函数作为一个快捷方式,用于根据 ID、CSS 选择器或 DOM 元素获取元素,而 `$$` 则用于...
5. **事件处理**:Prototype扩展了JavaScript的事件模型,提供了统一的事件监听和触发机制。文档详细解释了`Event.observe()`、`Event.stop()`等事件处理函数的用法,使开发者能够更好地控制用户交互。 6. **动画...
"Prototype.js"是一个针对JavaScript的开源库,旨在增强和扩展JavaScript的基本功能,尤其在处理DOM(文档对象模型)操作、事件处理以及Ajax交互时提供了极大的便利。 ### 1. Prototype.js核心概念 - **原型链**:...