JavaScript库：jQuery，简化编程
-
jQuery介绍
-
基本使用
-
选择器
-
操作HTML
-
Ajax 前后端数据交互
1 jQuery 介绍
jQuery 是一个 JavaScript 库。极大地简化了 JavaScript 编程，例如 JS 原生代码几十行实现的功能，jQuery可能一两行就可以实现，因此得到前端程序猿广泛应用。
官方网站： https://jquery.com
发展至今，主要有三个大版本：
-
1.x：常用版本
-
2.x，3.x：除非特殊要求，一般用的少
2 jQuery基本使用
下载地址：
https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js
jQuery代码编写位置与JS位置一样，但需要先head标签里引入jquery.min.js文件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试jQuery</title>
<!-- 在线导入 jQuery 库文件，当然也可以下载下来通过本地导入-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script></head>
<body>
</body>
</html>示例：
这里分别使用原生 js 和 jQuery 写法对按钮进行处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试jQuery</title>
<!-- 在线导入 jQuery 库文件，当然也可以下载下来通过本地导入-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<button type="button" id="but">点我</button>
<script type="text/javascript">
// 原生 js 写法
var x = document.getElementById("but");
x.onclick = function () {
alert('你好 js');
}
// jQuery 语法
// $('#but') 匹配上面按钮 id ，click() 触发点击操作
$('#but').click(function () {
alert('你好 jQuery')
})
</script>
</body>
</html>点击按钮分别出现两个不同的弹窗
jQuery 基础语法是：$(selector).action()
-
$：代表 jQuery 本身
-
(selector)：选择器，查找 HTML 元素
-
action()：对元素的操作
可以看到上面两个不同写法中 jQuery 相对 js 要简化几行代码
2.1 选择器
2.2 jQuery 操作 HTML
2.2.1 示例一：隐藏显示元素
隐藏和显示元素：
-
hide() ：隐藏某个元素
-
show() ：显示某个元素
-
toggle() ：hide()和show()方法之间切换
这个示例中我将实现显示和隐藏这么一件事情，也就是当我们点击显示就将段落的内容显示，如果点隐藏就隐藏该段落的内容，点击切换就实现在隐藏和显示中切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试jQuery</title>
<!-- 在线导入 jQuery 库文件，当然也可以下载下来通过本地导入-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<p id="pp">这是一个段落</p>
<button id="hide">隐藏</button>
<button id="show">显示</button>
<button id="toggle">切换</button>
<script type="text/javascript">
// 当点击 hide 的时候就隐藏
$('#hide').click(function () {
// 点击 id = hide 就直接触发 id=pp 的 hide 方法，从而实现隐藏
$('#pp').hide();
})
// 当点击 show 的时候就显示
$('#show').click(function () {
// 点击 id = show 就直接触发 id=pp 的 show 方法，从而实现显示
$('#pp').show();
})
// 当点击 toggle 的时候就切换
$('#toggle').click(function () {
// 点击 id = toggle 就直接触发 id=pp 的 toggle 方法，从而实现切换
$('#pp').toggle();
})
</script>
</body>
</html>点击隐藏：
点击显示：
点击切换：
2.2.2 示例二：获取与设置内容
获取与设置内容：
-
text() 设置或返回所选元素的文本内容
-
html() 设置或返回所选元素的HTML内容
代码演示：
在下面的这个示例中我们想要实现获取 p 标签的内容。并且有两个方法，一个是将他解析为 html、一个是不解析直接就是 text 文本格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试jQuery</title>
<!-- 在线导入 jQuery 库文件，当然也可以下载下来通过本地导入-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<p id="txt">这是一个段落</p>
<button id="btnText">显示文本</button>
<button id="btnHtml">显示 html </button>
<script type="text/javascript">
// 处理点击显示 text 动作
$("#btnText").click(function () {
// 将获取的内容先解析为 text 临时赋值给 x
x = $("#txt").text()
// 将 x 的内容通过浏览器终端输出
console.log(x)
// 设置 txt 标签内容，颜色为红色
$("#txt").text("这是一个<b>text 段落无法解析</b>。[自动设置]").css('color','red')
})
// 处理点击显示 html 动作
$("#btnHtml").click(function () {
// 将获取的内容先解析为 html 临时赋值给 x
x = $("#txt").html()
console.log(x)
// html 解析
$("#txt").html("这是一个<b>HTML 段落解析</b>。[自动设置]").css('color','red')
})
</script>
</body>
</html>打开页面默认
点击 显示文本
点击 显示HTML，可以看到已经将段落中的 <b><\b> 标签进行 html 解析
2.2.3 示例三：获取输入值传递给其他标签
val() 设置或返回表单字段的值
val() 获取 input 标签的值，并输入至 p 标签中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试jQuery</title>
<!-- 在线导入 jQuery 库文件，当然也可以下载下来通过本地导入-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<!-- 定义 input 标签 id=ii 并将且将输入的值保存与 name 中-->
请输入:<input type="text" id="ii" name="txt">
<button id="btn1">获取 input 标签输入的值</button>
<!-- 将获取的值通过 p 标签输出 -->
<p id="inputp"></p>
<script type="text/javascript">
$("#btn1").click(function () {
// 获取 input 中的值
inputVal = $("#ii").val()
// 将 input 变量中得值设置到 id=inputp 的 p 标签
$("#inputp").text(inputVal)
})
</script>
</body>
</html>这里我在输入框中输入了老张，可以看到浏览器上就答应了老张
2.2.4 示例四：设置CSS样式
可以通过下面的内置方法设置：
-
css() 设置或返回样式属性（键值）
-
addClass() 向被选元素添加一个或多个类样式
-
removeClass() 从被选元素中删除一个或多个类样式
-
toggleClass() 对被选元素进行添加/删除类样式的切换操作
代码演示：
在下面代码中，默认 div 标签为灰色，但是当我们点击按钮他就变为橙色，因为再点击按钮的时候就会 cc2 class 的样式赋予给该 div，这是一个动态实现的过程
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试jQuery</title>
<!-- 在线导入 jQuery 库文件，当然也可以下载下来通过本地导入-->
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
/* 默认情况下为灰色*/
.cc{
color: red;
width: 200px;
height: 200px;
background: gray;
}
.cc2{
background:orange;
}
</style>
</head>
<body>
<!-- 定义 div 引用 cc class 并定义 id=dd -->
<div class="cc" id="dd">
</div>
<button id="bnt1">修改div颜色</button>
<script type="text/javascript">
// 匹配 id=bnt1 的 button 标签，并触发操作
$("#bnt1").click(function () {
// 触发 click 控制器中的函数，调用 div 标签，并将 class 改为 cc2 从而实现将灰色变为橙色
$("#dd").addClass('cc2')
})
</script>
</body>
</html>默认为灰色：在源代码中默认 class="cc"
点击修改颜色：变为橙色，并且 class="cc cc2"
由此可以得出一个 div 可以拥有多个样式 class
3 jQuery Ajax前后端数据交互
下面就是 jQuery 非常强大的地方，也就是平时使用 jQuery 非常多的地方，原生的 js 是很难实现的
正常情况下在浏览器中所看到的内容基本都是动态数据，都是通过在数据库中获取。但是前端的 html、css、js 都是属于本地静态数据无法获取到动态数据的，但是这些数据又在后端的数据库服务器上。
这时候就需要通过 Ajax 数据接口来实现获取，前端就通过 Ajax 的 API 向后端数据库发送 http 请求，这时候后端数据库服务器就会通过 http 请求响应前端所需的数据请求
浏览器访问网站一个页面时，Web服务器处理完后会以消息体方式返回浏览器，浏览器自动解析 HTML 内容。如果局部有新数据需要更新，需要刷新浏览器重新发起页面请求获取最新数据，如果每次都是通过刷新解决这个问题，势必会给服务器造成负载加重，页面加载缓慢。
Ajax（Asynchronous JavaScript And XML，异步JavaScript和XML），AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。例如在不刷新页面的情况下查询数据、登录验证等
无刷新的好处：
• 减少带宽、服务器负载
• 提高用户体验
jQuery Ajax主要使用$.ajax()方法实现，用于向服务端发送HTTP请求。
语法：$.ajax([settings]);
settings 是 $.ajax ( )方法的参数列表，用于配置 Ajax 请求的键值对集合，参数如下：
也就是说 Ajax 向服务器端发送请求会涉及到上面的这些参数
3.1 示例演示
通过这里示例可以理解如何通过 Ajax 来实现前后交互的
如上图是一个 api 服务器并返回 json 数据，然后通过前端 Ajax 请求这个接口如 ip/api/user.json，而这个 api 一般都是请求服务器数据库中数据，最后再渲染到当前的 web 页面中
那么我们该如何将拿到的 json 数据显示到 web 前端 html 中呢？就可以看看下面的操作
3.1.1 准备 json 数据
编写 go 程序实现 json 数据
package main
import (
"encoding/json"
"fmt"
)
type user struct {
Id int `json:"id"`
Name string `json:"name"`
Age int `json:"age"`
sex string `json:"sex"`
}
type S struct {
Code int `json:"code"`
Msg string `json:"msg"`
Data []user `json:"data"`
}
func main() {
s := S{
200,
"成功",
[]user{{1, "张三", 12, "男"},
{2, "李四", 21, "男"},
{3, "小红", 15, "女"}},
}
fmt.Println(s)
d, _ := json.Marshal(s)
fmt.Println(string(d))
}
http://39.105.137.222:8089/user.json ：这是我准备的数据接口，这里面是一个标准的 json 格式，是在上面的 go 程序中定义
正常来说这个数据是由数据库来输出，只不过这里为了方便 Ajax 实验我就直接手动写了一条
3.1.2 编写 Ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试Ajax</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
</head>
<body>
<div>
<h1>用户列表</h1>
<!-- 对 ul 设置 id=u ，用于在成功获取到了用户信息之后前端展示 -->
<ul id="u"></ul>
<!-- 添加 p 标签指定 id=notice 用于下面的 error 和获取数据状态码不等于 200 使用 -->
<p id="notice"></p>
</div>
<script >
// 使用 Ajax
$.ajax({
// 指定请求方式为 get
type: "GET",
// 指定获取数据的 url api，就是定义数据的 json 接口
url: "http://39.105.137.222:8089/user.json",
// 通过 success 回调获取 api 中的数据，并将其保存在 result 中，所以 result 是 api 返回的 json 数据
success: function (result) {
// 如果前端获取到的状态码为两百就在 console.log 输出 result，如果状态码不是 200 就在 console 输出获取数据失败
if(result.code == 200) {
// result.data 是一个数组，所以通过 for 循环进行遍历
for (i in result.data) {
// 每个数据都是对应一个结构体所以需要单独取出固定元素
// 将获取到的 result.data[i] name 数据拼接，并通过 append 方法追加到 id='u' 的 ul 标签中
$('#u').append("<li>"+ result.data[i]["name"] + "</li>")
}
console.log(result.data)
} else{
$('#notice').text("获取数据失败！").css("color","red")
}
},
error: function () {
// text() 方法能够将我们指定的信息输出至 id=notice 的 p 标签中
$('#notice').text("连接服务器失败！").css("color","red")
},
})
</script>
</body>
</html>浏览器访问点击 console 可以看到已经成功拿到了后端 user.json 数据，并且 web 页面也渲染成功
如果这里我在代码中将访问的 url 改为一个不存在的路径，观察 web 页面成功提示报错
浏览器刷新可以看到直接链接服务器失败
以上就是通过 Ajax 获取到 json 数据，一般拿到数据都会有一个状态码如上图中的 code ，这个状态码就是为了让前端知道这个数据在服务器端是否有正常返回，如果返回 200 就表示正常获取数据，如果返回的是一个 400 那就是一个错误数据，这就是异常处理的优化机制