决战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 ...
随机推荐
- Linux内核--网络栈实现分析（五）--传输层之UDP协议（上）
本文分析基于Linux Kernel 1.2.13 原创作品,转载请标明出处http://blog.csdn.net/yming0221/article/details/7532512 更多请看专栏, ...
- linux-8 基本命令---date
2,date命令用于显示.设置系统的时间或日期,格式如下: date[选项][+指定格式]. date的详细格式如下: date命令格式 参数 作用 %t 跳个[tab]键 %H 小时(00-23) ...
- unity如何显示血条（不使用NGUI）
用unity本身自带的功能,如何显示血条? 显示血条,从资源最小化的角度,只要把一个像素的色点放大成一个矩形就足够,三个不同颜色的矩形,分别显示前景色,背景色,填充色,这样会消耗最少的显存资源. un ...
- ReentrantLock实现原理深入探究
前言 这篇文章被归到Java基础分类中,其实真的一点都不基础.网上写ReentrantLock的使用.ReentrantLock和synchronized的区别的文章很多,研究ReentrantLoc ...
- MSBuild 中的 PropertyGroup、ItemGroup 和 ItemMetadata
在软件项目不断的进展中,MSBuild 脚本可能几个月都不会被修改,因为通常编译和发布的目录是不经常变化的. 但,一旦某天你需要修改了,看到那一堆 $(Something). @(Something) ...
- (翻译)反射处理java泛型
当我们声明了一个泛型的接口或类,或需要一个子类继承至这个泛型类,而我们又希望利用反射获取这些泛型参数信息.这就是本文将要介绍的ReflectionUtil就是为了解决这类问题的辅助工具类,为java. ...
- 【原创】三分钟教你学会MVC框架——基于java web开发（1）
MVC全名是Model View Controller,是模型(model)-视图(view)-控制器(controller)的缩写,一种软件设计典范,用于组织代码用一种业务逻辑和数据显示分离的方法. ...
- [安卓] 17、一个简单的例子学安卓侧滑设计——用开源slidingmenu
效果如下: 下面是工程结构: 整个工程包括android-v7.SlidingMenu-lib和主工程SlidingMenuTest部分 其中前两个作为lib,后一个为主工程 主工程包含两个lib工程 ...
- Centos Another app is currently holding the yum lock
yum命令用ctrl+z命令中断后,再运行yum时,出现: Existing lock /var/run/. Another app is currently holding the yum lock ...
- git 仓库、分支的区别
首先,要明白仓库的概念 仓库可以理解为repository, 就是存放代码的地方,—— 其实是一个比较笼统的概念,不管里面的内容,总之存放各种资源(代码.图片等等) 对于git应用开发者而已,本地一般 ...