使用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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。