首页 web前端 js教程 prototype Element学习笔记(篇二)_prototype

prototype Element学习笔记(篇二)_prototype

May 16, 2016 pm 06:59 PM
element

所有函数的第一个参数都为: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
  生成一个表示当前元素的字符串,例如:

,它只得两个属性,不等于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克隆位置属性到自身。
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

前端热敏纸小票打印遇到乱码问题怎么办? 前端热敏纸小票打印遇到乱码问题怎么办? Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中,小票打印是一个常见的需求。然而,很多开发者在实...

谁得到更多的Python或JavaScript? 谁得到更多的Python或JavaScript? Apr 04, 2025 am 12:09 AM

Python和JavaScript开发者的薪资没有绝对的高低,具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大,薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

神秘的JavaScript:它的作用以及为什么重要 神秘的JavaScript:它的作用以及为什么重要 Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石,它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发,极大地提升了用户体验和跨平台开发的灵活性。

如何使用JavaScript将具有相同ID的数组元素合并到一个对象中? 如何使用JavaScript将具有相同ID的数组元素合并到一个对象中? Apr 04, 2025 pm 05:09 PM

如何在JavaScript中将具有相同ID的数组元素合并到一个对象中?在处理数据时,我们常常会遇到需要将具有相同ID�...

如何实现视差滚动和元素动画效果,像资生堂官网那样?
或者:
怎样才能像资生堂官网一样,实现页面滚动伴随的动画效果? 如何实现视差滚动和元素动画效果,像资生堂官网那样? 或者: 怎样才能像资生堂官网一样,实现页面滚动伴随的动画效果? Apr 04, 2025 pm 05:36 PM

实现视差滚动和元素动画效果的探讨本文将探讨如何实现类似资生堂官网(https://www.shiseido.co.jp/sb/wonderland/)中�...

JavaScript难以学习吗? JavaScript难以学习吗? Apr 03, 2025 am 12:20 AM

学习JavaScript不难,但有挑战。1)理解基础概念如变量、数据类型、函数等。2)掌握异步编程,通过事件循环实现。3)使用DOM操作和Promise处理异步请求。4)避免常见错误,使用调试技巧。5)优化性能,遵循最佳实践。

console.log输出结果差异:两次调用为何不同? console.log输出结果差异:两次调用为何不同? Apr 04, 2025 pm 05:12 PM

深入探讨console.log输出差异的根源本文将分析一段代码中console.log函数输出结果的差异,并解释其背后的原因。�...

前端开发中如何实现类似 VSCode 的面板拖拽调整功能? 前端开发中如何实现类似 VSCode 的面板拖拽调整功能? Apr 04, 2025 pm 02:06 PM

探索前端中类似VSCode的面板拖拽调整功能的实现在前端开发中,如何实现类似于VSCode...

See all articles