Question

我正在使用在线教程学习一些jQuery，因为我被告知如果我想建立网站，那就是要走的路。我知道合理数量的html，javascript和css。我基本上从在线教程中复制了这个jQuery脚本，所以脚本不能错。所以我的假设是我在我的html文档中将脚本编写在错误的位置。有任何想法吗？感谢您提前得到任何答案。

另外，我被告知这会创建一个新的div。我现在开始对此表示怀疑。如果它错了，你能让我知道这是如何正确完成的。欢呼声。

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href = "Jquery.css" />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script>
        jQuery('<div/>', {
            id: 'box',
            css: {

                fontWeight: 500,
                color: 'green'

            },
            click: function(){
                alert('You clicked the box');
            }

        });
    </script>
</head>

<body>


</body>
</html>

Answer 1

您需要将该div添加到DOM。一种方法是使用jQuery appendTo()方法：

<强> Working Demo

jQuery('<div/>', {
    id: 'box',
    css: {
        fontWeight: 500,
        color: 'green'
    },
    click: function () {
        alert('You clicked the box');
    }

}).appendTo('body');

此外，最佳做法是将jQuery代码包装在$(document).ready(function() {...})中。这将确保您的代码运行时您需要与之交互的DOM元素。您可以在此处详细了解：http://api.jquery.com/ready

Answer 2

我不是jquery的专家，但这看起来与我通常处理的不同。我用更简单的常用术语做同样的事情，可能有更快的方法，但这适用于我的本地设置..

编辑：看着接受的答案似乎没有必要重写所有..哦，好吧

<!DOCTYPE html>
<html>
<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>

<body>
<script>
    $('body').html('<div id = "box">123</div>');
    $('#box').css('color','green');
    $('#box').css('font-weight','500');

    $('#box').click(function(){
        alert('You clicked here');
    });
</script>
</body>
</html>

用jQuery创建的Div不会在屏幕上显示

2 个答案: