Javascript
Javascript--脚本语言 ，是由Netscape公司开发的 ，与微软公司开发的Jscript不同，但是都可简写为js，javascript无法独立运行，需要依赖于宿主文件。
一，javascript的基本语法
1，数据类型与变量类型
数据类型基本与c#相同：整数型，小数型，布尔型，日期时间，字符串，数组。。。
变量类型：通用类型var
强制转换：parseint（） parsefloat（） 判断是否为一个合法的数字类型：isNaN（）
2，数组
var 数组名=new Array（）；长度一般可省略
a.length---长度
3，函数
function 函数名（形参）
{
}
二，DOM操作
DOM---Document Object Model 文件对象模型
对象---object 描述一个对象用表示特点的名词和表示行为的动词
1，window对象操作
（1）alert（）
window.alert():弹出一个警告对话框
（2）confirm（）
window.confirm():弹出一个可供选择的对话框，点击确定之后返回true，点击取消返回false，可用变量来接收
（3）open（）
open（“地址”，“_blank/_self”,"新窗口的特点"）
var a = window.open("http://www.sina.com.cn");
在新窗口中打开页面，返回新的窗口。a也是一个window类型的变量。
open 的语法：var retval = window.open(url, name, features);
open的参数详解
url（可选的）：类型：string 指定要显示文档的URL。如果没有指定URL,将显示空白的新窗口。
name（可选的）：类型：string 指定窗口的名字，这个名字在一个窗体或锚元素中被用作目标属性的值。
name的值：_blank: url被加载到一个新的未命名的窗口
_parent: url被加载到当前网页的上一级 ，如果当前网页没有上一级，则等同于_self
_self: 当前文档被替换为指定的url。
_top: 加载的url替换任何可能被加载的框架集。如果没有定义框架集，则等同于_self
features（可选的）：类型：string 包含一个由逗号隔开的项目列表，每个项目包含一个选项和值，由一个等号链接 如（"fullscreen=yes,toolbar=yes"）
features的值：channelmode = { yes | no | 1 | 0 } ：指定是否在影院模式下显示窗口。默认是0
fullscreen = { yes | no | 1 | 0 }：指定是否显示浏览器全屏模式。默认是no，在此模式下浏览器的标题栏和菜单栏会隐藏，但总是会提供一个按钮或者其他可见的线索来帮助用户关闭窗口
width/height = number ：指定窗口的宽度/高度（以像素为单位） 最低宽度为250， 最低高度为150，指定浏览器内容区域的最低宽度、高度
top/ left = number ：指定窗口距离页面顶部/左边的位置 ，这个值是相对于屏幕的左上角 该值必须大于或等于0
location = { yes | no | 1 | 0 } ：指定是否显示导航栏（地址栏）。默认是yes
resizable = { yes | no | 1 | 0 } ：指定是否可以调整窗口大小。默认是yes
menubar = { yes | no | 1 | 0 } ：指定是否显示菜单栏。默认是yes
scrollbars = { yes | no | 1 | 0 } ：指定是否显示水平和垂直滚动条。默认是yes
status = { yes | no | 1 | 0 } ：指定是否要在窗口的底部添加状态栏。默认是yes
toolbar = { yes | no | 1 | 0 }：指定是否显示工具栏。默认是yes
(4)close():关闭当前页面
（5）setTimeout（“要执行的代码”，毫秒数）：在指定的毫秒数之后执行代码一次
function showTime()
{
var date = new Date();
document.getElementById("hh").innerHTML = date;
window.setTimeout("showTime()",1000);
} //在当前页面显示时间，并且每隔一秒时间刷新一次（相当于电子表的功能）
*************************************************************
var a;
function openAD()
{
a = window.open("http://www.sina.com.cn","_blank","width=200 height=200 toolbar=no top=0 left=0");
window.setTimeout("closeAD()",5000);
}
function closeAD()
{
a.close();
}
window.setTimeout("openAD()",5000); //打开页面，五秒后弹出广告(新浪首页)，再过5秒广告关闭
（6）setInterval（“要执行的代码”，毫秒数）：每隔指定的毫秒数就执行一次代码（循环）
function showTime()
{
var date = new Date();
document.getElementById("hh").innerHTML = date;
}
window.setInterval("showTime()",1000); //在当前页面显示时间，并且每隔一秒时间刷新一次（相当于电子表的功能）
（7）window.moveTo(x,y):移动窗口到指定坐标
window.resizeTo(width,height):调整窗口大小到指定宽度和高度
window.scrollTo(x,y):将窗体中的滚动条拉到指定位置
（二）历史操作
window.history.go(n):n可为正数也可为负数。当n为正数时则表示前进到第n个页面，当n为负数时则后退到第n个页面
（三）地址栏操作
window.location.href()
//定时刷新页面(每隔一秒刷新一次页面)
function showSelf()
{
window.location.href="Untitled-3.html";
}
window.setInterval("showSelf()",1000);
（四）文档操作
window.document
(1)找到对象
document.getElementById()
document.getElementsByName()
document.getElementsByTagName()
var a=document.getElementsByTagName("div");
for(var i=0;i<a.length;i++)
{
a[i].style.border="5px solid blue";
} //找多个元素
**********************************
var a=document.getElementById("hh");
a.style.height="100px"; //找单个元素
（2）操作属性
document.getAttribute("属性名"):获取属性的值
document.setAttribute():设置属性的值
var b=document.getElementById("hh");
b.setAttribute("属性名","属性值")
document.removeAttribute("属性名")：删除属性
（3）操作样式
1.操作内联样式
var a=document.getElementById("hh");
a.style.xxxx="";
2.操作样式表的class选择器
var a=document.getElementById("hh");
a.className="dd";
或
a.setAttribute("class","dd");
案例：设置奇偶行不同颜色
<style type="text/css">
div{ height:20px;}
.odd
{ background-color:blue;}
.even
{ background-color:green;}
</style>
</head>
<body >
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
<script language="javascript">
var a=document.getElementsByTagName("div");
for( var i=0;i<a.length;i++)
{
if(i%2==0)
{
a[i].className="even";
}
else
{
a[i].setAttribute("class","odd");
}
}
</script>
（4）操作内容
1,表单元素
赋值：obj.value="";
取值：var s = obj.value;
案例：将文本框的输入内容赋值给按钮
<script language="javascript">
function clickMe()
{
//一、把文件框的值取出来
//1.找到文本框
var t = document.getElementById("txt");
//2.把值取出来
var s = t.value;
//二、给按钮把值赋上去
//1.找到按钮
var b = document.getElementById("btn");
//2.把值赋上去
b.value = s;
}
</script>
</head>
<body>
<form action="" method="get">
<input id="txt" name="txt" type="text" />
<input id="btn" name="btn" type="button" value="点击" onclick="clickMe()" />
</form>
</body>
</html>
2，非表单元素
取值：var s=obj.innerHTML;
赋值:obj.innerHTML="";
案例：将div里面的内容显示出来
<script language="javascript">
function showInfo()
{
var dd = document.getElementById("d");
var s = dd.innerHTML;
alert(s);
}
</script>
</head>
<body>
<div id="d">这是里面的内容</div>
<span onclick="showInfo()">点击</span>
</body>
</html>
（5）操作相关元素
var a=document.getElementById("id"); 找到元素
var b=a.nextSibling; 找a的下一个同辈元素（该元素必须与a在同一行，且中间不能有空格）
var b=a.previousSibling; 找a的上一级同辈元素（同上）
var b=a.parentNode; 找a 的上一级父级元素
var b=a.childNodes; 找a的下一级子元素（找出来的是数组） a.firstChild:第一个子元素 a.lastChild:最后一个子元素 childNodes[n]:第n个子元素
操作方法：a.appendChild(元素对象)：追加一个子元素（注意是元素对象，不是一个HTML字符串，即括号里面不加引号）
a.insertBefore(要插入的元素对象，相对于哪个元素)：在某个元素前面插入一个新元素对象（a是相对于要插入的元素的上一级元素）
a.removeChild(要移除的元素对象)：移除子元素
a.replaceChild(新元素，旧元素)：替换对象
如何在子元素中找指定的元素？
1，遍历 for(var i=0;i<a.length;i++){a[i].tagName=="DIV"}
2, a.getElementBytagName("div")
如何向元素中追加一个子元素
1，先造一个元素
var n=document.createElement("div"); //造元素
n.style.backgroudColor="blue"; // 设样式
n.innerHTML="this is a new div"; //设内容
2，加进去
a.appendChild(n);
浙公网安备 33010602011771号