练习：新闻字体的大中小不同样式的实现。
<html>
<head>
<title>这是我的网页！</title>
<style type="text/css">
//超链接访问前后颜色会变，不需要，把他设置成不变的并取消下划线。
a:link,a:visited{
color:#0044ff;
text-decoration:none;
}
a:hover{
color:#ff8800; //这个颜色是鼠标在那一项上时显示的颜色。
}
#news{ /*这里最好别写成“div{” 因为还可能有其他的div区域，容易混淆。*/
width:500px;
border:#00ff00 1px solid;
padding:10px;
}
/*预定义一些样式封装到选择器中。一般使用类选择器。*/
.norm{
color:#000000;
font-size:16px;
background-color:#cdd8d0;
}
.max{
color:#808080;
font-size:28px;
background-color:#9ce9b4;
}
.min{
color:#ffffff;
font-size:10px;
background-color:#f1b96d;
}
</style>
</head>
<body>
<!--
需求：新闻字体的大中小不同样式的实现。
思路：1.先有新闻数据，并用标签封装。
2.定义一些页面样式。
3.确定事件源和事件以及处理方式中被处理的节点。
事件源：a标签 事件：onclick 被处理的节点：div-news
既然要给超链接加入自定义的事件处理，就要先取消超链接的默认点击效果。
可以使用给href设置为：javascript:void(0)的方式来完成。
-->
<h1>这是一个新闻标题</h1>
<hr/>
<a href="javascript:void(0)" onclick="changeFont2(‘max‘)">大字体</a>
<a href="javascript:void(0)" onclick="changeFont2(‘norm‘)">中字体</a>
<a href="javascript:void(0)" onclick="changeFont2(‘min‘)">小字体</a>
<div id="news" class="norm">
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
</div>
<script type="text/javascript">
//定义改变字体的方法。
function changeFont(size,color){
//要对div news中的文本字体进行操作，必须要先获取div节点对象。
var oNewsText=document.getElementById("news");
oNewsText.style.fontSize=size;
oNewsText.style.color=color;
}
function changeFont2(selectorName){
//如果根据用户点击所需要的效果不唯一，仅通过上面的传递多个参数的方法虽然可以实现效果，但是
//1.传参过多，阅读性差
//2.JS代码和css代码耦合性高
//3.不利于扩展。
//解决方式：将多个所需样式进行封装，封装到选择器中。只要给指定的标签加载不同的选择器就可以了。
var oNewsText=document.getElementById("news");
oNewsText.className=selectorName;
}
</script>
</body>
</html>
练习2：
<html>
<head>
<title>这是我的网页！</title>
<style type="text/css">
dl dd{
margin:0px;
}
dl{
height:16px;
}
dl dt{
color:#ff8000;
}
//预定义一些样式，类选择器，便于给标签进行样式的动态加载。
.open{
overflow:visible;
}
.close{
overflow:hidden;
}
</style>
</head>
<body>
<!--
思路：
1.标签封装数据
2.定义样式css
3.明确事件源，事件，以及要处理的节点。dom
4.明确具体的操作方式，其实就是事件的处理方式。js
-->
<dl class="close">
<dt onclick="list4(this)">显示条目一</dt>
<dd>展开列表内容1</dd>
<dd>展开列表内容1</dd>
<dd>展开列表内容1</dd>
<dd>展开列表内容1</dd>
<dd>展开列表内容1</dd>
</dl>
<dl class="close">
<dt onclick="list4(this)">显示条目二</dt>
<dd>展开列表内容2</dd>
<dd>展开列表内容2</dd>
<dd>展开列表内容2</dd>
<dd>展开列表内容2</dd>
<dd>展开列表内容2</dd>
</dl>
<dl class="close">
<dt onclick="list4(this)">显示条目三</dt>
<dd>展开列表内容3</dd>
<dd>展开列表内容3</dd>
<dd>展开列表内容3</dd>
<dd>展开列表内容3</dd>
<dd>展开列表内容3</dd>
</dl>
<script type="text/javascript">
var flag=true;
//列表展开闭合效果
function list(){
/*思路：
*1.要实现列表展开闭合效果，无非就是将dl属性的overflow的值改成visible即可。
*2.要先获取dl节点。
*3.改变该节点的style.overflow的属性。
*/
var oDlNode=document.getElementsByTagName("dl")[0];
if(flag){
oDlNode.style.overflow="visible";
flag=false;
}
else{
oDlNode.style.overflow="hidden";
flag=true;
}
}
//重新定义list，降低js和css的耦合性
function list2(){
var oDlNode=document.getElementsByTagName("dl")[0];
if(oDlNode.className=="close"){
oDlNode.className="open";
}
else{
oDlNode.className="close";
}
}
//这个才是最常用的方法
function list3(node){
var oDlNode=node.parentNode;
if(oDlNode.className=="close"){
oDlNode.className="open";
}
else{
oDlNode.className="close";
}
}
//在多个列表下，一次只需要展开一个列表，其他列表都关闭，否则会影响阅读。
//怎么保证只开一个而关闭其他呢？
//思路：
//1.获取所有节点。
//2.遍历所有节点，只对当前结点进行展开或闭合操作，其他节点都关闭。
function list4(node){
var oDlNode=node.parentNode;
var collDlNodes=document.getElementsByTagName("dl");
for(var x=0;x<collDlNodes.length;x++){
if(collDlNodes[x]==oDlNode){
if(oDlNode.className=="close"){
oDlNode.className="open";
}
else{
oDlNode.className="close";
}
}else{
collDlNodes[x].className="close";
}
}
}
</script>
</body>
</html>
练习3：完成一个类似于qq的好友菜单的展开闭合效果
<html>
<head>
<title>这是我的网页！</title>
<style type="text/css">
/*
对表格中的ul进行样式定义。
1.取出无序列表的样式。
2.将列表的外边距取消
*/
table ul{
list-style:none;
margin:0px;
background-color:#26e356;
}
//对表格边框线和单元格的框线进行定义
table{
border:#8080ff 1px solid;
width:80px;
}
table td{
border:#8080ff 1px solid;
background-color:#f3c98f;
}
/*
对单元格中的超链接样式进行定义,改变颜色并去掉下划线
*/
table td a:link,table td a:visited{
color:#1f6df1;
text-decoration:none;
}
table td a:hover{
color:#df4011;
}
//预定一些样式
.open{
display:block;
}
.close{
display:none;
}
</style>
</head>
<body>
<table id="goodlist">
<tr>
<td>
<a href="javascript:void(0)" onclick="list(this)">好友菜单</a>
<ul>
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="list(this)">好友菜单</a>
<ul>
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="list(this)">好友菜单</a>
<ul>
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="list(this)">好友菜单</a>
<ul>
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
<li>一个好友</li>
</ul>
</td>
</tr>
</table>
<script type="text/javascript">
function list2(node){
//获取被操作的节点ul。
//先通过事件源超链接标签获取其父节点td，在通过父节点获取ul节点。
var oTdNode=node.parentNode;
var oUlNode=oTdNode.getElementsByTagName("ul")[0];
//这里相比上一个例子，其实不用在ul里定义一个class的初始值，这样他就为空，
//肯定不满足if，而满足else，所以第一次只要让else中open就行了，而不用定义ul中的class的初始值。
if(oUlNode.className=="open"){
oUlNode.className="close";
}else{
oUlNode.className="open";
}
}
//实现一次只打开一个列表的功能
function list(node){
var oTdNode=node.parentNode;
var oUlNode=oTdNode.getElementsByTagName("ul")[0];
//获取表格中的所有ul。先获取表格节点对象。
var oTableNode=document.getElementById("goodlist");
var collUlNodes=oTableNode.getElementsByTagName("ul");
for(x=0;x<collUlNodes.length;x++){
if(collUlNodes[x]==oUlNode){
if(oUlNode.className=="open"){
oUlNode.className="close";
}else{
oUlNode.className="open";
}
}else{
collUlNodes[x].className="close";
}
}
}
</script>
</body>
</html>
练习4：在页面中创建一个5行6列(任意行，任意列)的表格
<html>
<head>
<title>这是我的网页</title>
<style type="text/css">
table{
border:#249bdb 1px solid;
width:500px;
border-collapse:collapse;
}
table td{
border:#249bdb 1px solid;
padding:12px;
}
</style>
</head>
<body>
<!--
在页面创建一个5行6列的表格
1.事件源，比如按钮。
2.必须有一个生成的表格节点存储位置
-->
行数：<input type="text" name="rownum" />
列数：<input tyep="text" name="colnum" />
<input type="button" value="创建表格" name="creButton" onclick="creTable()"/>
<hr/>
要删除第几行？<input type="text" name="delrow" /><input type="button" value="删除行" onclick="delrow()"/><br/>
要删除第几列？<input type="text" name="delcol" /><input type="button" value="删除列" onclick="delcol()"/>
<hr/>
<div></div>
<script type="text/javascript">
function creTable3(){
//思路：
//可以通过之前学过的createElement创建元素的形式来完成。
var oTabNode=document.createElement("table"); //创建表格节点
var oTbdNode=document.createElement("tbody"); //创建tbody节点
var oTrNode=document.createElement("tr"); //创建行节点tr
var oTdNode=document.createElement("td"); //创建单元格节点td
oTdNode.innerHTML="这是单元格";
//让这些节点有关系。进行指定层次的节点添加。
oTrNode.appendChild(oTdNode);
oTbdNode.appendChild(oTrNode);
oTabNode.appendChild(oTbdNode);
document.getElementsByTagName("div")[0].appendChild(oTabNode);
}
function creTable2(){
//上面的方法很麻烦，既然操作的是表格，最方便的方法就是使用表格节点对象的方法来完成。
//表格是由行组成。表格节点对象中的insertRow方法就完成了创建并添加的动作。
//同理，行是由单元格组成，tr节点对象的insertCell方法可以完成创建并添加单元格。
var oTabNode=document.createElement("table");
var oTrNode=oTabNode.insertRow();
var oTdNode=oTrNode.insertCell();
oTdNode.innerHTML="这是新的单元格";
//将表格节点添加到div中。
document.getElementsByTagName("div")[0].appendChild(oTabNode);
}
function creTable(){
var oTabNode=document.createElement("table");
oTabNode.setAttribute("id","tabid"); //这句话等效于oTabNode.id="tabid";等会删除行和列时会用到。
var row=document.getElementsByName("rownum")[0].value;
var col=document.getElementsByName("colnum")[0].value;
for(var x=1;x<=row;x++){
var oTrNode=oTabNode.insertRow();
for(var y=1;y<=col;y++){
var oTdNode=oTrNode.insertCell();
oTdNode.innerHTML=x+"-"+y;
}
}
document.getElementsByTagName("div")[0].appendChild(oTabNode);
//创建表格之后，重复点击，会一直创建，可是只想创建一个，怎么办？
//button的disabled属性默认为假，将其设置为真，按钮即失效。
document.getElementsByName("creButton")[0].disabled=true;
}
function delrow(){
//获取表格对象
var oTabNode=document.getElementById("tabid");
if(oTabNode==null){
alert("表格都没建怎么删啊，傻逼！");
return;
}
//获取要删的行数
var row=document.getElementsByName("delrow")[0].value;
if(row>=1&&row<=oTabNode.rows.length){
oTabNode.deleteRow(row-1); //这里注意用户要删第二行，这里得传2-1。
}
else{
alert("要删除的行不存在");
}
}
function delcol(){
//table中不直接存在列的概念，但是删除列其实就是在删除每一行中同一位置的单元格，也就不难了。
var oTabNode=document.getElementById("tabid");
if(oTabNode==null){
alert("表格都没建怎么删啊，傻逼！");
return;
}
var col=document.getElementsByName("delcol")[0].value;
if(col>=1&&col<=oTabNode.rows[0].cells.length){
for(var x=0;x<oTabNode.rows.length;x++){
oTabNode.rows[x].deleteCell(col-1);
}
}
else{
alert("要删除的列不存在");
}
}
</script>
</body>
</html>
练习5：实现表格行颜色间隔显示并在鼠标停留区域实现高亮指示。最后点击年龄可以按年龄排序。
<html>
<head>
<title>这是我的网页</title>
<style type="text/css">
table{
border:#249bdb 1px solid;
width:500px;
border-collapse:collapse;
}
table td{
border:#249bdb 1px solid;
padding:12px;
}
table th{
border:#249bdb 1px solid;
padding:12px;
background-color:rgb(200,200,200);
}
</style>
<style type="text/css">
.one{
background-color:#0364ff;
}
.two{
background-color:#75f094;
}
.over{
background-color:#f9360d;
}
th a:link,th a:visited{
color:#279bda;
text-decoration:none;
}
</style>
<script type="text/javascript">
var name;
function trColor(){
/*
*思路：
*1.因为要操作行的样式，所以要先获取表哥对象。
*2.获取所有被操作的行对象。
*3.遍历行并给每一行指定样式。
*/
var oTabNode=document.getElementById("info");
var collTrNodes=oTabNode.rows;
//遍历的时候从第二行开始。第一行是项目，上面已经单独设置过了。
for(var x=1;x<collTrNodes.length;x++){
if(x%2==1){
collTrNodes[x].className="one";
}else{
collTrNodes[x].className="two";
}
//给每一个行对象都添加鼠标进入和出去两个事件。
collTrNodes[x].onmouseover=function(){
name=this.className;
this.className="over";
}
collTrNodes[x].onmouseout=function(){
this.className=name;
}
}
}
onload=function(){ //注意：这句一定不能忘，也不能直接调用trColor()。
trColor(); //否则会报错，没有info对象，因为这是在head标签里，table还没加载。
}
/*
* var name; //注意：这里得先设置个变量记住高亮之前的颜色，否则，鼠标出去这一行后，不知道要还原什么颜色。
* function over(node){
* name=node.className;
* node.className="over";
* }
* function out(node){
* node.className=name;
* }
*/
var flag=true; //这样就可以实现鼠标点一下排序，再点一下，逆向排序了。
function sortTable(){
/*
*思路：
*1.排序就需要数组，先获取需要参与排序的行对象数组。
*2.对行数组中的每一行的年龄单元格的数据进行比较，并完成行对象在数组中的位置置换。
*3.将排好序的数组重新添加会表格。
*/
var oTabNode=document.getElementById("info");
var collTrNodes=oTabNode.rows;
var trArr=[];
//遍历原行集合，并将需要排序的行对象存储到临时容器中。
for(var x=1;x<collTrNodes.length;x++){
trArr[x-1]=collTrNodes[x];
}
mySort(trArr);
//将排完序的行对象添加回表格。前面加了flag，就可以实现鼠标点一下排序，再点一下，逆向排序了。
if(flag){
for(var x=0;x<trArr.length;x++){
trArr[x].parentNode.appendChild(trArr[x]);
}
flag=false;
}else{
for(var x=trArr.length-1;x>=0;x--){
trArr[x].parentNode.appendChild(trArr[x]);
}
flag=true;
}
}
function mySort(arr){
for(var x=0;x<arr.length-1;x++){
for(var y=x+1;y<arr.length;y++){
//这里要注意比的不是arr[x]和arr[y]，他们是行对象，比的是年龄那一列的值。要把年龄转成整数。
if(parseInt(arr[x].cells[1].innerHTML)>parseInt(arr[y].cells[1].innerHTML)){
var temp=arr[x]; //这里排序后换位置换的是整行，而又不是那一列了。
arr[x]=arr[y];
arr[y]=temp;
}
}
}
}
</script>
</head>
<body>
<table id="info">
<tr>
<th>姓名</th>
<th><a href="javascript:void(0)" onclick=sortTable()>年龄</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>29</td>
<td>广州</td>
</tr>
<tr>
<td>孙八</td>
<td>23</td>
<td>南京</td>
</tr>
<tr>
<td>二麻子</td>
<td>24</td>
<td>大连</td>
</tr>
<tr>
<td>犀利姐</td>
<td>32</td>
<td>青岛</td>
</tr>
<tr>
<td>旺财</td>
<td>19</td>
<td>深圳</td>
</tr>
<tr>
<td>周七</td>
<td>42</td>
<td>铁岭</td>
</tr>
<tr>
<td>毕姥爷</td>
<td>18</td>
<td>沈阳</td>
</tr>
</table>
</body>
</html>
练习5：实现网上购物的结算
<html>
<head>
<title>这是我的网页</title>
</head>
<body>
<input type="checkbox" name="allitem" onclick="checkAll(this)"/>全选<br/>
<input type="checkbox" name="item" value="4000"/>笔记本电脑：4000元。<br/>
<input type="checkbox" name="item" value="4000"/>笔记本电脑：4000元。<br/>
<input type="checkbox" name="item" value="4000"/>笔记本电脑：4000元。<br/>
<input type="checkbox" name="item" value="4000"/>笔记本电脑：4000元。<br/>
<input type="checkbox" name="item" value="4000"/>笔记本电脑：4000元。<br/>
<input type="checkbox" name="item" value="4000"/>笔记本电脑：4000元。<br/>
<input type="button" value="总金额：" onclick="getSum()"/>
<span id="sumid"></span>
<script type="text/javascript">
function getSum(){
/*
*思路：
*1.获取所有的名称为item的复选框。
*2.判断checked状态，为true表示被选中，获取该节点的value进行累加。
*/
var sum=0;
var collItemNodes=document.getElementsByName("item");
for(var x=0;x<collItemNodes.length;x++){
if(collItemNodes[x].checked){
//注意：这里别忘了parseInt()，否则结果就是040004000，而不是8000.
sum+=parseInt(collItemNodes[x].value);
}
}
var sSum=sum+"元";
document.getElementById("sumid").innerHTML=sSum.fontcolor("red");
}
function checkAll(node){
//原理：将全选box的checked状态赋值给所有item的checked。
var collItemNodes=document.getElementsByName("item");
for(var x=0;x<collItemNodes.length;x++){
collItemNodes[x].checked=node.checked;
}
}
</script>
</body>
</html>