黑马程序员技术交流社区

标题: html页面下button的click事件无法触发 [打印本页]
作者: 何学强    时间: 2012-9-26 15:27
标题: html页面下button的click事件无法触发
<head>
    <title>开关灯</title>
    <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function() {
        $("#switch").click(function() { $(document.body).toggleClass("night"); });//这段代码，我觉得没有什么错误，但我运行的时候就是无法实现页面背景颜色切换功能，我想问一下原因
        });
    </script>
    <style type="text/css">
    .ninght{background-color:Black;}
    </style>
</head>
<body>
<input type="button" value="开关灯" id="switch" />
</body>
作者: 彭书雄    时间: 2012-9-26 21:48
没学过jQuery 表示有点看不懂  只会原生js  有一个很重要的问题就是页面的加载顺序，如果js 放在上面就先加载上面是js代码，而html表单则没有加载进来
所以你获取表单元素就会为空，下面是我用js写的  window.onload  是文档加载完成后触发，可以改变元素的颜色
  1. <head>
  2.         <title></title>
  3.         <style type="text/css" rel="stylesheet">
  4.                 div
  5.                 {
  6.                         width:300px;
  7.                         height:300px;
  8.                         background:#ff0000;
  9.                 }
  10.         </style>
  11.         <script type="text/javascript">
  12.                 window.onload=function()
  13.                 {
  14.                         var oDiv = document.getElementById('div1');
  15.                        
  16.                         oDiv.onmouseover=function()
  17.                         {
  18.                                 oDiv.style.background='#686868';
  19.                         }
  20.                        
  21.                         oDiv.onmouseout=function()
  22.                         {
  23.                                 oDiv.style.background='#00ff00';
  24.                         }
  25.                 }
  26.         </script>
  27. </head>
  28. <body>
  29.         <div id="div1"></div>
  30. </body>
  31. </html>
复制代码




欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2