JavaScript基础

时间：2016-07-13 17:33:32 阅读：226 评论：0 收藏：0 [点我收藏+]

标签：

一、初识JavaScript

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。

二、入门JavaScript

一般JavaScript是用于页面的动态效果展示。JavaScript可以在<head>标签中写相应的语句，也可以在<body>中写语句实现功能。

<!DOCTYPE html>
    <html charset=utf-8>
    <head>
        <title></title>
        <script type="text/javascript">
            document.write("第一个JavaScript页面");
        </script>
    </head>
    <body>
        <script type="text/javascript">
            document.write("hello world!");
        </script>
    </body>
    </html>

JavaScript有很多开源框架，由于JavaScript编程灵活多变，基于JavaScript的开源项目很多，优秀的开源框架也有很多，比如jQuery，angularJs，等等。在实际开发中，我们可以在HTML中引入外部的.js文件，前段开发常用的js库有jQuery库，功能强大，容易上手

<head>
<script  type=”text/javascript” src=”.js文件的路径”></script>
<script type="text/javascript" src="../js/demo.js"></script>
</head>

JavaScript代码如果是直接执行放在那里都可以，如果是调用函数，实现页面功能，放在中比较合适。

在JavaScript中变量用var声明，数据类型分为，数值型：如123,1.223；字符型：（在JavaScript中不区分字符和字符串）如‘adaf’,”dsaffg”,”小明”；布尔型：true，false。

变量的声明：

var i = 10;
var str = "asdf";
var f = 1.23;

基本语句

if
for
while
do.......while
switch

函数：javascript中的函数用function关键字来修饰，函数本身是可以用返回值的，但是在声明的时候不需要写返回值类型，如果有返回值就写return，否则就不写。
函数也可以有参数，写参数的时候只写形参的名字就可以了

Function 函数名（[参数1，参数2.。。。。]）｛

｝

<script type="text/javascript">
        var i = fun3(1,2);//调用fun3
        document.write();//写入内容可以输出在页面上
        function fun1(){
            for (var i = 0; i < 10; i++) {
                document.write(i + "<br/>");
            }
        }
        function fun2(a,b){
            document.write(a+b+"<br/>");
        }
        function fun3(a,b){
            return a+b;
        }
    </script>

三大提示框：

alert（“提示内容”）

<script type="text/javascript">
        function fun1() {
            alert("这是一个提示窗口");
        }

        function fun2() {
            if(confirm("您确定删除吗？")) {
                document.write("确定");
            }else {
                document.write("取消");
            }

        }

        function fun3() {
            var a = prompt("请输入内容","请按指定格式输入");
            alert(a);
        }
    </script>
  </head>

  <body>
    <form>
        <p>
            <input type="button" value="alert按钮" onclick="fun1()"/>
        </p>
        <p>
            <input type="button" value="confirm按钮" onclick="fun2()"/>
        </p>
        <p>
            <input type="button" value="prompt按钮" onclick="fun3()"/>
        </p>        
    </form>
  </body>

confirm(“提示内容”)

confirm提示框是不返回值的，当点击确定按钮时返回true,当点击取消按钮时返回false

prompt(“提示内容”)

prompt(“提示内容1”，”提示内容2”);
prompt的返回值是输入的内容

<script type="text/javascript">
        function calculate() {
            var baseprice = document.myform.baseprice.value;
            var num = document.myform.num.value;
            var cost = document.myform.cost.value;
            if(num=="") {
                alert("请输入数量");
            }else {
                document.myform.cost.value = baseprice * num;
                //此语法错误 cost = baseprice * num;
            }


        }
    </script>
  </head>

  <body>
    <h2>Q币充值</h2>
    <form name="myform">
        <input type="image" src="../img/logo.gif"/><br/>
        <input type="image" src="../img/qie.jpg"/><br/>
        单价：<input type="text" value="10" disabled="disabled" name="baseprice"/><br/>
        数量：<input type="text" name="num"/><br/>
        总价：<input type="text" readonly="readonly" name="cost"/><br/>
        <input type="button" value="结算" onclick="calculate()"/>
        <input type="reset"/>

    </form>
  </body>

如何获得标签中的属性的值，document.表单name.标签name.属性
Javascript中的注释和java一样

<script type="text/javascript">
        function calculate() {
            var baseprice = document.myform.baseprice.value;
            var num = document.myform.num.value;
            var cost;
            if(num=="") {
                alert("请输入数量");
            }else {
                cost = baseprice * num;
                if(cost>=3000) {
                    alert("充值金额超过3000，赠送30天QQ会员");
                }else if(cost>=2000) {
                    alert("充值金额超过2000，赠送15天QQ会员");
                }else if(cost>=1000) {
                    alert("充值金额超过1000，赠送7天QQ会员");
                }
                document.myform.cost.value = cost;
                //此语法错误 cost = baseprice * num;
            }


        }
    </script>
  </head>

  <body>
    <h2>Q币充值</h2>
    <form name="myform">
        <input type="image" src="../img/logo.gif"/><br/>
        <input type="image" src="../img/qie.jpg"/><br/>
        单价：<input type="text" value="10" disabled="disabled" name="baseprice"/><br/>
        数量：<input type="text" name="num"/><br/>
        总价：<input type="text" readonly="readonly" name="cost"/><br/>
        <input type="button" value="结算" onclick="calculate()"/>
        <input type="reset"/>

    </form>
  </body>

简易计算器JavaScript实现：

<head>
    <script type="text/javascript">
        function cal() {
            var num1 = document.myform.num1.value;
            var num2 = document.myform.num2.value;
            var se = document.myform.se.value;
            //这里选择也可以使用switch。
            if(se=="+") {
                document.myform.result.value = parseFloat(num1) + parseFloat(num2);
            }else if(se=="-") {
                document.myform.result.value = num1 - num2;
            }else if(se=="*") {
                document.myform.result.value = num1 * num2;
            }else if(se=="/") {
                document.myform.result.value = num1 / num2;
            }
        }
    </script>
  </head>

  <body>
    <form name="myform">
        <input type="text" name="num1"/>
        <select name="se">
            <option value="+">+</option>
            <option value="-">-</option>
            <option value="*">*</option>
            <option value="/">/</option>
        </select>
        <input type="text" name="num2"/>=
        <input type="text" name="result" readonly="readonly"/><br/>
        <input type="button" value="计算" onclick="cal()"/>
        <input type="reset"/>
    </form>
  </body>

三、浏览器对象：

Window、Document、Location、History

Window是javascript中所有对象的根对象，默认在使用的时候可以不直接写出，例如经常使用的alert()

Window.open窗口
格式：Window.open(“url”,”窗口的名字（可以不写）”,”窗口属性的设置”);

‘page.html’ 弹出窗口的文件名；
‘newwindow’ 弹出窗口的名字（不是文件名），非必须，可用空”代替；
height=100 窗口高度；
width=400 窗口宽度；
top=0 窗口距离屏幕上方的象素值；
left=0 窗口距离屏幕左侧的象素值；
toolbar=no 是否显示工具栏，yes为显示；
menubar，scrollbars 表示菜单栏和滚动栏。
resizable=no 是否允许改变窗口大小，yes为允许；
location=no 是否显示地址栏，yes为允许；
status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；

<html>
  <head>
    <title>javascript1.html</title>
    <script type="text/javascript">
        function fun() {
            window.open("adv.html","","width=800,height=150")
        }
    </script>
  </head>

  <body onload="fun()">
    <form>
        <input type="button" value="open窗口" onclick="fun()"/>
    </form>
  </body>
</html>

onload事件写在body中。

<html>
  <head>
    <title>javascript2.html</title>
    <script type="text/javascript">
        function fun(color) {
            document.bgColor = color;
        }
    </script>
  </head>

  <body>
    <a onmouseover="fun(‘red‘)">红色</a>|
    <a onmouseover="fun(‘yellow‘)">黄色</a>|
    <a onmouseover="fun(‘blue‘)">蓝色</a>
  </body>
</html>

document.bgColor设置背景颜色。

<html>
  <head>
    <title>javascript3.html</title>
    <script type="text/javascript">
        function fun() {
            var url = document.myform.se.value;
            location.href = url;
        }
    </script>
  </head>

  <body>
    <form name="myform">
        <select onchange="fun()" name="se">
            <option>--请选择--</option>
            <option value="1.html">第一个页面</option>
            <option value="2.html">第二个页面</option>
        </select>
    </form>
  </body>
</html>

使用location.href实现页面跳转。。。

history.back()后退（等同于history.go(-1)）
history.forward()前进(等同于history.go(1))

实例练习：

<html>
  <head>
    <title>javascript4.html</title>
    <style type="text/css">
        body {
            background-color: #99ffcc;
        }
    </style>
    <script type="text/javascript">
        function validate() {
            var username = document.getElementById("username").value;
            var pwd = document.getElementById("pwd").value;
            var repwd = document.getElementById("repwd").value;
            if(username=="") {
                alert("用户名不能为空！");
            }else if(pwd=="" || repwd=="") {
                alert("密码或确认密码不能为空！");
            }else if(pwd!=repwd) {
                alert("两次输入密码不一致");
            }


        }
    </script>
  </head>

  <body>
    <form action="">
        <table align="center">
            <tr>
                <td colspan="2">
                    <img src="../img/logo1.gif" width="120"/>
                    <img src="../img/reg.gif" width="120"/>
                </td>
            </tr>
            <tr>
                <td>用户名：</td>
                <td>
                    <input type="text" id="username"/>
                </td>
            </tr>
            <tr>
                <td>密码：</td>
                <td>
                    <input type="password" id="pwd"/>
                </td>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td>
                    <input type="password" id="repwd"/>
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="button" value="提交" onclick="validate()"/>
                </td>
            </tr>
        </table>
    </form>
  </body>
</html>

<html>
  <head>
    <title>javascript5.html</title>
    <style type="text/css">
        body {
            background-color: #99ffcc;
        }
    </style>
    <script type="text/javascript">
        function validate() {
            var username = document.getElementById("username").value;
            var pwd = document.getElementById("pwd").value;
            var repwd = document.getElementById("repwd").value;
            var gender = document.getElementsByName("gender");
            if(username=="") {
                alert("用户名不能为空！");
                return false;
            }else if(pwd=="" || repwd=="") {
                alert("密码或确认密码不能为空！");
                return false;
            }else if(pwd!=repwd) {
                alert("两次输入密码不一致");
                return false;
            }else if(!(gender[0].checked || gender[1].checked)) {
                alert("请选择性别！");
                return false;
            }else {
                return true;
            }


        }
    </script>
  </head>

  <body>
    <form action="welcome.html" onsubmit="return validate()">
        <table align="center">
            <tr>
                <td colspan="2">
                    <img src="../img/logo1.gif" width="120"/>
                    <img src="../img/reg.gif" width="120"/>
                </td>
            </tr>
            <tr>
                <td>用户名：</td>
                <td>
                    <input type="text" id="username"/>
                </td>
            </tr>
            <tr>
                <td>密码：</td>
                <td>
                    <input type="password" id="pwd"/>
                </td>
            </tr>
            <tr>
                <td>确认密码：</td>
                <td>
                    <input type="password" id="repwd"/>
                </td>
            </tr>
            <tr>
                <td>性别：</td>
                <td>
                    <input type="radio" name="gender" value="male"/>男
                    <input type="radio" name="gender" value="female"/>女
                </td>
            </tr>
            <tr>
                <td colspan="2" align="center">
                    <input type="submit" value="提交" />
                </td>
            </tr>
        </table>
    </form>
  </body>
</html>

<html>
  <head>
    <title>javascript6.html</title>
    <script type="text/javascript">
        function fun() {
            var str = "";
            if(confirm("您确定已选择好商品了吗？")) {
                var ch = document.getElementsByName("ch");
                for(var i=0;i<ch.length;i++) {
                    if(ch[i].checked) {
                        str += ch[i].value + ",";
                    }
                }
                document.write("您选择的商品是：" + str.substring(0,str.length-1));
            }
        }
    </script>
  </head>

  <body>
    <form action="">
        <table align="center">
            <tr>
                <td colspan="4">
                    <img src="../img/logoe.gif"/>
                </td>
            </tr>
            <tr>
                <td>
                    <img src="../img/logoe1.jpg"/>
                </td>
                <td>
                    <img src="../img/logoe2.jpg"/>
                </td>
                <td>
                    <img src="../img/logoe3.jpg"/>
                </td>
                <td>
                    <img src="../img/logoe4.jpg"/>
                </td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="ch" value="国服金币"/>国服金币
                </td>
                <td>
                    <input type="checkbox" name="ch" value="游戏装备"/>游戏装备
                </td>
                <td>
                    <input type="checkbox" name="ch" value="副本攻略"/>副本攻略
                </td>
                <td>
                    <input type="checkbox" name="ch" value="游戏周边"/>游戏周边
                </td>
            </tr>
            <tr>
                <td align="center" colspan="4">
                    <input type="button" value="确认" onclick="fun()"/>
                </td>
            </tr>
        </table>
    </form>
  </body>
</html>

<html>
  <head>
    <title>javascript7.html</title>
    <script type="text/javascript">
        function del() {
            var se = document.getElementById("se");
            se.remove(se.selectedIndex);
            /*
            for(var i=0;i<se.length;i++) {
                if(se[i].selected) {
                    alert(se[i].text);
                }
            }
            */
        }

        function add() {
            var se = document.getElementById("se");
            var o = new Option();
            o.text = "新水果";
            se.add(o);
        }
    </script>
  </head>

  <body>
    <form action="">
        <select id="se">
            <option>苹果</option>
            <option>香蕉</option>
            <option>桔子</option>
        </select>
        <input type="button" value="增加" onclick="add()"/>
        <input type="button" value="删除" onclick="del()"/>
    </form>
  </body>
</html>

<html>
  <head>
    <title>javascript8.html</title>
  </head>

  <body>
    <form>
        <table align="center" border="1" width="50%"> 
            <tr>
                <td>
                    <input type="checkbox"/>全选
                </td>
                <td>姓名</td>
                <td>性别</td>
                <td>地址</td>
                <td>部门</td>                 
            </tr>
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>Jim</td>
                <td>男</td>
                <td>海淀区万寿路</td>
                <td>营销部</td>                
            </tr>
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>James</td>
                <td>男</td>
                <td>丰台区航天科工大院</td>
                <td>市场部</td>                
            </tr>
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>Lucy</td>
                <td>女</td>
                <td>东城区牛街</td>
                <td>人事部</td>                
            </tr>
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>Lily</td>
                <td>女</td>
                <td>西城区旧鼓楼大街</td>
                <td>市场部</td>                
            </tr>
            <tr>
                <td>
                    <input type="checkbox"/>
                </td>
                <td>Henry</td>
                <td>男</td>
                <td>长安街故宫</td>
                <td>教学部</td>                
            </tr>
        </table>
    </form>
  </body>
</html>

习题1：

<html>
  <head>
    <title>javascript8.html</title>
    <script type="text/javascript">
        function chooseAll() {
            var all = document.getElementById("all");
            var ch = document.getElementsByName("ch");
            for(var i=0;i<ch.length;i++) {
                ch[i].checked = all.checked;
            }
        }
    </script>
  </head>

  <body>
    <form action="">
        <table border="1" width="50%" align="center">
            <tr>
                <td>
                    <input type="checkbox" id="all" onclick="chooseAll()"/>全选
                </td>
                <td>姓名</td>
                <td>性别</td>
                <td>地址</td>
                <td>部门</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="ch"/>
                </td>
                <td>Jim</td>
                <td>男</td>
                <td>海淀区万寿路</td>
                <td>市场部</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="ch"/>
                </td>
                <td>James</td>
                <td>男</td>
                <td>东城区牛街</td>
                <td>财务部</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="ch"/>
                </td>
                <td>Lucy</td>
                <td>女</td>
                <td>西城区旧鼓楼大街</td>
                <td>技术部</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="ch"/>
                </td>
                <td>Lily</td>
                <td>女</td>
                <td>丰台区永定河畔</td>
                <td>财务部</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="ch"/>
                </td>
                <td>Henry</td>
                <td>男</td>
                <td>长安街故宫</td>
                <td>市场部</td>
            </tr>
        </table>
    </form>
  </body>
</html>

习题2：

<html>
  <head>
    <title>homework2.html</title>
    <script type="text/javascript">
        function del() {
            var se = document.getElementById("se");
            if(se.length>0 && se.selectedIndex!=-1) {
                se.remove(se.selectedIndex);
            }

        }

        function add() {
            var se = document.getElementById("se");
            var fruit = document.getElementById("fruit").value;
            var o = new Option();
            o.text = fruit;
            var flag = true;
            for(var i=0;i<se.length;i++) {
                if(se[i].text==fruit) {
                    flag = false;
                }
            }
            if(flag) {
                se.add(o);
            }
        }
    </script>
  </head>

  <body>
    <form action="">
        <select multiple="multiple" id="se">
            <option>苹果</option>
            <option>桔子</option>
        </select>
        <input type="button" value="删除一个水果" onclick="del()"/>
        <input type="text" id="fruit"/>
        <input type="button" value="增加一个水果" onclick="add()"/>
    </form>
  </body>
</html>

习题3：

<html>
  <head>
    <title>homework3.html</title>
    <script type="text/javascript">
        function add() {
            var s1 = document.getElementById("s1");
            var s2 = document.getElementById("s2");
            var o = new Option();
            o.text = s1[s1.selectedIndex].text;
            if(s2.length==0) {
                s2.add(o);
            }else {
                var flag = true;
                for(var i=0;i<s2.length;i++) {
                    if(s2[i].text==o.text) {
                        flag = false;
                    }
                }
                if(flag) {
                    s2.add(o);
                }
            }
        }

        function del() {
            var s2 = document.getElementById("s2");
            if(s2.length>0 && s2.selectedIndex!=-1) {
                s2.remove(s2.selectedIndex);
            }
        }
    </script>
  </head>

  <body>
    <form action="">
        <table align="center">
            <tr>
                <td>
                    <select id="s1" multiple="multiple" style="width: 200;height:150">
                        <option>美元/英镑</option>
                        <option>美元/港币</option>
                        <option>美元/新加坡元</option>
                        <option>美元/日元</option>
                        <option>美元/加拿大元</option>
                        <option>美元/欧元</option>
                    </select>
                </td>
                <td>
                    <input type="button" value="增加" onclick="add()"/><br/>
                    <input type="button" value="删除" onclick="del()"/>
                </td>
                <td>
                    <select id="s2" multiple="multiple" style="width: 200;height:150"></select>
                </td>
            </tr>
        </table>
    </form>
  </body>
</html>

设置标签样式中的display，可以将标签设置成隐藏和显示，当值为none的时候是隐藏，当值为inline的时候是显示

<html>
  <head>
    <title>javascript8.html</title>
    <script type="text/javascript">
        function chooseAll() {
            var all = document.getElementById("all");
            var ch = document.getElementsByName("ch");
            for(var i=0;i<ch.length;i++) {
                ch[i].checked = all.checked;
            }
        }

        function fun1() {
            var ta = document.getElementById("ta");
            ta.style.display = "none";
        }

        function fun2() {
            var ta = document.getElementById("ta");
            ta.style.display = "inline";
        }

        function add() {
            location.href = "addPerson.html";
        }
    </script>
  </head>

  <body>
    <form action="">
        <table border="1" width="50%" align="center" id="ta" >
            <tr>
                <td>
                    <input type="checkbox" id="all" onclick="chooseAll()"/>全选
                </td>
                <td>姓名</td>
                <td>性别</td>
                <td>地址</td>
                <td>部门</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="ch"/>
                </td>
                <td>Jim</td>
                <td>男</td>
                <td>海淀区万寿路</td>
                <td>市场部</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="ch"/>
                </td>
                <td>James</td>
                <td>男</td>
                <td>东城区牛街</td>
                <td>财务部</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="ch"/>
                </td>
                <td>Lucy</td>
                <td>女</td>
                <td>西城区旧鼓楼大街</td>
                <td>技术部</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="ch"/>
                </td>
                <td>Lily</td>
                <td>女</td>
                <td>丰台区永定河畔</td>
                <td>财务部</td>
            </tr>
            <tr>
                <td>
                    <input type="checkbox" name="ch"/>
                </td>
                <td>Henry</td>
                <td>男</td>
                <td>长安街故宫</td>
                <td>市场部</td>
            </tr>
            <tr>
                <td colspan="5">
                    <input type="button" value="增加" onclick="add()"/>
                </td>
            </tr> 
        </table><br/>
        <input type="button" value="隐藏" onclick="fun1()"/>
        <input type="button" value="显示" onclick="fun2()"/>
    </form>
  </body>
</html>

<html>
  <head>
    <title>addPerson.html</title>
    <script type="text/javascript">
        function chooseDept() {
            window.open("chooseDept.html","","width=100,height=200");
        }

        function setValue(element) {
            var dept = document.getElementById("dept");
            dept.value = element;
        }
    </script>
  </head>

  <body>
    <form action="">
        <table>
            <tr>
                <td>姓名：</td>
                <td>
                    <input type="text"/>
                </td>
            </tr>
            <tr>
                <td>性别：</td>
                <td>
                    <input type="radio" name="gender"/>男
                    <input type="radio" name="gender"/>女
                </td>
            </tr>
            <tr>
                <td>地址：</td>
                <td>
                    <input type="text"/>
                </td>
            </tr>
            <tr>
                <td>部门：</td>
                <td>
                    <input type="text" id="dept" readonly="readonly"/>
                    <input type="button" value="选择部门"  onclick="chooseDept()"/>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="button" value="确定"/>
                </td>
            </tr>
        </table>
    </form>
  </body>
</html>

<html>
  <head>
    <title>chooseDept.html</title>
    <script type="text/javascript">
        function sure() {
            var dept = document.getElementsByName("dept");
            for(var i=0;i<dept.length;i++) {
                if(dept[i].checked) {
                    window.opener.setValue(dept[i].value);//在页面调用父页面的setValue函数
                    window.close();
                }
            }
        }
    </script>
  </head>

  <body>
    <form>
        <table border="1">
            <tr>
                <td>选择</td>
                <td>部门名称</td>
            </tr>
            <tr>
                <td>
                    <input type="radio" name="dept" value="市场部"/>
                </td>
                <td>市场部</td>
            </tr>
            <tr>
                <td>
                    <input type="radio" name="dept" value="营销部"/>
                </td>
                <td>营销部</td>
            </tr>
            <tr>
                <td>
                    <input type="radio" name="dept" value="人事部"/>
                </td>
                <td>人事部</td>
            </tr>
            <tr>
                <td>
                    <input type="radio" name="dept" value="财务部"/>
                </td>
                <td>财务部</td>
            </tr>
            <tr>
                <td>
                    <input type="radio" name="dept" value="研发部"/>
                </td>
                <td>研发部</td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="button" value="确定" onclick="sure()"/>
                </td>
            </tr>
        </table>
    </form>
  </body>
</html>

Open窗口父子页面传值，采用子页面调用父页面函数的方式传值，形式如下：
在子页面中这样调用 window.opener.父页面函数，如果要传值的话，被调用的父页面的函数一定要有参数

成对儿的标签中间夹的那部份内容叫做innerHTML

<html>
  <head>
    <title>javascript2.html</title>
    <script type="text/javascript">
        function fun() {
            var p = document.getElementById("p");
            var dv = document.getElementById("dv");
            p.innerHTML = "这是一个p标签";
            dv.innerHTML = "这是一个dv标签";
        }
    </script>
  </head>

  <body>
    <p id="p">P</p>
    <div id="dv">dv</div><br/>
    <input type="button" value="innerHTML按钮" onclick="fun()"/>
  </body>
</html>

动态增加删除表格：
insertRow()增加一行
insertCell()增加一列
deleteRow()删除一行

<html>
  <head>
    <title>javascript3.html</title>
    <script type="text/javascript">
        function add() {
            var ta = document.getElementById("ta");
            var row = ta.insertRow();
            row.insertCell().innerHTML = "<input type=‘radio‘ name=‘r‘/>";
            row.insertCell().innerHTML = "<input type=‘text‘/>";
            row.insertCell().innerHTML = "<select><option>电话</option><option>SMS</option><option>Email</option></select>";

        }

        function del() {
            var r = document.getElementsByName("r");
            var ta = document.getElementById("ta");
            for(var i=0;i<r.length;i++) {
                if(r[i].checked) {
                    ta.deleteRow(i+1);
                    break;
                }
            }
        }
    </script>
  </head>

  <body>
    <form action="">
        <table id="ta" border="1">
            <tr>
                <td>选择</td>
                <td>顺序</td>
                <td>回复方式</td>
            </tr>
        </table>
        <input type="button" value="增加" onclick="add()"/>
        <input type="button" value="删除" onclick="del()"/>
    </form>
  </body>
</html>

<html>
  <head>
    <title>javascript4.html</title>
    <script type="text/javascript">
        function fun1() {
            var myform = document.getElementById("myform");
            myform.submit();
        }
        function fun2() {
            if(event.keyCode==13) {
                var myform = document.getElementById("myform");
                myform.submit();
            }
        }
    </script>
  </head>

  <body>
    <form action="welcome.html" id="myform">
        用户名：<input type="text"/><br/>
        密码：<input type="password" onkeydown="fun2()"/><br/>
        <input type="button" value="提交" onclick="fun1()"/>
    </form>
  </body>
</html>

<html>
  <head>
    <title>welcome.html</title>
  </head>

  <body>
    <h1>欢迎登录！</h1>
  </body>
</html>

JavaScript基础

标签：

原文地址：http://blog.csdn.net/shmilychan/article/details/51882653

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行