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


Posted in Javascript onApril 15, 2012

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

<script> 
function tab(dom){ 
var list = document.getElementById("list").getElementsByTagName("li"); 
var con = document.getElementById("con").getElementsByTagName("div"); 
for(var i=0;i<list.length;i++){ 
if(list==dom){ 
list.className = "on"; 
con.style.display = "block"; 
} 
else{ 
list.className=""; 
con.style.display="none"; 
} 
} 
} 
</script> 
<div id="list"> 
<ul> 
<li class="on">1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
</ul> 
</div> 
<div id="con"> 
<div style="display:block;">111111</div> 
<div style="display:none;">222222</div> 
<div style="display:none;">333333</div> 
<div style="display:none;">444444</div> 
</div>

我解释一下
var list = document.getElementById("list").getElementsByTagName("li");
var con = document.getElementById("con").getElementsByTagName("div");
获取dom元素,这个不用说了吧。写什么效果第一件事都是获取元素
for(var i=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> 
function tab(){ 
var list = document.getElementById("list").getElementsByTagName("li"); 
var con = document.getElementById("con").getElementsByTagName("div"); 
for(var i = 0;i<list.length;i++) 
{ 
list.onclick=function(){ 
for(var i=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> 
<div id="list"> 
<ul> 
<li class="on">1</li> 
<li>2</li> 
<li>3</li> 
<li>4</li> 
</ul> 
</div> 
<div id="con"> 
<div style="display:block;">111111</div> 
<div style="display:none;">222222</div> 
<div style="display:none;">333333</div> 
<div style="display:none;">444444</div> 
</div>

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

下章继续说效果

Javascript 相关文章推荐
jquery文字上下滚动的实现方法
Mar 22 Javascript
浅析javascript中function 的 length 属性
May 27 Javascript
jquery的attr方法禁用表单元素禁用输入内容
Jun 23 Javascript
JS锚点的设置与使用方法
Sep 05 Javascript
浅谈js算法和流程控制
Dec 29 Javascript
webpack学习教程之publicPath路径问题详解
Jun 17 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
Jul 19 Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 Javascript
jQuery+css last-child实现选择最后一个子元素操作示例
Dec 10 jQuery
mpvue实现微信小程序快递单号查询代码
Apr 03 Javascript
js根据后缀判断文件文件类型的代码
May 09 Javascript
js实现拖拽元素选择和删除
Aug 25 Javascript
javascript针对DOM的应用分析(三)
Apr 15 #Javascript
javascript针对DOM的应用分析(二)
Apr 15 #Javascript
javascript针对DOM的应用实例(一)
Apr 15 #Javascript
JavaScript中的null和undefined解析
Apr 14 #Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
Apr 14 #Javascript
jquerymobile checkbox及时刷新才能获取其准确值
Apr 14 #Javascript
深入理解JavaScript系列(16) 闭包(Closures)
Apr 12 #Javascript
You might like
Mysql中limit的用法方法详解与注意事项
2008/04/19 PHP
深入php中var_dump方法的使用详解
2013/06/24 PHP
PHP 通过Socket收发十六进制数据的实现代码
2013/08/16 PHP
Thinkphp中import的几个用法详细介绍
2014/07/02 PHP
Yii实现多按钮保存与提交的方法
2014/12/03 PHP
thinkPHP简单导入和使用阿里云OSSsdk的方法
2017/03/15 PHP
Laravel5.0+框架邮件发送功能实现方法图文与实例详解
2019/04/23 PHP
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
利用Jquery实现几款漂亮实用的时间轴(附示例代码)
2017/02/15 Javascript
JavaScript基本类型值-Number类型
2017/02/24 Javascript
JSON 数据格式详解
2017/09/13 Javascript
利用10行js代码实现上下滚动公告效果
2017/12/08 Javascript
Angular5中调用第三方js插件的方法
2018/02/26 Javascript
Vue-Router基础学习笔记(小结)
2018/10/15 Javascript
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
[34:10]Secret vs VG 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.24
2019/09/10 DOTA
python抽象基类用法实例分析
2015/06/04 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
解决sublime+python3无法输出中文的问题
2018/12/12 Python
Python3.5文件修改操作实例分析
2019/05/01 Python
Python安装selenium包详细过程
2019/07/23 Python
django admin.py 外键,反向查询的实例
2019/07/26 Python
解决django FileFIELD的编码问题
2020/03/30 Python
浅谈Python中文件夹和python package包的区别
2020/06/01 Python
python装饰器三种装饰模式的简单分析
2020/09/04 Python
如何设定的weblogic的热启动模式(开发模式)与产品发布模式
2012/09/08 面试题
一些Solaris面试题
2015/12/22 面试题
Servlet如何得到客户端机器的信息
2014/10/17 面试题
青年志愿者先进事迹
2014/05/06 职场文书
倡议书范文格式
2014/05/12 职场文书
文明寝室标语
2014/06/13 职场文书
导游词之南京夫子庙
2019/12/09 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP
Android RecyclerView实现九宫格效果
2022/06/28 Java/Android