Javascript jQuery即使在.ready之后也不执行_Javascript_Jquery

Javascript jQuery即使在.ready之后也不执行

javascript jquery

Javascript jQuery即使在.ready之后也不执行,javascript,jquery,Javascript,Jquery,我试图在我的HTML页面上执行一些jQuery。我研究发现，您可能需要插入.ready，以确保在执行脚本之前DOM已完全加载。但是，我仍然无法让脚本工作在当前版本中，我在$（窗口）之后有.ready 在此处找到该代码段： index.html <!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery

我试图在我的HTML页面上执行一些jQuery。我研究发现，您可能需要插入

.ready

，以确保在执行脚本之前DOM已完全加载。但是，我仍然无法让脚本工作

在当前版本中，我在

$（窗口）

之后有

.ready

在此处找到该代码段：

index.html

<!DOCTYPE html>
<html>

<head>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script scr="script.js"></script>

    <title>Dokument titel</title>
</head>

<body>
    <strong>Start coordinates:</strong><span id="start"></span>
    <strong>End coordinates:</strong><span id="end"></span>

    <div id="selection"></div>


</body>

</html>


滴度
开始坐标：
端点坐标：

script.js

var start = {};
var end = {};
var isSelecting = false;


$(window).ready()
    .on('mousedown', function($event) {
        // Update our state
        isSelecting = true;
        $('#selection').removeClass('complete');
        start.x = $event.pageX;
        start.y = $event.pageY;

        // Display data in UI
        $('#start').text('(' + start.x + ',' + start.y + ')');

        // Add selection to screen
        $('#selection').css({
            left: start.x,
            top: start.y
        });
    })
    // Listen for movement
    .on('mousemove', function($event) {
        // Ignore if we're not selecing
        if (!isSelecting) { return; }

        // Update our state
        end.x = $event.pageX;
        end.y = $event.pageY;

        // Move & resize selection to reflect mouse position
        $('#selection').css({
            left: start.x < end.x ? start.x : end.x,
            top: start.y < end.y ? start.y : end.y,
            width: Math.abs(start.x - end.x),
            height: Math.abs(start.y - end.y)
        });
    })
    // listen for end
    .on('mouseup', function($event) {
        // Update our state
        isSelecting = false;
        $('#selection').addClass('complete');

        // Display data in UI
        $('#end').text('(' + end.x + ',' + end.y + ')');
    });

var start={}；
var end={}；
var isSelecting=假；
$（窗口）.ready（）
.on（'mousedown'，函数（$event）{
//更新我们的状态
isSelecting=true；
$（“#选择”）.removeClass（'complete'）；
start.x=$event.pageX；
start.y=$event.pageY；
//在UI中显示数据
$（“#start”）.text（“（“+start.x+”、“+start.y+”）”）；
//将选择添加到屏幕
$（“#选择”）.css({
左：start.x，
顶部：开始
});
})
//倾听动静
.on（'mousemove'，函数（$event）{
//如果我们没有选择，请忽略
如果（！isSelecting）{return；}
//更新我们的状态
end.x=$event.pageX；
end.y=$event.pageY；
//移动选择并调整大小以反映鼠标位置
$（“#选择”）.css({
左：start.x

我想你要找的是：

$( document ).ready(function() {
    console.log( "ready!" );
});

首先，ready是一个事件，就像您试图绑定一样，所以不要像调用函数一样调用它。我会将窗口更改为文档

$(document).on('mousedown', function ($event){
    // Update our state
    isSelecting = true;
    $('#selection').removeClass('complete');
    start.x = $event.pageX;
    start.y = $event.pageY;

    // Display data in UI
    $('#start').text('(' + start.x + ',' + start.y + ')');

    // Add selection to screen
    $('#selection').css({
        left: start.x,
        top: start.y
    });
});


$(document).on('mousemove', function($event) {
    // Ignore if we're not selecing
    if (!isSelecting) { return; }

    // Update our state
    end.x = $event.pageX;
    end.y = $event.pageY;

    // Move & resize selection to reflect mouse position
    $('#selection').css({
        left: start.x < end.x ? start.x : end.x,
        top: start.y < end.y ? start.y : end.y,
        width: Math.abs(start.x - end.x),
        height: Math.abs(start.y - end.y)
    });
});

$(document).on('mouseup', function($event) {
    // Update our state
    isSelecting = false;
    $('#selection').addClass('complete');

    // Display data in UI
    $('#end').text('(' + end.x + ',' + end.y + ')');
});

我相信你应该使用

$(document).ready(function(){
    //Place your onmousedown and onmousemove in here
});

我自己还没有试过，但我看到的与我通常做的不同。你没有匿名函数。另外，如果您将代码放在文件的末尾，从技术上讲，您不必有

$（document）.ready（function（）{}），但我认为最好的做法是将其包含在内，以便以后人们可以轻松了解您的代码在做什么。
有什么区别？@JuanMendes$（文档）。ready（）
等待整个DOM加载，而我相信$（窗口）。read（）
在任何元素准备就绪之前很久就会被调用。ready是一个事件，不是一个函数调用，所以你不会得到一个承诺，当函数完成时，做剩下的事情。当您在ready调用中绑定函数时，您说的是“准备就绪时执行此操作”）@user290258$（window）.ready（）不存在，因此它从不激发。看，这听起来好像OP不明白真正需要什么。事件监听器是必需的，而不是现成的。听众尽可能快地开始听，不要依赖“准备就绪”的声音。我明白@brentlyjdavid是怎么说的，它在准备就绪时运行一次，而不是在页面上有活动时侦听。您应该验证jquery和脚本是否确实已加载，或者控制台是否记录了任何错误。@RadhaKrishnaEedulakanti中的此评论与上述帖子无关，请阅读我什么时候不应该评论要点。它实际上是在执行。。。看，我还能画一个长方形。为什么投反对票？我查了一下，它与jQuery文档相同。不是downvoter，但这似乎是一个没有解释的建议。不是downvoter，而是$（文档）。on（'ready'
不推荐使用。请参阅还有$（文档）。on（“ready”，handler），从jQuery 1.8开始就被弃用，并在jQuery 3.0中删除。此外，我不会删除链接，因为它与问题无关。只更改回答问题所需的内容
$(document).ready(function(){
    //Place your onmousedown and onmousemove in here
});