`
java风
  • 浏览: 56279 次
  • 来自: 北京
社区版块
存档分类
最新评论
  • 泛泛evil： 总结的很好，谢谢分享
    JavaScript
  • wanxkl： 哇！总结的太好了。。凤哥哥，你好强大啊。。请问您跟凤姐什么关系 ...
    css应用

javascript应用3

    博客分类：
  • java
JavaScript 
阅读更多

 

 

打开一个新页面：{

  <script type="text/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>

  

  <body onload="testGuangGao()">

   <input type="text" name="email" id="email"/>

   <input type="button" value="测试" onclick="testMethod()">

   <hr/>

   这是163的首页

   <hr>

   <input type="button" value="打开新窗口" onclick="firstMethod()">

  </body>

}

关闭页面：{

  function closeWindow() {

window.close();

//close();

}

</script>

</head>

<body>

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

</body>

}

网页历史前进回退：{

  <script type="text/javascript">

function test(){

window.history.go(-1);

}

</script>

</head>

<body>

<!-- 可以再时间里面直接写javasctipt代码 但是尽量不要去写 除非只是简单的一句话  -->

<!-- javascript:void(0)意思是不进行任何的操作 通常用于超链接的href中 -->

<!-- 一般可能会用到返回即history.go(-1), -->

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

 

<a href="javascript:void(0);" onclick="javascript:history.go(-1);">返回</a>

<a href="javascript:void(0);" onclick="test();">后退一个</a>

<a href="javascript:void(0);" onclick="javascript:history.go(1);">前进一个</a>

</body>

}

Location对象：{

  <script Language="JavaScript">

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>

<a href="javascript:void(0)" onclick="testDelete()">删除</a>

</body>

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

}

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

例如：

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

<html>

  <head>

    <title>testchild.html</title>

 

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

<script type="text/javascript">

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>

<img alt="" src="../../images/23.jpg" height="400px"/>

<hr>

<div align="center">

<input type="text" name="email" id="email"/><br>

<a href="javascript:void(0)" onclick="testMethod()">关闭</a>

</div>

  </body>

</html>

}

<!--EndFragment-->

 

在javascript中添加表格：{

例如：

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

<html>

  <head>

    <title>testtable.html</title>

 

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    

    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

<script type="text/javascript">

/*

 * 添加表格的方法

 * 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>

   <table border="1" id="first">

   <tr>

   <td>

   姓名

   </td>

   <td>

   性别

   </td>

   <td>

   职业

   </td>

   </tr>

   <tr id="second">

   <td>

   李四

   </td>

   <td>

   女

   </td>

   <td>

   美工

   </td>

   </tr>

   </table>

   <input type="button" value="添加用户" onclick="testMethod()">

   <input type="button" value="删除一行" onclick="firstMethod()">

  </body>

</html>

 

 

例2、

<script type="text/javascript">

     /*

      * 利用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>

    <form action="" name="personForm">

     <table align="center" border="1">

     <tr>

     <td>

     姓名 ：

     </td>

     <td>

<input type="text" name="username" id="username"/><span id="usernameError"></span>    

     </td>

     </tr>

     <tr>

     <td>

     性别 ：

     </td>

     <td>

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

     <input type="radio" name="sex" value="1"/>女  <span id="sexError"></span> 

     </td>

     </tr>

     <tr>

     <td>

     生日 ：

     </td>

     <td>

     <input type="text" name="birthday" id="birthday" readonly onClick="WdatePicker()"/>

     <span id="birthdayError"></span> 

     </td>

     </tr>

     <tr>

     <td>

     职业 ：

     </td>

     <td>

     <select name="job" id="job">

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

     <option value="程序员">程序员</option>

     <option value="测试">测试</option>

     <option value="美工">美工</option>

     <option value="经理">经理</option>

     </select>

     <span id="jobError"></span> 

     </td>

     </tr>

     <tr>

     <td>

     </td>

     <td>

     <input type="button" value="添加用户" onclick="checkAll()"/>

     </td>

     </tr>

     </table>

    </form>

<!--EndFragment-->

 

浏览器怎么样区分：{

  <script>

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>

<!--EndFragment-->
分享到：
| javascript应用2
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics