javaScript基本知识
一、基本语法 内置函数 自定义函数 内嵌框架
一、内置函数:
1、alert();弹出一个只含有“确认”按钮的警告框
2、confirm("你是女孩吗?");弹出一个同时含有“确认”和“取消”按钮的消息框,有返回值(点击确定返回true 点击取消返回false)
3、var a=prompt("请输入一个数字:","0");接收用户输入的信息,"0"是默认值,可以自行修改默认值。a为确定时返回的值。
4、isNaN(x);判断x是否是一个非数字,如果x不是数字,返回true;如果x是数字,返回false
5、var a=parseInt(x);将x转成整型;
6、var a=parseFloat(x);将x转成浮点型;
7、document.write();像文档输出内容(可以是字符串 表达式 标签)
8、eval();将括号中的字符串当做表达式处理;
var a = 3;
var b = 7;
var c = "+";
eval(a+c+b);
eg:
var a =3;
var b=7;
var c="/";
alert(eval(a+c+b));
二、基本语法:
变量申明:var 变量名=初始值;
变量名命名规范:可以包含数字、字母、下划线、$,但是不能以数字开头。
三、自定义函数:
function 方法名(参数一,参数二,……){
方法体;
}
四、内嵌框架
1.把<body></body>去掉换成<frameset></frameset>
2.<frameset>的属性: <frameset rows="80,*" frameborder="yes">
框架边框: frameborder = "1/0/yes/no"默认为yes或1
横分框架比例大小:rows="80,*"(此处是分为上下两个框架的大小,上为高80,下高为剩余的*,如果分为四个,则要写四个值,格式为"固定值/百分比/*")
纵分框架比例大小:cols="250,*,*"(此处是分为左中右三个框架的大小,左宽为250,中宽和右为剩余的*,如果分为其它数量则规则同上)
3.<frame>的属性:<iframe src="导入的网页.html" name="" scrolling="" frameborder="" >
固定大小: noresize = "noresize"
滚动条: scrolling = "yes/no"
4.例子:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!doctype html>
<html>
<head><style type="text/css"></style></head>
<frameset rows="80,*" frameborder="yes">
<frame src="toBjsp"/>
<frameset cols="250,*,*">
<frame src="toAjsp"/>
<frame src="toBjsp" frameborder="0"/>
<frame src="toAjsp"/>
</frameset>
</frameset>
</html>
二、window 对象 日期对象Date
一、window对象的属性:
document文档对象
location 地址对象location.reload();刷新当前页面
history 历史对象
screen 客户端屏幕相关信息(screen.width,screen.height屏幕的宽和高)
status 状态栏信息
closed 检索窗口是否被关闭 如果窗口已经被关闭,closed属性返回true ,否则返回false
二、window对象的方法:
1、内置函数 都是window对象的方法
2、window.open("URL","新窗口名","窗口特征");打开一个新的浏览器窗口,加载指定html文档
其中窗口特征包括:
height、width 窗口文档显示区的高度、宽度。以像素计。
left、top 窗口的x坐标、y坐标。以像素计
toolbar=yes | no |1 | 0是否显示浏览器的工具栏。黙认是yes。
scrollbars=yes | no |1 | 0是否显示滚动条。黙认是yes。
location=yes | no |1 | 0是否显示地址地段。黙认是yes。
status=yes | no |1 | 0是否添加状态栏。黙认是yes。
menubar=yes | no |1 | 0是否显示菜单栏。黙认是yes。
resizable=yes | no |1 | 0窗口是否可调节尺寸。黙认是yes。
titlebar=yes | no |1 | 0是否显示标题栏。黙认是yes。
fullscreen=yes | no |1 | 0是否使用全屏模式显示浏览器。黙认是no。
eg:
var wo=window.open("http://www.baidu.com","新窗口名","width=300,height=200px,scrollbars=yes,top=100px,status=no,location=0,menubar=no");
//window.open("http://www.baidu.com","","width=300,height=300px,top = 100px,left = 200px,status = yes,location =0,menubar = no,toolbar = 0,scrollbar = yes");
var f=confirm("是否要关闭刚刚打开的窗口?");
if(f){
wo.close();
}
3、close();关闭一个窗口
4、var timeId=setTimeout("方法名()",延迟时间);设置延时器,延时指定的毫秒数执行方法;本身不具备循环功能,使用时放置在方法内部
clearTimeout(timeId);清除一个延时器对象
5、var timeId=setInterval("方法名()",间隔时间);设置定时器,每隔一段时间执行方法,本身具备循环功能,使用时放置在方法外部
clearInterval(timeId);清除一个定时器对象
三、日期对象:Date
1、创建日起对象的实例:var today=new Date();
2、get方法组:
get方法组从日期对象中分解出它所处的年月日,星期几,时分秒,毫秒值
today.getFullYear()返回年份数
today.getMonth()返回月份数:0-11,应加上1.
today.getDate()返回日期数:1-31
today.getDay()返回星期几:0-6, 0代表星期日
today.getHours()返回小时数:0-23
today.getMinutes()返回分钟数:0-59
today.getSeconds()返回秒数:0-59
today.getTime()返回毫秒数:自起始时刻开始(起始时刻:1970年1月1日00:00:00)
3、set方法组:
set方法组设置(改变)日期对象的某一部分
today.setFullYear()设置年份数
today.setMonth()设置月份数:参数0-11
today.setDate()设置日期数:参数1-31
today.setHours()设置小时数:参数0-23
today.setMinutes()设置分钟数:参数0-59
today.setSeconds()设置秒数:参数0-59
eg:
var today=new Date();
today.setFullYear("2017");
alert(today.getFullYear());
四、常用事件
onchange 文本域或者下拉列表的选项发生改变的时候触发;
onclick 按钮的点击事件
onmouseover 鼠标覆盖事件 鼠标移到图片或者div的上方
onmouseout 鼠标移开事件
onsubmit
onreset
onload
onscroll 滚动事件
onfocus = "" obj.focus();
onblur = objc.blur(); select();全选
三、数学对象 字符串对象
1、数学对象Math
属性:Math.PI;圆周率
方法:取整的三个方法:
Math.round();四舍五入取整
Math.floor();向下取整,返回比参数小的最大的一个整数;-5.5
Math.ceil();向上取整,返回比参数大的最小的一个整数;
Math.random();获得一个[0,1)之间的一个随机小数
2、字符串对象:
var str="abcdef";
属性:str.length;返回字符串的长度
方法:str.substring(start,end);返回从下标为start开始到下标end截止的一个子串;(不包括结束字符end处的字符)
charAt(5);
for(var i=0;i<str.length;i++){
alert(str.charAt(i));
}
四、 location history document对象 页面元素的获取/页面元素的显示和隐藏
一、location地址对象:
属性:href获取或者改变当前网页文档的URL;(系统会将所有的都执行完后才把地址改变--自己的领悟)
eg:
function f()
{
location.href="F:/我仅存的作业/js作业/js_8/邮箱.html";
alert(location)
}
方法:location.reload();重新加载当前页面 相当于刷新
二、history历史对象
方法:
history.back();加载用户访问过的历史记录中的上一个URL;
history.forward();加载用户访问过的历史记录中的下一个URL;
history.go(正整数/负整数);go(-1)相当于back();go(1)相当于forward()
三、document对象
属性:
document.URL:返回或者设置当前网页文档的URL(可以通过这个属性实现页面的跳转)
document.bgColor设置文档的背景色
document.body.style.backgroundColor
eg:alert(document.bgColor);fontSize
方法:
document.write();向网页网页文档输出内容
document.getElementById();通过元素的Id获取一个页面对象
document.getElementsByName();通过元素的name获取一组同名的页面元素,得到的是一个元素数组
document.getElementsByTagName();通过元素的标签名获取同标签名的一组页面元素,得到的是一个元素数组
控制页面元素的显示和隐藏:
visibility:visible(可见的);hidden(隐藏,被隐藏的页面元素仍然占位)
display:block(显示)inline;none(隐藏,被隐藏的页面元素不占位)
五、 DOM编程
一、Core DOM的操作:
查看节点:
1、访问指定节点的方法:
var obj=document.getElementById();返回一个节点对象
var obj=document.getElementsByName();返回一个节点数组
var obj=document.getElementsByTagName();返回一个节点数组
2、查看/修改节点的属性
查看节点属性:obj.getAttribute("属性名");
修改节点属性:obj.setAttribute("属性名","属性值");
eg:
<script type="text/javascript">
function f()
{
var a=document.getElementById("id1")
var b=a.getAttribute("value");
alert(b);
}
</script>
</head>
<body>
<input type="button" value="123" onclick="f()"id="id1">
</body>
3、根据层次关系查找节点:
obj.parentNode;父节点
obj.firstChild;第一个子节点
obj.lastChild;最后一个子节点
obj.childNodes
4、创建和增加节点:
var img=document.createElement("img");创建节点
obj.appendChild(newNode);末尾追加节点的方式插入新的节点
obj.insertBefore(newNode,oldNode);在指定节点前,插入新的节点
obj.parentNode.insertBefore(img,obj);
var t1 = t.cloneNode(false/true);克隆节点。参数为true,则克隆当前节点的所有属性和当前节点的所有子节点;
参数为false,则只克隆当前节点本身。
5、删除和替换节点:
t.parentNode.removeChild(delNode);删除节点
t.parentNode.replaceChild(newNode,oldNode);替换节点
六、TML DOM操作
1、HTML DOM对象的属性的访问:obj.属性名
alert(img1.getAttribute("src"));
2、HTML DOM操作表格:
1)表格对象
属性:rows返回包含表格中所有行的一个数组
例如:
var t = document.getElementById("tab");
var trs = t.rows;
var tr0=t.rows[0]返回表格对象t的第一行这个行对象也可以写var tr0=trs[0];
方法:
insertRow(index);往表格中插入一个新行
注意:新行将插入到行索引为index的行之前。
如果index=0,则插入的新行在表格首行;
如果index=表格长度,则插入的新行在表格的最末尾。
deleteRow(index);从表格中删除一行。
注意:删除的行索引为index。
2)表格行对象
属性:
cells返回该行中所有单元格的一个数组
例如:tableObj.rows[0].cells[0]将返回表格第一行的第一个单元格对象。
rowIndex 返回该行在表中的索引(rowIndex是一个大于或等于0,并且小于表格长度的整数)
方法:
insertCell(index);在一行中的指定位置插入一个空的<td></td>标签
注意:新的单元格将插入在索引为index的单元格前。
deleteCell(index);删除索引为index的单元格。
3)单元格对象
属性:
cellIndex返回单元格在某行单元格集合中的位置(即索引)
innerHTML返回或者设置单元格的开始标签和结束标签之间的innerHTML
align 设置或返回单元格内部数据的水平对齐方式
className 设置或者返回元素的class属性
d.innerHTML
4)例子:
<html>
<head></head>
<script type="text/javascript">
function addrowAndCell(){
var tab=document.getElementById("tab");//根据ID得到表对象
var addTr=tab.insertRow(1);//加一行,位置是在第二位,下标为1
var addCell1=addTr.insertCell(0);//往行中加一个格子,位置是在第一位,下标为0
var addCell2=addTr.insertCell(1);//往行中加一个格子,位置是在第二位,下标为1
var addCell3=addTr.insertCell(2);//往行中加一个格子,位置是在第三位,下标为2
addCell1.innerText=123;//设置内容
addCell2.innerHTML="<a href='#'>这是一个空键接</a>";//设置内置HTML
addCell3.innerText="你好";//设置内容
}
function toDeleteRow(){
var tab=document.getElementById("tab");//根据ID得到表对象
//删除方法1
//var tr2=tab.rows[1];//得到一条行对象
tr2.parentNode.deleteRow(1);//删除下标为1的行
//删除方法2
//tab.deleteRow(1);//删除下标为1的行
//删除方法1
//var row1=document.getElementById("row1");//得到行ID
//row1.parentNode.deleteRow(1);//通过父节点删除下标为1的行
//row1.parentNode.removeChild(row1);//通过父节点删除自己
}
function toDeleteCell(){
var tab=document.getElementById("tab");//根据ID得到表对象
//删除方法1
//var tr2=tab.rows[1];//得到一条行对象
//var cells=tr2.cells;//得到所有格子
//cells[1].parentNode.deleteCell(1);//子节点通过父节点删除子节点
//删除方法2
//tab.rows[1].deleteCell(1);//父节点直接删除子节点
//删除方法3
//略..(同toDeleteRow方法3相似 )
}
function showOtherAtribute(){
var cellObj=document.getElementById("cellObj");//得到一个格子对象
alert("格子的单元格集合索引为"+cellObj.cellIndex+";\n格子的innerHTML为"+cellObj.innerHTML+";\n格子的innerText为"+cellObj.innerText+"格子的className为"+cellObj.className);
}
</script>
<body>
<input type="button" value="点击新增行和表格" onclick="addrowAndCell()"/>
<input type="button" value="点击新删除下标为1的行" onclick="toDeleteRow()"/>
<input type="button" value="点击新删除下标为1的行的所有格子中下标为1的格子" onclick="toDeleteCell()"/>
<input type="button" value="点击显示July这个格子的部份属性" onclick="showOtherAtribute()"/>
<table id="tab" border="1">
<tr>
<td>ID</td>
<td>NAME</td>
<td>SEX</td>
</tr>
<tr id="row1">
<td>1</td>
<td>Jane</td>
<td>Girlfloder1</td>
</tr>
<tr>
<td>2</td>
<td>Jone</td>
<td>Boyfloder1</td>
</tr>
<tr>
<td>3</td>
<td>Franky</td>
<td>Boy</td>
</tr>
<tr>
<td>4</td>
<td class="aabbc" id="cellObj"><div>July</div></td>
<td align="center">Girl</td>
</tr>
</table>
</body>
</html>
showOtherAtribute方法的弹窗显示为:
七、javascript和css交互
一、回顾样式表基本语法
1、css的引入方式:
1)内部样式:在头部的<head></head>之间加入<style type="text/css"></style>
2)行内样式:在标签中加入style属性;例如<p style="color:red"></p>
3)外部样式:<link type="text/css" rel="stylesheet" href="a.css"/>
2、选择器的分类(内部样式)
<input type="text" id = "blue"/>
<input type="text" class="red"/>
标签选择器:
input{
width:120px;
border:1px solid red;
}
类选择器 :
.red{
color:red;
font-size:30px;
}
ID选择器 :
#blue{
color:blue;
font-family:隶书;
}
常见属性:
文本属性:font-size:字体大小;
font-family:字体类型
背景属性: font-size: 12px;"> background-image:url() 背景图片
边框属性:border-width:边框粗细(单位是px);
border-style:边框线型(solid 实线;dashed 虚线;dotted点线);
border-color:边框颜色
填充属性:padding-top,padding-right,padding-bottom,padding-left(分别设置元素的上、右、下、左四个方向的内边距)
边界属性:margin-top,margin-right,margin-bottom,margin-left(分别设置元素的上、右、下、左四个方向的外边距)
二、如何动态改变页面元素的样式:
1、使用getElement系列方法访问元素
2、改变样式属性
(1)style 属性
例如:
document.getElementById("div1").style.color="red";
document.getElementById("div1").style.fontSize="40px";
(2)className属性
.txt{border:1px solid red;}
document.getElementById("div1").className="txt";
三、javascript访问样式表的应用:
1、获取行内样式的方法:
var divObj=document.getElementById("div1");
var divTop=divObj.style.top;
2、获取类样式的方法:
currentStyle
getComputedStyle()//电脑的样式
var divObj=document.getElementById("div1");
var divTop=divObj.currentStyle.top;//IE浏览器
var divTop=document.defaultView.getComputedStyle(divObj,null).top;//火狐浏览器
3、制作随滚动条滚动的广告图片特效
直接来代码:
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!doctype html>
<html>
<head>
<style type="text/css">
div{
text-align:center;
border:solid;
position:absolute;
top: 200px;
width: 150px;
height: 100px;
right: 0px;
}
</style>
<script type="text/javascript">
function ff(){
var obj=document.getElementById("divId");
//var divTop=document.defaultView.getComputedStyle(obj,null).top;
//divTop=divTop.substring(0,divTop.length-2);
//设置纵向
var divTop=200;//显示的顶部高度
var top=(parseInt(divTop)+parseInt(document.body.scrollTop))+"px";//显示的高度 加上 滚动条滚动的值
obj.style.top=top;
//设置横向
var divWidth=150;//div的宽度
obj.style.left=(document.body.clientWidth+document.body.scrollLeft-parseInt(divWidth))+"px";//浏览器的宽度+滚动条的移动值-div的宽度
}
</script>
</head>
<body onscroll="ff()" >
我<div id="divId"><font color="red" style="padding: 6px;">这是一个随着 滚动条 滚动 的 广告区域</font></div><br/><br/>
在<br/><br/><br/><br/>
马<br/><br/><br/>
路<br/><br/><br/>
边<br/><br/><br/><br/>
,捡<br/><br/><br/><br/>
到<br/><br/><br/>
一<br/><br/><br/>
分<br/><br/><br/><br/>
钱。<br/><br/><br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<img alt="图片(比如:路径)报错时代替的文字" title="鼠标悬浮时提示的文字" src="../views/floder1/a.png"><img alt="图片(比如:路径)报错时代替的文字" title="鼠标悬浮时提示的文字" src="../views/floder1/a.png"><img alt="图片(比如:路径)报错时代替的文字" title="鼠标悬浮时提示的文字" src="../views/floder1/a.png">
</body>
</html>
运行效果:
----------------------------------------以下方法是在网上搜的---------------------------------------------
1.网页可见区域宽: document.body.clientWidth
2.网页可见区域高: document.body.clientHeight
3.网页可见区域宽: document.body.offsetWidth (包括边线的宽)
4.网页可见区域高: document.body.offsetHeight (包括边线的高)
5.网页正文全文宽: document.body.scrollWidth
6.网页正文全文高: document.body.scrollHeight
7.网页被卷去的高: document.body.scrollTop
8.网页被卷去的左: document.body.scrollLeft
9.网页正文部分上: window.screenTop
10.网页正文部分左: window.screenLeft
11.屏幕分辨率的高: window.screen.height
12.屏幕分辨率的宽: window.screen.width
13.屏幕可用工作区高度: window.screen.availHeight
14.屏幕可用工作区宽度: window.screen.availWidth
-------------------------------------------------------------------------------------
八、 表单基本验证技术
一、要求
日期是否有效或日期格式是否正确
表单元素是否为空
用户名和密码
E-mail地址是否正确
身份证号码等是否是数字
二、字符串对象
属性:字符串对象.length
方法:
.toLowerCase() 把字符串转化为小写
.toUpperCase() 把字符串转化为大写
.charAt(index) 返回在指定位置的字符
.indexOf('aa') 查找指定的'aa'字符串值在字符串中首次出现的位置
.substring(index1,index2) 返回位于指定索引index1和index2之间的字符串,并且包括索引index1对应的字符,
不包括索引index2对应的字符
三、文本框对象的属性、方法、事件
事件:
onblur 失去焦点,当光标离开某个文本框或者文本域时触发
onfocus 获得焦点,当光标进入某个文本框或者文本域时触发
方法:
blur() 从文本域中移开焦点
focus() 在文本域中设置焦点,即获得鼠标光标
select()选取文本域中的内容
属性:
id 设置或返回文本域的id
value 设置或返回文本域的value属性的值
四、基本验证:
1、邮箱
var mail=document.getElementById("email").value;
if(mail.indexOf("@")==-1 || mail.indexOf(".")==-1){
alert("Email格式不正确\n必须包含符号@和.");
document.getElementById("email").select();//邮箱格式不正确时,文本框内容全选,高亮显示
return false;
}
2、密码
var pwd=document.getElementById("pwd").value;
if(pwd.length<6){
alert("密码必须等于或大于6个字符");
return false; }
var repwd=document.getElementById("repwd").value;
if(pwd!=repwd){
alert("两次输入的密码不一致");
return false;
}
3、姓名
var user=document.getElementById("user").value;
for(var i=0;i<user.length;i++){
var j=user.substring(i,i+1)
if(isNaN(j)==false){
alert("姓名中不能包含数字");
}
}
制作文本框效果:
function clearText(){
var mail=document.getElementById("email");
if(mail.value=="请输入正确的电子邮箱"){
mail.value="";
mail.style.borderColor="#ff0000";
}
}
<td>Email:<input id="email" type="text" class="inputs" value="请输入正确的电子
邮箱" onfocus="clearText()"/></td>
</tr>
4、文本提示特效
function checkEmail(){
var mail= document.getElementById ("email");
var divID= document.getElementById ("DivEmail");
divID.innerHTML="";
if(mail.value==""){
divID.innerHTML="Email不能为空";
return false;
}
……
<input id="email" type="text" class="inputs" onblur="checkEmail()"/>
<div class="red" id="DivEmail"></div>
九、正则表达式 和 表单辅助特效
一、定义正则表达式
普通方式:
var reg=/表达式/附加参数;
例如:
var reg=/white/;
var reg=/white/g;
构造函数:
var reg=new RegExp("表达式","附加参数");
var reg=new RegExp("white");
var reg=new RegExp("white","g");
二、表达式的模式
简单模式:var reg=/china/;
复合模式:var reg=/^\w+$/;
三、RegExp对象
方法:test();检索字符串中指定的值,存在和正则表达式的匹配则返回true,否则返回false。
用法:reg.test(str);
属性:
global RegExp对象是否具有标志g(可以进行全局匹配)
ignoreCase RegExp对象是否具有标志i(不区分大小写匹配)
multiline RegExp对象是否具有标志m(可以进行多行匹配)
四、正则表达式常用符号:
/…/ 代表一个模式的开始和结束
^ 匹配字符串的开始
$ 匹配字符串的结束
\d 匹配一个数字字符,等价于[0-9]
\D 除了数字之外的任何字符,等价于[^0-9]
\w 匹配一个数字、下划线或字母字符,等价于[A-Za-z0-9_]
\W 任何非单字字符,等价于[^a-zA-z0-9_]
\s 空白字符
\S 非空白字符
{n} 匹配前一项n次
{n,} 匹配前一项n次,或者多次
{n,m} 匹配前一项至少n次,但是不能超过m次
* 匹配前一项0次或多次,等价于{0,}
+ 匹配前一项1次或多次,等价于{1,}
? 匹配前一项0次或1次,也就是说前一项是可选的,等价于{0,1}
五、用例:
中国的邮政编码都是6位:var regCode=/^\d{6}$/;
手机号码都是11位,并且第1位都是1:var regMobile=/^1\d{10}$/;
邮箱验证:var regMail=/^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;
六、省市级联菜单
1、下拉列表框对象
1)select对象常用事件、方法和属性
事件: onchange 当改变选项时调用的事件
方法: add() 向下拉列表中添加一个选项
属性: options[] 返回包含下拉列表中的所有选项的一个数组
selectedIndex 设置或返回下拉列表中被选项目的索引号
length 返回下拉列表中的选项的数目
2)Option对象常用属性
text:设置或返回某个选项的纯文本值
value:设置或返回被送往服务器的值
2、数组对象
属性: length 设置或返回数组中元素的数目
方法: join( ) 把数组的所有元素放入一个字符串,通过一个的分隔符进行分隔
sort( ) 对数组的元素进行排序(按照ASCII码的升序排列)
eg:
var aaa=new Array("asd" ,"ffff","cccc");
var c=aaa.join()
alert(c);
3、级联菜单:
方法一:
<script type="text/javascript">
var city=new Array();
city['湖南省']=['长沙市','湘潭市','株洲市','岳阳市'];
city['河南省']=['郑州市','洛阳','新乡','信阳','驻马店'];
city['湖北省']=['武汉市','宜昌'];
function addCity(){
var pro=document.getElementById("province").value;
document.getElementById("city").options.length=1;//在添加城市信息之前,先清空城市下拉列表,只剩下选项"请选择城市"
for(var i in city[pro]){
var op=new Option(city[pro][i],city[pro][i]);
document.getElementById("city").add(op);
}
</script>
<select id="province" onchange="addCity()">
<option>--请选择省份--</option>
<option value="湖南省">湖南省</option>
<option value="河南省">河南省</option>
<option value="湖北省">湖北省</option>
</select>
<select id="city">
<option>--请选择城市--</option>
</select>
方法二:
<script type="text/javascript">
var city=new Array();
city[0]=new Array("长沙市","湘潭市","娄底市","浏阳市");
city[1]=new Array("郑州","洛阳","商丘","新乡","信阳","驻马店");
city[2]=new Array("武汉","宜昌","襄樊");
function addCity(){
var index=document.getElementById("province").selectedIndex-1;
document.getElementById("city").options.length=1;
if(index!=-1){
for(var i=0;i<city[index].length;i++){
var op=new Option(city[index][i],city[index][i]);
document.getElementById("city").add(op);
}
}
}
</script>
padding-top
padding-bottom
marginBottom
往表格里添加(按钮)元素:var deleteButton=td3_new.innerHTML="<input type='button' value='删除' onclick=''>";
deleteButton.onclick="delete1()";
手动设置格子文字位置:/*td0_new.style.textAlign="left";*/
数据类型:alert(typeof(namer.value));//number、string、boolean、undefined、null
更多相关属性与用法请参观:http://www.w3school.com.cn/jsref/index.asp