javascript应用3

java风

浏览: 57559 次
来自: 北京

最近访客更多访客>>

bdpy9864

bemchou89

CRH2016

cqdtb

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

java

JavaScript

打开一个新页面：{

function testMethod(){

window.alert("大家好");

window.confirm("删除后不能恢复,确定删除?");

window.alert(window.document.getElementById("email").value);

}

function testGuangGao(){

//打开的子页面不关闭也可以对父页面进行操作

window.open("images.html","",

"height=300, width=500, left=300,top=300, toolbar =0,menubar=0, scrollbars=no, resizable=0, location=0, status =no");

}

width：以像素为单位指定窗口的宽度；

height：以像素为单位指定窗口的高度；

left：以像素为单位指定窗口距屏幕左边的位置；

top：以像素为单位指定窗口距屏幕顶端的位置；

screenX：设定窗口距离屏幕左边界的像素长度；

screenY：设定窗口距离屏幕上边界的像素长度；

titleBar：指明标题栏是否在新窗口中可见，选项的值及含义与toolbar相同；

toolbar：指定窗口是否有标准工具栏。当该选项的值为1或yes时，表示有标准

工具栏，当该选项的值为0或no时，表示没有标准工具栏；

menubar：指定窗口是否有菜单，选项的值及含义与toolbar相同；

scrollbar：指定当前窗口文档大于窗口时是否有滚动条，选项的值及含义与

toolbar相同；

resizable：指定窗口是否可改变大小，选项的值及含义与toolbar相同；

location：指定窗口是否有地址工具栏，选项的值及含义与toolbar相同；

status：指定窗口是否有状态栏，选项的值及含义与toolbar相同；

open方法返回的是该窗口的引用。

小技巧：该方法经常用于在打开一个网页时自动打开另一个窗口。比如：弹出一个广告窗口，或者公告窗口

在子页面中通过window.opener.document，可以获得父页面的document对象。

function firstMethod(){

//打开的子页面不关闭不能对父页面进行操作

window.showModalDialog("images.html","",

"height=300, width=500, left=300,top=300, toolbar =0,menubar=0, scrollbars=no, resizable=0, location=0, status =no");

}

</script>

</head>

<hr/>

这是163的首页

<hr>

</body>

}

关闭页面：{

function closeWindow() {

window.close();

//close();

}

</script>

</head>

<body>

<a href="javascript:void(0);" onclick="closeWindow();">window对象关闭窗口方法测试</a>

</body>

}

网页历史前进回退：{

function test(){

window.history.go(-1);

}

</script>

</head>

<body>

<a href="javascript:void(0);" onclick="javascript:alert('aaaa');">测试javascript伪协议</a>

</body>

}

Location对象：{

function testLocation() {

alert(window.location);

//相当于去点击超链接自动跳转 <a href="http://www.baidu.com">百度</a>

window.location.href("http://www.baidu.com");

}

function testDelete(){

if(confirm("删除后能恢复,确认删除？")){

window.location.href = "01.html";

}

</script>

</head>

<body>

<a href="javascript:void(0);" onclick="testLocation()">测试location</a>

<br>

</body>

window.location.reload();//刷新当前页面

}

在子页面的javascript中如何操作父页面：{

例如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>testchild.html</title>

function testMethod(){

//window.opener在用open()方法打开的子页面的javascript中获得父页面的window对象

window.opener.location.reload();

//window.opener.document.getElementById("username").value

=document.getElementById("email").value;

window.close();

}

</script>

</head>

<body>

<hr>

</div>

</body>

</html>

}

在javascript中添加表格：{

例如：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>testtable.html</title>

* 添加表格的方法

* 1.利用table添加行即 insertRow()

* 2.利用行添加列即insertCell()

* 3.列的值利用的innerHTML属性

* 4.删除一行的方法通过该行的索引位置删除即表格删除行用deleteRow(rowIndex)利用该行的index位置来删除

function testMethod(){

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

var tr1 = first.insertRow();

var td1 = tr1.insertCell();

var td2 = tr1.insertCell();

var td3 = tr1.insertCell();

td1.innerHTML = "张三";

td2.innerHTML = "男";

td3.innerHTML = "程序员";

}

function firstMethod(){

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

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

first.deleteRow(second.rowIndex);

}

</script>

</head>

<body>

<tr>

<td>

姓名

</td>

<td>

性别

</td>

<td>

职业

</td>

</tr>

<td>

李四

</td>

<td>

女

</td>

<td>

美工

</td>

</tr>

</table>

</body>

</html>

例2、

* 利用js动态增加表格的方式

* 1.利用table的insertRow()方法插入一行

* 2.利用该行的insertCell()方法插入一列

* 3.设置该列的内容 innerHTML

* 4.表格删除行用deleteRow(rowIndex)利用该行的index位置来删除

function checkAll(){

var flag = true;

var username = document.getElementById("username").value;

var birthday = document.getElementById("birthday").value;

var job = document.getElementById("job").value;

var sex = document.getElementsByName("sex");

document.getElementById("usernameError").innerHTML = "";

document.getElementById("birthdayError").innerHTML = "";

document.getElementById("jobError").innerHTML = "";

document.getElementById("sexError").innerHTML = "";

if(username == ""){

flag = false;

document.getElementById("usernameError").innerHTML = "<b style='color:red'>用户名是必填的</b>";

}

if(birthday == ""){

flag = false;

document.getElementById("birthdayError").innerHTML = "<b style='color:red'>生日是必选的</b>";

}

if(job == "000"){

flag = false;

document.getElementById("jobError").innerHTML = "<b style='color:red'>职位是必选的</b>";

}

if((!sex[0].checked) && (!sex[1].checked)){

flag = false;

document.getElementById("sexError").innerHTML = "<b style='color:red'>性别是必选的</b>";

}

if(flag){

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

var tr = first.insertRow();

var td1 = tr.insertCell();

var td2 = tr.insertCell();

var td3 = tr.insertCell();

var td4 = tr.insertCell();

var td5 = tr.insertCell();

td1.innerHTML = username;

td2.innerHTML = sex[0].checked?'男':'女';

td3.innerHTML = birthday;

td4.innerHTML = job;

td5.innerHTML = "<a href='javascript:void(0)' onclick='deletePerson(this)'>删除用户</a>";

document.personForm.reset();

}

function deletePerson(obj){

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

first.deleteRow(obj.parentNode.parentNode.rowIndex);

}

</script>

</head>

<body>

<tr>

<td>

姓名：

</td>

<td>

</td>

</tr>

<tr>

<td>

性别：

</td>

<td>

<input type="radio" name="sex" value="0"/>男

</td>

</tr>

<tr>

<td>

生日：

</td>

<td>

</td>

</tr>

<tr>

<td>

职业：

</td>

<td>

<option value="000">请选择职业</option>

</select>

</td>

</tr>

<tr>

<td>

</td>

<td>

</td>

</tr>

</table>

</form>

浏览器怎么样区分：{

function method() {

//alert(window.navigator.userAgent);

//将浏览器的版本信息全部转化为小写

var c = window.navigator.userAgent.toLowerCase();

//alert(c);

if(c.indexOf("msie")>0) {

alert("您用的是微软的ie浏览器");

}else if(c.indexOf("firefox")>0) {

alert("您用的是火狐");

}else if(c.indexOf("chrome")>0) {

alert("您用的是谷歌浏览器");

}else{

alert("不知道");

}

</script>

</head>

<body>

<a href="javascript:void(0);" onclick="method()">测试navigator对象</a>

</body>

分享到：

oracle 10g 安装 | javascript应用2

2011-09-10 15:14
浏览 955
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论