javascript+HTML+CSS学习
1.Dome编程，获取Dome的方法
1:
2: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3: <html xmlns="http://www.w3.org/1999/xhtml">
4: <head>
5: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6: <title>无标题文档</title>
7: <script type="text/javascript">
8:
9: <!-- window对象的属性、方法、对象
10: <!--方法：
11: <!--alert
12: <!--close
13: <!--confirm(}有两个信息的对话框
14: <!--moveBy()按照什么量移动
15: <!--moveTo()移动到指定位置
16: <!--open()打开一个新窗口
17: <!--close()可设置一定时间后 自动关闭
18: <!--自动弹窗代码
19: -->
20:
21: <!--event对象：获取事件的状态：returnvalue、srcelement:拿到事件源对象
22: window.onload=function()//窗体加载时
23: {
24: alert("onload")
25: }
26: window.onunload=function()//窗体关闭后
27: {
28: alert("onunload")
29: }
30: window.onbeforeunload=function()//窗体关闭前
31: {
32: alert("onbeforeunload")
33: }
34: //var b=true;
35: //演示获取节点
36: function demo()
37: {
38:
39: var divojb=document.getElementById("divd");
40: //获取父节点
41: var parent =divojb.parentNode;
42: //获取子节点
43: var childs =divojb.childNodes;
44: //指明要第几个儿子的信息
45: //getNodeInfo(childs[0]);
46: //getNodeInfo(parent);
47: //alert(childs.length);
48:
49: //获取兄弟节点
50: //获取该节点上方的一个兄弟节点
51: var brathup=divojb.previousSibling;
52: //getNodeInfo(brathup);
53: //获取该节点下方的一个兄弟节点
54: var brathdown=divojb.nextSibling;
55: //getNodeInfo(brathdown);
56: //获取a标签的文本
57: var aNode=divojb.nextSibling;
58: //获取其子节点
59: var aText=aNode.childNodes[0];
60: //getNodeInfo(aText);
61: //获取单元格一的文本
62: //1.先获取表格节点
63: var tabNode=divojb.nextSibling.nextSibling.nextSibling;
64: //getNodeInfo(tabNode);
65: //2.获取td对象
66: var tdNodes=tabNode.getElementsByTagName("td");
67: //3.调用对象的方法以获取单元格内容
68: //alert(tdNodes[0].innerText);
69: //
70: //getDocAll();
71: //getNode();
72:
73: }
74: function getNode()
75: {
76: listNode(document,0);
77: document.write(nodes,level);
78: }
79:
80: //获得页面所有节点的方法,并打印
81: var info=" ";
82: function getDocAll()
83: {
84: var nodes = document.all;
85: for (var x=0;x<nodes.length;x++)
86: {
87: //getNodeInfo(nodes[x]);
88: info += nodes[x].nodeName+"..."+nodes[x].nodeType+"<br/>";
89: }
90: document.write(info);
91: }
92: //获得页面所有节点并按照其层次关系打印，使用迭代的方法，获取层次关系图
93: var str="";
94: function listNode(node,level)
95: {
96: printInfo(node,level)
97: var nodes = node.childNodes;
98: for(var x=0;x<nodes.length;x++)
99: {
100: if(nodes[x].hasChildNodes())
101: listNode(nodes[x],level);
102: else
103: printInfo(nodes[x],level);
104: }
105:
106: }
107: function getSpace(level)
108: {
109: var s="";
110: for(var x=0;x<level;x++)
111: s+="|---";
112: return s
113: }
114:
115: function printInfo(node,level)
116: {
117: str+=getSpace(level)+"name"+node.nodeName+"type"+node.nodeType+"value"+node.nodeValue+"</br>";
118: //document.write(str);
119: }
120:
121: //根据id获取div对象，以便对其进一步的操作
122: //var obj=document.getElementById("textid");
123: //alert(obj.tagName);
124: //alert(obj.innerText);
125: //obj.innerText="";
126: //alert(obj.className)
127: //调用字体颜色功能
128:
129: //颜色不能自由切换，为什么？？？
130: /*
131: if(b)
132: {
133: obj.className="font1";
134: b=false;
135: }
136: else
137: {
138: obj.className="font2";
139: b=true;
140: }
141: */
142:
143: //猜数字游戏
144: var ranNum=parseInt(Math.random()*10+1);
145: function guess()
146: {
147: var textobj=document.getElementById("textid");
148: var num=parseInt(textobj.value);
149: if (num>ranNum)
150: alert("大了")
151: else if (num<ranNum)
152: alert("小了 ")
153: else
154: alert("中了")
155: }
156: </script>
157: <style type="text/css">
158: <!--给用户选择字体颜色的功能-->
159:
160: .font2{
161: color:#00C;
162: }
163: .font1{
164: color:#6F0;
165: }
166: </style>
167:
168:
169: </head>
170:
171: <body>
172: <!--
173: DOM:文档对象模型:document object model
174: dom三层模型：
175: dom1 将htmL文档封装成对象
176: dom2 将xml文档封装成对象
177: dom3 将xml文档封装成对象
178:
179: dome将静态网页中的标签都变成可操作的
180: 封装后会产生标签树
181: DOM树 节点
182: html
183: head
184: title
185: base
186: mata
187: link
188: style
189: body
190: tabel
191: tbody
192: tr
193: td
194: th
195: div
196: form
197: a
198: DHTML 动态的dhtml=html+css+dom+javascript
199: 职责分配：
200: html:将数据进行封装
201: dom 将标签封装成对象
202: css 负责标签中的数据样式
203: jsp:将三者进行融合，通过程序设计来完成动态效果的操作
204:
205: 在动态的基础上加xmlhttprequest（可以和服务端进行交互）对象=AJAX
206: -->
207: <input type="button" value="演示效果" onclick="demo()"/>
208: <div id="divd">
209: 11111111111
210: </div>
211: <a href="http://www.sina.com">新浪</a>
212: <table>
213: <tr>
214: <td>单元格一</td>
215: <td>单元格二</td>
216: </tr>
217: </table>
218:
219:
220:
221:
222:
223: </body>
224: </html>
2.通过页面按钮改变页面文字大小的功能演示
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2: <html xmlns="http://www.w3.org/1999/xhtml">
3: <head>
4: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5: <title>无标题文档</title>
6: <!--制作图形化界面动态样式步骤：
7: 1，定义数据封装的标签
8: 2，确定事件源
9: 3，注册事件
10: 4，事件处理
11: 需求：页面中有一个新闻区域
12: 通过超链接可以让用户改变字体大小
13: -->
14:
15: </head>
16: <script type="text/javascript">
17: function changSize1(size)
18: {
19: //alert("kk");
20: var divNode=document.getElementById("news");
21: divNode.style.fontSize=size;
22: }
23:
24: </script>
25:
26: <h2>新闻标题</h2>
27: <a href="javascript:void(0)" onclick="changSize1('48px')">大</a>   
28: <a href="javascript:void(0)" onclick="changSize1('24px')">中</a>   
29: <a href="javascript:void(0)" onclick="changSize1('12px')">小</a><br/>
30:
31: <div id ="news" style="font-size:24px">
32: dfafdasfg极大激发科技发生的事飞机
33: dfafdasfg极大激发科技发生的事飞机
34: </div>
35:
36: </table>
37:
38: </body>
39: </html>
3.通过页面按钮创建客户输入的行数和列数的表格，并让客户自由的删除多少行
或者多少列
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2: <html xmlns="http://www.w3.org/1999/xhtml">
3: <head>
4: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5: <title>无标题文档</title>
6: <!--
7: 通过页面的按钮可以动态的创建一个表格
8: -->
9: <link rel="stylesheet" href="tab.css" />
10: <script type="text/javascript" src="doctool.js"></script>
11: <script type="text/javascript">
12: function createTab()
13: {
14: var tabNode = doc.createElement("table");
15: //tabNode.id="tabid";也可以用下面的指定id
16: tabNode.setAttribute("id","tabid");
17: var row=byName("rownum")[0].value;
18: var col=byName("colnum")[0].value;
19: for(var x=1;x<=row;x++)
20: {
21: var trNode = tabNode.insertRow();
22: for(var y=1;y<=col;y++)
23: {
24: var tdNode = trNode.insertCell();
25: tdNode.innerHTML="第"+x+"行"+"第"+y+"列";
26: }
27: }
28:
29:
30: //tdNode.innerHTML="单元格一".fontcolor("red");
31: //tdNode.innerHTML="<input type='button' value='一个按钮'/>";
32: byTag("div")[0].appendChild(tabNode);
33: //难道input标签
34: event.srcElement.disabled=true;
35: }
36:
37: function delRow()
38: {
39: var tabNode=byId("tabid");
40:
41: if(tabNode==null)
42: {
43: alert("表格不存在");
44: return;
45: }
46: //获取客户输入的要删除多少行的值
47: var rownum=byName("delrow")[0].value;
48: //表格封装在数组里，角标从0开始，所以要减一
49: if(rownum>0 && rownum<=tabNode.rows.length)
50: {
51: tabNode.deleteRow(rownum-1);
52: }
53: else
54: {
55: alert("该行不存在");
56: }
57: }
58: function delCol()
59: {
60: var tabNode=byId("tabid");
61:
62: if(tabNode==null)
63: {
64: alert("表格不存在");
65: return;
66: }
67: //获取客户输入的要删除多少行的值
68: var colnum=byName("delcol")[0].value;
69: //每行有多少列？即每行的cells的个数
70: if(colnum>0 && colnum<=tabNode.rows[0].cells.length)
71: {
72: //删除一列的操作比较繁琐，因为要先找到每一行的那一个cell,逐行的删
73: for (var x=0;x<tabNode.rows.length;x++)
74: {
75: //表格封装在数组里，角标从0开始，所以要减一
76: tabNode.rows[x].deleteCell(colnum-1);
77: }
78:
79: }
80: else
81: {
82: alert("该列不存在");
83: }
84:
85:
86:
87: }
88: </script>
89: </head>
90: <body>
91: 行：<input type="text" name="rownum"/><br/>
92: 列：<input type="text" name="colnum"/><br/>
93: <input type="button" value="创建表格" onclick="createTab()"/><br/>
94:
95: <input type="text" name="delrow" />
96: <input type="button" value="删除行" onclick="delRow()" /><br/>
97:
98: <input type="text" name="delcol" />
99: <input type="button" value="删除列" onclick="delCol()" /><br/>
100:
101:
102: <div>
103: </div>
104:
105: </body>
106: </html>
4.对表格内容进行排序，将表格里的人的信息按照年龄的大小进行排列
1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2: <html xmlns="http://www.w3.org/1999/xhtml">
3: <head>
4: <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5: <title>无标题文档</title>
6:
7: <link rel="stylesheet" href="tab.css" />
8: <script type="text/javascript" src="doctool.js"></script>
9: <script type="text/javascript">
10: /*
11: 排序的思路
12: 1.把表格中每一行的个人信息取出来，存入临时数组中
13: 2.对数组中的行对象的单元格数据进行排序
14: 3.将排序后的行对象重新添加回表格对象中
15: */
16: function sorttab()
17: {
18: var tabNode=byTag("table")[0];
19: var trs=tabNode.rows;
20: //定义临时容器，将表格中需要参与排序的含对象临时存储
21: var arr=new Array();
22:
23: for (var x=1;x<trs.length;x++)
24: {
25: arr[x-1]=trs[x];
26: }
27: sortt(arr);
28: //table标签的第一个儿子是tablebody(隐含)，而不是tr
29: //所以先拿tbd标签
30: var tbdNode=tabNode.childNodes[0];
31: for(var x=0;x<arr.length;x++)
32: {
33: //alert(arr[x].cells[1].innerText)
34: //arr[x]表示的是整行的对象
35: tbdNode.appendChild(arr[x]); //添加的都是行对象的引用
36: }
37:
38:
39: }
40: //数组排序算法
41: function sortt(arr)
42: {
43: for(var x=0;x<arr.length;x++)
44: {
45: for(var y=x+1;y<arr.length;y++)
46: {
47: if(arr[x].cells[1].innerText>arr[y].cells[1].innerText)
48: {
49: var temp=arr[x];
50: arr[x]=arr[y];
51: arr[y]=temp;
52: }
53: }
54: }
55: }
56:
57:
58: </script>
59:
60:
61: <body>
62: <table >
63: <tr>
64: <th>姓名</th>
65: <th><a href="javascript:void(0)" onclick="sorttab()">年龄</a></th>
66: </tr>
67:
68: <tr>
69: <td >张三</td>
70: <td>43</td>
71: </tr>
72:
73: <tr>
74: <td>李四</td>
75: <td>28</td>
76: </tr>
77:
78: <tr>
79: <td>王五</td>
80: <td>30</td>
81: </tr>
82: </table>
83:
84: </body>
85: </head>
86: </html>
5.使用到的CSS样式表和用javascript封装好的代码块，方便调用
1: // JavaScript Document
2: var doc=document;
3: function byId(id)
4: {
5: return doc.getElementById(id);
6: }
7: function byTag(TagName)
8: {
9: return doc.getElementsByTagName(TagName);
10: }
11: function byName(Name)
12: {
13: return doc.getElementsByName(Name);
14: }
1: @charset "utf-8";
2: /* CSS Document */
3:
4: table{
5: border:#960 1px solid ;
6: width:60%;
7: }
8: table th{
9: border:#F06 1px solid ;
10: background:#09C;
11: }
12: table td{
13: border:#CC3 1px solid ;
14: }
浙公网安备 33010602011771号