Rumah hujung hadapan web tutorial 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克隆位置属性到自身。
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Apa yang perlu saya lakukan jika saya menghadapi percetakan kod yang dihiasi untuk resit kertas terma depan? Apa yang perlu saya lakukan jika saya menghadapi percetakan kod yang dihiasi untuk resit kertas terma depan? Apr 04, 2025 pm 02:42 PM

Soalan dan penyelesaian yang sering ditanya untuk percetakan tiket kertas terma depan dalam pembangunan front-end, percetakan tiket adalah keperluan umum. Walau bagaimanapun, banyak pemaju sedang melaksanakan ...

Siapa yang dibayar lebih banyak Python atau JavaScript? Siapa yang dibayar lebih banyak Python atau JavaScript? Apr 04, 2025 am 12:09 AM

Tidak ada gaji mutlak untuk pemaju Python dan JavaScript, bergantung kepada kemahiran dan keperluan industri. 1. Python boleh dibayar lebih banyak dalam sains data dan pembelajaran mesin. 2. JavaScript mempunyai permintaan yang besar dalam perkembangan depan dan stack penuh, dan gajinya juga cukup besar. 3. Faktor mempengaruhi termasuk pengalaman, lokasi geografi, saiz syarikat dan kemahiran khusus.

Demystifying JavaScript: Apa yang berlaku dan mengapa penting Demystifying JavaScript: Apa yang berlaku dan mengapa penting Apr 09, 2025 am 12:07 AM

JavaScript adalah asas kepada pembangunan web moden, dan fungsi utamanya termasuk pengaturcaraan yang didorong oleh peristiwa, penjanaan kandungan dinamik dan pengaturcaraan tak segerak. 1) Pengaturcaraan yang didorong oleh peristiwa membolehkan laman web berubah secara dinamik mengikut operasi pengguna. 2) Penjanaan kandungan dinamik membolehkan kandungan halaman diselaraskan mengikut syarat. 3) Pengaturcaraan Asynchronous memastikan bahawa antara muka pengguna tidak disekat. JavaScript digunakan secara meluas dalam interaksi web, aplikasi satu halaman dan pembangunan sisi pelayan, sangat meningkatkan fleksibiliti pengalaman pengguna dan pembangunan silang platform.

Bagaimana untuk menggabungkan elemen array dengan ID yang sama ke dalam satu objek menggunakan JavaScript? Bagaimana untuk menggabungkan elemen array dengan ID yang sama ke dalam satu objek menggunakan JavaScript? Apr 04, 2025 pm 05:09 PM

Bagaimana cara menggabungkan elemen array dengan ID yang sama ke dalam satu objek dalam JavaScript? Semasa memproses data, kita sering menghadapi keperluan untuk mempunyai id yang sama ...

Bagaimana untuk mencapai kesan menatal paralaks dan kesan animasi elemen, seperti laman web rasmi Shiseido?
atau:
Bagaimanakah kita dapat mencapai kesan animasi yang disertai dengan menatal halaman seperti laman web rasmi Shiseido? Bagaimana untuk mencapai kesan menatal paralaks dan kesan animasi elemen, seperti laman web rasmi Shiseido? atau: Bagaimanakah kita dapat mencapai kesan animasi yang disertai dengan menatal halaman seperti laman web rasmi Shiseido? Apr 04, 2025 pm 05:36 PM

Perbincangan mengenai realisasi kesan animasi tatal dan elemen Parallax dalam artikel ini akan meneroka bagaimana untuk mencapai yang serupa dengan laman web rasmi Shiseido (https://www.shiseido.co.jp/sb/wonderland/) ... ...

Adakah JavaScript sukar belajar? Adakah JavaScript sukar belajar? Apr 03, 2025 am 12:20 AM

Pembelajaran JavaScript tidak sukar, tetapi ia mencabar. 1) Memahami konsep asas seperti pembolehubah, jenis data, fungsi, dan sebagainya. 2) Pengaturcaraan asynchronous tuan dan melaksanakannya melalui gelung acara. 3) Gunakan operasi DOM dan berjanji untuk mengendalikan permintaan tak segerak. 4) Elakkan kesilapan biasa dan gunakan teknik debugging. 5) Mengoptimumkan prestasi dan mengikuti amalan terbaik.

Perbezaan dalam Konsol.Log Output Result: Mengapa kedua -dua panggilan berbeza? Perbezaan dalam Konsol.Log Output Result: Mengapa kedua -dua panggilan berbeza? Apr 04, 2025 pm 05:12 PM

Perbincangan mendalam mengenai punca-punca utama perbezaan dalam output konsol.log. Artikel ini akan menganalisis perbezaan hasil output fungsi Console.log dalam sekeping kod dan menerangkan sebab -sebab di belakangnya. � ...

Bagaimana untuk melaksanakan fungsi seretan panel dan drop pelarasan yang serupa dengan vscode dalam pembangunan front-end? Bagaimana untuk melaksanakan fungsi seretan panel dan drop pelarasan yang serupa dengan vscode dalam pembangunan front-end? Apr 04, 2025 pm 02:06 PM

Terokai pelaksanaan fungsi seretan panel dan drop panel seperti VSCode di bahagian depan. Dalam pembangunan front-end, bagaimana untuk melaksanakan vscode seperti ...

See all articles