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

weixin_45180125 2019-06-04 10:18:58

第一次发帖可能格式不规范，请多海涵，我就直接附上代码吧，原因就是出在下方代码   $('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]

...全文

306 15 打赏收藏转发到动态举报

写回复

用AI写文章

15 条回复

切换为时间正序

请发表友善的回复…

发表回复

xzxwsk 2019-06-11

打赏
举报

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

xzxwsk 2019-06-11

打赏
举报

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

wsl394049743 2019-06-11

打赏
举报

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

原野ing 2019-06-09

打赏
举报

引用 8 楼 lllomh的回复:

[quote=引用 7 楼川朴的回复:] [quote=引用 6 楼 lllomh的回复:][quote=引用 5 楼川朴的回复:] [quote=引用 4 楼 lllomh的回复:] 你好啊！ $('btn').onclick = function () {/*提示这里出错，具体我也找不到原因，在此请教*/ 这句话不是这么写的啦：要么这么写
   $('btn').click(function {
   // 这里点击
}) 
要么就这么写
、  $('btn').addEventListener('click', showMsg, false); //鼠标单击的时候调用showMes这个函数  

function showMsg() {
    alert("事件监听");
}

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

[/quote] 对你无语。。。。。。。

原野ing 2019-06-09

打赏
举报

对你无语。。。。。。。

e_zhiwen 2019-06-09

打赏
举报

还是框架好用，别想着操作那些个元素了。

陀陀吖 2019-06-09

打赏
举报

<!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>
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>

lllomh 2019-06-08

打赏
举报

引用 7 楼川朴的回复:

[quote=引用 6 楼 lllomh的回复:][quote=引用 5 楼川朴的回复:] [quote=引用 4 楼 lllomh的回复:] 你好啊！ $('btn').onclick = function () {/*提示这里出错，具体我也找不到原因，在此请教*/ 这句话不是这么写的啦：要么这么写
   $('btn').click(function {
   // 这里点击
}) 
要么就这么写
、  $('btn').addEventListener('click', showMsg, false); //鼠标单击的时候调用showMes这个函数  

function showMsg() {
    alert("事件监听");
}

原野ing 2019-06-08

打赏
举报

引用 6 楼 lllomh的回复:

[quote=引用 5 楼川朴的回复:] [quote=引用 4 楼 lllomh的回复:] 你好啊！ $('btn').onclick = function () {/*提示这里出错，具体我也找不到原因，在此请教*/ 这句话不是这么写的啦：要么这么写
   $('btn').click(function {
   // 这里点击
}) 
要么就这么写
、  $('btn').addEventListener('click', showMsg, false); //鼠标单击的时候调用showMes这个函数  

function showMsg() {
    alert("事件监听");
}

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

lllomh 2019-06-08

打赏
举报

引用 5 楼川朴的回复:

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

function showMsg() {
    alert("事件监听");
}

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

原野ing 2019-06-08

打赏
举报

引用 4 楼 lllomh的回复:

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

function showMsg() {
    alert("事件监听");
}

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

stone_929 2019-06-04

打赏
举报

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

囧 2019-06-04

打赏
举报

jQuery没引入

lllomh 2019-06-04

打赏
举报

你好啊！ $('btn').onclick = function () {/*提示这里出错，具体我也找不到原因，在此请教*/ 这句话不是这么写的啦：要么这么写


   $('btn').click(function {
   // 这里点击
})

要么就这么写


、  $('btn').addEventListener('click', showMsg, false); //鼠标单击的时候调用showMes这个函数  

function showMsg() {
    alert("事件监听");
}

天际的海浪 2019-06-04

打赏
举报

$()函数没定义，代码开头加入：


function $(id) {
	return document.getElementById(id);
}

注意，你这种用法说明这个$()函数是自己定义的，不是jquery中的$()方法，并且如果有引入jquery会与jquery中的$()方法起冲突。

在本课程中，大喵将使用一款流行的JS动画框架GSAP.JS动画库，开发新手入门实战性质一个入门级炫酷动画项目，带着大家来体验使用Javascript来高效开发连续关键帧动画的过程；我们会介绍GSAP.JS的基础知识及相关动画API的使用，包括每个动画细节的基本概念和作用，关键帧控制动画，多物体同时动画，随机动画，循环动画，往返动画，文字动画，回调动画的开发介绍；整个课程我们会从一个案例实战开始，带着大家从0到1，在开发过程中学习动画API的使用，更加高效快速地熟练掌握Javascript动画开发；

跨域问题真是困扰了许久，查了各种资料，就是觉得项目中的这种跨域（域名不同）是不允许的。没办法，只好去请教大神，正如所料真的真的是不能访问的。哎！没办法，谁让我是菜鸟呢！那么不确信自己的判断。什么是跨域？ Javascript处于安全方面的考虑（同源策略限制），不允许跨域调用其他页面的对象。也就是“Domains,protocols,posts”不一样就是跨域。 “Domains

需要掌握的知识点如下：选择：数据访问（标签、特定值、布尔索引等）缺失值处理：对缺失数据行进行删除或填充重复值处理：重复值的判断与删除空格和异常值处理：清楚不必要的空格和极端、异常数据相关操作：描述性统计、Apply、直方图等合并：符合各种逻辑关系的合并操作分组：数据划分、分别执行函数、数据重组Reshaping：快速生成数据透视表概率论及统计学知识数据整体分布是怎样的？通过可视化的方式来描述数据的指标，其实可以得出很多结论了，比如排名前100的是哪些，平均水平是怎样的，近几年的变化趋势如何……

菜鸟网络工程师的成长历程，由此开始记录。

大家好，我是开车的阿Q，自动驾驶的时代已经到来，没时间解释了，快和阿Q一起上车。大家好，我是开车的阿Q，自动驾驶的时代已经到来，没时间解释了，快和阿Q一起上车。大家好，我是开车的阿Q，自动驾驶的时代已经到来，没时间解释了，快和阿Q一起上车。大家好，我是开车的阿Q，自动驾驶的时代已经到来，没时间解释了，快和阿Q一起上车。考察二叉树遍历的应用。知识点：数组可放置的要求是左右相邻的元素都为0，我们只需要遍历一遍数组，同时进行判断，若左右元素不为1，则将当前位置置1，同时n-1，表示已放置，继续向后遍历，

JavaScript

87,910

社区成员

224,616

社区内容

发帖

与我相关

我的任务

社区管理员

加入社区

近7日
近30日
至今

加载中

查看更多榜单

社区公告

暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章

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

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