javaScript额外笔记

--------------------------------------------------------Part 1
javascript:脚本语言
辅助开发:

网页的前台开发三大块:
1.HTML 超文本标记语言
2.CSS样式 美化网页
3.javascript 实现网页的动态效果

由网景公司为了减轻服务器的压力而发明
运行在客户端(浏览器端)的脚本语言。

三种形式的脚本语言:
样式:
1.行内样式
<font style="font-size:70px;color:yellow;font-family:华文彩云;">Jane</font>
2.内部样式
<style type = "text/css">
/*标签选择器*/
font{
font-size:80px;
}
p{}
a{}
img{}
table{}
tr{}
li{}
/*类选择器*/
.c1{
font-size:130px;
}

/*id选择器*/
#id1{
font-size:30px;
}
</style>
3.外部样式
<link type = "text/css" rel = "stylesheet" href = "a1.css"/>

a.行内脚本语言
<input type = "button" value = "普通按钮" onclick = "alert('hello')"/>
<a href = "javascript:alert('aa')">点我啊</a>

b.内部脚本
<script type = "text/javascript">
alert("你好啊");

</script>

c.外部脚本
<link type = "text/css" rel = "stylesheet" href = "aa.js"/>

 文本样式:
 color:green;
 font-size:15;
 font-family:宋体;
 font-weight:bold/normal;
 font-style:italic/normal;
 text-decoration:underline/none;
 text-align:left/center/right;
 line-height:23px;行高
 letter-spacing:30px;字符间距

 背景样式
 background-color:;green;
 background-image:url();
 background-repeat:no-repeat/repeat-x/repeat-y/repeat;//向某个方向铺开
 background-position:xpx ypx;
 x:正数  背景图片向右偏移
 y:正数   背景图片向下偏移

 超链接的伪类:
 l v h a   love   hate
 a:link{}
 a:visited{}
 a:hover{}
 a:active{}

 边框样式
 border-width:3px;
 border-color:pink;
 border-style:solid/dashed/dotted;
 border:1px solid red;
 border-right:3px dashed blue;
 内边距:padding
 外边距:margin
 浮动:float
s1java

数据类型
javascript属于弱数据类型,使用var关键字来定义变量

并不是没有数据类型
使用typeof a返回a的数据类型
整数、小数 number 数值型
字符型数据:string
布尔类型:boolean
未定义类型:undefined
对象类型:object

运算符
1.算术运算符 + - * / % ++ --
2.比较运算符 > < >= <= == !=
3.逻辑运算符 && || !
4.赋值运算 = += 

语法结构
1.顺序结构
2.条件结构
if(){}
if(){}else{}
if(){}else if(){}else{}多重if 区间判断
switch(){}  等值判断
3.循环结构
while(){}
do{}while();
for(){}

常见的内置函数
1.警告框
alert('');

2.确认框
var b = confirm("你确定要提交注册吗?");
得到的值是;true或false
alert(b);

3.提示框
var c = prompt("提示内容","默认值");
c的类型是string类型
要得到数值类型的需要转型
转整形 a  = parseInt(a);
转小数 b = parseFloat(b);

4.判断是不是非数值
isNaN(m) is not a number
m是非数值返回true
m是数值的时候返回false
****************************************************************************<head>
****************************************************************************<head>
****************************************************************************<head> 
<html>
<head>
<style type = "text/css">
/*id选择器*/
</style>

<link type = "text/css" rel = "stylesheet" href = "a1.css"/>

</head>

<body>

<script type = "text/javascript"src = "a2.js" >

</script>

<script type = "text/javascript">
alert("world");
</script>

<font id = "id1" class = "c1">木木</font>

<form>
<input type = "button" value = "点我看看" onclick = "javacript:alert('恭喜你,中奖500W')"/>
</form>

<a href = "javascript:alert('想得美')">点击看美女</a>

</body>
</html>
-------------------------------------------------------- Part 2
  <!-- 
  javascript三大块:
  1.js语法知识(例如:变量的声明)
  2.BOM模型 browser object model 浏览器对象模型(例如:window、location、history、document操作)
  3.DOM模型 document object model 文档对象模型(例如:文本框、下拉列表、按钮等对象的属性内容操作...)

  BOM模型:javascript语言提供了很多系统对象,便于开发这对浏览器,窗口,框架进行操作
  确定窗口的位置,大小,状态栏,滚动条。。
  窗口的关闭,打开
  地址栏信息的改变、刷新页面
  历史记录
  window:BOM模型的最*的核心对象
  location:地址对象
  history:历史对象
  document:文档对象

  window:
  所有的内置函数,系统函数,都是window的函数

  Pig p = new Pig();
  p.zps();

  window.alert();
  window.prompt("","");
  window.confirm();
  window.parseInt();
  window.parseFloat();
  window.document.write();
  window.isNaN(a);判断a是不是非数值类型的数
  非数值型的时候返回true
  数值型的时候返回false

打开窗口

  var a = window.open("RUL地址","窗口的名字","窗口特性");
  特性:
width=300px,
height=300px,
left=100px,
top=50px,
toolbar=yes,工具栏
menubar=yes,菜单栏
scrollbar=yes,滚动条
location=yes,地址栏
status=yes,状态栏
fullscreen=yes,是否全屏
titlebar=yes,标题栏
resizable=0 是否可以重新调整大小
关闭窗口
a.close();

//关闭自身窗口
//this.close();
window.close();

延时器
一个时间段后做什么事情。。。
var t1 = setTimeout("f1()",3000); 毫秒为单位
清除延时器
clearTimeout(t1);

定时器
每隔一个时间段做什么事情
var t2 = setInterval("f2()",2000);
清除定时器
clearInterval(t2);

  -->
****************************************************************************<head>
<script type = "text/javascript">
function f1(a){
var b = document.getElementById("id1");
var b1 = b.value;
b1 = parseFloat(b1);
var c = document.getElementById("id2");
var c1 = c.value;
c1 = parseFloat(c1);
var e = document.getElementById("id3");
e.value = eval(b1+a+c1);//将字符串作为表达式处理
}
var a;
function openWin(){
a = window.open("test.html","myWindow","width=300,height=300");
}
function closeWin(){
a.close();
}
function closeSelf(){
//this.close();
window.close();//关闭自身窗口
}
var t1;
function f2(){
//延时器
t1 = window.setTimeout("openWin()",3000);
}
function f3(){
//清除延时器
window.clearTimeout(t1);
}
var t2;
function f4(){
t2 = setInterval("openWin()",2000);//设置定时器
}
function f5(){
window.clearInterval(t2);
}
function f6(){
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth()+1;//0-11
var date = d.getDate();
var hour = d.getHours();
var minute = d.getMinutes();
var second = d.getSeconds();
var week = d.getDay();//0-6  0星期天
switch (week)
{
case 0:
week = "日";
break;
case 1:
week = "一";
break;
case 2:
week = "二";
break;
}
//document.write(year+"年"+month+"月"+date+"日"+hour+"时"+minute+"分"+second+"秒  星期"+week);
//获得div对象
var d1 = document.getElementById("div");
//设置DIV内的值
d1.innerText = year+"年"+month+"月"+date+"日"+hour+"时"+minute+"分"+second+"秒  星期"+week;
setTimeout("f6()",1000);
}
//页面加载时启动定时器
//setInterval("f6()",1000);
function f7(t){
document.body.style.backgroundColor = t.value;
}
  </script>
  <style type = "text/css">
input{
font-size:30px;
}

#div{
width:500px;
height:30px;
font-size:30px;
border:1px solid red;
}
  </style>
 </head>
 <body onload = "f6()">
<select name="" onchange ="f7(this)">
<option value="red" selected>红色
<option value="green">绿色
<option value="yellow">黄色
</select>
<br><br><br>
<img src="data:images/33.jpg" width="300"  border="0" alt="" onmouseover = "this.src = 'images/32.jpg'" onmouseout = "this.src = 'images/33.jpg'">
<br>
<input type="button" value="3秒钟后打开网页" onclick="f2()">
<input type="button" value="关闭延时器" onclick="f3()">
<br>
定时器
<br><input type="button" value="每隔2秒钟打开窗口" onclick="f4()">
<input type="button" value="清除定时器" onclick="f5()">
<br>
<input type="button" value="打开一个窗口" onclick="openWin()">
<br>
<input type="button" value="关闭窗口" onclick="closeWin()">
<br>
<input type="button" value="关闭自身窗口" onclick="closeSelf()">
<br><br><br>
<!-- <input type="button" value="显示当前的系统时间" onclick="f6()"> -->
<div id="div" class="">

</div>
<br><br><br>
第一个数:<input type="text" name="" id = "id1"><br>
第二个数:<input type="text" name=""id = "id2"><br>
<input type="button" value="  +  " onclick="f1('+')">
<input type="button" value="  -  " onclick="f1('-')">
<input type="button" value="  *  " onclick="f1('*')">
<input type="button" value="  /  " onclick="f1('/')"><br>
计算结果:<input type="text" name="" id = "id3">
  
 </body>
</html>
-------------------------------------------------------- Part 3
<!-- 
javascript三大块
1.语法知识
2.BOM模型 浏览器对象模型
3.DOM模型 文档对象模型

window
系统内置函数
window.open("","","");
w.close();
this.close();
window.close();

延时器
var t1 = setTimeout("alert('')",2000);
clearTimeout(t1);
定时器
var t2 = setInterval("alert()",3000);
clearInterval(t2);

日期函数
var d = new Date();
var y = d.getFullYear();
var m = d.getMonth()+1;//0-11
var date = d.getDate();
var h = d.getHours();
var mi = d.getMinutes();
var s = d.getSeconds();
var w = d.getDay();//0-6 0 星期天

几个事件:
onlick:点击事件
onload:页面加载事件
onchange:改变事件
onmouseover:鼠标悬浮事件
onmouseout:鼠标移除事件

window的三个子对象
document:
location:
history:
document.write();
获得元素的方法
1.document.getElementById();
var td = 2.document.getElementsByTagName("li");
通过标签名来获得对象数组
3.document.getElementsByName("name属性值");
通过name属性值来获得对象数组

location:
地址对象
属性
location.href
location.href = "2133.html";
//改变href值实现页面跳转
方法
location.reload();刷新页面

history:
<a href = "javascript:history.back()">上一页</a>
<a href = "javascript:history.forward()">下一页</a>

history.go(n);
n:为负数 表示往回走
n:为正数  表示往前走

隐藏不占位
img.style.display = "none";
//img.style.display = "inline"; 行内的方式显示
img.style.display = "block";//以块的方式显示 会自动换行

隐藏占位
  img.style.visibility = "hidden";
  img.style.visibility = "visible";显示
  -->
****************************************************************************<head>
<style type="text/css">
tr{
text-align:center;
}
  </style>

  <script type="text/javascript">
function f1(){
var td = document.getElementsByTagName("li");
//alert(td.length);
for (var i = 0;i<td.length ;i++ )
{
//alert(td[i].innerText);
//alert(td[i].innerHTML);
alert(td[i].outerHTML);
}

}
function f2(t){

var cb = document.getElementsByName("love");
//alert(cb.length);
if (t.checked == true)
{//全选按钮被选中的时候
for (var i = 0;i<cb.length ;i++ )
{
cb[i].checked = true;
}
}else{
for (var i = 0;i<cb.length ;i++ )
{
cb[i].checked = false;
}
}
}

function f3(){
var cb = document.getElementsByName("love");
for (var i = 0;i<cb.length ;i++ )
{
if (cb[i].checked == true)
{
cb[i].checked = false;
}else{
cb[i].checked = true;
}
}
}

function f4(){
var cb = document.getElementsByName("love");
var b = true;
for (var i = 0;i<cb.length ;i++ )
{
if (cb[i].checked == false)
{
b = false;
break;
}
}

var qx = document.getElementById("qx");

if (b)
{
qx.checked = true;
}else{
qx.checked = false;
}
}

function f7(){
//alert(location.href);
location.href = "2133.html";
//改变href值实现页面跳转

/*
超链接
提交按钮
图片提交按钮

*/
}

function f8(){
location.reload();
}
function f9(){
var img = document.getElementById("img");
img.style.display = "none";
}
function f10(){
var img = document.getElementById("img");
//img.style.display = "inline"; 行内的方式显示
img.style.display = "block";//以块的方式显示
}
function f11(){
var img = document.getElementById("img");
img.style.visibility = "hidden";
}
function f12(){
var img = document.getElementById("img");
img.style.visibility = "visible";
}
  </script>

  <style type="text/css">
.c1{
border-bottom:1px dashed #cc3300;
/*solid:实线
dashed:虚线
dotted:点线
*/
}
  </style>
</head>

 <body>
<input type="button" value="点击隐藏左边的图片" onclick="f9()">
<input type="button" value="点击显示左边的图片" onclick="f10()">
<br>
<input type="button" value="点击隐藏左边的图片" onclick="f11()"><br>
<input type="button" value="点击显示左边的图片" onclick="f12()">
<br>
 <img src="data:images/22.gif" width="135" height="180" border="0" alt="" id = "img">
 <img src="data:images/23.gif" width="250" height="170" border="0" alt="">

<br><br>
 <input type="button" value="刷新网页" onclick="f8()"><br><br>
<img src="data:images/72.gif" width="250" height="161" border="0" alt="">
<img src="data:images/79.gif" width="200" height="200" border="0" alt="">

<img src="data:images/77.gif" width="250" height="169" border="0" alt="">
<br>
<input type="button" value="点击获得当前网页的地址" onclick="f7()">
<br>
<input type="button" value="获得第二行第三列的内容" onclick="f1()">

<table width = "300px" height = "200px" border = "1px" bordercolor = "red" cellspacing="0" cellpadding = "0" id = "td1">
<tr>
<td><font>姓名</font></td>
<td>年龄</td>
<td>性别</td>
<td>身高</td>
</tr>
<tr>
<td><a href = "#">杜总</a></td>
<td>17</td>
<td>女</td>
<td>1.7</td>
</tr>
<tr>
<td>陆总</td>
<td>3</td>
<td>女</td>
<td>1</td>
</tr>
</table>

<div id="" class="">
sads
</div>
<ul>
<li>fdfdfd</li>
<li>fdfdfd</li>
<li>fdfdfd</li>
<li>fdfdfd</li>
</ul>

<form action = "" method = "">
杜总的兴趣爱好:
<br>
<input type = "checkbox" checked = "checked" name = "love" onclick = "f4()"/>吃饭
<br>
<input type = "checkbox" name = "love" onclick = "f4()"/>睡觉<br>
<input type = "checkbox" name = "love" onclick = "f4()"/>lol<br>
<input type = "checkbox" checked = "checked" name = "love" onclick = "f4()"/>KTV<br>
<input type = "checkbox" name = "love" onclick = "f4()"/>运动<br>
<input type = "checkbox" id = "qx" onclick = "f2(this)"/>全选

<input type = "checkbox" onclick = "f3()"/>反选
</form>
  <br><br><br><br><br><br><br>
 </body>
</html>

-------------------------------------------------------- Part 4
  <!-- 
  BOM模型:browser object model 浏览器对象模型
  window

  history
  history.back();
  history.forward();
  history.go(n);
  location
  location.href;当前网页的地址
  location.reload();刷新页面
  document
  document.wirte();
  1.常量
  2.表达式
  3.标签
  document.getElementById();
  document.getElementsByTagName();
  document.getElementsByName();

  DOM模型:document object model 文档对象模型
DOM树

****************************************************************************<head>
****************************************************************************<head>
****************************************************************************<head> 
<script type="text/javascript">
function f1(){
var tab =document.getElementById("tab");
var s = tab.firstChild.firstChild.firstChild;
s = s.innerText;
alert(s);

}

function f2(){
var tab =document.getElementById("tab");
var sex = tab.firstChild.firstChild.lastChild.innerText;
alert(sex);

}

function f3(){
var tab =document.getElementById("tab");
var td = tab.firstChild.lastChild.childNodes;
for (var i = 0;i<td.length ;i++ )
{
alert(td[i].innerHTML);
}

//firstChild  lastChild
}

function f4(){
var tab =document.getElementById("tab");
alert(tab.parentNode.parentNode.tagName);
}

function f5(){
var img = document.createElement("img");
img.src = "images/7.gif";
//把创建的图片追加到网页的末尾
//document.body.appendChild(img);

//把创建的图片插入到表格的前面
var tab =document.getElementById("tab");
tab.parentNode.insertBefore(img,tab);
//新的在前面,原来有的在后面

}
function f6(){//移除
var tab1 =document.getElementById("tab");
tab1.parentNode.removeChild(tab1);
}
function f7(){//替换
var tab =document.getElementById("tab");
var img = document.createElement("img");
img.src = "images/7.gif";
tab.parentNode.replaceChild(img,tab);
}
function f8(){//克隆
var tab =document.getElementById("tab");
var tab_new = tab.cloneNode(true);//false
/*
true:克隆这个节点以及所有的子节点
false:只克隆这个节点本身
*/
document.body.appendChild(tab_new);
}
var i = 1;

function f9(){//图片轮换
var img= document.getElementById("img");
img.src = "images/"+i+".gif";
i++;
if (i==8)
{
i = 1;
}
setTimeout("f9()",2000);
}
</script>

 </head>
<body onload = "f9()">

 <img src="data:images/1.gif" width="205" height="118" border="0" alt=""id = "img" >
<br><br><br><br>
<input type="button" value="得到第二行第二个格子的内容" onclick="f1()">
<input type="button" value="找到男" onclick="f2()">

<input type="button" value="获得最后一行的所有的内容" onclick="f3()">

<input type="button" value="找tab的父节点" onclick="f4()">

<input type="button" value="追加一张图片" onclick="f5()">

<input type="button" value="删除表格" onclick="f6()">

<input type="button" value="把表格替换成图片" onclick="f7()">

<input type="button" value="克隆表格" onclick = "f8()"/>

<table id = "tab" border = "1" bordercolor = "#ffffff"><tr><td>王坚</td>
<td>fd</td>
<td>男</td></tr>
<tr><td>fg</td><td>王麻子</td><td><span>fdfd</span></td></tr></table>
 </body>
</html>

--------------------------------------------------------Part 5
<!-- 
  DOM模型,document object model 文档对象模型
  dom树
  节点之间的关系
  节点的最基本的操作
  查找节点
  1.查找第一个子节点
  var a = obj.firstChild;
  2.查找最后一个子节点
  var b = obj.lastChild;
  3.查找所有子节点
  var c = obj.childNodes;//返回一个对象数组
var d = c[2];
for(var i = 0;i<c.length;i++){
alert(c[i].innerHTML);
}
4.查找父节点
var f = obj.parentNode;

增加节点
var img_new = document.createElement("img");
img_new.src = "";
//img.setAttribute("src","属性值");
//img.getAttribute("src");//返回src的值
//document.body.appendChild(img_new);

//tab
tab.parentNode.insertBefore(img_new,tab);

删除节点
//tab
tab.parentNode.removeChild(tab);

替换节点
img_new
tab
tab.parentNode.replaceChild(img_new,tab);

克隆节点
tab
var tab_new = tab.cloneNode(true/false);
true:克隆这个节点以及所有的子节点
false:只克隆这个节点本身

document.body.appendChild(tab_new);

去空节点
DOM的高级操作,专门针对表格的增删改查
****************************************************************************<head>
<script type="text/javascript">
/*function f1(){
var img = document.getElementById("img");
img.style.display = "none";

}

function f2(){
var img = document.getElementById("img");
img.style.display = "inline/block";
}

function f3(){
var img = document.getElementById("img");
img.style.visibility = "hidden";
}

function f4(){
var img = document.getElementById("img");
img.style.visibility = "visible";
}*/
function f11(){

var t = document.getElementById("tab");
/*
var tr = t.firstChild.childNodes;
for (var i = 0;i<tr.length ;i++ )
{
alert(tr[i].innerText);
}*/

var tr = t.rows;//返回所有的行对象数组
//alert(tr.length);//求得表格的行数
/*
for (var i = 0;i<tr.length ;i++ )
{
//alert(tr[i].innerText);
//alert(tr[i].innerHTML);
//alert(tr[i].outerHTML);
alert(tr[i].rowIndex);//返回行下标 从0开始计数
}
*/
var tr3 = tr[2];
alert(tr3.innerText);
}
function f12(){
var t = document.getElementById("tab");
t.deleteRow(1);//参数放行下标 第二行
t.height = t.height - 50;
}
function f13(){
var t = document.getElementById("tab");
var length = t.rows.length;//页面刚加载时表格的行数
for (var i = 0;i<length ;i++ )
{
t.deleteRow(0);
t.height = t.height-50;
}
}
//增加一行
function f14(){
var t = document.getElementById("tab");
var tr = t.rows;//获得第二行行对象
var tr2 = tr[1];
var td = tr2.cells;//返回第二行所有单元格数组
//alert(td.length);//第二行的单元格个数
/*
for (var i = 0;i<td.length ;i++ )
{
alert(td[i].innerText);
alert(td[i].cellIndex);//返回单元下标 从0开始
}
*/
//获得表格第二行第三个单元格的内容
alert(td[2].innerText);
}
function f15(){//遍历表格每个单元格的内容
var t = document.getElementById("tab");
var tr = t.rows;
for (var i = 0;i<tr.length ;i++ )
{
var a = tr[i];
var b = a.cells;//单元格数组
for (var j = 0;j<b.length ;j++ )
{
alert(b[j].innerText);
}
}
}
function f16(){
var t = document.getElementById("tab");
var tr2 = t.rows[1];
//tr2.deleteCell(2);//参数放单元格的下标
tr2.cells[2].innerText = "200";
}
function f17(){
var t = document.getElementById("tab");
var tr2 = t.rows[1];
var length = tr2.cells.length;//单元格数目  4
for (var i = 0;i<length ;i++ )
{
tr2.deleteCell(0);
}
}
function f18(){
var t = document.getElementById("tab");
//插入一行
var tr_new = t.insertRow(2);//第三行前面插入一行
//插入单元格
var td0 = tr_new.insertCell(0);
var td1 = tr_new.insertCell(1);
var td2 = tr_new.insertCell(2);
var td3 = tr_new.insertCell(3);
td0.innerText = "小黑";
td1.innerText = "妖";
td2.innerHTML = "<a href = '#'>5</a>";
td3.innerText = "未知";
t.height = parseInt(t.height) + 50;
}
  </script>
 </head>
<body>
<input type="button" value="获得表格每行的内容" onclick="f11()">
<input type="button" value="删除第二行" onclick="f12()">
<input type="button" value="删除所有行" onclick="f13()">
<br>
<input type="button" value="查找表格第二行所有单元格内容" onclick="f14()">
<br>
<input type="button" value="查找表格每个单元的内容" onclick="f15()">
<br><input type="button" value="删除表格第二行第三个单元格" onclick="f16()">
<br>
<input type="button" value="删除表格第二行的所有单元格" onclick="f17()">
<br>

<input type="button" value="在第三行前插入一行,单元格内容自定义" onclick="f18()">

<table width = "300px" height = "152px" border = "1" bordercolor = "blue" cellspacing = "0" style = "text-align:center;" id = "tab">
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
<td>工资</td>
</tr>
<tr>
<td>小黄</td>
<td>雄</td>
<td>10</td>
<td>1000</td>
</tr>
<tr>
<td>kevin刘</td>
<td>公</td>
<td>28</td>
<td>10000</td>
</tr>
</table>
<!-- 
<input type="button" value="隐藏左边的图片" onclick="f1()"><input type="button" value="显示左边的图片" onclick="f2()"><br>

<input type="button" value="占位隐藏visibility" onclick="f3()">
<input type="button" value="显示图片" onclick="f4()">

<br>

<img src="data:images/1.gif" width="225" height="161" border="0" alt="" id = "img">
<img src="data:images/3.gif" width="211" height="228" border="0" alt="">
   -->
 </body>
</html>

-------------------------------------------------------- Part 6
 <!-- 动态改变样式
  三种
  1.行内样式
<font style = "font-size:20px;color:red;">ff</font>
  2.内部样式
 <style type = "text/css">
a.标签选择器
p{}
b.类选择器
.c1{
}
c.id选择器
#id1{
 color:red
 font-size:
 font-family:
 font-weight:bold/normal;
 font-style:italic/normal;
 text-decoration:underline/none;
 text-align:left/center/right;
 line-height:23px;行高
 letter-spacing:30px;字符间距
}
 </style>
  3.外部样式
 <link type = "text/css" rel = "stylesheet" href = "a.css"/>
 文本样式:
 color:
 font-size:
 font-family:
 font-weight:bold/normal;
 font-style:italic/normal;
 text-decoration:underline/none;
 text-align:left/center/right;
 line-height:23px;行高
 letter-spacing:30px;字符间距

 背景样式
 background-color:;
 background-image:url();
 background-repeat:no-repeat/repeat-x/repeat-y/repeat;
 background-position:xpx ypx;
 x:正数  背景图片向右偏移
 y:正数   背景图片向下偏移

 超链接的伪类:
 l v h a   love   hate
 a:link{}
 a:visited{}
 a:hover{}
 a:active{}

 边框样式
 border-width:3px;
 border-color:pink;
 border-style:solid/dashed/dotted;

 border:1px solid red;

 border-right:3px dashed blue;

 内边距:padding
 外边距:margin
 浮动:float
**************************************<head>
**************************************<head>
**************************************<head>
   <script type="text/javascript">
function f1(){
/*var img = document.createElement("img");
img.src = "images/1.gif";
document.body.appendChild(img);*/
/*
var tr_new = document.createElement("tr");
var t = document.getElementById("tab");
t.appendChild(tr_new);
var td0 = document.createElement("td");
td0.innerHTML = "联想笔记本";
var td1 = document.createElement("td");
td1.innerHTML = "3900";
var td2 = document.createElement("td");
td2.innerHTML = "4";
var td3 = document.createElement("td");
td3.innerHTML = "删除";
tr_new.appendChild(td0);
tr_new.appendChild(td1);
tr_new.appendChild(td2);
tr_new.appendChild(td3);
*/
var t = document.getElementById("tab");
var length = t.rows.length;
var tr_new = t.insertRow(length);
var td0 = tr_new.insertCell(0);
var td1 = tr_new.insertCell(1);
var td2 = tr_new.insertCell(2);
var td3 = tr_new.insertCell(3);
td0.innerHTML = "联想笔记本";
td1.innerHTML = "4567";
td2.innerHTML = "3";
td3.innerHTML = "删除";
}

function f2(){
var sp = document.getElementById("sp").value;
var jg = document.getElementById("jg").value;
var sl = document.getElementById("sl").value;
var t = document.getElementById("tab");
var length = t.rows.length;
var tr_new = t.insertRow(length-1);
var td0 = tr_new.insertCell(0);
var td1 = tr_new.insertCell(1);
var td2 = tr_new.insertCell(2);
var td3 = tr_new.insertCell(3);
td0.innerHTML = sp;
td1.innerHTML = jg;
td2.innerHTML = sl;
td3.innerHTML = "<input type = 'button' value = '删除' onclick = 'f3(this)'/>";
}
function f3(t){
var tr = t.parentNode.parentNode;
var index = tr.rowIndex;
var t = document.getElementById("tab");
t.deleteRow(index);
}
function f11(t){
t.style.border = "10px dotted green";
t.style.backgroundColor="yellow";
t.style.color = "purple";
t.style.fontSize = "40px";
t.style.fontWeight = "bold";
}
function f12(t){
t.style.border = "1px solid red";
}
function f21(n,t){
t.style.border = "1px solid red";
var img = document.getElementById("img");
img.src = "../第七次课JS/作业/上机作业/images/"+n+".jpg";
for (var i = 1;i<=5 ;i++ )
{
if (i!=n)
{
var a = document.getElementById("img"+i);
a.style.border = "0px";
}
}
}
  </script>
  <style type="text/css">
.c1{
width:200px;
height:200px;
border:1px solid red;
color:green;
font-size:30px;
font-family:隶书;
text-decoration:underline;/*下划线*/
}
.c2{
width:200px;
height:200px;
border:2px dashed orange;
color:purple;
font-size:40px;
font-family:华文行楷;
text-decoration:none;/*去下划线*/
}
.li_out{
list-style:none;
float:left;
width:103px;
height:28px;
background-image:url(bg1.gif);
margin-right:1px;
color:white;
font-family:黑体;
text-align:center;
padding-top:5px;
}

.li_over{
list-style:none;//是否有‘●’或‘123’或‘阿拉伯123’修饰
float:left;
width:103px;
height:28px;
background-image:url(bg2.gif);
margin-right:1px;
color:yellow;
font-family:黑体;
text-align:center;
padding-top:5px;
cursor:pointer;
} </style>
 </head>
 <body>
 <table>
 <tr>
<td colspan = "5" align="center">
<img src="../images/1.jpg" width="300"  border="0" alt="" id = "img">
</td>
 </tr>
 <tr>
<td><img src="../images/1.jpg"width="160" height="152"border="0" alt="" onmouseover = "f21(1,this)" id = "img1"></td>
<td><img src="./images/2.jpg" width="160" height="152"border="0" alt="" onmouseover = "f21(2,this)" id = "img2"></td>
<td><img src="../images/3.jpg" width="160" height="152" border="0" alt="" id = "img3"onmouseover = "f21(3,this)"></td>
<td><img src="../images/4.jpg" width="160" height="152" border="0" alt="" id = "img4"onmouseover = "f21(4,this)"></td>
<td><img src="../images/5.jpg"width="160" height="152" border="0" alt="" id = "img5"onmouseover = "f21(5,this)"></td>
 </tr>
 </table>
<ul>
<li class = "li_out" onmouseover = "this.className = 'li_over'" onmouseout = "this.className='li_out'">平板电脑</li>
<li class = "li_out"onmouseover = "this.className = 'li_over'"onmouseout = "this.className='li_out'">平板电脑</li>
<li class = "li_out"onmouseover = "this.className = 'li_over'"onmouseout = "this.className='li_out'">平板电脑</li>
<li class = "li_out"onmouseover = "this.className = 'li_over'"onmouseout = "this.className='li_out'">平板电脑</li>
</ul>
<br><br><br><br>
<div id="" class="c1"onmouseover = "this.className='c2'" onmouseout = "this.className ='c1'">
hello,小样
</div>
 <hr/>
<input type="button" value="添加元素" onclick="f1()">
<table width = "300px" height = "200px" border = "1" id = "tab">
<tr>
<td>商品名称</td>
<td>数量</td>
<td>价格</td>
<td>操作</td>
</tr>
<tr>
<td>三星手机</td>
<td>4999</td>
<td>2</td>
<td><input type = "button" value = "删除" onclick = "f3(this)"/></td>
</tr>
<tr>
<td>苹果电脑</td>
<td>9999</td>
<td>1</td>
<td><input type = "button" value = "删除" onclick = "f3(this)"/></td>
</tr>
<tr>
<td colspan = "4"><input type="button" value="添加订单" onclick="f2()"></td>
</tr>
</table>
订单:<br>
商品:<input type="text" name="" id = "sp"><br>
价格:<input type="text" name=""id = "jg"><br>
数量:<input type="text" name=""id = "sl">
 </body>
</html>

上一篇:go的精选类库


下一篇:那些天使用AWS填过的坑和注意事项