菜鸟在此请教大神 关于JavaScript中遇到的问题

第一次发帖可能格式不规范，请多海涵，我就直接附上代码吧，原因就是出在下方代码   $('btn').onclick = function () {/*提示这里出错，具体我也找不到原因，在此请教    谢谢*/[code=html]
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
   <title></title>
   <style>*{
    margin: 0;
    padding: 0;} 
     html ,body{
         width: 100%;
         height: 100%;
     }     #panel{
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.4;
    filter: alpha(opacity 40);    position: absolute;
    left: 0;
    top: 0;
    display: none;
     }     #login{
         width: 300px;
         height: 300px;
         background: pink;
         border-radius:5px;
         
         position: fixed;
         left: 50%;
         top: 50%;
         margin-left: -150px;/*设置150px；
        
         margin-top: -150px;
         display: none;     }
   </style>
    </head>    <body>
        
        <button id="btn">立即登录</button>
        <div id="panel"></div>
        <div id="login"></div>
        <script src="scroll.js"></script>
         <script>
           window.onload = function() {
              //监听按钮的点击
              $('btn').onclick = function () {/*提示这里出错，具体我也找不到原因，在此请教*/
              $('panel').style.display = "block";
              $('login').style.display = "block";
              }
          }
         </script>
      
        </body>
        </html>
//下面是调用的js文件：
           function scroll() {
                if(window.pageYOffset !==null){
                    return {
                        top:window.pageYOffset,
                        left:window.pageXOffset
                    }
                }else if(document.compatMode === "CSS1Compat") {//W3C标准
                    return {
                        top:document.documentElement.scrollTop,
                        left:document.documentElement.scrollLeft
                    }
                    
                }
                return {
                        top:document.body.scrollTop,
                        left:document.body.scrollLeft
                    }
            }
            /*
            //调用
            window.onscroll = function () {
                console.log(scroll().top);
            }*/[/code]

解决方案 »

  1.   

    jQuery没引入
      

  2.   

    没有引入jquery，还要选择元素是 $（“#id”） 
      

  3.   

    $()函数没定义，代码开头加入：function $(id) {
    return document.getElementById(id);
    }
    注意，你这种用法说明这个$()函数是自己定义的，不是jquery中的$()方法，并且如果有引入jquery会与jquery中的$()方法起冲突。
      

  4.   

     你好啊！  
     $('btn').onclick = function () {/*提示这里出错，具体我也找不到原因，在此请教*/这句话不是这么写的啦：要么这么写   $('btn').click(function {
       // 这里点击
    }) 
    要么就这么写、  $('btn').addEventListener('click', showMsg, false); //鼠标单击的时候调用showMes这个函数  function showMsg() {
        alert("事件监听");
    }
      

  5.   

    若引入 jquery
    可以$("btn")[0].onclick(...)
    jquery对象  才可以用jquery的方法
    原生js 用js的方法
    不要混淆
      

  6.   

    若引入 jquery
    可以$("btn")[0].onclick(...)
    jquery对象  才可以用jquery的方法
    原生js 用js的方法
    不要混淆$("btn")[0].click(function(){
    })这才是 jq 的点击事件写法  你没看文档吗
      

  7.   

    若引入 jquery
    可以$("btn")[0].onclick(...)
    jquery对象  才可以用jquery的方法
    原生js 用js的方法
    不要混淆$("btn")[0].click(function(){
    })这才是 jq 的点击事件写法  你没看文档吗
    呵呵了
    第一次听说这么写
      

  8.   

    若引入 jquery
    可以$("btn")[0].onclick(...)
    jquery对象  才可以用jquery的方法
    原生js 用js的方法
    不要混淆$("btn")[0].click(function(){
    })这才是 jq 的点击事件写法  你没看文档吗
    呵呵了
    第一次听说这么写
    来 你不会查文档 我查给你看
      

  9.   

    若引入 jquery
    可以$("btn")[0].onclick(...)
    jquery对象  才可以用jquery的方法
    原生js 用js的方法
    不要混淆$("btn")[0].click(function(){
    })这才是 jq 的点击事件写法  你没看文档吗
    呵呵了
    第一次听说这么写
    来 你不会查文档 我查给你看
    对你无语。
      

  10.   


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>        *{
                margin: 0;
                padding: 0;        }
            html ,body{
                width: 100%;
                height: 100%;
            }        #panel{
                width: 100%;
                height: 100%;
                background: black;
                opacity: 0.4;
                filter: alpha(opacity 40);            position: absolute;
                left: 0;
                top: 0;
                display: none;
            }        #login{
                width: 300px;
                height: 300px;
                background: pink;
                border-radius:5px;            position: fixed;
                left: 50%;
                top: 50%;
                margin-left: -150px;/*设置150px；
             
             margin-top: -150px;
             display: none;
     
         }
       </style>
    </head><body><button id="btn">立即登录</button>
    <div id="panel"></div>
    <div id="login"></div>
    <!--<script src="scroll.js"></script>-->
    <script>
        function $(id) {
            return document.getElementById(id);
        }
        window.onload = function() {
            //监听按钮的点击
            $('btn').onclick = function () {    /*提示这里出错，具体我也找不到原因，在此请教*/
                $('panel').style.display = "block";
                $('login').style.display = "block";
            }
            console.log(scroll().top);
        }
        //下面是调用的js文件：
        function scroll() {
            if(window.pageYOffset !==null){
                return {
                    top:window.pageYOffset,
                    left:window.pageXOffset
                }
            }else if(document.compatMode === "CSS1Compat") {//W3C标准
                return {
                    top:document.documentElement.scrollTop,
                    left:document.documentElement.scrollLeft
                }        }
            return {
                top:document.body.scrollTop,
                left:document.body.scrollLeft
            }
        }</script></body>
    </html>
      

  11.   

    首先，是$("button")，不是$("btn"),button是组件名称，btn不是，
    其次，文档也是$("button").click(function(){})，不是$("button")[0].click(function(){})，
    $("button")[0]是dom对象，没有click方法，  要$("button")才是jquery对象，才会有click方法
      

  12.   

    $("button")[0]就必须要使用原生js的事件注册方法 $("button")[0].onclick = function(){}
      

  13.   

    想使用jquery ,需要 引用jquery
    jquery 选择器，最好先去学习一下。
    <div id = 'btn'></div>
    想要按ID选择，$('#btn')
    $('div')是选择元素名为div的节点。
    可以先去这个地址学习一下相关知识 点   http://www.w3school.com.cn/