当前位置: 移动技术网 > IT编程>开发语言>Java > JavaEE的jsp文件引入jQuery库,jq代码无法执行

JavaEE的jsp文件引入jQuery库,jq代码无法执行

2020年07月14日  | 移动技术网IT编程  | 我要评论

下载jQuery库的方法

1.本地jQuery库:在官网jquery.com下载jQuery库;
2.在线:从在线CDN中载入jQuery,常见的有新浪、百度、谷歌等(国内的用新浪百度这些比较稳定)。

文件中引入jQuery库

1.本地jQuery库:
下载后,js文件存放到与网页文件同一个目录下,然后引入即可。
注意:引入的位置应该在head结构中,而且路径最好改为绝对地址,因为JavaEE加载静态资源有时候会出现延迟问题。

<head>
<script type="text/javascript" src="http://localhost:8080/ForumSyst/jquery-3.5.1.js"></script>
</head>

2.在线cdn资源的jq库:

<head>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>

还有https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js 、
https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js 、
https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js
等等其他的在线资源库,到此为止则引入成功了

可以验证一下是否引入成功

console.log($.fn.jquery)

引入成功则会在控制台中输出jq库的版本号

一些问题

按照以上的操作做了一遍,运行jsp文件在chrome中控制台输出无法识别jq代码的报错信息,比如 “Uncaught TypeError: Cannot read property ‘click’ of null”,这是它无法解析到我绑定的click事件。这个时候,考虑script代码没有被解析到,我的解决方法是,把这一个click事件单独用一个script标签括住。

<script>
	$('#fav').click(
        function (event) {
        console.log("收藏")
        console.log($("#fav").data("aid"));
    })
</script>

还有一些其他出错问题,比如使用控制台输出jq语句获取的元素内容,而输出的是undefined或者null,这个时候考虑你要获取的元素id是否在script代码加载后才定义的,也就是代码执行的顺序,最好把script代码放在文件最后。

有时候,引入本地库,JavaEE会解析不了jq代码,考虑jq库的路径是否正确,或者考虑静态资源加载延迟。
如果路径正确,可以尝试引入在线cdn资源库,如果引入在线cdn后jq代码还是不能解析,考虑代码是否写错了。

本文地址:https://blog.csdn.net/weixin_43823997/article/details/107301844

如对本文有疑问, 点击进行留言回复!!

相关文章:

验证码:
移动技术网