使用JQuery

时间 2019-11-12

标签使用 jquery 栏目 JQuery 繁體版

原文原文链接

1、前期准备：

新建一个简单的jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>一二零叁的网站</title>
<script>
    document.getElementById("info").innerHTML = "修改后的首页界面";
</script>
</head>
<body>
    <div id="info">首页界面</div>
    <div id="info2">登陆界面</div>
</body>
</html>

浏览器上输入地址后，结果显示的文字仍是没变，后台报错：Uncaught TypeError: Cannot set property 'innerHTML' of null
缘由是由于js的加载顺序的缘由。
修改成：javascript

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>一二零叁的网站</title>
</head>

<body>
    <div id="info">首页界面</div>
    <div id="info2">登陆界面</div>
</body>
<script>
    document.getElementById("info").innerHTML = "修改后的首页界面";
</script>
</html>

以后再次输入网址就能够了
html

2、引用JQurey

1.在线直接引用

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

代码以下：java

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>一二零叁的网站</title>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
</script>
</head>

<body>
    <div id="info">首页界面</div>
    <div id="info2">登陆界面</div>
</body>
<script>
    document.getElementById("info").innerHTML = "修改后的首页界面";
    $("#info2").html("修改后的登陆界面");
</script>
</html>

输入地址后，界面有所改变这样就能够了jquery

2.下载到本地后引用

要本地使用JQuery并不须要导入什么包，只须要下载一个jquery.js文件就好了。
下载地址：https://jquery.com/download/
以后放到项目中就能够了，以下图

报错内容：

表示看不懂，网上说只要忽略掉就能够了，按图中步骤忽略掉就能够了

以后javascript的引用路径修改成：浏览器

<script src="resource/js/jquery-3.4.1.js">
</script>

这样就能够了。
附：
jquery下载：
连接：https://pan.baidu.com/s/133zZXhD-4-S3B5nBoh6jlw 提取码：pgpz
学习地址：https://www.runoob.com/jquery/jquery-install.htmljsp