JS基础 

<html>
<head>
  <meta charset="utf-8">
  <title>javascript</title>
  <style>
    .id06{
        width:50px;
        border:1px solid red;
        background:green;
        color:white;
    }
  </style>
</head>

<body>

<script type="text/javascript">
    //1写入 HTML 输出     和js写的位置有关
    document.write("<h1 align='center'>1写入 HTML 输出</h1>");
</script>

<table border="1" cellspacing="0" cellpadding="5px" width="400px" align="center">
    <tr><td align="center">2对事件作出反应</td><td align="center"><input type="button" onclick="alert('对事件作出反应')" value="button"/></td></tr>
    <script language="javascript">
        function demo(){
            var id2=document.getElementById("de01");
            //var id2=document.getElementsByName("de01")[0];   //注释的为实现？？？
            //var id2=document.all["de01"];
            //alert(111+"###"+id2);
            id2.innerHTML="Hello World!";
        }
    </script>
    <tr><td align="center">3改变 HTML 内容(插入內容)innerHTML</td><td align="center"><input type="button" onclick="demo()" value="button"/><p id="de01" name="de01">111</p></td></tr>
    <script language="javascript">
        function demo02(){
            var id2=document.getElementById("de02");
            if(id2.src.match("police")){
                id2.src="copy_rignt_24.png";
                id2.alt="版权";
            }else{
                id2.src="icon-police";
                id2.alt="警徽";
            }
        }
    </script>
    <tr><td align="center">4改变 HTML 图像*</td><td align="center"><img src="icon-police.png" id="de02" onclick="demo02()"/></td></tr>
    <script language="javascript">
        function demo03(){
            var id2=document.getElementById("de03");
            if(id2.style.color=="red"){
                id2.style.color="blue";
            }else{
                id2.style.color="red";
            }
        }
    </script>
    <tr><td align="center">5改变 HTML 样式</td><td align="center"><input type="button" onclick="demo03()" value="button"/><p id="de03" name="de03">改变 HTML 样式</p></td></tr>    
    <script language="javascript">
        function demo04(){
            var id2=document.getElementById("de04").value;
            if(id2==""||isNaN(id2)){
                alert("不是数字！！！");
            }
        }
    </script>
    <tr><td align="center">6验证用户的输入</td><td align="center"><input type="text" onblur="demo04()" id="de04"/></td></tr>
    <script>
        function myFunction(){
            document.write("糟糕！文档消失了。");
        }
    </script>
    <tr><td align="center" style="color:red">7警告,请使用 document.write() 仅仅向文档输出写内容。<br/>如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖：</td>
        <td align="center"><button onclick="myFunction()">点击这里</button></td></tr>
        
    <script language="javascript">
        function demo05(){
            var id2=document.getElementById("id05");
            alert(id2.outerHTML);
        }
    </script>    
    <tr id="id05"><td align="center" style="color:red">8弹出页面内容及元素（outerHTML）</td><td align="center"><button onclick="demo05()">button</button></td></tr>
    <script language="javascript">
        function demo06(){
            var id2=document.getElementById("id06");
            id2.className="id06";
        }
    </script>
    <tr><td align="center" style="color:red">9通过js实现改变css样式（className）</td><td align="center"><button onclick="demo06()">button</button><p id="id06">JS-CSS样式</p></td></tr>
    <tr><td align="center"></td><td align="center"></td></tr>
    <tr><td align="center"></td><td align="center"></td></tr>
    <tr><td align="center"></td><td align="center"></td></tr>
</table>
<!--    
    <tr><td align="center"></td><td align="center"></td></tr>
    <tr><td align="center"></td><td align="center"></td></tr>
    <tr><td align="center"></td><td align="center"></td></tr>
<tr><td align="center">JS测试</td><td align="center"><input type="text" placeholder="xxx" onfocus="fun(this)" value="JS测试!!!" size="12px"/></td></tr>
<tr><td align="center">测试当前脚本信息</td><td align="center"><input type="button" onclick="GetScriptEngineInfo()" value="测试当前脚本信息"/></td></tr>
<script type="text/javascript">
function fun(obj){
alert(111+"---"+obj.value+"---"+obj.type+"---"+obj.rows);
}
</script>
-->    
</body>
</html>

 

posted @ 2016-11-16 09:58  奋斗的少年WH  阅读(112)  评论(0)    收藏  举报