决战JS（二）
紧接着上次的《决战JS》，分析总结一些比较实用的DEMO与新手分享，望大神拍砖。
demo5.点击隐藏:
要实现这个功能只需要知道在onclick事件中加入对父节点的样式dislay设置为none就完全足够了。实现的效果是当用户点击“hide this”时，该链接的父节点的样式自动隐藏。对于网上的很多广告或通知之类的用这种实现，只需将ul,li换为div，然后再稍作修改，实现方法是比较轻松。
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function()
{
var aA=document.getElementsByTagName('a');//用getElementsTagName获取标签<a>,类型为数组
var oUl=document.getElementById('ul1'); for(var i=0;i<aA.length;i++)
{
aA[i].onclick=function(){//添加onclick事件
this.parentNode.style.display='none';//将父节点的样式display设置为none
};
}
}; </script>
</head> <body>
<ul id="ul1">
<li>aaaaaa <a href="javascript:;">hide this</a></li>
<li>bbbbbb <a href="javascript:;">hide this</a></li>
<li>cccccc <a href="javascript:;">hide this</a></li>
<li>dddddd <a href="javascript:;">hide this</a></li>
<li>eeeeee <a href="javascript:;">hide this</a></li>
</ul>
</body>
</html>
demo6. 类分享模块:
实现这个DEMO最需要掌握的就是定时器的使用和js实现一些简单的运动。这里采取的定位方式是相对定位，详细的分析代码分析已经附在代码的末尾。然而，这两个运动函数由于只有部分的区别，完全可以将其合并为同一个函数，直接将速度定义，实现方法为：判断div1的左边（offsetLeft）是否大于目标坐标（最开始在样式表中设置的），如果大于，那么将速度设为-10，否则设为10，实现时需要更改函数的参数。这次更新《决战JS》 应博友要求加上注释，确实节约了阅读成本。再次感谢博友的意见。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=gb2312">
<title>share</title>
<style>
#div1 {width:150px;height:200px;background:red;position:absolute;left:-150px;}
#div1 span{position:absolute;width:20px;height:60px;line-height:20px;background:blue;right:-20px;top:70px;}
</style>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1'); //取元素div1
oDiv.onmouseover=function() //对div1加上onmouseover事件
{startmove();};
oDiv.onmouseout=function()//对div1加上onmouseout事件
{startmove2();};
};
var timer=null;
function startmove(){ //实现鼠标在div上移动过程
var oDiv=document.getElementById('div1');
clearInterval(timer); //在实现之前需要关闭所有的定时器
timer=setInterval(function(){
if(oDiv.offsetLeft==0){
clearInterval(timer);
}else{
oDiv.style.left=oDiv.offsetLeft+10+'px';//在此设定的运动速度是10px
}
},30);
} function startmove2(){//实现鼠标在div1上移出过程
var oDiv=document.getElementById('div1');
clearInterval(timer);
timer=setInterval(function(){
if(oDiv.offsetLeft==-150){//在style样式中定义的是-150px，隐藏起来
clearInterval(timer);
}else{
oDiv.style.left=oDiv.offsetLeft-10+'px';//速度为负，向左运动
}
},30);
}
</script>
</head>
<body>
<div id="div1">
<p><a href="http://itred.cnblogs.com">ITRED的博客</a></p>
<p><a href="http://itred.cnblogs.com">ITRED的博客</a></p>
<p><a href="http://itred.cnblogs.com">ITRED的博客</a></p>
<span>分享到</span>
</div>
</body>
</html>
demo7 .删除元素：
实现这个和前面实现的隐藏类似。这里只是为了体现removeChild的用法。
其实现过程就只需要会一句话，即仅仅一条代码就可实现：oUl.removeChild(this.parentNode);关于实现过程的解析见代码后的注释。
<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=gb2312">
<title></title>
</head>
<script>
window.onload=function(){ //load事件，取元素---->模板
var aA=document.getElementsByTagName('a');
var oUl=document.getElementById('ul1'); for(var i=0;i<aA.length;i++)
{
aA[i].onclick=function(){
oUl.removeChild(this.parentNode);//重点在这儿：移除这个节点的父级元素
};
}
}; </script>
<body>
<ul id="ul1">
<li><a href="http://itred.cnblogs.com">前往itRed的博客</a><a href="javascript:;">删除</a></li>
<li><a href="http://itred.cnblogs.com">itRed的博客</a><a href="javascript:;">删除</a></li>
<li><a href="http://itred.cnblogs.com">前往itRed</a><a href="javascript:;">删除</a></li>
<li><a href="http://itred.cnblogs.com">前往博客</a><a href="javascript:;">删除</a></li>
<li><a href="http://itred.cnblogs.com">itRed</a><a href="javascript:;">删除</a></li>
</ul>
</body> </html>
demo8.创建元素：
本DEMO以创建ul中的li元素为例。简单分析关于创建li元素的过程和步骤。然后再来进行扩展。实现这个DEMO需要掌握两点知识，其一是应用document.createElement(‘ ’)语句来创建自己需要的元素标签，即在括号中需要填写自己想要实现的标签名称；其二是将创建好的元素放到应该放得位置，通过语句appendChil()实现。
<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=gb2312">
<title>创建元素</title>
</head>
<script>
window.onload=function(){//模板，onload事件,然后获取需要的元素
var oBtn=document.getElementById('btn1');
var oUl=document.getElementById('ul1'); oBtn.onclick=function(){
var oLi=document.createElement('li'); //创建标签为li的元素
oUl.appendChild(oLi);//将创建好的标签元素添加到oUl中，使其能够在页面中显示出来
};
}; </script>
<body>
<input type="button" id="btn1" value="创建li元素"/>
<ul id="ul1">
</ul>
</body> </html>
demo9.类微博，博客等留言版：
知道如何创建元素之后，就是将该文本框放在相应位置，但用户进行留言，发帖时，就将该内容加到相应的位置上面。根据DEMO 8 可轻松实现本DEMO。
<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=gb2312">
<title></title>
</head>
<script>
window.onload=function(){
var oBtn=document.getElementById('btn1');
var oUl=document.getElementById('ul1');
var oTxt=document.getElementById('txt1'); oBtn.onclick=function(){
var oLi=document.createElement('li');//加入标签元素---创建
oLi.innerHTML=oTxt.value; //将用户输入在文本框中的值添加到innerHTML中
oUl.appendChild(oLi);//在父级上添加子节点
};
};
</script>
<body>
<input type="text" id="txt1"/>
<input type="button" id="btn1" value="创 建">
<ul id="ul1">
</ul>
</body>
</html>
demo10.对DEMO 9进行优化：
DEMO 9中虽然能够实现所需的效果，但是添加内容时，总是从下面开始添加，与我们实际在网站中看到的有一定的差距。因此，我们需要对此进行优化。思路其实很简单：当用户在添加内容时，我们只需要做一下判断，但用户第一个输入，好，那么就直接添加子节点就行；否则说明ul里面的li已经有了内容，我们可利用insertBefore在第0个元素之前插入。详细实现过程，见代码注释。
<html>
<head>
<meta http-equiv=Content-Type content="text/html;charset=gb2312">
<title></title>
</head>
<script>
window.onload=function(){
var oBtn=document.getElementById('btn1');
var oUl=document.getElementById('ul1');
var oTxt=document.getElementById('txt1'); oBtn.onclick=function(){
var oLi=document.createElement('li');//加入标签元素---创建
oLi.innerHTML=oTxt.value; //将用户输入在文本框中的值添加到innerHTML中 var aLi=oUl.getElementsByTagName('li'); //获取ul中的li，存放在数组aLi中 if(aLi.length>0){ //对li的个数进行判断
oUl.insertBefore(oLi,aLi[0]); //如果存在li,那么只需要运用insertBefore在前面插入新的内容
}else{
oUl.appendChild(oLi);//否则直接添加子节点
}
};
};
</script>
<body>
<input type="text" id="txt1"/>
<input type="button" id="btn1" value="创 建">
<ul id="ul1">
</ul>
</body>
</html>
希望大神不吝拍砖，有好方法，简单方法，希望提出来，我们共同学习，共同进步！
决战JS（二）的更多相关文章
- 决战JS
经过这几日的学习,测试和摸索,算是了解了一些关于javascript 的相关知识吧.学习过程中做出了一些小DEMO,现总结一下实现这些DEMO的基本思路,如有不妥或更为简便的方法,还希望大神拍砖,共同 ...
- JS二维数组排序组合
需求是这样的:http://q.cnblogs.com/q/29093/ 这里简述一下: 现在有一个不确定长度的数组.比如:var temp=[["Fu","Hai&qu ...
- 一天带你入门到放弃vue.js(二)
接下来我们继续学习一天带你入门到放弃系列vue.js(二),如有问题请留言讨论! v-if index.html <div id="app"> <p v-if=& ...
- js 二维数组 for 循环重新赋值
javascript 二维数组的重新 组装 var arr = [[1,2],[3,4],[5,6],[7,8]]; var temp = new Array(); for(var i= 0 ;i&l ...
- js二维数组定义和初始化的三种方法总结
js二维数组定义和初始化的三种方法总结 方法一:直接定义并且初始化,这种遇到数量少的情况可以用var _TheArray = [["0-1","0-2"],[& ...
- Nuxt.js(二、解决首屏速度与SEO)
Nuxt.js(二.解决首屏速度与SEO) 1.普通的Vue SPA初始化加载速度很慢 在传统的web应用中,当用户请求一个页面时,服务器直接返回一个html文件,浏览器直接渲染出来.但是,在vue应 ...
- js 二维码生成 插件
<div onclick="liaotian()">点击生成二维码</div><div id="qrcode"></d ...
- js二维数组与字符串
1. 二维数组:数组中的元素,又引用了另一个数组对象 何时使用:只要保存横行竖列的数据, 具有上下级包含关系的数据, 创建二维数组: 1. var arr=[]; col arr[0]=[" ...
- JS二维数据处理逻辑封装探究
一.目的 定义出一个专门用于处理二维数据的组件,所谓二维数据就是能用二维表格显示出来的数据,所谓处理就是增删改查,很简单. 二.约束 外部程序给该组件传入如下形式的对象,让该组件自行解析. var t ...
随机推荐
- iOS网络基础知识
iOS网络基础知识 1.一次HTTP请求的完整过程 (1)浏览器或应用发起Http请求,请求包含Http请求Http(请求),地址(url),协议(Http1.1)请求为头部 (2)web服务器接收到 ...
- Linux（centeros）安装weblogic10.3.6教程
http://wenku.baidu.com/link?url=yCLXoDpK7AMdy1_TgGXDncY42Bz6ptdaNq58GdicFWqyI5i-fCvui6mFuIYDt6jkqSiY ...
- Web Essentials之Bundling
返回Web Essentials功能目录 本篇目录 介绍 样例文件 已知行为 介绍 这篇要讲的是Bundling,我看很多人把它翻译为捆绑,如果你喜欢你也可以这么理解,我是不太习惯,我还是喜欢它为bu ...
- 人人都是 DBA（X）资源信息收集脚本汇编
什么?有个 SQL 执行了 8 秒! 哪里出了问题?臣妾不知道啊,得找 DBA 啊. DBA 人呢?离职了!!擦!!! 程序员在无处寻求帮助时,就得想办法自救,努力让自己变成 "伪 DBA& ...
- 设计模式之美：Private Class Data（私有类数据）
索引 意图 结构 参与者 适用性 效果 实现 实现方式(一):实现对初始化数据的封装. 意图 封装类的初始化数据,控制对类的属性的更改,并保持类数据与使用数据的方法间的隔离. Encapsulate ...
- 用 C 扩展 python
本文介绍如何用 C 语言来扩展 python.所举的例子是,为 python 添加一个设置字符串到 windows 的剪切板(Clipboard)的功能.我在写以下代码的时候用到的环境是:window ...
- 搭建hadoop1.2集群
环境准备 我使用的是vmware workstation,首先安装ubuntu 12.04,安装完成后通过vmware的clone,clone出两个虚机,设置的IP分别是: 192.168.74.13 ...
- JS中的闭包
在复习JS高程的过程中,在第七章闭包那节,发现自己看不太明白了.之前看高程的时候,都弄得挺清楚了,怎么现在反而又看不懂了. 嗯,也许更深层次的东西涉及到编译原理的知识了.嗯,在研究完SPA后就开始学习 ...
- MVVM架构~knockoutjs系列之扩展ajax验证~验证输入数据是否与后台数据相等
返回目录 在看这篇文章之前,你有必要先看我之前的文章,之前文章是将一个方法以参数的形式传给KO,然后返回一个真假值,去做验证,这类似于面向对象语言里的委托,在JS里我们叫它回调方法,本篇文章与前一文章 ...
- golang开发缓存组件
代码地址github:cache 花了一天时间看了下实验楼的cache组件,使用golang编写的,收获还是蛮多的,缓存组件的设计其实挺简单的,主要思路或者设计点如下: 全局struct对象:用来做缓 ...