Heim > Web-Frontend > js-Tutorial > javascript针对DOM的应用分析(四)_DOM

javascript针对DOM的应用分析(四)_DOM

WBOY
Freigeben: 2016-05-16 17:54:10
Original
993 Leute haben es durchsucht

下面我就写几个给大家看看
一,点击传参方法

复制代码 代码如下:

<script> <BR>function tab(dom){ <BR>var list = document.getElementById("list").getElementsByTagName("li"); <BR>var con = document.getElementById("con").getElementsByTagName("div"); <BR>for(var i=0;i<list.length;i++){ <BR>if(list==dom){ <BR>list.className = "on"; <BR>con.style.display = "block"; <BR>} <BR>else{ <BR>list.className=""; <BR>con.style.display="none"; <BR>} <BR>} <BR>} <BR></script>


  • 1

  • 2

  • 3

  • 4




111111

222222

333333

444444



我解释一下
var list = document.getElementById("list").getElementsByTagName("li");
var con = document.getElementById("con").getElementsByTagName("div");
获取dom元素,这个不用说了吧。写什么效果第一件事都是获取元素
复制代码 代码如下:

for(var i=0;iif(list==dom){
list.className = "on";
con.style.display = "block";
}
else{
list.className="";
con.style.display="none";
}

遍历一下所有的li元素,找到和传进来的dom一样的东西,然后把他的class设置为on,并且把相对应的div给显示出来,其他的就全部把className设置为空,并且把对应的div给隐藏。
大概就是这样。但是大家肯定就都发现了这样的写法的缺点,就是每个li都要设置一个onclick时间传入它自己。这样有点违反了结构与表现相分离的道理。所以我们就换种写法
二,直接写入鼠标事件方法
复制代码 代码如下:

<script> <BR>function tab(){ <BR>var list = document.getElementById("list").getElementsByTagName("li"); <BR>var con = document.getElementById("con").getElementsByTagName("div"); <BR>for(var i = 0;i<list.length;i++) <BR>{ <BR>list.onclick=function(){ <BR>for(var i=0;i<list.length;i++){ <BR>if(list==this){ <BR>list.className = "on"; <BR>con.style.display = "block"; <BR>} <BR>else{ <BR>list.className=""; <BR>con.style.display="none"; <BR>} <BR>} <BR>} <BR>} <BR>} <BR>window.onload=function(){tab();} <BR></script>


  • 1

  • 2

  • 3

  • 4




111111

222222

333333

444444



只是简单的改动一下就可以了,因为在JS中有这些方法可以用比如onclick,onmouseover等等,但是用的时候我要先把所有的要用这个事件的元素都遍历一下,如果那个被点击就会传入一个this,我们只需要像第一种方法一样判断一下list是不是和这个this相同,然后下面的操作和第一种方法一样
(这样两种方法都是比较简单的写法,在JS里还有一些比较高级复杂的写法,但是用到的思想和这两种写法大多一样。)
好了就到这里,建议大家可以用这种方法写一个图片切换效果,我想应该很简单吧

下章继续说效果
Verwandte Etiketten:
dom
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage