您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息
免费发信息

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

2024/3/28 17:20:54发布7次查看
下面我就写几个给大家看看
一,点击传参方法
复制代码 代码如下:
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时间传入它自己。这样有点违反了结构与表现相分离的道理。所以我们就换种写法
二,直接写入鼠标事件方法
复制代码 代码如下:
1
2
3
4
111111
222222
333333
444444
只是简单的改动一下就可以了,因为在js中有这些方法可以用比如onclick,onmouseover等等,但是用的时候我要先把所有的要用这个事件的元素都遍历一下,如果那个被点击就会传入一个this,我们只需要像第一种方法一样判断一下list是不是和这个this相同,然后下面的操作和第一种方法一样
(这样两种方法都是比较简单的写法,在js里还有一些比较高级复杂的写法,但是用到的思想和这两种写法大多一样。)
好了就到这里,建议大家可以用这种方法写一个图片切换效果,我想应该很简单吧
下章继续说效果
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录