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 相关文章推荐
删除重复数据的算法
Nov 23 Javascript
JavaScript之IE的fireEvent方法详细解析
Nov 20 Javascript
jQuery使用andSelf()来包含之前的选择集
May 19 Javascript
纯javascript模仿微信打飞机小游戏
Aug 20 Javascript
JavaScript中的Number数字类型学习笔记
May 26 Javascript
jquery表单插件Autotab使用方法详解
Jun 24 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
Jun 28 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
Dec 08 Javascript
微信小程序 跳转传参数与传对象详解及实例代码
Mar 14 Javascript
javaScript中的空值和假值
Dec 18 Javascript
AngularJS 多指令Scope问题的解决
Oct 25 Javascript
vue 移动端适配方案详解
Nov 15 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
先进的自动咖啡技术,真的可以取代咖啡师吗?
2021/03/06 冲泡冲煮
PHP执行批量mysql语句的解决方法
2013/05/02 PHP
CodeIgniter框架过滤HTML危险代码
2014/06/12 PHP
php基于表单密码验证与HTTP验证用法实例
2015/01/06 PHP
javascript cookie解码函数(兼容ff)
2008/03/17 Javascript
解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)
2010/05/13 Javascript
script标签属性type与language使用选择
2012/12/02 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
JavaScript中window.showModalDialog()用法详解
2014/12/18 Javascript
javascript中Function类型详解
2015/04/28 Javascript
jQuery插件Validate实现自定义表单验证
2016/01/18 Javascript
深入理解jQuery 事件处理
2016/06/14 Javascript
js判断radiobuttonlist的选中值显示/隐藏其它模块的实现方法
2016/08/25 Javascript
JS 实现可停顿的垂直滚动实例代码
2016/11/23 Javascript
原生js实现倒计时功能(多种格式调用)
2017/01/12 Javascript
vue mint-ui 实现省市区街道4级联动示例(仿淘宝京东收货地址4级联动)
2017/10/16 Javascript
Vue 项目分环境打包的方法示例
2018/08/03 Javascript
vue移动端监听滚动条高度的实现方法
2018/09/03 Javascript
create-react-app使用antd按需加载的样式无效问题的解决
2019/02/26 Javascript
js常见遍历操作小结
2019/06/06 Javascript
node+multer实现图片上传的示例代码
2020/02/18 Javascript
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
python实现搜索指定目录下文件及文件内搜索指定关键词的方法
2015/06/28 Python
python笔记:mysql、redis操作方法
2017/06/28 Python
python如何拆分含有多种分隔符的字符串
2018/03/20 Python
pytorch 转换矩阵的维数位置方法
2018/12/08 Python
Python 3.8 新功能全解
2019/07/25 Python
Selenium元素定位的30种方式(史上最全)
2020/05/11 Python
详解Sticky Footer 绝对底部的两种套路
2017/11/03 HTML / CSS
Manuka Doctor美国官网:麦卢卡蜂蜜和蜂毒护肤
2016/12/25 全球购物
英国领先的体验日提供商:Buyagift
2019/04/19 全球购物
彩色的非洲教学反思
2014/02/18 职场文书
商务日语专业自荐信
2014/04/17 职场文书
教师党员批评与自我批评发言稿
2014/10/15 职场文书
教您怎么制定西餐厅运营方案 ?
2019/07/05 职场文书
Python借助with语句实现代码段只执行有限次
2022/03/23 Python