黑马程序员_javascript_01

最新推荐文章于 2023-11-22 00:40:13 发布

SinceDayOne

最新推荐文章于 2023-11-22 00:40:13 发布

阅读量275

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/renjiangfeng3/article/details/9071857

版权

javascript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

----------- android培训、 java培训、期待与您交流！-----------

DOM编程步骤：

1，定义界面

通过html的标签将数据进行封装。

2，定义一些静态的样式。

通过css。

3，需要动态的完成和用户的交互。

a) 先明确事件源。

b) 明确事件将事件注册到事件源上。

c) 通过javascript的函数对事件进行处理。

d) 在处理过程需要明确被处理的区域。

例子：

一、table标签的示例

1，在页面上通过按钮创建一个表格。

思路：

1，创建一个table节点。Document.createElement(“table”);

2，通过table节点的insertRow()方法创建表格的行对象并添加到rows集合中。

3，通过行对象的insertCell()方法创建单元格对象，并添加到cells集合中。

4，给单元格添加数据。

a)创建一个节点如文本节点，document.createTextNode(“文本内容”),

通过单元格对象appendChild方法将文本节点添加到单元格的尾部。

b)可以通过单元格的innerHTML,添加单元格中的元素。

tdNode.innerHTML = “<img src=’1.jpg’ alt=’图片说明信息’>”;

5，建立好表格节点，添加到DOM树中。也就是页面的指定位置上。

2，如何删除表格中的行或者列。

思路：

1，删除行：获取表格对象，通过表格对象中的deleteRow方法，将指定的行索引传入deleteRow方法中。

2，删除列：表格没有直接删除列的方法，要通过删除每一行中指定的单元格来完成删除列的动作。

获取所有的行对象，并进行遍历，通过行对象的deleteCell方法将指定单元格删除。

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
table{
	border:#6699FF 1px solid;
	width:60%;
}
table td{
	border:#6699FF 1px solid;
	padding:10px;
}
</style>
<script type="text/javascript">
function creatTab()
{
	var rowNum = document.getElementsByName("rowNum")[0].value;
	var colNum = document.getElementsByName("colNum")[0].value;
	var divNode = document.getElementsByTagName("div")[0];
	
	var tabNode = document.createElement("table");
	for(var i=1; i<=rowNum;i++)
	{
		trNode = tabNode.insertRow();
		for(var j=1; j<=colNum; j++)
		{
			var tdNode = trNode.insertCell();
			tdNode.innerText=i+","+j;
		}
		
	}
	divNode.appendChild(tabNode);
}

function delRow(){
	var delRowNum = document.getElementsByName("delRowNum")[0].value;
	var tabNode = document.getElementsByTagName("table")[0];
	if(tabNode != null)
	{
		if(delRowNum>0 && delRowNum<=tabNode.rows.length)
		{
			tabNode.deleteRow(delRowNum-1);
		}
		else
		{
			alert("该行不存在");
		}
	}
	else
	{
		alert("表格不存在");
	}
}

function delCol(){
	var delColNum = document.getElementsByName("delColNum")[0].value;
	var tabNode = document.getElementsByTagName("table")[0];
	var rowsNum = tabNode.rows.length;
	for(var i=0; i<rowsNum; i++)
	{
		var trNode = tabNode.getElementsByTagName("tr")[i];
		trNode.deleteCell(delColNum-1);
	}
}
</script>
</head>
<body>
创建表格<br />
行数：<input type="text" name="rowNum"/>
列数：<input type="text" name="colNum"/>
<input type="button" name="btnCreat" value="创建表格"  οnclick="creatTab()"/><br /><br />
删除表格<br />
行：<input type="text" name="delRowNum"/>
<input type="button" name="btnDelRow" value="删除行" οnclick="delRow()"/><br />
列：<input type="text" name="delColNum"/>
<input type="button" name="btnDelCol" value="删除列" οnclick="delCol()"/>
<div>
</div>
</body>
</html>

3，对表格中的数据进行排序。

思路：

1，获取表格中的所有行对象。

2，定义临时存储，将需要进行排序的行对象存入到数组中。

3，对数组进行排序，通过比较每一个行对象中指定单元格的数据，如果是整数需要通过parseInt转换。

4，将排序后的数组通过遍历，将每一个行对象重新添加回表格。通过tbody节点的appendChild方法。

5，其实排序就是每一个行对象的引用取出。

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
table, table td, table th{
	border:#0033CC 1px solid;
}
table{
	width:60%;
}
</style>
<script type="text/javascript">
var flag = true;
function sortTab(){
	var tabNode = document.getElementsByTagName("table")[0];
	var rows = tabNode.rows;
	var arr = new Array();
	
	for(var i=1; i<rows.length; i++){
		arr[i-1] = rows[i];
	}
	
	for(var i=0; i<arr.length; i++){
		for(var j=i+1; j<arr.length; j++){
			if(parseInt(arr[i].cells[1].innerText) > parseInt(arr[j].cells[1].innerText)){
				var temp = arr[i];
				arr[i] = arr[j];
				arr[j] = temp;
			}
		}
	}
	if(flag){
		for(var i=0; i<arr.length; i++){
			tabNode.appendChild(arr[i]);
		}
		flag = false;
	}
	else{
		for(var i=arr.length-1; i>=0; i--){
			tabNode.appendChild(arr[i]);
		}
		flag = true;
	}
	//alert(arr.length);
}
</script>
</head>

<body>
<table>
	<tr>
		<th>姓名</th>
		<th><a href="javascript:void(0)" οnclick="sortTab()">年龄</a></th>
		<th>地址</th>
	</tr>
	<tr>
		<td>张三</td>
		<td>27</td>
		<td>北京</td>
	</tr>
	<tr>
		<td>李四</td>
		<td>26</td>
		<td>长沙</td>
	</tr>
	<tr>
		<td>王五</td>
		<td>32</td>
		<td>加州</td>
	</tr>
	<tr>
		<td>赵六</td>
		<td>28</td>
		<td>首尔</td>
	</tr>
	<tr>
		<td>孙七</td>
		<td>8</td>
		<td>天津</td>
	</tr>
</table>
</body>
</html>

4，表格的行颜色间隔显示，并在鼠标指定的行上高亮显示。

思路：

1，获取所有的行对象，将需要间隔颜色显示的行对象进行动态的className属性的指定，那么前提是：先定义好类选择器。

2，为了完成高亮，需要用到两个事件，onmouseover(鼠标进入)onmouseout(鼠标移出)

3，为了方便可以在遍历行对象时，将每一个行对象都进行两个事件属性的指定。并通过匿名函数完成事件的处理。

4，高亮的原理就是鼠标进入时的指定颜色改变，改变前先记录住原来行对象的样式。

这样在鼠标离开时，就可以还原样式。

5，该样式需要在页面加载后直接显示，所以使用window.onload事件完成。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
table, table td, table th{
	border:#0033CC 1px solid;
}
table{
	width:60%;
}
table th{
	background-color:#FFFF00;
}
.one{
	background-color:#99FF00;
}
.two{
	background-color:#FFFFCC;
}
.over{
	background-color:#FF6633;
}
</style>
<script type="text/javascript">
var name;
function sortTab()
{
	var tabNode = document.getElementsByTagName("table")[0];
	var trs = tabNode.rows;
	for(var i=0; i<trs.length; i++)
	{
		if(i%2 == 1)
		{
			trs[i].className="one";
		}
		else
		{
			trs[i].className="two";
		}
		trs[i].οnmοuseοver=function()
		{
			name = this.className;
			this.className = "over";
		}
		trs[i].οnmοuseοut=function()
		{
			this.className = name;
		}
		//trs[i].onmouseover = mouseOver(this);//用这句代码为什么没有效果？
	}
}
function mouseOver(trNode)
{
	trNode.className = "over";
}
window.onload = function()
{
	sortTab();
}
</script>
</head>

<body>
<table>
	<tr>
		<th>姓名</th>
		<th><a href="javascript:void(0)" οnclick="sortTab()">年龄</a></th>
		<th>地址</th>
	</tr>
	<tr>
		<td>张三</td>
		<td>27</td>
		<td>北京</td>
	</tr>
	<tr>
		<td>李四</td>
		<td>26</td>
		<td>长沙</td>
	</tr>
	<tr>
		<td>王五</td>
		<td>32</td>
		<td>加州</td>
	</tr>
	<tr>
		<td>赵六</td>
		<td>28</td>
		<td>首尔</td>
	</tr>
	<tr>
		<td>孙七</td>
		<td>8</td>
		<td>天津</td>
	</tr>
</table>
</body>
</html>

5，单选框，复选框

这两个组件都有一个属性来表示其选中与否的状态。Checked

完成一个对多个复选框，进行全选的操作。

思路：将全选那个复选框的checked状态赋给其他所有的checkbox即可。

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function sum()
{
	var items = document.getElementsByName("item");
	var sum = 0;
	for(var i=0; i<items.length; i++)
	{
		if(items[i].checked)
		{
			sum += parseFloat(items[i].value);
		}
	}
	var span = document.getElementsByTagName("span")[0];
	span.innerHTML = sum;
}

function selAll(selAllBox)
{
	var items = document.getElementsByName("item");
	for(var i=0; i<items.length; i++)
	{
		items[i].checked = selAllBox.checked;
	}
}
</script>
</head>

<body>
<input type="checkbox" name="selAll" οnchange="selAll(this)" />全选<br />
<input type="checkbox" name="item" value="3000.95"/>笔记本电脑：3000.95元<br />
<input type="checkbox" name="item" value="3000"/>笔记本电脑：3000元<br />
<input type="checkbox" name="item" value="3000"/>笔记本电脑：3000元<br />
<input type="checkbox" name="item" value="3000"/>笔记本电脑：3000元<br />
<input type="checkbox" name="item" value="3000"/>笔记本电脑：3000元<br />
<input type="checkbox" name="item" value="3000"/>笔记本电脑：3000元<br />
<input type="checkbox" name="item" value="3000"/>笔记本电脑：3000元<br />
<input type="checkbox" name="item" value="3000"/>笔记本电脑：3000元<br />
<input type="checkbox" name="item" value="3000"/>笔记本电脑：3000元<br />
<input type="checkbox" name="selAll" οnchange="selAll(this)" />全选<br />
<input type="button" name="btnSum" value="计算"  οnclick="sum()"/><span></span>
</body>
</html>

6，获取鼠标的坐标，让指定区域随着鼠标移动。

获取鼠标的坐标：event.x,event.y.

指定区域随鼠标移动其实就是改变了指定区域的left,top属性的值。

为了对某一个区域进行定位，将该区域分离到另一个层次，用到css中position属性。

7，联动下拉框

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function selCity()
{
	var citys = [["--选择城市--"],
					["海淀区","朝阳区","东城区","西城区"],
					["长沙","衡阳","岳阳","株洲"],
					["广州","深圳","佛山"]];
	var provinceNode = document.getElementById("province");
	var cityNode = document.getElementById("city");
	var index = provinceNode.selectedIndex;
	
	cityNode.options.length = 0;
	for(var i=0; i<citys[index].length; i++)
	{
		var optNode = document.createElement("option");
		optNode.innerText = citys[index][i];
		cityNode.options.appendChild(optNode);
	}
}
</script>
</head>
<body>
<select id="province" οnchange="selCity()">
	<option>--选择省市--</option>
	<option>北京</option>
	<option>湖南</option>
	<option>广东</option>
</select>
<select id="city">
	<option>--选择城市--</option>
</select>
</body>
</html>

8，动态改变字体大小

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
function changeSize(size)
{
	var newsdiv = document.getElementById("newsid");
	newsdiv.style.fontSize = size;
}
</script>
</head>

<body>
<h1>新闻标题啊</h1>
<a href="javascript:void(0)" οnclick="changeSize('24px');">大</a>
<a href="javascript:void(0)" οnclick="changeSize('16px');">中</a>
<a href="javascript:void(0)" οnclick="changeSize('10px');">小</a>
<div id="newsid">
我店亏本清仓！<br />
一次全部甩卖！<br />
走过路过不要错过！<br />
清仓清仓，一律清仓！通通清仓！全部清仓！<br />
所有商品29元起！<br />
最后一天！最后一天！<br />
</div>
</body>
</html>

9，模拟QQ好友列表效果

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
table,table td {
	border: #3300FF 1px solid;
}
table td{
	background-color:#FFFF66;
}
table div{
	background-color: #FFFFFF;
}
table td a:link, table td a:visited{
	text-decoration:none;
	color: #0066FF;
}
.open{
	display:block;
}
.close{
	display:none;
}
</style>
<script type="text/javascript">
function list()
{
	var aNode = event.srcElement;
	//alert(aNode.nodeName);
	var tdNode = aNode.parentNode;
	var divNode = tdNode.getElementsByTagName("div")[0];
	var tabNode = document.getElementsByTagName("table")[0];
	//alert(tabNode.nodeName);
	var divNodes = tabNode.getElementsByTagName("div");
	for(var i=0; i<divNodes.length; i++)
	{
		if(divNodes[i] == divNode)
		{
			if(divNode.className == "close")
			{
				divNode.className = "open";
			}
			else
			{
				divNode.className = "close";
			}
		}
		else
		{
			divNodes[i].className = "close";
		}
	}

}
</script>
</head>
<table>
	<tr>
		<td>
			<a href="javascript:void(0)" οnclick="list()">好友列表1</a>
			<div>
				简单<br />
				金卡黛珊<br />
				大府酒楼<br />
				大师傅<br />
				贾乃亮<br />
				桑德菲杰里<br />
			</div>
		</td>
	</tr>
	<tr>
		<td>
			<a href="javascript:void(0)" οnclick="list()">好友列表2</a>
			<div>
				简单<br />
				金卡黛珊<br />
				大府酒楼<br />
				大师傅<br />
				贾乃亮<br />
				桑德菲杰里<br />
			</div>
		</td>
	</tr>
	<tr>
		<td>
			<a href="javascript:void(0)" οnclick="list()">好友列表3</a>
			<div>
				简单<br />
				金卡黛珊<br />
				大府酒楼<br />
				大师傅<br />
				贾乃亮<br />
				桑德菲杰里<br />
			</div>
		</td>
	</tr>
	<tr>
		<td>
			<a href="javascript:void(0)" οnclick="list()">好友列表4</a>
			<div>
				简单<br />
				金卡黛珊<br />
				大府酒楼<br />
				大师傅<br />
				贾乃亮<br />
				桑德菲杰里<br />
			</div>
		</td>
	</tr>
		<tr>
		<td>
			<a href="javascript:void(0)" οnclick="list()">好友列表5</a>
			<div>
				简单<br />
				金卡黛珊<br />
				大府酒楼<br />
				大师傅<br />
				贾乃亮<br />
				桑德菲杰里<br />
			</div>
		</td>
	</tr>
</table>

<body>
</body>
</html>

10，添加和删除文件附件

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
table td a:link, table td a:visited{
	text-decoration:none;
}
table, table td{
	border:#0033FF 1px solid;
}
</style>
<script type="text/javascript">
function addfile()
{
	var tabNode = document.getElementsByTagName("table")[0];
	var trNode = tabNode.insertRow();
	var tdNode_file = trNode.insertCell();
	var tdNode_del = trNode.insertCell();
	tdNode_file.innerHTML = "<input type='file'/>";
	tdNode_del.innerHTML = "<a href='javascript:void(0)' οnclick='del(this)'>删除</a>";
	//alert(tabNode.nodeName);
}

function del(node)
{
	var trNode = node.parentNode.parentNode;
	trNode.parentNode.removeChild(trNode);
}
</script>
</head>
<table>
	<tr>
		<td>
		<a href="javascript:void(0)" οnclick="addfile()">添加附件</a>
		</td>
	</tr>
</table>
<body>
</body>
</html>

11，模拟邮箱的邮件列表（全选，取消全选，反选，删除选中邮件）

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
table, table td{
	border:#006633 1px solid;
}
table{
	width:70%;
}
table th{
 background-color:#00FF33;
}
.one{
 background-color:#CCFF00;
}
.two{
 background-color:#FFFF33;
}
.over{
 background-color:#FF3300;
}
</style>
<script type="text/javascript">
window.onload = function()
{
	trColor();
}

var name;
function trColor()
{
	var tabNode = document.getElementsByTagName("table")[0];
	var trs = tabNode.rows;
	for(var i=1; i<trs.length-1; i++)
	{
		if(i % 2 == 1)
		{
			trs[i].className = "one";
		}
		else
		{
			trs[i].className = "two";
		}
		
		trs[i].onmouseover = function()
		{
			name = this.className;
			this.className = "over";
		}
		
		trs[i].onmouseout = function()
		{
			this.className = name;
		}
	}
}

function checkAll(node)
{
	var mails = document.getElementsByName("mail");
	for(var i=0; i<mails.length; i++)
	{
		mails[i].checked = node.checked;
	}
}

function checkByBtn(flag)
{
	var mails = document.getElementsByName("mail");
	for(var i=0; i<mails.length; i++)
	{
		if(flag > 1)
			mails[i].checked = !mails[i].checked;
		else
			mails[i].checked = flag;
	}
}

var arr = new Array();
var count = 0;
function delMail()
{
	var mails = document.getElementsByName("mail");
	for(var i=0; i<mails.length; i++)
	{
		if(mails[i].checked)
		{
			var trNode = mails[i].parentNode.parentNode;
			arr[count++] = trNode;
		}
	}
	for(var i=0; i<arr.length; i++)
	{
		arr[i].parentNode.removeChild(arr[i]);
	}
	
	arr.length = 0;
	count = 0;
	trColor();
}
</script>
</head>

<body>
<table>
	<tr>
		<th><input type="checkbox" οnclick="checkAll(this)"/>全选</th>
		<th>姓名</th>
		<th>主题</th>
	</tr>
	<tr>
		<td><input type="checkbox"  name="mail"/></td>
		<td>张三1</td>
		<td>新的邮件</td>
	</tr>
	<tr>
		<td><input type="checkbox"  name="mail"/></td>
		<td>张三2</td>
		<td>新的邮件</td>
	</tr>
	<tr>
		<td><input type="checkbox"  name="mail"/></td>
		<td>张三3</td>
		<td>新的邮件</td>
	</tr>
	<tr>
		<td><input type="checkbox" name="mail"/></td>
		<td>张三4</td>
		<td>新的邮件</td>
	</tr>
	<tr>
		<td><input type="checkbox"  name="mail"/></td>
		<td>张三5</td>
		<td>新的邮件</td>
	</tr>
	<tr>
		<td><input type="checkbox"  name="mail"/></td>
		<td>张三6</td>
		<td>新的邮件</td>
	</tr><tr>
		<td><input type="checkbox"  name="mail"/></td>
		<td>张三7</td>
		<td>新的邮件</td>
	</tr>
	<tr>
		<td><input type="checkbox"  name="mail"/></td>
		<td>张三8</td>
		<td>新的邮件</td>
	</tr>
	<tr>
		<td><input type="checkbox"  name="mail"/></td>
		<td>张三9</td>
		<td>新的邮件</td>
	</tr>
	<tr>
		<td><input type="checkbox" name="mail" /></td>
		<td>张三10</td>
		<td>新的邮件</td>
	</tr>
	<tr>
		<th><input type="checkbox" οnclick="checkAll(this)"/>全选</th>
		<th colspan="2">
			<input type="button" value="全选" οnclick="checkByBtn(1)" />
			<input type="button" value="取消全选" οnclick="checkByBtn(0)" />
			<input type="button" value="反选" οnclick="checkByBtn(2)" />
			<input type="button" value="删除选中邮件" οnclick="delMail()" />
		</th>
	</tr>
</table>
</body>
</html>

12，模拟流氓广告（关闭以后又自动打开）

示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript">
window.οnlοad=function()
{
	//alert("o yeah!");
	window.open("a.html","_blank","toolbar=no,location=no,menubar=no,status=no,");
}

/*
function keyfilter()
{
	if (!(event.keyCode>=48 && event.keyCode<=57))
	{
		event.returnValue = false;
	}
}
*/
</script>
</head>

<body>
<input type="text" οnkeypress="keyfilter();" />
</body>
</html>

SinceDayOne

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
黑马程序员_javascript_01

-----------android培训、java培训、期待与您交流！-----------DOM编程步骤：1，定义界面通过html的标签将数据进行封装。2，定义一些静态的样式。通过css。3，需要动态的完成和用户的交互。a) 先明确事件源。b) 明确事件将事件注册到事件源上。c) 通过javas
复制链接

扫一扫

专栏目录