淘先锋技术网

首页 1 2 3 4 5 6 7

html写jquery无效

有时候，在编写网页的过程中，我们会使用jQuery来实现一些特殊的功能，但是当我们按照常规的方法去写时，发现jQuery却无法正常工作。

<!DOCTYPE html>
<html>
<head>
<title>jQuery无效的问题</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#btn').click(function(){
alert('按钮被点击了');
});
});
</script>
<button id="btn">点击我</button>
</body>
</html>

以上的代码是一个简单的HTML文件，其中包含了jQuery的库文件和一个按钮元素。

在这段代码中，我们尝试使用jQuery来实现当按钮被点击时出发的函数。但是，当我们运行这段代码时会发现，按钮点击并不会触发alert弹窗，这是为什么呢？

实际上，这是因为我们写的jQuery代码缺少了一个重要的步骤——包装器。包装器就是一个将所有代码放置在其中的jQuery函数，它的作用是确保代码在文档加载完毕后才会运行。

<!DOCTYPE html>
<html>
<head>
<title>jQuery无效的问题解决</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// 这里的代码在文档完全加载之后运行
$('#btn').click(function(){
alert('按钮被点击了');
});
});
</script>
<button id="btn">点击我</button>
</body>
</html>

在代码中，我们使用了一个$(document).ready()函数将包含我们的jQuery代码，这样可以确保代码在文档加载完成后再执行。使用完整的包装器后，我们就可以愉快地使用jQuery了。