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 相关文章推荐
IE不出现Flash激活框的小发现的js实现方法
Sep 07 Javascript
jquery 关键字“拖曳搜索”之“拖曳”以及 图片“提示自适应放大”效果 的实现
Apr 18 Javascript
Jquery中对数组的操作代码
Aug 12 Javascript
纯js网页画板(Graphics)类简介及实现代码
Dec 24 Javascript
JS中产生标识符方式的演变
Jun 12 Javascript
一篇文章搞定JavaScript类型转换(面试常见)
Jan 21 Javascript
vue.js选中动态绑定的radio的指定项
Jun 02 Javascript
详解用node.js实现简单的反向代理
Jun 26 Javascript
Vue中建立全局引用或者全局命令的方法
Aug 21 Javascript
highcharts.js数据绑定方式代码实例
Nov 13 Javascript
JavaScript的变量声明与声明提前用法实例分析
Nov 26 Javascript
js如何验证密码强度
Mar 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
浅析get与post的一些特殊情况
2014/07/28 PHP
php提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
php实现购物车功能(上)
2020/07/23 PHP
代码精简的可以实现元素圆角的js函数
2007/07/21 Javascript
Javascript的一种模块模式
2008/03/22 Javascript
Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件
2011/03/12 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
2013/02/16 Javascript
js判断是否为ie的方法小结
2014/01/13 Javascript
使用jQuery判断IE浏览器版本的代码
2014/06/14 Javascript
js中通过父级进行查找定位元素
2014/06/15 Javascript
js实现从右向左缓缓浮出网页浮动层广告的方法
2015/05/09 Javascript
js鼠标移动时禁止选中文字
2017/02/19 Javascript
vue登录注册及token验证实现代码
2017/12/14 Javascript
详解Vue 全局引入bass.scss 处理方案
2018/03/26 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
vue+django实现一对一聊天功能的实例代码
2019/07/17 Javascript
JavaScript面向对象程序设计中对象的定义和继承详解
2019/07/29 Javascript
[49:21]完美世界DOTA2联赛循环赛 Ink Ice vs LBZS BO2第二场 11.05
2020/11/06 DOTA
Python实现测试磁盘性能的方法
2015/03/12 Python
Python3.遍历某文件夹提取特定文件名的实例
2018/04/26 Python
Python实现的查询mysql数据库并通过邮件发送信息功能
2018/05/17 Python
python运行时强制刷新缓冲区的方法
2019/01/14 Python
详解Python的数据库操作(pymysql)
2019/04/04 Python
python实现扫描局域网指定网段ip的方法
2019/04/16 Python
使用python实现希尔、计数、基数基础排序的代码
2019/12/25 Python
python数据分析:关键字提取方式
2020/02/24 Python
基于virtualenv创建python虚拟环境过程图解
2020/03/30 Python
Clarks鞋美国官网:全球领军鞋履品牌
2017/05/13 全球购物
复古斯堪的纳维亚儿童服装:Baby go Retro
2017/09/09 全球购物
潘多拉意大利官方网上商城:网上选购PANDORA珠宝
2018/10/07 全球购物
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
介绍一下你对SOA的认识
2016/04/24 面试题
纪念九一八爱国演讲稿600字
2014/09/14 职场文书
环卫处个人工作总结
2015/03/04 职场文书
Jupyter Notebook 如何修改字体和大小以及更改字体样式
2021/06/03 Python