JavaScript魅力总结(6-10)

其他 2019-05-06 09:31:05 阅读次数: 0
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yexudengzhidao/article/details/89401863

6. BOM应用

  1. 打开和关闭标签页
<body>
        <input onclick="window.close();" type="button" value="close"/>
        <input onclick="window.open();" type="button" value="close"/>
</body>
  1. 询问框
<script>
	var res=confirm('你是否要删除');
	alert(res);
</script>
  1. 可视区尺寸:
    document.documentElement.clientWidth;
    document.documentElement.clientHeight;
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
	var oBtn=document.getElementById('btn1');
	
	oBtn.onclick=function ()
	{
		alert('宽:'+document.documentElement.clientWidth+'高:'+document.documentElement.clientHeight);
	};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="可视区大小" />
</body>
</html>

  1. 滚动距离
    IE、FF
    alert(document.documentElement.scrollTop);

    chrome
    alert(document.body.scrollTop);

var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
	console.log(scrollTop)
  1. 判断浏览器内核：
window.navigator.userAgent
  1. 右下角悬浮框
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:200px; height:150px; background:red; position:absolute; right:0; bottom:0;}
body {height:2000px;}
</style>
<script>
window.onscroll=window.onresize=function ()
{
	var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
	var oDiv=document.getElementById('div1');
	
	oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px';
};
</script>
</head>

<body>
<div id="div1"></div>
</body>
</html>

7. COOKIE基础与应用

  1. chrome浏览器为了安全不支持本地通过JavaScript来设置cookie
  2. 设置cookie
    • 格式: 名字=值
    • 不会覆盖
    • 过期时间：expires=时间
    • 如果没有指定过期时间，则浏览器关闭即cookie清除
  3. cookie的特性
    • 同一个网站中所有页面共享一套cookie
    • 数量、大小有限
    • 过期时间
  4. 设置cookie过期时间
<script>
var oDate=new Date();

oDate.setDate(oDate.getDate()+14);

document.cookie='user=blue;expires='+oDate;

alert(document.cookie);
</script>
  1. 设置多少天之后是几日 ：setDate(天数)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
var oDate=new Date();

oDate.setDate(32);

alert(oDate.getFullYear()+'-'+(oDate.getMonth()+1)+'-'+oDate.getDate());
</script>
</head>
<body>
</body>
</html>

8. DOM操作应用

  1. 逆序插入元素
    document.getElementById(“myList”).insertBefore(newItem,existingItem);
<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
            <title>
                无标题文档
            </title>
            <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');
						var aLi=oUl.getElementsByTagName('li');
						
						oLi.innerHTML=oTxt.value;
						
						//父级.appendChild(子节点);
						//oUl.appendChild(oLi);
						
						if(aLi.length>0)
						{
							oUl.insertBefore(oLi, aLi[0]);
						}
						else
						{
							oUl.appendChild(oLi);
						}
					};
				};
            </script>
        </meta>
    </head>
    <body>
        <input id="txt1" type="text"/>
        <input id="btn1" type="button" value="创建li"/>
        <ul id="ul1">
        </ul>
    </body>
</html>
  1. 删除元素：this绑定的是执行上下文
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
	var aA=document.getElementsByTagName('a');
	var oUl=document.getElementById('ul1');
	
	for(var i=0;i<aA.length;i++)
	{
		aA[i].onclick=function ()
		{
			console.log(this)
			oUl.removeChild(this.parentNode);
		};
	}
};
</script>
</head>

<body>
<ul id="ul1">
	<li>asfasd <a href="javascript:;" index='1'>删除</a></li>
	<li>5645 <a href="javascript:;" index='2'>删除</a></li>
	<li>ghdfjgj <a href="javascript:;" index='3'>删除</a></li>
	<li>mvbnmvnb <a href="javascript:;" index='4'>删除</a></li>
</ul>
</body>
</html>
  1. 通过文档碎片的形式来减少DOM操作
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
	var oUl=document.getElementById('ul1');
	var oFrag=document.createDocumentFragment();
	
	for(var i=0;i<10000;i++)
	{
		var oLi=document.createElement('li');
		
		oFrag.appendChild(oLi);
	}
	
	oUl.appendChild(oFrag);
};
</script>
</head>

<body>
<ul id="ul1">
</ul>
</body>
</html>

9. DOM操作应用高级

  1. 父对象.children 和 父对象.childNodes 的区别：
    children是指子节点
    childNodes是指子内容，不仅仅包含节点
    测试如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#ul1 {background:green;}
#ul2 {background:yellow;}
</style>
<script>
window.onload=function ()
{
	var oUl1=document.getElementById('ul1');
	var oUl2=document.getElementById('ul2');
	var oBtn=document.getElementById('btn1');
	
	oBtn.onclick=function ()
	{
		var oLi=oUl1.children[0];
		console.log(oLi)
		var oLi2 = oUl1.childNodes[1]
		console.log(oLi2)		
		oUl1.removeChild(oLi);
		oUl2.appendChild(oLi);
	};
};
</script>
</head>

<body>
<ul id="ul1">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
</ul>
<input id="btn1" type="button" value="移动" />
<ul id="ul2">
</ul>
</body>
</html>
  1. oUl2.appendChild(oLi);
    1. 先把元素从原有父级上删掉
    2. 再添加到新的父级
  2. li里的数字排序
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#ul1 {background:green;}
#ul2 {background:yellow;}
</style>
<script>
window.onload=function ()
{
	var oUl1=document.getElementById('ul1');
	var oBtn=document.getElementById('btn1');
	
	oBtn.onclick=function ()
	{
		var aLi=oUl1.getElementsByTagName('li');
		
		//aLi.sort();
		var arr=[];
		
		for(var i=0;i<aLi.length;i++)
		{
			arr[i]=aLi[i];
		}
		
		arr.sort(function (li1, li2){
			var n1=parseInt(li1.innerHTML);
			var n2=parseInt(li2.innerHTML);
			
			return n1-n2;
		});
		
		//alert(arr[0].innerHTML);
		for(var i=0;i<arr.length;i++)
		{
			alert('该把'+arr[i].innerHTML+'插入到最后');
			oUl1.appendChild(arr[i]);
		}
	};
};
</script>
</head>

<body>
<input id="btn1" type="button" value="排序" />
<ul id="ul1">
	<li>34</li>
	<li>25</li>
	<li>9</li>
	<li>88</li>
	<li>54</li>
</ul>
</body>
</html>
  1. 表格排序：
    console.log(oTab.tHead)
    console.log(oTab.tBodies)
    oTab.tBodies[0].rows[1].cells[1].innerHTML
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
	var oTab=document.getElementById('tab1');
	var oBtn=document.getElementById('btn1');
	
	oBtn.onclick=function ()
	{
		var arr=[];
		
		for(var i=0;i<oTab.tBodies[0].rows.length;i++)
		{
			arr[i]=oTab.tBodies[0].rows[i];
		}
		
		arr.sort(function (tr1, tr2){
			var n1=parseInt(tr1.cells[0].innerHTML);
			var n2=parseInt(tr2.cells[0].innerHTML);
			
			return n1-n2;
		});
		
		for(var i=0;i<arr.length;i++)
		{
			oTab.tBodies[0].appendChild(arr[i]);
		}
	};
};
</script>
</head>

<body>
<input id="btn1" type="button" value="排序" />
<table id="tab1" border="1" width="500">
	<thead>
    	<td>ID</td>
    	<td>姓名</td>
    	<td>年龄</td>
        <td>操作</td>
    </thead>
    <tbody>
    	<tr>
        	<td>2</td>
        	<td>张三</td>
        	<td>23</td>
        	<td></td>
        </tr>
    	<tr>
        	<td>6</td>
        	<td>王四</td>
        	<td>24</td>
        	<td></td>
        </tr>
    	<tr>
        	<td>1</td>
        	<td>Blue</td>
        	<td>27</td>
        	<td></td>
        </tr>
    	<tr>
        	<td>5</td>
        	<td>张伟</td>
        	<td>24</td>
        	<td></td>
        </tr>
    	<tr>
        	<td>3</td>
        	<td>李四</td>
        	<td>28</td>
        	<td></td>
        </tr>
    	<tr>
        	<td>4</td>
        	<td>王五</td>
        	<td>25</td>
        	<td></td>
        </tr>
    </tbody>
</table>
</body>
</html>
  1. 表格添加删除：
    删除操作：removeChild(this.parentNode)
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
	var oTab=document.getElementById('tab1');
	
	var oBtn=document.getElementById('btn1');
	var oName=document.getElementById('name');
	var oAge=document.getElementById('age');
	var id=oTab.tBodies[0].rows.length+1;
	
	oBtn.onclick=function ()
	{
		var oTr=document.createElement('tr');
		
		var oTd=document.createElement('td');
		oTd.innerHTML=id++;	//?
		oTr.appendChild(oTd);
		
		var oTd=document.createElement('td');
		oTd.innerHTML=oName.value;
		oTr.appendChild(oTd);
		
		var oTd=document.createElement('td');
		oTd.innerHTML=oAge.value;
		oTr.appendChild(oTd);
		
		var oTd=document.createElement('td');
		oTd.innerHTML='<a href="javascript:;">删除</a>';
		oTr.appendChild(oTd);
		
		oTd.getElementsByTagName('a')[0].onclick=function ()
		{
			oTab.tBodies[0].removeChild(this.parentNode.parentNode);
		};
		
		oTab.tBodies[0].appendChild(oTr);
	};
};
</script>
</head>

<body>
姓名：<input id="name" type="text" />
年龄：<input id="age" type="text" />
<input id="btn1" type="button" value="添加" />
<table id="tab1" border="1" width="500">
	<thead>
    	<td>ID</td>
    	<td>姓名</td>
    	<td>年龄</td>
        <td>操作</td>
    </thead>
    <tbody>
    	<tr>
        	<td>1</td>
        	<td>Blue</td>
        	<td>27</td>
        	<td></td>
        </tr>
    	<tr>
        	<td>2</td>
        	<td>张三</td>
        	<td>23</td>
        	<td></td>
        </tr>
    	<tr>
        	<td>3</td>
        	<td>李四</td>
        	<td>28</td>
        	<td></td>
        </tr>
    	<tr>
        	<td>4</td>
        	<td>王五</td>
        	<td>25</td>
        	<td></td>
        </tr>
    	<tr>
        	<td>5</td>
        	<td>张伟</td>
        	<td>24</td>
        	<td></td>
        </tr>
    </tbody>
</table>
</body>
</html>
  1. 隔行换色
    先把原来的颜色保存下来，然后在鼠标离开的时候再设置成原来保存的颜色
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
	var oTab=document.getElementById('tab1');
	var oldColor='';
	
	for(var i=0;i<oTab.tBodies[0].rows.length;i++)
	{
		oTab.tBodies[0].rows[i].onmouseover=function ()
		{
			oldColor=this.style.background;
			this.style.background='green';
		};
		oTab.tBodies[0].rows[i].onmouseout=function ()
		{
			this.style.background=oldColor;
		};
		
		if(i%2)
		{
			oTab.tBodies[0].rows[i].style.background='';
		}
		else
		{
			oTab.tBodies[0].rows[i].style.background='#CCC';
		}
	}
};
</script>
</head>

<body>
<table id="tab1" border="1" width="500">
	<thead>
    	<td>ID</td>
    	<td>姓名</td>
    	<td>年龄</td>
    </thead>
    <tbody>
    	<tr>
        	<td>1</td>
        	<td>Blue</td>
        	<td>27</td>
        </tr>
    	<tr>
        	<td>2</td>
        	<td>张三</td>
        	<td>23</td>
        </tr>
    	<tr>
        	<td>3</td>
        	<td>李四</td>
        	<td>28</td>
        </tr>
    	<tr>
        	<td>4</td>
        	<td>王五</td>
        	<td>25</td>
        </tr>
    	<tr>
        	<td>5</td>
        	<td>张伟</td>
        	<td>24</td>
        </tr>
    </tbody>
</table>
</body>
</html>

10. DOM基础

  1. 父节点里的子节点可以通过父对象.children来获取。
  2. 父节点里的子节点也可以通过父对象.childNodes来获取，不过childNodes包含文件节点和元素节点，所以还得区分，代码如下：
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload=function ()
{
	var oUl=document.getElementById('ul1');
	
	//IE6-8
	//alert(oUl.childNodes.length);
	for(var i=0;i<oUl.childNodes.length;i++)
	{
		//nodeType==3	->	文本节点
		//nodeType==1	->	元素节点
		//alert(oUl.childNodes[i].nodeType);
		
		if(oUl.childNodes[i].nodeType==1)
		{
			oUl.childNodes[i].style.background='red';
		}
	}
};
</script>
</head>

<body>
<ul id="ul1">
	<li></li>
	<li></li>
</ul>

aaaa
bbbb

fafafsdfasd	文本节点
<span>qwerqwre 元素节点</span>

</body>
</html>

猜你喜欢

转载自blog.csdn.net/yexudengzhidao/article/details/89401863
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022