技术文摘
如何在外部js中调用jquery
如何在外部js中调用jquery
在网页开发中，jQuery作为一款功能强大且应用广泛的JavaScript库，能极大地简化DOM操作、事件处理等任务。当项目结构较为复杂时，将代码分离到外部js文件中是提升代码可维护性和可读性的有效方式。那么，如何在外部js中调用jQuery呢？
确保已经在HTML页面中引入了jQuery库。可以通过本地引入或者使用CDN链接的方式。本地引入需将jQuery库文件下载到项目目录中，然后在HTML的<head>标签内使用<script>标签指定其路径。使用CDN链接则更加便捷，只需在<script>标签的src属性中填写CDN提供的jQuery链接，例如<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>。
接着创建外部js文件，例如命名为script.js。要在这个文件中调用jQuery，关键在于确保文件在HTML页面中正确引入，并且在jQuery库之后加载。在HTML中，通过<script>标签引入外部js文件，确保<script src="script.js"></script>这一行代码在引入jQuery库的<script>标签之后。
在外部js文件中，就可以像在HTML页面内的<script>标签中一样使用jQuery了。比如，可以通过$(document).ready()函数来确保页面DOM加载完成后再执行代码。示例代码如下：
$(document).ready(function() {
$('button').click(function() {
$('p').hide();
});
});
上述代码表示当页面加载完成后，为所有<button>元素绑定一个点击事件，点击时隐藏所有<p>元素。
还可以将jQuery相关操作封装成函数，在外部js文件中定义函数，然后在合适的地方调用。例如：
function hideParagraphs() {
$('p').hide();
}
$(document).ready(function() {
$('button').click(hideParagraphs);
});
在外部js中调用jQuery并不复杂，只要遵循正确的引入顺序和使用方法，就能充分利用jQuery的强大功能来实现丰富的交互效果和高效的代码逻辑，让网页开发更加轻松和高效。