HTML,javascript和jQuery - 初学者
问题描述:
我刚开始学习HTML,JavaScript和jQuery,但我无法将这三者连接在一起。 到目前为止,我所做的是: HTML文件:HTML,javascript和jQuery - 初学者
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<script type="text/javascript" src="test.js"></script>
<link rel="stylesheet" href="test.css" type="text/css"/>
</head>
<body>
<button class="alert-btn">Click me for alert</button>
</body>
JavaScript文件:
$(".alert-btn").click(function(){
alert("Hey there!");
});
因此,大家可以看到,我试图把链接中的头部html文件,但它不起作用。我做错了什么,或者我需要添加什么?
答
如果代码:
$(".alert-btn").click(function(){
alert("Hey there!");
});
是文件中的DOM元素加载后test.js
你应该加载此文件:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" href="test.css" type="text/css"/>
</head>
<body>
<button class="alert-btn">Click me for alert</button>
<script type="text/javascript" src="test.js"></script>
</body>
+0
这工作得很好。非常感谢你。 –
答
我肯定会用`$(文件)。准备好(...)在标题中。
是您的test.js文件中的JavaScript? –
如果你想与HTML交互(在你的情况下通过分配一个点击处理程序),你应该等到HTML完全加载。您可以通过将所有JS代码包装在'$(document).ready(...)'中来实现这一点'请参阅:https://learn.jquery.com/using-jquery-core/document-ready/ –
也许您的路径到javascript文件是不正确的。看看这里,它工作正常:https://jsfiddle.net/ovc6p0kq/2/ –