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   乐之者v  阅读(248)  评论(0)  编辑  收藏  举报

编辑推荐：
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
· 浏览器原生「磁吸」效果！Anchor Positioning 锚点定位神器解析
· 没有源码，如何修改代码逻辑？
阅读排行：
· 全程不用写代码，我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了，比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15：你的「微服务管家」又秀新绝活了
< 2025年3月 >
日 一 二 三 四 五 六
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

导航

统计

点击右上角即可分享
微信分享提示