1

我正在使用在线教程来学习一些 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>
4

2 回答 2

7

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

工作演示

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

于 2013-08-05T16:29:58.417 回答
1

我不是 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>
于 2013-08-05T16:53:19.373 回答