外部js文件妙用：jQuery库搭配，网页速度提升不止一倍

2024-04-01 技术资讯推广

如果未引用，则需要在html文件中先引用jquery库。以下为一般外部js文件调用jQuery库的步骤：最后，在html文件中引入sample.js文件，代码如下：

什么是外部js文件调用jQuery库

做网页时，你肯定得试试那个超级给力的jQuery，它可以帮你简单地搞定JavaScript代码，提高速度。只要把和jQuery有关的东西丢到专门的.js文件里，等网页打开了就直接导入就能用。可是别忘了先看看页面前面有没有引用过jQuery，要是没有，就在HTML里面加上一段语句，这样jQuery库就能顺利地加载上来了。

如何正确调用外部js文件中的jQuery库

来！首先创建一个名字为sample.js的.js文件，无论是放到网络服务器还是电脑本地都行，我这边拿了个示例名为sample.js。接下来，在这个sample.js中，利用jQuery自带的”document ready”函数，保证所有DOM元素都加载完毕后再执行代码，这样就能避免错误发生！

javascript
$(document).ready(function(){
$(document).ready(function(){
    // js代码内容
});

    //在此函数内编写想要执行的JavaScript代码
});

来，我们试试在”document ready”（文档加载完成后执行）这个函数里添加想要运行的JavaScript代码。现在我们要试试把网页中的所有文本都替换为文字，看看效果如何！是不是很神奇？这条代码立马就搞定！

把整个网页里的元素都刷一遍，然后挨个处理里面的内容。

        if(this.nodeType ===3){

$(document).ready(function(){
    $('body').html($('body').html().replace(/关键词/g, '替换词'));
});


换个说法，现在的这个就变成“新文本”了。

        }

    });

引入外部js文件到html页面

最后，我们得加个“require”到HTML文件里面，这样才能把sample.js也搞进来。等到网页加载好之后，那个javascript的代码也就自己跑起来！具体咋办？就这么干！

“`html



加载完网页，浏览器就能帮你搞定sample.js里的所有JavaScript代码，问题全都迎刃而解！

注意事项：正确顺序引入jQuery库和其他插件或方法

别忘了导入jQuery插件或方法所需的库文件如果忘记的话，代码可就动不起来了。无论你用啥插件，确保加载顺序是对哒~

总结

把 jQuery 玩顺溜超简单只需要留意下面几点就好！首先，弄个.js文件出来；接着在 HTML加载完后用”document ready”函数等一等；再往上写你想让它做的JavaScript代码；千万别忘记html中加那个新生成的.js文件记住，别忘了先引入jQuery库才去操作别的东西，以免出现问题。

这文章是不是挺有用的？要是还有啥不明白的地方，或者想要了解外置JS文件怎么通过jQuery来使能，就直接问我！

			    						    						    						    					    		
			    					    				    					    			 原文链接：https://www.icz.com/technicalinformation/web/2024/04/12608.html，转载请注明出处~~~