【Javascript】三、基础

最新推荐文章于 2024-08-19 15:26:06 发布
最新推荐文章于 2024-08-19 15:26:06 发布
阅读量987 收藏
点赞数
分类专栏： Javascript 文章标签： javascript

1、函数的定义与调用

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
<html>  
   <head>  
   <!-- 函数的定义与调用 -->  
     <script type="text/javascript">  
       function f1(){  
         alert("hello javascript!!");  
       }  
       
     </script>  
   </head>   
     
   <body>  
      <a href="#" οnclick="f1()">click me</a>  
   </body>  
</html>


2、变量的定义与使用

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
<!-- 变量的定义与使用 -->  
<html>  
   <head>  
     <script type="text/javascript">  
       function f2(){  
           var a = 100;  
           //a = '100';  
             
           alert(typeof a);//打印变量的类型  
       }  
     </script>  
   </head>  
  
   <body>  
     <a href="" οnclick="f2()">click me</a>  
   </body>  
</html>

3、比较运算符的使用

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
<!-- 比较运算符的使用-->  
  
  
<html>  
 <head>  
   <script type="text/javascript">  
      function f3(){  
       /**  
          == 比较的是看值是否相等  
       */  
        var str1 = '123';  
        var str2 = '123';  
          
        if(str1 == str2){  
           alert("str1 is equal to str2");  
        }  
          
        var a = 123;  
        var b = '123';  
        if(a == b){  
          alert("a is equal to b");  
        }else{  
          alert("a is not equal b");  
        }  
          
          
        /*  
                        ===  先判断的是类型是否相等,然后在判断值是否相等  
        */  
        var i1 = 123;  
        var s2 = '123';  
          
        if(i1 === s2){  
          alert("i1 is equal to s2");  
        }else{  
          alert("i1 is not equal to s2");  
        }  
      }  
   </script>  
 </head>   
  
 <body>  
   <a href="" οnclick="f3()">click me</a>  
   
 </body>  
</html>

4、变量的类型


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
  
<html>  
 <head>  
   <script type="text/javascript">  
      function f4(){  
       //var a = null;  
       alert(typeof null);//null 的类型是object  
         
       var a;  
       alert(typeof a);//一个变量如果只声明,但是不赋值,那么它的类型还是undefined  
       }  
   </script>  
 </head>   
  
 <body>  
   <a href="" οnclick="f4()">click me</a>  
   
 </body>  
</html>


5、if()语句里面的判断逻辑


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
  
<html>  
 <head>  
   <script type="text/javascript">  
      function f5(){  
        /*  
           需要注意的是if()语句里面的判断逻辑:  
        1)非空字符串、不为0的字符串都是true  
        2)null、undefined 为false  
        */  
        //var flag = 'hello';  
        //var flag = '';  
        //var flag = 12;  
        //var flag = 0;  
        var flag = null;  
          
        if(flag){  
          alert(true);  
        }else{  
          alert(false);  
        }  
        
      }  
   </script>  
 </head>   
  
 <body>  
   <a href="" οnclick="f5()">click me</a>  
   
 </body>  
</html>


6、类型转换


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
<!-- 类型转换 -->  
<html>  
 <head>  
   <script type="text/javascript">  
      function f6(){  
         /*  
           string ---> number  
                             主要是通过以下几个函数:  
           parseInt(str),  
           parseFloat(str),  
           isNaN(str);  
         */  
           
         /*  
         var s = '123';  
         var s1 = parseInt(s) + 100;//parseInt(s),把s当成整数进行解析  
         alert(typeof s1 + ' : ' + s1);  //最后s1的值为223  
  
            
         */  
           
         /*  
         var s = '125.04';  
         var s1 = parseInt(s) + 100;  
         alert(typeof s1 + ' : ' + s1);  
           
         这时候打印出来的结果是225  
         */  
           
         /*  
         var s = '125.04';  
         var s1 = parseFloat(s) + 100;  
         alert(typeof s1 + ' : ' + s1);//这时候返回的结果是225.0000004  
         */  
           
         var s = '125a';  
         if(isNaN(s)){//isNaN(s) : 判断字符串s是否只一个数字  
           alert('s不是一个数字');   
         }else{  
           alert('s是一个数字');  
         }  
           
      }  
   </script>  
 </head>   
  
 <body>  
   <a href="" οnclick="f6()">click me</a>  
   
 </body>  
</html>


7、类型转换


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
<!-- 类型转换 -->  
<html>  
 <head>  
   <script type="text/javascript">  
     /*  
      number ---> string  
               主要是通过: .toString()来实现的  
     */  
     function f7(){  
        var n1 = 123;  
        var s1 = n1.toString();//js在执行时,会自动将number类型转换成其对应的包装类型Number,然后调用相应的方法  
        alert(typeof s1 + ' : ' + s1);  
        alert(s1+100);   
     }  
   </script>  
 </head>   
  
 <body>  
   <a href="" οnclick="f7()">click me</a>  
   
 </body>  
</html>


8、字符串的常用属性和方法


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
<!-- 字符串的常用属性和方法-->  
<html>  
 <head>  
   <script type="text/javascript">  
     function f8(){  
        var str = 'abcde';  
        alert(str.length); //str.length: 获取字符串的长度  
        alert(str.substring(1,3));//[1,3) ,索引从0开始  
          
          
     }  
   </script>  
 </head>   
  
 <body>  
   <a href="" οnclick="f8()">click me</a>  
   
 </body>  
</html>


9、字符串中正则表达式的几个应用


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
<!-- 字符串中正则表达式的几个应用-->  
<html>  
 <head>  
   <script type="text/javascript">  
     function f8(){  
        var str = 'abc12de12345asfasd1234';  
        var reg = /[0-9]+/g;  
        //alert(typeof reg); JS在执行时,会把/[0-9]+/g转换成一个RegExp对象,g表示搜索整个字符串,i表示忽略大小写  
          
        //alert(str.match(reg));//输出的结果是12,12345,1234  
          
        var reg2 = /[0-9]+/;  
        //alert(str.search(reg2));//返回第一次匹配的索引  
          
        alert(str.replace(reg,'888'));//将str中符合reg规则的字符串都转换成888  
          
     }  
   </script>  
 </head>   
  
 <body>  
   <a href="" οnclick="f8()">click me</a>  
   
 </body>  
</html>


10、一维数组创建与使用


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
<!-- 一为数组创建与使用-->  
<html>  
 <head>  
   <script type="text/javascript">  
     function f10(){  
        //第一种创建数组的方式: 使用 new Array()  
        var arr = new Array();  
        arr[0] = 1;  
        arr[2] = '1bc';  
        arr[10] = 'haha';  
        //alert(arr.length); //输出 11  
        //alert(arr[9] + ' , ' + arr[10]); //输出的结果是undefined , haha  
          
        var arr1 = [];  
        arr1[3] = 2;  
        //alert('arr2.length: ' + arr1.length);//输出结果: 4  
          
        var arr2 = [1,false,'abs'];  
        arr2[5] = 'helloworld';  
        alert('arr2.length: ' + arr2.length);//输出结果: 6  
        alert(arr2[5]);//输出结果: helloworld  
          
     }  
   </script>  
 </head>   
  
 <body>  
   <a href="" οnclick="f10()">click me</a>  
   
 </body>  
</html>


11、二维数组创建与使用


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
<!-- 二维数组创建与使用-->  
<html>  
    <head>  
        <script type="text/javascript">  
function f11() {  
    var arr = new Array();//二维数组的定义.注意这里写成new Array也是可以的(即省略Array后面的小括号)  
    arr[0] = [ 1, 11, 111 ];  
    arr[1] = [ 2, 3, 4, 5 ];  
    arr[2] = [ 6, 7, 8, 9, 10, 11 ];  
  
    for ( var i = 0; i < arr.length; ++i) {  
        for ( var j = 0; j < arr[i].length; ++j) {  
            alert(arr[i][j]);  
        }  
    }  
}  
  
</script>  
    </head>  
  
    <body>  
        <a href="" οnclick="f11()">click me</a>  
  
    </body>  
</html>


12、数组的常用方法


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
<!-- 数组的常用方法-->  
<html>  
    <head>  
        <script type="text/javascript">  
function f12() {  
    var arr = ['b','c','a','d'];  
    //alert(arr.toString());//输出b,c,d,a  
    //alert(arr);//结果和上面是一样的  
      
    var arr1 = ['1','3','2','4'];  
    //alert(arr.concat(arr1));//b,c,a,d,1,3,2,4  
      
    //alert(arr1);//1,3,2,4  
    //alert(arr1.reverse());//4,2,3,1  
      
    //alert(arr1.join('|'));//1|3|2|4  
      
    //alert(arr1.slice(1,4));//输出数组中的[1,4)的元素  
      
    var arr2 = [111,22,3,99,100];  
    //alert(arr2.sort());//默认按照字典序进行排序  
      
    alert(arr2.sort(function(t1,t2){//这时候从大到小进行排序.所传的对象是函数对象  
         return t2-t1;  
    }))  
      
}  
  
</script>  
    </head>  
  
    <body>  
        <a href="" οnclick="f12()">click me</a>  
  
    </body>  
</html>


13、全部变量与局部变量


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
<html>  
    <head>  
        <script type="text/javascript">  
<!-- 全部变量与局部变量-->  
        var i = 100;  
function f13() {  
    var i = 1000;  
    alert(i);  
}  
  
</script>  
    </head>  
  
    <body>  
        <a href="" οnclick="f13()">click me</a>  
  
    </body>  
</html>


14、dom操作(重点):查找方式，创建节点，添加节点，删除节点，改变样式


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
<html>  
    <head>  
    <!--   
    dom操作(重点)  
    查找方式  
    创建节点  
    添加节点  
    删除节点  
    改变样式  
     -->  
       
<script type="text/javascript">  
          
        function f14(){  
           var obj = document.getElementById('d1');  
           //alert(obj.innerHTML);//通过innerHTML可以读写一个节点的html内容  
           obj.innerHTML='i love zzt';  
        }  
          
</script>  
    </head>  
  
    <body>  
        <a href="javascript:;" οnclick="f14()">click me</a><!-- 这里需要注意的是href="javascript:;"不能写成href="" ,否则什么值不会发生改变.|||  ”Javascript : ;“ 表示一个空白的JS语句 -->  
           
        <div id="d1">  
          <span>hello javascript</span>  
        </div>   
    </body>  
</html>


15、改变文本框的内容


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
<html>  
    <head>  
    <!--   
    dom操作(重点)  
    查找方式  
    创建节点  
    添加节点  
    删除节点  
    改变样式  
     -->  
       
     <!-- 改变文本框的内容 -->  
<script type="text/javascript">  
        function f15(){  
           var obj = document.getElementById('username');  
           alert(obj.value);//通过value属性可以读写一个节点的value值  
           obj.value = 'i love zzt';  
        }  
          
          
</script>  
    </head>  
  
    <body>  
        <input id="username" type="text"/>   
        <a href="javascript:;" οnclick="f15()">click me</a><!-- 这里需要注意的是href="javascript:;"不能写成href="" ,否则什么值不会发生改变.|||  ”Javascript : ;“ 表示一个空白的JS语句 -->  
           
         
    </body>  
</html>


16、使用js实现求解两数之和


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
<html>  
    <head>  
    <!--   
    dom操作(重点)  
    查找方式  
    创建节点  
    添加节点  
    删除节点  
    改变样式  
     -->  
       
     <!-- 使用js实现求解两数之和 -->  
<script type="text/javascript">  
        function f16(){  
           var opp1 = document.getElementById('opp1');  
           var opp2 = document.getElementById('opp2');  
           var result = document.getElementById('result');  
             
           var o1 = parseInt(opp1.value);  
           var o2 = parseInt(opp2.value);  
           result.value = o1+o2;  
        }  
          
          
</script>  
    </head>  
  
    <body>  
        <input id="opp1" type="text"/>  
        <input id="opp2" type="text"/>  
        <input id="result" type="text"/>   
          
        <a href="javascript:;" οnclick="f16()">click me</a><!-- 这里需要注意的是href="javascript:;"不能写成href="" ,否则什么值不会发生改变.|||  ”Javascript : ;“ 表示一个空白的JS语句 -->  
           
         
    </body>  
</html>


17、使用js实现求解两数之和


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
<html>  
    <head>  
    <!--   
    dom操作(重点)  
    查找方式  
    创建节点  
    添加节点  
    删除节点  
    改变样式  
     -->  
       
     <!-- 使用js实现求解两数之和 -->  
<script type="text/javascript">  
        function f17(){  
           var opp1 = Math.random();//产生[0,1)的随机数  
           var opp2 = Math.floor(13.68);//向下取整. 13  
           var opp3 = Math.ceil(13.68);//向上取整 14  
           Math.c  
           alert(opp1);  
           alert(opp2);  
           alert(opp3);  
           alert(Math.random() * 33);  
        }  
          
          
</script>  
    </head>  
  
    <body>  
          
        <a href="javascript:;" οnclick="f17()">click me</a><!-- 这里需要注意的是href="javascript:;"不能写成href="" ,否则什么值不会发生改变.|||  ”Javascript : ;“ 表示一个空白的JS语句 -->  
           
         
    </body>  
</html>


18、单击项显示特定颜色，其他项显示同一颜色


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
  
<head>  
    <style>  
ul {  
    list-style-type: none;  
}  
  
ul li {  
    float: left;  
    width: 120px;  
    height: 40px;  
    border: 1px solid black;  
    margin-left: 20px;  
    text-align: center;  
    cursor: pointer;  
}  
</style>  
    <script type="text/javascript">  
    /*  
         单击项显示特定颜色，其他项显示同一颜色。  
    实现思路 ：  
  先把父元素下的所有子元素的原色设置成同一颜色，  
  然后再修改特定子元素的颜色         
    */  
     function doAction(id){  
        var obj = document.getElementById('u1');  
        var arr = obj.getElementsByTagName('li');  
          
        for(var i = 0 ; i < arr.length ; ++i){  
            arr[i].style.backgroundColor='#ff88ee';//style.backgroundColor编译器没有提示  
        }  
          
        var obj1 = document.getElementById(id);  
        obj1.style.backgroundColor='red';  
     }  
      
    </script>  
</head>  
<body style="font-size: 30px;">  
    <ul id="u1">  
        <!-- 内联样式-->  
        <li style="background-color: #ff88ee;" id="l1"  
            οnclick="doAction('l1');">  
            选项一  
        </li>  
        <li style="background-color: #ff88ee;" id="l2"  
            οnclick="doAction('l2');">  
            选项二  
        </li>  
        <li style="background-color: #ff88ee;" id="l3"  
            οnclick="doAction('l3');">  
            选项三  
        </li>  
    </ul>  
</body>  
</html>


19、用户名不能为空


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
<html>  
  <head>  
    <style type="text/css">  
       #d1{  
          width: 400px;  
          height: 250px;  
          background-color: #FFE4B5;  
          margin: 40px auto;  
       }  
       
       #d1_head{  
          color: white;  
          font-size: 20px;  
          font-family: "Arial";  
          height: 24px;  
          background-color: blue;  
       }  
         
       #d1_content{  
          padding-left: 30px;  
          padding-top: 30px;  
       }  
         
       .s1{  
          color: red;  
          font-style: italic;     
       }  
         
       .s2{  
          border: 2px dotted blue;    
       }  
    </style>  
      
    <script type="text/javascript">  
    /*  
                   用户名不能为空  
    */  
      function check_username(){  
         var usernameObj = document.getElementById('username');  
         var usernameMsgObj = document.getElementById('username_msg');  
           
         usernameObj.className = '';//这两行的作用在于每次进行处理之前先清空之前的效果. 如用户第二次输入合法  
         usernameMsgObj.innerHTML = '';  
           
         if(usernameObj.value.length == 0){  
           usernameMsgObj.innerHTML = '用户名不能为空';  
           usernameObj.className = 's2';  
         }  
      }  
    </script>  
      
  </head>  
  
<body>  
    <div id="d1">  
        <div id="d1_head">注册</div>  
          
        <div id="d1_content">  
            <form>  
                <table>  
                    <tr>  
                        <td>用户名</td>  
                        <td>  
                            <input id="username" name="username" οnblur="check_username()"/>  
                            <span id="username_msg" class="s1" ></span>  
                        </td>  
                    </tr>  
                      
                    <tr>  
                        <td>密码</td>  
                        <td>  
                            <input id="pwd" name="pwd" />  
                            <span id="pwd_msg" class="s1" ></span>  
                        </td>  
                    </tr>  
                      
                    <tr>  
                        <td colspan="2">  
                            <input type="submit" value="确认"/>  
                            <input type="reset" value="重置"/>  
                        </td>  
                    </tr>  
                </table>  
            </form>  
        </div>    
    </div>  
</body>  
</html>


20、禁止浏览器的默认行为（数据不规范则不能提交）


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
<html>  
  <head>  
    <style type="text/css">  
       #d1{  
          width: 400px;  
          height: 250px;  
          background-color: #FFE4B5;  
          margin: 40px auto;  
       }  
       
       #d1_head{  
          color: white;  
          font-size: 20px;  
          font-family: "Arial";  
          height: 24px;  
          background-color: blue;  
       }  
         
       #d1_content{  
          padding-left: 30px;  
          padding-top: 30px;  
       }  
         
       .s1{  
          color: red;  
          font-style: italic;     
       }  
         
       .s2{  
          border: 2px dotted blue;    
       }  
    </style>  
      
    <script type="text/javascript">  
    /*  
                   禁止浏览器的默认行为(数据不规范则不能提交)  
    */  
      function check_username(){  
         var usernameObj = document.getElementById('username');  
         var usernameMsgObj = document.getElementById('username_msg');  
           
         usernameObj.className = '';//这两行的作用在于每次进行处理之前先清空之前的效果. 如用户第二次输入合法  
         usernameMsgObj.innerHTML = '';  
           
         if(usernameObj.value.length == 0){  
           usernameMsgObj.innerHTML = '用户名不能为空';  
           usernameObj.className = 's2';  
             
           return false;  
         }  
           
         return true;  
      }  
        
      function check_form(){  
         var flag = check_username();  
         return flag;  
      }  
    </script>  
      
  </head>  
  
<body>  
    <div id="d1">  
        <div id="d1_head">注册</div>  
          
        <div id="d1_content">  
            <form οnsubmit="return check_form()">  
                <table>  
                    <tr>  
                        <td>用户名</td>  
                        <td>  
                            <input id="username" name="username" οnblur="check_username()"/>  
                            <span id="username_msg" class="s1" ></span>  
                        </td>  
                    </tr>  
                      
                    <tr>  
                        <td>密码</td>  
                        <td>  
                            <input id="pwd" name="pwd" />  
                            <span id="pwd_msg" class="s1" ></span>  
                        </td>  
                    </tr>  
                      
                    <tr>  
                        <td colspan="2">  
                            <input type="submit" value="确认"/>  
                            <input type="reset" value="重置"/>  
                        </td>  
                    </tr>  
                </table>  
            </form>  
        </div>    
    </div>  
</body>  
</html>


21、禁止浏览器的默认行为（数据不规范则不能提交）


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
<html>  
  <head>  
    <style type="text/css">  
       #d1{  
          width: 400px;  
          height: 250px;  
          background-color: #FFE4B5;  
          margin: 40px auto;  
       }  
       
       #d1_head{  
          color: white;  
          font-size: 20px;  
          font-family: "Arial";  
          height: 24px;  
          background-color: blue;  
       }  
         
       #d1_content{  
          padding-left: 30px;  
          padding-top: 30px;  
       }  
         
       .s1{  
          color: red;  
          font-style: italic;     
       }  
         
       .s2{  
          border: 2px dotted blue;    
       }  
    </style>  
      
    <script type="text/javascript">  
    /*  
                   禁止浏览器的默认行为(数据不规范则不能提交)  
    */  
      function check_username(){  
         var usernameObj = document.getElementById('username');  
         var usernameMsgObj = document.getElementById('username_msg');  
           
         usernameObj.className = '';//这两行的作用在于每次进行处理之前先清空之前的效果. 如用户第二次输入合法  
         usernameMsgObj.innerHTML = '';  
           
         if(usernameObj.value.length == 0){  
           usernameMsgObj.innerHTML = '用户名不能为空';  
           usernameObj.className = 's2';  
             
           return false;  
         }  
           
         return true;  
      }  
        
      /*  
      正则表达式在JS中的使用  
      */  
      function check_pwd(){  
         var pwdObj = document.getElementById('pwd');  
         var pwdMsgObj = document.getElementById('pwd_msg');  
           
         pwdObj.className = '';  
         pwdMsgObj.innerHTML = '';  
           
         var reg = /^\d{6}$/  
         if(!reg.test(pwdObj.value)){  
            pwdObj.className = 's2';  
            pwdMsgObj.innerHTML = '密码必须是6位数字';  
              
            return false;  
         }  
           
         return true;  
      }  
        
      function check_form(){  
         var flag = check_username() && check_pwd();  
         return flag;  
      }  
    </script>  
      
  </head>  
  
<body>  
    <div id="d1">  
        <div id="d1_head">注册</div>  
          
        <div id="d1_content">  
            <form οnsubmit="return check_form()">  
                <table>  
                    <tr>  
                        <td>用户名</td>  
                        <td>  
                            <input id="username" name="username" οnblur="check_username()"/>  
                            <span id="username_msg" class="s1" ></span>  
                        </td>  
                    </tr>  
                      
                    <tr>  
                        <td>密码</td>  
                        <td>  
                            <input id="pwd" name="pwd" οnblur="check_pwd()"/>  
                            <span id="pwd_msg" class="s1"></span>  
                        </td>  
                    </tr>  
                      
                    <tr>  
                        <td colspan="2">  
                            <input type="submit" value="确认"/>  
                            <input type="reset" value="重置"/>  
                        </td>  
                    </tr>  
                </table>  
            </form>  
        </div>    
    </div>  
</body>  
</html>


22、创建节点与添加节点（1）


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
  
<html>  
 <head>  
   <script type="text/javascript">  
   /*  
   创建节点与添加节点(1)  
   */  
     function f5(){  
       var obj = document.createElement('div');  
       obj.innerHTML = 'I love 章泽天';  
         
       var buttonObj = document.getElementById('bu1');  
       buttonObj.appendChild(obj);  
         
         
     }  
   </script>  
 </head>  
   
  <body style="font-size: 30px;" id="b1">  
    <input id="bu1" type="button" value="Click" οnclick="f5()"/>  
  </body>  
</html>


23、创建节点与添加节点（2）


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
  
<html>  
 <head>  
 <style type="text/css">  
  .tips{  
    width:200px;  
    height: 80px;  
    background-color: red;  
  }  
 </style>  
   
   <script type="text/javascript">  
   /*  
   创建节点与添加节点(2)  
   */  
     function f6(){  
       var divObj = document.createElement('div');  
       divObj.className='tips';  
       divObj.innerHTML='章泽天 LOVE ME';  
         
       var bodyObj = document.getElementById('b1');  
       var buttonObj = document.getElementById('bu1');  
         
       bodyObj.insertBefore(divObj,buttonObj);  
     }  
   </script>  
 </head>  
   
  <body style="font-size: 30px;" id="b1">  
    <input id="bu1" type="button" value="Click" οnclick="f6()"/>  
  </body>  
</html>


24、引入外部Js


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
  
<html>  
 <head>  
 <style type="text/css">  
  .tips{  
    width:200px;  
    height: 80px;  
    background-color: red;  
  }  
 </style>  
   
   
 <script src="myjs.js"></script>  
   <script type="text/javascript">  
   /*  
   引入外部的JS  
   */  
     function f6(){  
       var divObj = document.createElement('div');  
       divObj.className='tips';  
       divObj.innerHTML='章泽天 LOVE ME';  
         
       var bodyObj = $('b1');  
       var buttonObj = $('bu1');  
         
       bodyObj.insertBefore(divObj,buttonObj);  
     }  
   </script>  
 </head>  
   
  <body style="font-size: 30px;" id="b1">  
    <input id="bu1" type="button" value="Click" οnclick="f6()"/>  
  </body>  
</html>


25、用户名不能为空（使用prototype实现）


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
<html>  
  <head>  
    <style type="text/css">  
       #d1{  
          width: 400px;  
          height: 250px;  
          background-color: #FFE4B5;  
          margin: 40px auto;  
       }  
       
       #d1_head{  
          color: white;  
          font-size: 20px;  
          font-family: "Arial";  
          height: 24px;  
          background-color: blue;  
       }  
         
       #d1_content{  
          padding-left: 30px;  
          padding-top: 30px;  
       }  
         
       .s1{  
          color: red;  
          font-style: italic;     
       }  
         
       .s2{  
          border: 2px dotted blue;    
       }  
    </style>  
      
    <script src="prototype-1.6.0.3.js"></script>  
      
    <script type="text/javascript">  
    /*  
                   用户名不能为空(使用prototype实现)  
    */  
      function check_username(){  
         var usernameObj = $('username');  
         var usernameMsgObj = $('username_msg');  
           
         usernameObj.className = '';  
         usernameMsgObj.innerHTML = '';  
           
         if($F('username').strip().length == 0){  
            usernameMsgObj.innerHTML = '用户名不能为空';  
            usernameObj.className = 's2';  
         }  
      }  
    </script>  
      
  </head>  
  
<body>  
    <div id="d1">  
        <div id="d1_head">注册</div>  
          
        <div id="d1_content">  
            <form>  
                <table>  
                    <tr>  
                        <td>用户名</td>  
                        <td>  
                            <input id="username" name="username" οnblur="check_username()"/>  
                            <span id="username_msg" class="s1" ></span>  
                        </td>  
                    </tr>  
                      
                    <tr>  
                        <td>密码</td>  
                        <td>  
                            <input id="pwd" name="pwd" />  
                            <span id="pwd_msg" class="s1" ></span>  
                        </td>  
                    </tr>  
                      
                    <tr>  
                        <td colspan="2">  
                            <input type="submit" value="确认"/>  
                            <input type="reset" value="重置"/>  
                        </td>  
                    </tr>  
                </table>  
            </form>  
        </div>    
    </div>  
</body>  
</html>


26、创建节点与添加节点：练习


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
  
<html>  
 <head>  
   <script type="text/javascript">  
   /*  
   创建节点与添加节点:练习  
   */  
     function f9(){  
        var aObj = document.getElementById('a1');  
        var divObj = document.createElement('div');  
        divObj.innerHTML='章泽天也喜欢黄俊东';  
          
        aObj.appendChild(divObj);  
     }  
   </script>  
 </head>  
   
  <body style="font-size: 30px;" id="b1">  
    <a href="javascript:;" οnclick="f9()" id="a1">我喜欢章泽天</a>  
  </body>  
</html>


27、练习一：使用prototype进行表单验证


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
<html>  
  <head>  
    <style type="text/css">  
       #d1{  
          width: 400px;  
          height: 250px;  
          background-color: #FFE4B5;  
          margin: 40px auto;  
       }  
       
       #d1_head{  
          color: white;  
          font-size: 20px;  
          font-family: "Arial";  
          height: 24px;  
          background-color: blue;  
       }  
         
       #d1_content{  
          padding-left: 30px;  
          padding-top: 30px;  
       }  
         
       .s1{  
          color: red;  
          font-style: italic;     
       }  
         
       .s2{  
          border: 2px dotted blue;    
       }  
    </style>  
      
    <script src="prototype-1.6.0.3.js"></script>  
    <script type="text/javascript">  
    /*  
     练习一: 使用prototype进行表单验证  
    */  
      
    /*  
                   禁止浏览器的默认行为(数据不规范则不能提交)  
    */  
      function check_username(){  
         var usernameObj = document.getElementById('username');  
         var usernameMsgObj = document.getElementById('username_msg');  
           
         usernameObj.className = '';//这两行的作用在于每次进行处理之前先清空之前的效果. 如用户第二次输入合法  
         usernameMsgObj.innerHTML = '';  
           
         if(usernameObj.value.length == 0){  
           usernameMsgObj.innerHTML = '用户名不能为空';  
           usernameObj.className = 's2';  
             
           return false;  
         }  
           
         return true;  
      }  
        
      /*  
      正则表达式在JS中的使用  
      */  
      function check_pwd(){  
         var pwdObj = document.getElementById('pwd');  
         var pwdMsgObj = document.getElementById('pwd_msg');  
           
         pwdObj.className = '';  
         pwdMsgObj.innerHTML = '';  
           
         var reg = /^\d{6}$/  
         if(!reg.test(pwdObj.value)){  
            pwdObj.className = 's2';  
            pwdMsgObj.innerHTML = '密码必须是6位数字';  
              
            return false;  
         }  
           
         return true;  
      }  
        
      function check_repwd(){  
         $('repwd').className = '';  
         $('repwd_msg').innerHTML = '';  
           
         if(!($F('pwd') == $F('repwd'))){  
           $('repwd').className = 's2';  
           $('repwd_msg').innerHTML = '两次密码要一致';  
             
           return false;  
         }  
           
         return true;  
      }  
        
      function check_idcard(){  
        $('idcard').className = '';  
        $('idcard_msg').innerHTML = '';  
           
        var reg = /^\d{15}$|^\d{17}([0-9]|X|x)$/;  
          
        if(!reg.test($F('idcard'))){  
           $('idcard').className = 's2';  
           $('idcard_msg').innerHTML = '身份证的格式不正确';  
             
           return false;  
        }  
        return true;  
      }  
        
      function check_form(){  
         var flag = check_username() && check_pwd() && check_repwd() && check_idcard();  
         return flag;  
      }  
    </script>  
      
  </head>  
  
<body>  
    <div id="d1">  
        <div id="d1_head">注册</div>  
          
        <div id="d1_content">  
            <form οnsubmit="return check_form()">  
                <table>  
                    <tr>  
                        <td>用户名</td>  
                        <td>  
                            <input id="username" name="username" οnblur="check_username()"/>  
                            <span id="username_msg" class="s1" ></span>  
                        </td>  
                    </tr>  
                      
                    <tr>  
                        <td>密码</td>  
                        <td>  
                            <input id="pwd" name="pwd" οnblur="check_pwd()"/>  
                            <span id="pwd_msg" class="s1"></span>  
                        </td>  
                    </tr>  
                      
                    <tr>  
                        <td>密码确认</td>  
                        <td>  
                            <input id="repwd" name="repwd" οnblur="check_repwd()"/>  
                            <span id="repwd_msg" class="s1"></span>  
                        </td>  
                    </tr>  
                      
                    <tr>  
                        <td>身份证号码</td>  
                        <td>  
                            <input id="idcard" name="idcard" οnblur="check_idcard()"/>  
                            <span id="idcard_msg" class="s1"></span>  
                        </td>  
                    </tr>  
                      
                      
                    <tr>  
                        <td colspan="2">  
                            <input type="submit" value="确认"/>  
                            <input type="reset" value="重置"/>  
                        </td>  
                    </tr>  
                </table>  
            </form>  
        </div>    
    </div>  
</body>  
</html>


28、HTML Dom中的select对象的使用


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
<html>  
   <head>  
     <script src="prototype-1.6.0.3.js"></script>  
     <script type="text/javascript">  
     /*  
     html dom 中的select对象的使用  
     */  
       function f11(){  
         alert($('city').selectedIndex);//打印选项的Index,从0开始  
       }  
     </script>  
   </head>  
  
   <body style="font-size: 30px">  
      <select id="city" name="city"  
       style="width: 120px;"  
       οnchange="f11();"  
       >  
         <option value="cd">成都</option>  
         <option value="qd">青岛</option>  
         <option value="xm">厦门</option>  
      </select>  
   </body>  
</html>


29、HTML Dom的this的使用


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
<html>  
   <head>  
     <script src="prototype-1.6.0.3.js"></script>  
     <script type="text/javascript">  
     /*  
     html dom 中的this的使用  
     */  
       function f12(obj){  
         alert(obj.selectedIndex);//打印选项的Index,从0开始  
       }  
     </script>  
   </head>  
  
   <body style="font-size: 30px">  
      <select id="city" name="city"  
       style="width: 120px;"  
       οnchange="f12(this);"  
       >  
         <option value="cd">成都</option>  
         <option value="qd">青岛</option>  
         <option value="xm">厦门</option>  
      </select>  
   </body>  
</html>


30、HTML Dom中的this的使用，对29的简化


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
<html>  
   <head>  
     <script src="prototype-1.6.0.3.js"></script>  
     <script type="text/javascript">  
     /*  
     html dom 中的this的使用,对29的简化  
     */  
       function f13(obj){  
         alert(obj);//打印选项的Index,从0开始  
       }  
     </script>  
   </head>  
  
   <body style="font-size: 30px">  
      <select id="city" name="city"  
       style="width: 120px;"  
       οnchange="f13(this.selectedIndex);"  
       >  
         <option value="cd">成都</option>  
         <option value="qd">青岛</option>  
         <option value="xm">厦门</option>  
      </select>  
   </body>  
</html>


31、HTML Dom中的select对象的length属性的使用


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
<html>  
   <head>  
     <script src="prototype-1.6.0.3.js"></script>  
     <script type="text/javascript">  
     /*  
     html dom 中的select对象的length属性的使用  
     */  
      function f14(){  
        alert($('city').length);//$('city').length获取设置项的个数  
      }  
     </script>  
   </head>  
  
   <body style="font-size: 30px">  
      <select id="city" name="city"  
       style="width: 120px;"  
       οnchange=""  
       >  
         <option value="cd">成都</option>  
         <option value="qd">青岛</option>  
         <option value="xm">厦门</option>  
      </select>  
        
      <input οnclick="f14()" value="click me" type="button"/>  
   </body>  
</html>


32、HTML Dom中的select对象的options属性的使用


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
<html>  
   <head>  
     <script src="prototype-1.6.0.3.js"></script>  
     <script type="text/javascript">  
     /*  
     html dom 中的select对象的options属性的使用  
     */  
      function f15(){  
        var arr = $('city').options;//获取select对象的所有options属性  
        for(var i = 0 ; i < arr.length ; ++i){  
          alert(arr[i].text + ' : ' + arr[i].value);//text: 显示给用户看的内容; value: 主要用于程序内部识别  
        }  
      }  
     </script>  
   </head>  
  
   <body style="font-size: 30px">  
      <select id="city" name="city"  
       style="width: 120px;"  
       οnchange=""  
       >  
         <option value="cd">成都</option>  
         <option value="qd">青岛</option>  
         <option value="xm">厦门</option>  
      </select>  
        
      <input οnclick="f15()" value="click me" type="button"/>  
   </body>  
</html>


33、HTML Dom中增加option选项 通过length属性能获取或设置option选项的长度（个数）


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
<html>  
   <head>  
     <script src="prototype-1.6.0.3.js"></script>  
     <script type="text/javascript">  
     /*  
     html dom 中的增加option选项  
     通过length属性能获取或设置option选项的长度(个数)  
     */  
      function f16(){  
        var op = new Option('大连','dl');  
        $('city').options[$('city').length] = op;  
      }  
     </script>  
   </head>  
  
   <body style="font-size: 30px">  
      <select id="city" name="city"  
       style="width: 120px;"  
       οnchange=""  
       >  
         <option value="cd">成都</option>  
         <option value="qd">青岛</option>  
         <option value="xm">厦门</option>  
      </select>  
        
      <input οnclick="f16()" value="click me" type="button"/>  
   </body>  
</html>


34、使用prototype来实现级联下拉列表


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
  
<html>  
    <head>  
        <style>  
#d1 {  
    width: 450px;  
    height: 120px;  
    background-color: #dddddd;  
    margin: 40px auto;  
}  
  
#d1_head {  
    height: 30px;  
    font-size: 24px;  
    color: white;  
    background-color: blue;  
}  
  
#d1_content {  
    padding-left: 30px;  
}  
</style>  
  
   <script src="prototype-1.6.0.3.js"></script>  
    <script type="text/javascript">  
    /*  
    使用prototype来实现级联下拉列表.  
    所谓的级联下拉列表,其实是这么一个东西：  
在写脚本之前,第一级可以显示内容,但是第二级没有内容  
在写脚本之后,第二级的内容根据第一级的来显示  
    */  
    function f17(index){  
      var arr = new Array();  
      arr[0] = [new Option('研究方向','-1')];  
        
      arr[1] = [new Option('欧洲英语','e1'),new Option('美国英语','e2')];  
        
      arr[2] = [new Option('网格计算','c1'),new Option('图形学','c2'),new Option('文字学','c2')];  
        
      $('s2').innerHTML = '';  
      for(var i = 0 ; i < arr[index].length ; ++i){  
         $('s2').options[i] = arr[index][i];   
      }  
        
    }  
    </script>  
    </head>  
      
      
    <body style="font-size: 30px;">  
        <div id="d1">  
            <div id="d1_head">  
                专业选择  
            </div>  
            <div id="d1_content">  
                <form>  
                    <select name="s1" id="s1" style="width: 120px;"  
                        οnchange="f17(this.selectedIndex);">  
                        <option value="-1">  
                            --专业--  
                        </option>  
                        <option value="english">  
                            英语  
                        </option>  
                        <option value="computer">  
                            计算机  
                        </option>  
                    </select>  
                    <select name="s2" id="s2" style="width: 120px;">  
                        <option value="-1">  
                            --研究方向--  
                        </option>  
                    </select>  
                    <input type="submit" value="确认" />  
                </form>  
            </div>  
        </div>  
    </body>  
  
</html>

myjs.js 
function $(id){  
    return document.getElementById(id);  
}

prototype.js的下载链接：http://download.csdn.net/detail/caihongshijie6/5106001

35、回顾练习一


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
  
<head>  
    <style>  
ul {  
    list-style-type: none;  
}  
  
ul li {  
    float: left;  
    width: 120px;  
    height: 40px;  
    border: 1px solid black;  
    margin-left: 20px;  
    text-align: center;  
    cursor: pointer;  
}  
</style>  
    <script type="text/javascript">  
    function doAction(id){  
        var ulObj = document.getElementById('u1');  
        var arr = ulObj.getElementsByTagName('li');  
          
        for(var i = 0 ; i < arr.length ; ++i){  
           arr[i].style.backgroundColor = '#ff88ee';  
        }  
          
        var obj = document.getElementById(id);  
        obj.style.backgroundColor = 'red';  
    }  
    </script>  
</head>  
<body style="font-size: 30px;">  
    <ul id="u1">  
        <!-- 内联样式-->  
        <li style="background-color: #ff88ee;" id="l1"  
            οnclick="doAction('l1');">  
            选项一  
        </li>  
        <li style="background-color: #ff88ee;" id="l2"  
            οnclick="doAction('l2');">  
            选项二  
        </li>  
        <li style="background-color: #ff88ee;" id="l3"  
            οnclick="doAction('l3');">  
            选项三  
        </li>  
    </ul>  
</body>  
</html>


36、回顾练习二


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
<html>  
  <head>  
    <style type="text/css">  
       #d1{  
          width: 400px;  
          height: 250px;  
          background-color: #FFE4B5;  
          margin: 40px auto;  
       }  
       
       #d1_head{  
          color: white;  
          font-size: 20px;  
          font-family: "Arial";  
          height: 24px;  
          background-color: blue;  
       }  
         
       #d1_content{  
          padding-left: 30px;  
          padding-top: 30px;  
       }  
         
       .s1{  
          color: red;  
          font-style: italic;     
       }  
         
       .s2{  
          border: 2px dotted blue;    
       }  
    </style>  
      
    <script src="prototype-1.6.0.3.js"></script>  
      
<script type="text/javascript">  
  
function check_username(){  
   var usernameObj = $('username');  
   var usernameMsgObj = $('username_msg');  
     
   usernameObj.className = '';  
   usernameMsgObj.innerHTML = '';  
     
   if($F('username').strip().length == 0 ){  
      usernameObj.className = 's2';  
      usernameMsgObj.innerHTML = '用户名不能为空';  
        
      return false;  
   }  
     
   return true;  
}  
  
function check_pwd(){  
   var pwdObj = $('pwd');  
   var pwdMsgObj = $('pwd_msg');  
     
   pwdObj.className = '';  
   pwdMsgObj.innerHTML = '';  
     
   var reg = /^\d{6}$/;  
   if(!reg.test($F('pwd'))){  
      pwdObj.className = 's2';  
      pwdMsgObj.innerHTML = '密码必须是6位数字';  
        
      return false;  
   }  
     
   return true;  
}  
  
  
function check_repwd(){  
    var repwdObj = $('repwd');  
    var repwdMsgObj = $('repwd_msg');  
      
    repwdObj.className = '';  
    repwdMsgObj.innerHTML = '';  
      
    if($F('pwd') != $F('repwd')){  
       repwdObj.className = 's2';  
       repwdMsgObj.innerHTML = '两次输入的密码必须一致';  
         
       return false;  
    }  
      
    return true;  
}  
  
function check_idcard(){  
   var idcardObj = $('idcard');  
   var idcardMsgObj = $('idcard_msg');  
     
   idcardObj.className = '';  
   idcardMsgObj.innerHTML = '';  
     
   var reg = /^\d{15}$|^\d{17}([0-9]|X|x)$/;  
   if(!reg.test($F('idcard'))){  
        idcardObj.className = 's2';  
        idcardMsgObj.innerHTML = '身份证号码的格式不正确';  
          
        return false;     
   }  
     
   return true;  
}  
  
function check_form(){  
   var flag = check_username() && check_pwd() && check_repwd() && check_idcard();  
     
   return flag;  
}  
</script>     
      
  </head>  
  
<body>  
    <div id="d1">  
        <div id="d1_head">注册</div>  
          
        <div id="d1_content">  
            <form οnsubmit="return check_form()">  
                <table>  
                    <tr>  
                        <td>用户名</td>  
                        <td>  
                            <input id="username" name="username" οnblur="check_username()"/>  
                            <span id="username_msg" class="s1" ></span>  
                        </td>  
                    </tr>  
                      
                    <tr>  
                        <td>密码</td>  
                        <td>  
                            <input id="pwd" name="pwd" οnblur="check_pwd()"/>  
                            <span id="pwd_msg" class="s1"></span>  
                        </td>  
                    </tr>  
                      
                    <tr>  
                        <td>密码确认</td>  
                        <td>  
                            <input id="repwd" name="repwd" οnblur="check_repwd()"/>  
                            <span id="repwd_msg" class="s1"></span>  
                        </td>  
                    </tr>  
                      
                    <tr>  
                        <td>身份证号码</td>  
                        <td>  
                            <input id="idcard" name="idcard" οnblur="check_idcard()"/>  
                            <span id="idcard_msg" class="s1"></span>  
                        </td>  
                    </tr>  
                      
                      
                    <tr>  
                        <td colspan="2">  
                            <input type="submit" value="确认"/>  
                            <input type="reset" value="重置"/>  
                        </td>  
                    </tr>  
                </table>  
            </form>  
        </div>    
    </div>  
</body>  
</html>


37、回顾练习三


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
  
<html>  
 <head>  
   <script type="text/javascript">  
    function f3(){  
     var buttonObj = document.getElementById('b1');  
     var divObj = document.createElement('div');  
     divObj.innerHTML = '我喜欢章泽天';  
       
     buttonObj.appendChild(divObj);  
       
    }  
   </script>  
 </head>  
   
  <body style="font-size: 30px;" id="b1">  
    <input id="bu1" type="button" value="Click" οnclick="f3()"/>  
  </body>  
</html>


38、回顾练习四


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
  
<html>  
 <head>  
   <script type="text/javascript">  
    function f4(){  
       var bodyObj = document.getElementById('b1');  
       var buttonObj = document.getElementById('bu1');  
       var divObj = document.createElement('div');  
       divObj.innerHTML = '章泽天喜欢我';  
         
       bodyObj.insertBefore(divObj,buttonObj);  
         
    }  
   </script>  
 </head>  
   
  <body style="font-size: 30px;" id="b1">  
    <input id="bu1" type="button" value="Click" οnclick="f4()"/>  
  </body>  
</html>


39、回顾练习五


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
<html>  
   <head>  
     <script src="prototype-1.6.0.3.js"></script>  
     <script type="text/javascript">  
        
      function f5(obj){  
         alert( '选择的是: ' + obj.selectedIndex);  
         alert('包含的选项数是: ' + obj.length);  
           
         var arr = obj.options;  
         for(var i = 0 ; i < arr.length ; ++i){  
            alert(arr[i].text + ' : ' + arr[i].value);  
         }  
      }  
        
      function f6(){  
        var op = new Option('北京','bj');  
        $('city').options[$('city').length] = op;  
      }  
        
     </script>  
   </head>  
  
   <body style="font-size: 30px">  
      <select id="city" name="city"  
       style="width: 120px;"  
       οnchange="f5(this);"  
       >  
         <option value="cd">成都</option>  
         <option value="qd">青岛</option>  
         <option value="xm">厦门</option>  
      </select>  
        
      <input type="button" value="click" οnclick="f6()"/>  
   </body>  
</html>


40、回顾练习六


<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>  
  
  
<html>  
    <head>  
        <style>  
#d1 {  
    width: 450px;  
    height: 120px;  
    background-color: #dddddd;  
    margin: 40px auto;  
}  
  
#d1_head {  
    height: 30px;  
    font-size: 24px;  
    color: white;  
    background-color: blue;  
}  
  
#d1_content {  
    padding-left: 30px;  
}  
</style>  
  
   <script src="prototype-1.6.0.3.js"></script>  
    <script type="text/javascript">  
    function f6(index){  
        var arr = new Array();  
        arr[0] = [new Option('-研究方向-','-1')];  
        arr[1] = [new Option('欧洲英语','e1'),new Option('美国英语','e2')];  
        arr[2] = [new Option('网格计算','c1'),new Option('图形学','c2'),new Option('美学','c3')];  
          
        $('s2').innerHTML = '';  
          
        for(var i = 0 ; i < arr[index].length ; ++i){  
           $('s2').options[i] = arr[index][i];  
        }  
    }  
    </script>  
    </head>  
      
      
    <body style="font-size: 30px;">  
        <div id="d1">  
            <div id="d1_head">  
                专业选择  
            </div>  
            <div id="d1_content">  
                <form>  
                    <select name="s1" id="s1" style="width: 120px;"  
                        οnchange="f6(this.selectedIndex);">  
                        <option value="-1">  
                            --专业--  
                        </option>  
                        <option value="english">  
                            英语  
                        </option>  
                        <option value="computer">  
                            计算机  
                        </option>  
                    </select>  
                    <select name="s2" id="s2" style="width: 120px;">  
                        <option value="-1">  
                            --研究方向--  
                        </option>  
                    </select>  
                    <input type="submit" value="确认" />  
                </form>  
            </div>  
        </div>  
    </body>  
  
</html>


原文地址：http://blog.csdn.net/hjd_love_zzt/article/details/19249421
贾晓娇
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript 基础问答三
10-30
### JavaScript基础问答三 #### 9. JavaScript 的注释使用方法 **问题**: 如何在JavaScript代码中插入注释？ **解答**: JavaScript 支持三种不同类型的注释方式： 1. **多行 C 风格注释**: - 这种注释通过 `/*`...
JS的基本使用(2)——review
黄俊东的专栏
02-16 2141
1、 ul { list-style-type: none; } ul li { float: left; width: 120px; height: 40px; border: 1px solid black; margin-left: 20px; text-align: center; cursor: pointer; } function doActi
js学习（5）语法专题
weixin_33878457的博客
12-01 85
Js是一种动态类型语言，变量没有类型限制，可以随时赋值 强制转换： 主要指使用Number()，String()和Boolean()三个函数，手动将各个类型的值，分别转换为数字，字符串或布尔值 Number函数 1.传入原始类型值，只要有一个字符无法转换为数值，就不能转换，比parseInt要严格得多 空字符串转换为0 true ：1 false： 0 null：0 2...
doAction()和window.location.href的冲突
iteye_16587的博客
07-16 881
今早调查一个bug,就是添加页面确认有时候数据成功添加有时候失败,仔细看看代码没啥问题；$("#btnSubmit").click(function() { $("input[name='operateFlag']").val(oprFlagAdd); //如果表单验证通过，则提交表单 if(validator.form()){ $("#myS...
JavaScript基础语法笔记
04-12
三、JavaScript基础语法 1. 变量声明：JavaScript使用`var`, `let`或`const`来声明变量。`var`在函数作用域内，而`let`和`const`在块级作用域内，其中`const`声明的是常量，不能重新赋值。 2. 函数：JavaScript的...
JavaScript语法基础
06-05
#### 三、JavaScript 与 HTML 的结合 为了使 **JavaScript** 能够控制 HTML 页面上的对象，其代码必须与 HTML 代码相结合。可以通过以下方式将 **JavaScript** 代码嵌入到 HTML 文档中： - 使用 `<script>` 标签： ...
javaScript基础详解
10-20
本文主要介绍JavaScript的基础知识点，包括其基本语法、作用域、内置对象、函数、事件处理和数据类型等。 首先，JavaScript可以放置在HTML文档的多个位置，通常是放在`<head>`标签或者`<body>`标签内，也可以在页面...
odoo11 定义Server Action定义
weixin_42579328的博客
03-28 867
1、odoo11中定义action： 默认如下图： 需求：如果想要在增加一个‘标记完成’的按钮： ①、view代码中的实现： 页面展示效果如下图： 上述代码解释说明： 和其他所有在数据文件（XML）中定义的数据一样，首先是一个包含属性 id 和 model 的 标签，我们要定义的是 Server Action, 所以需要将 model 设置为 ir.actions.server，然后是对应...
ajax经典总结
Jack Zhu
11-22 1909
1、ajax是什么? asynchronous javascript and xml:异步的javascript和xml。 ajax是一种用来改善用户体验的技术，其本质是利用浏览器内置的一种特殊的对象(XMLHttpRequest)异步(即发送请求时，浏览器不会销毁当前页面，用户可以继续在当前页面做其它的操作)的向服务器发送请求,并且利用服务器返回的数据(不再是一个完整的页面，只是部分的数据，一般使用文本或者xml返回)来部分更新当前页面。使用ajax技术之后，页面无刷新，并且不打断用户 的操作。 ajax
微信小程序骨架屏
djjdjdjdjddjjdjd的博客
08-16 349
⑤ 在onLoad 中页面加载前定义 isLoading.value=true, 在加载完后定义 isLoading.value=false.骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。① 在相应微信小程序页面右下角点生成骨架屏，左侧小程序目录会自动生成 .wxml 、.wxss 文件，⑥ 在生成骨架屏页面中 v-if="isLoading" v-else 定义显示与隐藏。
网上商品订单转手系统bootpf
weixin_43213064的博客
08-18 414
【代码】springboot网上商品订单转手系统bootpf
Vue3项目-Cesium地图初始化
StupidlyGrass的博客
08-19 80
将node_modules中cesium/Build/Cesium文件夹拷贝至public目录下。3、index.html配置。一、安装、配置Cesium。1、安装Cesium。二、使用Cesium。
Vue :class 绑定可以结合多个判断维度来动态设置类
最新发布
u010865136的专栏
08-19 73
二、:class="[isMute && 'disabled', env.isH5 && 'TUIChat-H5-footer']"一、数组语法允许你根据条件动态添加多个类名。数组中的每个元素可以是一个类名的字符串，或者是一个对象。对象中的键是类名，值是布尔值。
Vue路由
程小白的博客
08-19 345
这样我们的路由信息就配置好了。但是有一个bug需要解决。当我们配置好路由信息后，重启项目，再次访问，会发现什么也不显示，这是因为当项目启动起来时默认访问的路由的路径是"/"而非“/dept”和"/emp",但是在配置路由时并没有配置“/”的路由，因此要再新配置一个“/"的路由信息。
基于vue框架的爱看电影网站v4o92（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
08-15 1006
项目功能：用户,电影分类,电影信息,电影评分基于Vue框架的爱看电影网站项目功能丰富多样，旨在为用户提供一个集电影浏览、信息查询、观影体验、互动交流于一体的综合性平台。
一些有趣的XSS注入GAME
qq_67758645的博客
08-17 975
如果我们不经过前面的javascript:将其变成字符串，那么传进去后时候就会带两个引号，那么就算setTimeout可以将字符串当作代码执行，但是，里面还是一层字符串，执行不了。我理解的是javascript：将后面的alert字符串替换成alert js代码，类似于eval的作用，传进setTimeout的时候就不是字符串，而是js代码。将%编码试试，%25，这样到后端以后就会变成%28 %29，如果js能够解码的话，最后传到页面的时候在解码%28，%29为（），这样不就实现了嘛。
Bootstrap 附加导航（Affix）插件
2402_83140078的博客
08-17 602
附加导航（Affix）插件允许指定 固定在页面的某个位置。一个常见的例子是社交图标。它们将在某个位置开始，但当页面点击某个标记，该 会锁定在某个位置，不会随着页面其他部分一起滚动。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值