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);