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 相关文章推荐
Javascript----文件操作
Jan 18 Javascript
JavaScript更改class和id的方法
Oct 10 Javascript
JavaScript 空位补零实现代码
Feb 26 Javascript
JQuery扩展插件Validate 3通过参数设置错误信息
Sep 05 Javascript
input输入框的自动匹配(原生代码)
Mar 19 Javascript
多个表单中如何获得这个文件上传的网址实现js代码
Mar 25 Javascript
form表单action提交的js部分与html部分
Jan 07 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
Aug 11 Javascript
jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
Jul 01 Javascript
Google 地图控件集详解及实例代码
Aug 06 Javascript
vue2.0 资源文件assets和static的区别详解
Apr 08 Javascript
vue实现的双向数据绑定操作示例
Dec 04 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
PHP、Nginx、Apache中禁止网页被iframe引用的方法
2020/10/01 PHP
php对关联数组循环遍历的实现方法
2015/03/13 PHP
PHP数组和explode函数示例总结
2015/05/08 PHP
JQuery 网站换肤功能实现代码
2009/11/02 Javascript
apycom出品的jQuery精美菜单破解方法
2011/02/18 Javascript
jQuery.extend()的实现方式详解及实例
2013/06/29 Javascript
js中哈希表的几种用法总结
2014/01/28 Javascript
JavaScript对象之深度克隆介绍
2014/12/08 Javascript
jquery简单图片切换显示效果实现方法
2015/01/14 Javascript
jQuery应用之jQuery链用法实例
2015/01/19 Javascript
原生JavaScript编写canvas版的连连看游戏
2016/05/29 Javascript
require.js+vue开发微信上传图片组件
2016/10/27 Javascript
jquery插件bootstrapValidator数据验证详解
2016/11/09 Javascript
探索Javascript中this的奥秘
2016/12/11 Javascript
基于bootstrop常用类总结(推荐)
2017/09/11 Javascript
Vue.js实现的表格增加删除demo示例
2018/05/22 Javascript
详解Vue.js v-for不支持IE9的解决方法
2018/12/29 Javascript
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
小程序瀑布流组件实现翻页与图片懒加载
2020/05/19 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
用Python的Tornado框架结合memcached页面改善博客性能
2015/04/24 Python
Python内置函数——__import__ 的使用方法
2017/11/24 Python
python3第三方爬虫库BeautifulSoup4安装教程
2018/06/19 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
Python学习笔记基本数据结构之序列类型list tuple range用法分析
2019/06/08 Python
Python代码执行时间测量模块timeit用法解析
2020/07/01 Python
Python 高效编程技巧分享
2020/09/10 Python
Python实现淘宝秒杀功能的示例代码
2021/01/19 Python
Python如何实现Paramiko的二次封装
2021/01/30 Python
见习期自我鉴定
2013/11/07 职场文书
公务员试用期满考核材料
2014/05/22 职场文书
运输企业安全生产责任书
2014/07/28 职场文书
2014年学校办公室工作总结
2014/12/19 职场文书
商务信函英语问候语
2015/11/10 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书
上个世纪50年代的可穿戴技术:无线电帽子
2022/02/18 无线电