javascript针对DOM的应用分析(四)
JavaScript应用 分析 dom 针对
2023-06-13 09:14:33 时间
下面我就写几个给大家看看
一,点击传参方法
复制代码代码如下:
一,点击传参方法
<script>
functiontab(dom){
varlist=document.getElementById("list").getElementsByTagName("li");
varcon=document.getElementById("con").getElementsByTagName("div");
for(vari=0;i<list.length;i++){
if(list==dom){
list.className="on";
con.style.display="block";
}
else{
list.className="";
con.style.display="none";
}
}
}
</script>
<divid="list">
<ul>
<liclass="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<divid="con">
<divstyle="display:block;">111111</div>
<divstyle="display:none;">222222</div>
<divstyle="display:none;">333333</div>
<divstyle="display:none;">444444</div>
</div>
我解释一下
varlist=document.getElementById("list").getElementsByTagName("li");
varcon=document.getElementById("con").getElementsByTagName("div");
获取dom元素,这个不用说了吧。写什么效果第一件事都是获取元素
for(vari=0;i<list.length;i++){
if(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>
functiontab(){
varlist=document.getElementById("list").getElementsByTagName("li");
varcon=document.getElementById("con").getElementsByTagName("div");
for(vari=0;i<list.length;i++)
{
list.onclick=function(){
for(vari=0;i<list.length;i++){
if(list==this){
list.className="on";
con.style.display="block";
}
else{
list.className="";
con.style.display="none";
}
}
}
}
}
window.onload=function(){tab();}
</script>
<divid="list">
<ul>
<liclass="on">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<divid="con">
<divstyle="display:block;">111111</div>
<divstyle="display:none;">222222</div>
<divstyle="display:none;">333333</div>
<divstyle="display:none;">444444</div>
</div>
只是简单的改动一下就可以了,因为在JS中有这些方法可以用比如onclick,onmouseover等等,但是用的时候我要先把所有的要用这个事件的元素都遍历一下,如果那个被点击就会传入一个this,我们只需要像第一种方法一样判断一下list是不是和这个this相同,然后下面的操作和第一种方法一样
(这样两种方法都是比较简单的写法,在JS里还有一些比较高级复杂的写法,但是用到的思想和这两种写法大多一样。)
好了就到这里,建议大家可以用这种方法写一个图片切换效果,我想应该很简单吧
下章继续说效果
相关文章
- 【说站】javascript高阶函数的介绍
- javascript html转换成markdown,如何使用Turndown使用JavaScript将HTML转换为Markdown[通俗易懂]
- 用javascript分类刷leetcode4.贪心(图文视频讲解)
- 使用 Chrome 开发者工具分析 SAP UI5 应用的 JavaScript 代码执行性能瓶颈
- JavaScript学习总结(五)——Javascript中==和===的区别详解编程语言
- 用JavaScript限制textarea输入长度(For:IE、Firefox...)[
- 整理的比较不错的JavaScript的方法和技巧
- JavaScript触发器详解
- JavaScript应用技巧集合[推荐]
- javascript客户端生成MD5值的函数代码
- javascript之典型高阶函数应用介绍二
- JavaScript验证用户输入的是字符或数字及ASCIIChart应用
- JavaScript中的style.display属性操作
- javascript实现信息的显示和隐藏如注册页面
- JavaScript按位运算符的应用简析
- javascript匿名函数应用示例介绍
- JavaScript作用域链示例分享
- javascript记录文本框内文字个数检测文字个数变化