第5章 、jQuery
5.1、jQuery介绍
- jQuery是什么
jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理等功能。
jQuery兼容各种主流浏览器，如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等
- jQuery的版本
目前在市场上, 1.x , 2.x, 3.x 功能的完善在1.x, 2.x的时候是属于删除旧代码,去除对于旧的浏览器兼容代码。3.x的时候增加es的新特性以及调整核心代码的结构
- jQuery的引入
根本上jquery就是一个写好的js文件,所以想要使用jQuery的语法必须先引入到本地
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
5.2、jQuery的选择器
5.2.1、直接查找
- 基本选择器
/*
#id # id选择符
element # 元素选择符
.class # class选择符
selector1, selector2, selectorN # 同时获取多个元素的选择符
jQ选择器：
$("#id") == document.getElementById('id')
$(".class")
$("element")
*/
5.3、jQuery的事件绑定
/*
用法:
直接通过事件名来进行调用
$().事件名(匿名函数)
*/
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">i am div tag</div>
<input type="text" id="t">
</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script>
$('#d1').click(function () {
window.alert('点击了div标签！')
})
$('#t').blur(function () {
window.alert('写完了吗？')
})
</script>
</html>
5.4 Ajax请求(重点)
-
什么是ajax？
-
AJAX = 异步的javascript和XML（Asynchronous Javascript and XML）
-
它不是一门编程语言，而是利用JavaScript在保证页面不被刷新、页面链接不改变的情况下与服务器交换数据并更新部分网页的技术。
-
对于传统的网页，如果想更新内容，那么必须要刷新整个页面，但有了Ajax，便可以在页面不被全部刷新的情况下更新其内容。在这个过程中，页面实际上是在后台与服务器进行了数据交互，获得数据之后，再利用JavaScript改变页面，这样页面内容就会更新了。（微博页面加载过程的例子，加载一会下方才会出现内容，这其实就是Ajax加载的过程。）
-
简言之，在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。
-
通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。
-
//get()方式 $("#btn").click(function(){ var url = "yourUrl?param1=value1¶m2=value2"; // 在url中添加参数 $.ajax({ type: "GET", url: url, dataType: "json", success: function(data){ console.log(data); // 处理回调数据 }, error : function(error) { console.log(error); // 处理错误信息 } }); }); //or $("#btn").click(function(){ $.ajax({ type: "GET", url: "yourUrl", data: { // 使用data选项传递参数 param1: "value1", param2: "value2" }, dataType: "json", success: function(data){ console.log(data); // 处理回调数据 }, error : function(error) { console.log(error); // 处理错误信息 } }); });
-
-
//post()方式 $("#btn").click(function() { $.ajax({ type: "POST", url: "yourUrl", // 请求地址 data: { // 请求参数 param1: "value1", param2: "value2" }, dataType: "json", // 服务器返回的数据类型 success: function(data) { // 成功回调函数 console.log(data); // 打印服务器返回的数据 }, error: function(error) { // 失败回调函数 console.log(error); // 打印错误信息 } }); }); -
常用的抓包工具：
- win：fiddler
- mac：Charles
易语言：适合写外挂
数据可视化：pyechars，matplotlib，Seaborn
