javascript基础代码

1.点击改变HTML内容

<html>
<head>
    <meta charset="UTF-8">
    <script>
        function showMsg() {
            document.getElementById("demo").innerHTML="点击后的文本";
        }
    </script>
</head>

<body>
   <h1 id="demo" onclick="showMsg()">请点击该文本</h1>
</body>
</html>

2.文本输出

<html>
<head>
  <title>javascriptTest</title>
</head>

<body>
<h1>My Web Page</h1>
<script>
  document.write("<p>文本输出</p>");
</script>
</body>
</html>

3.对象

<html>
<body>

<script>
 var person={
   firstname : "feng",
   lastname  : "lin",
   id        :  123
  };
 document.write(person.lastname + "<br />");
 document.write(person.id + "<br />");
</script>

</body>
</html>

 4.通过Tag修改HTML文本

<!DOCTYPE html>
<html>
<body>
  <p id="p1">第一个段落</p>
  <p id="p2">第二个段落</p>
  <script>
     document.getElementsByTagName("p")[0].innerHTML="修改后的段落";
  </script>
</body>
</html>

 

.鼠标移动或离开事件

<html>
<head>
   <script>
        function over(obj) {
           obj.innerHTML="鼠标移至文本";
        }
        function out(obj){
            obj.innerHTML="鼠标离开文本";      
        }
   </script>
</head>

<body>
   <p id="demo" onmouseover="over(this)" onmouseout="out(this)">
     测试鼠标事件
   </p>
</body>
</html>

 

posted on 2017-04-18 17:19  乐之者v  阅读(244)  评论(0)  编辑  收藏  举报

导航