1：完成一个好友菜单展开闭合操作
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
/*对ul进行定义，去除内边距和前面的符号*/
table ul{
margin: 0px;
list-style: none;
padding: 0px;
background-color: #9955ff;
display: none;
}
/*对表格框线和单元格框线进行定义*/
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: #1f6dfd1;
text-decoration: none;
}
/*超链接点击效果*/
table td a:hover{
color: #df4011;
}
/*预定义样式*/
.open{
display: block;
}
.close{
display: none;
}
</style>
</head>
<body>
<!-- 完成一个好友菜单展开闭合操作 -->
<script type="text/javascript">
function flist(node){
/*
获取列表节点ul：
1.通过参数获取a节点对象；
2.获取a的父节点td；
3.通过使用getElementsByTagName()方法获去ul节点。
(容器型节点都有这种方法)
*/
//通过参数获取a节点对象；获取a的父节点td；
var otdNode=node.parentNode;
//通过使用getElementsByTagName()方法获取当前ul节点。
var oulNode=otdNode.getElementsByTagName("ul")[0];
//alert(oulNode.nodeName);
//获取所有的ul节点
var otableNode=document.getElementById("tableid");
var oulNodes=otableNode.getElementsByTagName("ul");
for(var x=0;x<oulNodes.length;x++){
if(oulNodes[x]==oulNode){
if(oulNodes[x].className=="open")
oulNodes[x].className="close";
else
oulNodes[x].className="open"
}
else
oulNodes[x].className="close";
}
}
</script>
<table id="tableid">
<tr>
<td>
<a href="javascript:void(0)" onclick="flist(this)">好友列表</a>
<ul>
<li>张三好友</li>
<li>张三好友</li>
<li>张三好友</li>
<li>张三好友</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="flist(this)">好友列表</a>
<ul>
<li>张三好友</li>
<li>张三好友</li>
<li>张三好友</li>
<li>张三好友</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="flist(this)">好友列表</a>
<ul>
<li>张三好友</li>
<li>张三好友</li>
<li>张三好友</li>
<li>张三好友</li>
</ul>
</td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onclick="flist(this)">好友列表</a>
<ul>
<li>张三好友</li>
<li>张三好友</li>
<li>张三好友</li>
<li>张三好友</li>
</ul>
</td>
</tr>
</table>
</body>
</html>2：需求：新闻字体中大、小、中样式的改变
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
a:link,a:visited {
color: #oo44ff;
text-decoration: none;
}
a:hover {
background-color: white;
color: red;
font-size: 24px;
}
#newsid{
border: #FF00FF 1px solid;
width: 400px;
padding: 10px;
}
</style>
</head>
<body>
<!--
需求：新闻字体中大、小、中样式的改变
思路：
1、首先定义新闻文本，用标签封装
2、定义事件源和事件
时间源：超链接 a；
事件：onclick()
被处理的节点：div-newsid
既然要给超链接自定义事件，就要取消超链接默认的点击效果
在href中写入：javascript:void(0)
-->
<script type="text/javascript">
function changefont(size){
//获取div节点的对象
var oNews=document.getElementById("newsid");
//利用该对象改变style属性
oNews.style.fontSize=size;
}
</script>
<h1>安倍走了 下一步中日关系怎么走?</h1>
<hr/>
<a href="javascript:void(0)" onclick="changefont('28px')">大字体</a>
<a href="javascript:void(0)" onclick="changefont('16px')">中字体</a>
<a href="javascript:void(0)" onclick="changefont('12px')">小字体</a>
<div id="newsid">
日本第48届众院选举22日举行投票，当天开始计票。23下午，465个议席已全部确定。
其中，执政党310个，在野党155个。
鉴于在日本众院选举中获得了超过三分之二的议席数，自民、公明两党23日确认将在11月1日召集特别国会，
当天经过首相指名选举组建第四届安倍内阁。
这次选举胜利再次证明安倍政治上的应变能力。今年夏天他的支持率一度跌破30%，已经到了执政的危险线。
但是他抓住朝鲜发射导弹的机会，成功拉升了日本社会的危机感，使自己的支持率重回50%以上。
接下来他又“乘胜追击”，解散众院提前举行大选，现在看来他“赌赢了”。
</div>
</body>
</html>如果根据用户点击所需要的效果不唯一。
仅通过传递多个参数虽然可以实现效果
但是：
1.传参太多
2.js代码和css耦合性高
3.不利于扩展
解决：
将多个所需的样式进行封装。
封装到选择器中，只要给定指定的标签加载不同的选择器就可以了。
预定义一些样式封装到选择器，一般使用类选择器。因为优先级低。
@charset "UTF-8";
a:link,a:visited {
color: #oo44ff;
text-decoration: none;
}
a:hover {
background-color: white;
color: red;
font-size: 24px;
}
#newsid{
border: #FF00FF 1px solid;
width: 400px;
padding: 10px;
}
.norm{
color:#000000;
font-size:16px;
background-color:#cdd8d0;
}
.max{
color:#808080;
font-size:28px;
background-color:#9ce9b4;
}
.min{
color:#00ff00;
font-size:12px;
background-color:#804040;
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="1.css" type="text/css"/>
</head>
<body>
<script type="text/javascript">
/*
如果根据用户点击所需要的效果不唯一。
仅通过传递多个参数虽然可以实现效果
但是：
1.传参太多
2.js代码和css耦合性高
3.不利于扩展
解决：
将多个所需的样式进行封装。
封装到选择器中，只要给定指定的标签加载不同的选择器就可以了。
预定义一些样式封装到选择器，一般使用类选择器。因为优先级低。
*/
function changefont(checkter){
//获取div节点的对象
var oNews=document.getElementById("newsid");
//利用该对象改变style属性
oNews.className=checkter ;
}
</script>
<h1>安倍走了 下一步中日关系怎么走?</h1>
<hr/>
<a href="javascript:void(0)" onclick="changefont('max')">大字体</a>
<a href="javascript:void(0)" onclick="changefont('norm')">中字体</a>
<a href="javascript:void(0)" onclick="changefont('min')">小字体</a>
<div id="newsid" class="norm">
日本第48届众院选举22日举行投票，当天开始计票。23下午，465个议席已全部确定。
其中，执政党310个，在野党155个。
鉴于在日本众院选举中获得了超过三分之二的议席数，自民、公明两党23日确认将在11月1日召集特别国会，
当天经过首相指名选举组建第四届安倍内阁。
这次选举胜利再次证明安倍政治上的应变能力。今年夏天他的支持率一度跌破30%，已经到了执政的危险线。
但是他抓住朝鲜发射导弹的机会，成功拉升了日本社会的危机感，使自己的支持率重回50%以上。
接下来他又“乘胜追击”，解散众院提前举行大选，现在看来他“赌赢了”。
</div>
</body>
</html>3. 需求：写一个展开列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
dl dd{
margin: 0px;
}
dl{
height: 20px;
}
.open{
height: 90px;
}
.close{
overflow: hidden;
}
dl dt{
color:#ff00ff;
}
</style>
<script type="text/javascript">
var flag=true;
function list1(){
//1.获取dl节点对象
var odlNode=document.getElementsByTagName("dl")[0];
//2.改变节点的样式属性值。
if(flag){
odlNode.style.overflow="visible";
flag=false;
}else{
odlNode.style.overflow="hidden";
flag=true;
}
}
//通过预定义样式改变列表,降低css和js的耦合性
function list2(){
//1.获取dl节点对象
var odlNode=document.getElementsByTagName("dl")[0];
//2.改变class的属性值
if(odlNode.className=="close")
{
odlNode.className="open"
}
else
{
odlNode.className="close"
}
}
//多个列表
function list3(node){
//获取dl节点
var odlNode=node.parentNode;
//改变dl节点的className属性值
if(odlNode.className=="close")
{
odlNode.className="open"
}
else
{
odlNode.className="close"
}
}
//多个列表只显示一个
function list4(node){
/*
思路：获取当前dl标签，获取所有dl标签
让当前标签打开，让其他标签关闭
*/
//获取当前dl节点
var odlNode=node.parentNode;
//获取所有dl标签
var odlNodes=document.getElementsByTagName("dl");
for(var x=0;x<odlNodes.length;x++){
if(odlNodes[x]==odlNode){
if(odlNode.className=="close")
{
odlNode.className="open"
}
else
{
odlNode.className="close"
}
}
else
{
odlNodes[x].className="close";
}
}
}
</script>
</head>
<body>
<!--
需求：写一个展开列表
思路：
1.先把列表写出来，用html封装；
2.用css进行样式的添加；
3.定义事件源，事件，以及要处理的节点，dom；
4.进行事件的处理。用js。
-->
<!-- dl style="overflow: hidden;"-->
<dl class="close">
<dt onclick="list4(this)">产品1</dt>
<dd>dwm1000</dd>
<dd>dwm1001</dd>
<dd>dwm1002</dd>
<dd>dwm1003</dd>
</dl>
<dl class="close">
<dt onclick="list4(this)">产品2</dt>
<dd>dwm1000</dd>
<dd>dwm1001</dd>
<dd>dwm1002</dd>
<dd>dwm1003</dd>
</dl>
<dl class="close">
<dt onclick="list4(this)">产品3</dt>
<dd>dwm1000</dd>
<dd>dwm1001</dd>
<dd>dwm1002</dd>
<dd>dwm1003</dd>
</dl>
</body>
</html>4.创建表格，使用一个按钮来创建表格。rows所有的行，cols所有的列，一行中cells所有的单元格
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table {
border: #8080ff 1px solid;
border-style:solid;
}
table td{
border: #8080ff 1px solid;
background-color: #f3c98f;
}
</style>
</head>
<body>
<!--
创建表格，使用一个按钮来创建表格。rows所有的行，cols所有的列，一行中cells所有的单元格
-->
<script type="text/javascript">
function creatable(){
/*使用过去的方法，使用creatElement()方法*/
//1.创建表格节点
var otableNode=document.createElement("table");
//2.创建tbody节点
var otbodyNode=document.createElement("tbody");
//3.创建tr节点
var otrNode=document.createElement("tr");
//4.创建td节点
var otdNode=document.createElement("td");
//在td节点写入内容
otdNode.innerHTML="这是单元格";
otrNode.appendChild(otdNode);
otbodyNode.appendChild(otrNode);
otableNode.appendChild(otbodyNode);
document.getElementsByTagName("div")[0].appendChild(otableNode);
}
/*
上面的方法很麻烦，既然是操作表格，
那么最方便的是使用表格节点的对象方法来完成。
表格是由行组成的。表格节点对象中的insertRow方法就完成创建并添加的动作。
行是由单元格组成的，通过tr节点对象的insertCell来完成。
*/
function crtTable(){
alert("jaja");
//1.创建表格节点
var otableNode=document.createElement("table");
otableNode.id="idtable";
// otableNode.setAttribute("id","idtable");
//创建行
//获取行列数
var rownum=parseInt(document.getElementsByName("rows")[0].value);
var collsnum=parseInt(document.getElementsByName("colls")[0].value);
for(var x=1;x<=rownum;x++){
var otrNode=otableNode.insertRow();
//创建单元格
for(var y=1;y<=collsnum;y++){
var otdNode=otrNode.insertCell();
otdNode.innerHTML=x+"--"+y;
}
}
document.getElementsByTagName("div")[0].appendChild(otableNode);
document.getElementsByName("inputname")[0].disabled=true;
}
//删除行
function deletRow(){
var otableNode=document.getElementById("idtable");
if(otableNode==null){
alert("表格不存在");
}
var valuerow=document.getElementsByName("delrow")[0].value;
if(valuerow>=1&&valuerow<=otableNode.rows.length){
otableNode.deleteRow(valuerow-1);
}
else
alert("该行不存在");
}
//删除列
function deletCol(){
var otableNode=document.getElementById("idtable");
if(otableNode==null){
alert("表格不存在");
}
var valuecol=document.getElementsByName("delcol")[0].value;
if(valuecol>=1&&valuecol<=otableNode.cells.length)
{
for(var x=1;x<=otableNode.rows.length){
otableNode.rows[x].deleteCell(valuecol-1);
}
else
alert("该列不存在");
}
}
</script>
行：<input type="text" name="rows"/>列：<input type="text" name="colls"/>
<input type="button" value="创建一个表格" name="inputname" onclick="crtTable()"/>
<hr/>
删除行：<input type="text" name="delrow"/> <input type="button" value="删除行" onclick="deletRow()"/><br/>
删除列：<input type="text" name="delcol"/> <input type="button" value="删除列" onclick="deletCol()"/>
<div>
</div>
</body>
</html>5.表格行颜色悬停高亮 ，每行颜色不同
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table {
border: #8080ff 1px solid;
border-style:solid;
}
table td{
border: #8080ff 1px solid;
}
table th{
border: #8080ff 1px solid;
}
.one{
background-color: #aaffcc;
}
.two{
background-color: #aa00ff;
}
.over{
background-color: #ffaa00;
}
</style>
<script type="text/javascript">
var name;//记录变化前的颜色
function trcolor(){
var oTableNode=document.getElementById("tableid");
var oTrNodes=oTableNode.rows;
for(var x=1;x<oTrNodes.length;x++){
if(x%2==1)
oTrNodes[x].className="one";
else
oTrNodes[x].className="two";
oTrNodes[x].onmouseover=function(){
name=this.className;
this.className="over"
}
oTrNodes[x].onmouseleave=function(){
this.className=name;
}
}
}
onload=function(){
trcolor();
}
/*
//鼠标悬停令其高亮
function overcolor(node){
name=node.className;
node.className="over"
}
//鼠标过后恢复正常
function endcolor(node){
node.className=name;
}
*/
</script>
</head>
<body>
<!-- 表格行颜色悬停高亮 ，每行颜色不同-->
<table id="tableid">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
<tr >
<td>张三</td>
<td>22</td>
<td>广东</td>
</tr>
<tr>
<td>李四</td>
<td>63</td>
<td>上海</td>
</tr>
<tr>
<td>王五</td>
<td>32</td>
<td>深圳</td>
</tr>
<tr>
<td>赵四</td>
<td>91</td>
<td>铁岭</td>
</tr>
<tr>
<td>大山</td>
<td>28</td>
<td>奉天</td>
</tr>
</table>
</body>
</html>6.对表格中的年龄年龄进行排序
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
table {
border: #8080ff 1px solid;
border-style:solid;
}
table td{
border: #8080ff 1px solid;
}
table th{
border: #8080ff 1px solid;
}
th a:link,th a:visited{
color: #279afd;
text-decoration: none;
}
</style>
<script type="text/javascript">
/*
思路：
1.获取要排序的行节点，第一行不用参与排序；
2.对要排序的行节点中的第二个单元格进行排序；
3.把排序好的行节点添加到表格中。
*/
var flag = true;
function sortlist() {
var oTableNode = document.getElementById("tableid");
var oTrNodes = oTableNode.rows;
var arr = [];
for (var x = 1; x < oTrNodes.length; x++) {
arr[x - 1] = oTrNodes[x];
}
sortArr(arr);
//把排序好的行节点对象数组插入到表中
if (flag)
for (var i = 0; i < arr.length; i++) {
arr[i].parentNode.appendChild(arr[i]);
flag=false;
}
else {
for (var i = arr.length - 1; i >= 0; i--) {
arr[i].parentNode.appendChild(arr[i]);
flag=true;
}
}
}
//排序函数
function sortArr(arr){
var temp;
for(var x=0;x<arr.length-1;x++)
for(var y=x+1;y<arr.length;y++){
if(parseInt(arr[x].cells[1].innerHTML)>parseInt(arr[y].cells[1].innerHTML)){
temp=arr[x];
arr[x]=arr[y];
arr[y]=temp;
}
}
}
</script>
</head>
<body>
<!-- 对表格中的年龄年龄进行排序 -->
<table id="tableid">
<tr>
<th>姓名</th>
<th><a href="javascript:void(0)"onclick="sortlist()">年龄</a></th>
<th>地址</th>
</tr>
<tr >
<td>张三</td>
<td>22</td>
<td>广东</td>
</tr>
<tr>
<td>李四</td>
<td>63</td>
<td>上海</td>
</tr>
<tr>
<td>王五</td>
<td>32</td>
<td>深圳</td>
</tr>
<tr>
<td>赵四</td>
<td>91</td>
<td>铁岭</td>
</tr>
<tr>
<td>大山</td>
<td>28</td>
<td>奉天</td>
</tr>
</table>
</body>
</html>7.全选商品列表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 全选商品列表 -->
<script type="text/javascript">
//求和函数
function summony(){
var sum=0;
var oCheckNodes=document.getElementsByName("item");
for(var x=0;x<oCheckNodes.length;x++){
if(oCheckNodes[x].checked==true)
sum+=parseInt(oCheckNodes[x].value);
}
var sSum=sum+"元";
document.getElementById("spanid").innerHTML=sSum.fontcolor("red");
}
//全选函数
function allcheck(node){
//思路：把所有的alltem的checked和item的checked设置成一致
var oCheckNodes=document.getElementsByName("item");
for(var x=0;x<oCheckNodes.length;x++){
oCheckNodes[x].checked=node.checked;
}
}
</script>
<input type="checkbox" name="alltem" onclick="allcheck(this)"/>全选<br/>
<input type="checkbox" name="item" value="4000"/>笔记本电脑<br/>
<input type="checkbox" name="item" value="4000"/>笔记本电脑<br/>
<input type="checkbox" name="item" value="4000"/>笔记本电脑<br/>
<input type="checkbox" name="item" value="4000"/>笔记本电脑<br/>
<input type="checkbox" name="item" value="4000"/>笔记本电脑<br/>
<input type="checkbox" name="item" value="4000"/>笔记本电脑<br/>
<input type="checkbox" name="item" value="4000"/>笔记本电脑<br/>
<input type="checkbox" name="alltem" onclick="allcheck(this)"/>全选<br/>
<input type="button" value="价格" onclick="summony()"/><span id="spanid"></span>
</body>
</html>