决战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 ...
随机推荐
- php下xcache的安装
下载xcache: wget http://xcache.lighttpd.net/pub/Releases/3.2.0/xcache-3.2.0.tar.gz 安装: tar zxvf xcache ...
- FreeRTOS任务栈
configTOTAL_HEAP_SIZE 定义堆大小,FreeRTOS 内核,用户动态内存申请,任务栈,任务创建,信号量创建,消息队列创建 等都需要用这个空间.
- CSS 布局入门
概述 Web 兴起之后,关于CSS的介绍和学习资料已经铺天盖地. 本文不涉及具体的CSS语法之类的,而是希望从初学者的角度,让没有接触或很少接触CSS的人能快速的了解 CSS 到底是什么以及如何使用. ...
- Java设计模式12：装饰器模式
装饰器模式 装饰器模式又称为包装(Wrapper)模式.装饰器模式以多客户端透明的方式扩展对象的功能,是继承关系的一个替代方案. 装饰器模式的结构 通常给对象添加功能,要么直接修改对象添加相应的功能, ...
- Ubuntu下安装 jdk6
Ubuntu下安装 jdk6 罗朝辉 (http://www.cnblogs.com/kesalin/) 本文遵循“署名-非商业用途-保持一致”创作公用协议 1,下载最新的 jdk6 版本,目前最 ...
- 用C表达面向对象语言的机制2——颠覆你对方法调用的看法！
用C表达面向对象语言的机制2——颠覆你对方法调用的看法! 源代码在文末.推荐阅读本文PDF版,格式更好看. 在上一篇<用C表达面向对象语言的机制——C#版>中,我们获知了如何用C表达面向对 ...
- Azure China (10) 使用Azure China SAS Token
<Windows Azure Platform 系列文章目录> 本文介绍的是国内由世纪互联运维的Azure China 注意:本文介绍的是Azure China Storage Priva ...
- iOS 打包iPa
http://blog.fir.im/how-to-build-adhoc-ipa/ 之前都是打包好ipa然后发送给客户,特麻烦,fir.im网站不错 迅速获取自己手机的udid: http://f ...
- Redis数据库的安装配置方
转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/100.html?1455869650 redis 是一个高性能的key-v ...
- 说说设计模式~装饰器模式(Decorator)~多功能消息组件的实现
返回目录 为何要设计多功能消息组件 之前写过一篇装饰器模式的文章,感觉不够深入,这次的例子是实现项目中遇到的,所以把它拿出来,再写写,之前也写过消息组件的文章,主要采用了策略模式实现的,即每个项目可以 ...