prototype Element学习笔记(篇二)


Posted in Javascript onOctober 26, 2008

所有函数的第一个参数都为:element,表示要操作的元素的引用,这是为了方面在Element.extend时,把这些方法加入到DOM对象中去,用的是methodize函数。调用的时候不需要输入第一个参数了,如:

var b=$('div1').visible();

另外,几乎所有函数都会返回自身,注意,扩展后的元素的类型为:HTMLElement,之所以这么做,有一个好处,就是方便连写代码,如:

$('div1').update().insert('这是新插入的内容');

这样写代码有一个好处,可读性强,且易于书写。

下面是函数介绍:

visible(element):Boolean

元素是否可见(依靠element.style.display)

toggle(element):HTMLElement

元素可见则使之不可见,不可见则使之可见。再返回元素本身的引用。(依靠element.style.display)

hide(element):HTMLElement

隐藏元素。(依靠element.style.display)

show(element):HTMLElement

显示元素。(依靠element.style.display)

remove(element):HTMLElement

删除元素自身(删除后返回被删除的元素)。

update(element, content):HTMLElement

类似于element.innerHTML,加入了处理脚本等等功能。它先插入内容,然后再执行content中的脚本。

replace(element, content):HTMLElement

替换当前元素。并返回被替换的元素。

insert(element, insertions):HTMLElement

在element的指定位置插入内容,insertions的值如下:
string/number/element,例如:'this is the string to insert!!',默认被插到元素的bottom位置。
{top:xxxxx,bottom:yyyy,before:zzzzz,after:aaaa},例如:{top:'this the content you will insert!'}。

返回值为element。

wrap(element, wrapper, attributes):HTMLElement

在element外面再罩一个元素。通常用于做遮罩。

wrapper:elementId、element、tagName、attrbutes(当创建的罩为div时,可省略标签设置)

attributes:一个JSON对象,用于设置元素的样式,如:{color:"red",backgroundImage:"url(header.gif)"}

$('win1').wrap('div1',{color:“#666”});

$('win1').wrap('span',{font-size:12});

$('win1').wrap({color:“#666”});

返回创建的遮罩的引用。

inspect(element):string

生成一个表示当前元素的字符串,例如:<div id='xxx' class='xxx'>,它只得两个属性,不等于toHTML()。

recursivelyCollect(element, property):HTMLElement[]

不好描述,例如:$('div1').recursivelyCollect('firstchild'),它返回div1中的所有是长子身份的元素。

ancestors(element):HTMLElement[]

返回此元素的所有嫡系祖先,例如:如果有元素div1,它的父亲是div2,div2的,父亲是div3,就是这样一直调用下去。

descendants(element):HTMLElement[]

返回所有子孙元素结点的数组。等于element.select('*')。

firstDescendant(element):HTMLElement

返回第一个儿子。所有儿子(不包括孙子、曾孙……哦)。

immediateDescendants(element):HTMLElement[]

返回所有儿子(不包括孙子、曾孙……哦)。

previousSiblings(element):HTMLElement[]

返回所有兄长。

nextSiblings(element):HTMLElement[]

返回所有弟弟。

siblings(element):HTMLElement[]

返回所有兄弟,且按“从大到小”(在html中的出现顺序)的顺序排序。

match(element, selector):Boolean

元素是否满足指定的选择符

up(element, expression, index):HTMLElement

element.ancestors()中,满足表达式expression的数组中,第index个元素,示例如下:

$('div1').up('div',1)返回直接祖先中,标签为div的,且序号为1的元素的引用。

down(element, expression, index):HTMLElement

返回子孙中,第index个满足选择符expression的元素。

previous(element, expression, index):HTMLElement

previous(element, expression, index):HTMLElement

这两个没悬念,返回前一个、后一个,前n个、后n个。

select(element,selector1,selector2,……):HTMLElement[]

返回子孙中,满足选择符的元素的数组,多个选择符之间是并集关系。

adjacent(element,selector):HTMLElement[]

返回所有满足选择符的兄弟,不包括自己。

identify(element):string

有id的返回已有id,没有的则取一个id。并返回。

readAttribute(element, name):string

读属性

writeAttribute(element, name, value):HTMLElement

写属性


=============================================

上面的函数用于查询、杂务,下面的函数一般用于获取、设置各种坐标,在网页中,一个元素的常用坐标有好几种,不外如下:

一、相对于文档左上角的

二、相对于视区左上角的

三、相对于某一个元素的

纵观各个框架中的代码,求取坐标不外是这三种。下面略述一二。

getHeight(element)、getWidth(element),相当于求clientHeight、clientWidth。

classNames(element):Element.ClassNames

hasClassName(element, className):Boolean

addClassName(element, className):HTMLElement

removeClassName(element, className):HTMLElement

toggleClassName(element, className):HTMLElement

cleanWhitespace(element):HTMLElement,删除空白文本节点

empty(element):Boolean,元素是否内容为空白

descendantOf(element, ancestor):Boolean,判断是元素是否为某一元素的子孙,ancestor为id或元素引用。

scrollTo(element):HTMLElement,滚动到此元素,并返回此元素的引用。

getStyle(element, style):类型不定,返回元素的某一样式的值。

getOpacity(element):Float,返回透明度。

setStyle(element, styles):HTMLElement,设置元素的样式,styles是一个JSON对象。

setOpacity(element, value):HTMLElement,设置元素的透明度。

getDimensions(element):{width:x,height:y}。返回clientWidth,clientHeight。

makePositioned(element):HTMLElement,将position设为relative。不把位置设成当前位置的。

undoPositioned(element):HTMLElement,将元素的position设为默认值。

makeClipping(element):HTMLElement,设置元素的溢出。

undoClipping(element):HTMLElement,清除溢出。

cumulativeOffset(element):Element._returnOffset,获取相对整个页面的offset。

positionedOffset(element):Element._returnOffset,获取相对于第一个position不是static的元素offset。如果都是static,则是相对于页面。

absolutize(element):HTMLElement,把position设成absolute,并把位置设置成当前位置。

relativize(element):HTMLElement,把position设成ralative,并把位置设成当前位置。

cumulativeScrollOffset(element):Element._returnOffset,相对于顶层容器的scrollOffset的总和,不一定是文档哦,因为页面中有iframe就不是了。

getOffsetParent(element):HTMLElement,研究过css的就好说,不用多言了。

viewportOffset(element):Element._returnOffset,求相对于视区左上角的偏移量。

clonePosition(element, source):HTMLElement,从source克隆位置属性到自身。

Javascript 相关文章推荐
JavaScript 应用类库代码
Jun 02 Javascript
javascript 清除输入框中的数据
Apr 13 Javascript
跨域表单提交状态的变相判断代码
Nov 12 Javascript
javascript parseInt与Number函数的区别
Jan 21 Javascript
Javascript学习笔记二 之 变量
Dec 15 Javascript
javascript 快速排序函数代码
May 30 Javascript
js树插件zTree获取所有选中节点数据的方法
Jan 28 Javascript
jQuery获取标签文本内容和html内容的方法
Mar 27 Javascript
jquery图片切换实例分析
Apr 15 Javascript
JavaScript模版引擎的基本实现方法浅析
Feb 15 Javascript
Javascript OOP之面向对象
Jul 31 Javascript
JavaScript实现垂直滚动条效果
Jan 18 Javascript
prototype Element学习笔记(篇一)
Oct 26 #Javascript
JS对URL字符串进行编码/解码分析
Oct 25 #Javascript
在html页面中包含共享页面的方法
Oct 24 #Javascript
IE浏览器兼容Firefox的JS脚本的代码
Oct 23 #Javascript
Javascript客户端将指定区域导出到Word、Excel的代码
Oct 22 #Javascript
checkbox 多选框 联动实现代码
Oct 22 #Javascript
javascript网页关闭时提醒效果脚本
Oct 22 #Javascript
You might like
php中cookie的作用域
2008/03/27 PHP
php带密码功能并下载远程文件保存本地指定目录 修改加强版
2010/05/16 PHP
ThinkPHP5.0多个文件上传后找不到临时文件的修改方法
2018/07/30 PHP
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
JavaScript 学习笔记(五)
2009/12/31 Javascript
浅析js封装和作用域
2013/07/09 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
推荐10 款 SVG 动画的 JavaScript 库
2015/03/24 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
2015/10/01 Javascript
JS原型链怎么理解
2016/06/27 Javascript
JS简单设置下拉选择框默认值的方法
2016/08/20 Javascript
jQuery内容过滤选择器用法示例
2016/09/09 Javascript
AngularJs 动态加载模块和依赖
2016/09/15 Javascript
微信小程序  简单实例(阅读器)的实例开发
2016/09/29 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
2016/11/21 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
2017/01/29 Javascript
Express之get,pos请求参数的获取
2017/05/02 Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
2018/06/26 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
vue3.0中使用element的完整步骤
2021/03/04 Vue.js
Python实现更改图片尺寸大小的方法(基于Pillow包)
2016/09/19 Python
python 如何将数据写入本地txt文本文件的实现方法
2019/09/11 Python
Python实现一个简单的毕业生信息管理系统的示例代码
2020/06/08 Python
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
车工岗位职责
2013/11/26 职场文书
出纳岗位职责模板
2013/11/27 职场文书
志愿者活动总结范文
2014/04/26 职场文书
教育实践活动对照检查材料
2014/09/23 职场文书
民主生活会剖析材料
2014/09/30 职场文书
交通事故赔偿协议书
2014/10/16 职场文书
旅游项目合作意向书
2015/05/08 职场文书
《平行四边形的面积》教学反思
2016/02/16 职场文书
python使用pygame创建精灵Sprite
2021/04/06 Python
Go语言-为什么返回值为接口类型,却返回结构体
2021/04/24 Golang
Vue全局事件总线你了解吗
2022/02/24 Vue.js
Django框架中模型的用法
2022/06/10 Python