jQuery
学习目标：
1、掌握jQuery的使用方式
2、掌握jQuery的语法
3、掌握jQuery的选择器
4、掌握jQuery操作属性、类、动画
5、掌握jQuery的ajax请求技术
第1章：jQuery简介
为什么要用jQuery呢？传统的原生的JavaScript，去操作HTML，去操作CSS，实在是太麻烦了，能不能简单点？比如说document.getElementById(‘id’)，这串代码真的好长啊。
于是jQuery是这么写的$.(‘#id’)，是不是一下子简单了N倍。
所以一句话，Jquery就是用来简化dom操作的、简化CSS。
前端大体可以暂时理解三个：H5、JS、CSS
jQuery就是作用在H5标签和JS和CSS上的。
它的作用就是用来简化dom操作、简化绑定事件函数的操作、简化样式的操作。
Vue就是用来省略DOM操作，简化事件操作、简化样式操作。
第2章：Jquey的使用
2.1 本地jQuery.js
把Jquery.js下载到项目中，引入使用。下载地址：https://code.jquery.com/jquery-3.7.0.min.js，直接全选粘贴到新建的js文件中即可。
html页面引入jQuery使用
<script src="/jquery/static/jquery/jQuery.js"></script>2.2 CDN（内容分发）加速
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>许多用户在访问其他站点时，已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。所以结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。
第3章：jQuery语法
总体来说：$(jquery选择器).要干的事情()
$(jquery选择器).要干的事情()
$(jquery选择器)=jquery对象，注意，jquery对象不是dom对象.
等文档就绪之后，Jquery才能使用：
所以jquery应该这么写：
$(document).ready(function(){
// 开始写 jQuery 代码...
});
简写：
$(function(){
// 开始写 jQuery 代码...
});第4章：🚩jQuery选择器
4.1 选择器（选择哪些dom对象，你要选择哪个或者哪些标签）
| 语法 | 类型 |
| $(“#id”) | id选择器 |
| $(“.class”) | 类选择器 |
| $(“[属性]”) | 属性选择器 |
| $(“[id^=userId-]”) | 属性值以什么开头 |
| $(“[name=zhangsan]”) | 属性等于什么值 |
| $(“span”) | 标签选择：一般是在某个范围下面才使用标签选择器。 |
| jquery对象.find(选择器) | find寻找子标签jquery对象（子子孙孙） |
| jquery对象.children(选择器) | children寻找本标签的第一级子标签 |
| jquery对象.parent(选择器) | 直接父亲 |
| jquery对象.parents(选择器) | 找祖祖辈辈 |
| jquery对象.siblings() | 所有兄弟姐妹 |
| next() | 下边一个 |
| nextAll() | 后面所有 |
| prev() | 前面一个 |
| prevAll() | 前面所有 |
4.2 jQuery对象和dom对象之间的转换：
jQuery对象转换成（或者取出）dom对象的语法：
let j = jBtn[0];
dom对象转换成jQuery对象：
let j = $(btn);// dom对象转成jQuery对象了
jQuery的each函数：
$("[muniuzhe]").each(function () { // 遍历每个标签 console.log(this.id); })
更多实例
| 语法 | 描述 |
| $("*") | 选取所有元素 |
| $(this) | 选取当前 HTML 元素 |
| $("p.intro") | 选取 class 为 intro 的 p 元素 |
| $("p:first") | 选取第一个 p元素 |
| $("ul li:first") | 选取第一个 ul 元素的第一个 li>元素 |
| $("ul li:first-child") | 选取每个 ul 元素的第一个 li 元素 |
| $("[href]") | 选取带有 href 属性的元素 |
| $("a[target='_blank']") | 选取所有 target 属性值等于 "_blank" 的a 元素 |
| $("a[target!='_blank']") | 选取所有 target 属性值不等于 "_blank" 的 a 元素 |
| $(":button") | 选取所有 type="button" 的 input 元素 和 button 元素 |
| $("tr:even") | 选取偶数位置的 tr 元素 |
| $("tr:odd") | 选取奇数位置的 tr元素 |
第5章：jQuery事件：
常见 DOM 事件：
| 鼠标事件 | 键盘事件 | 表单事件 | 文档/窗口事件 |
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload | |
| hover |
keypress() 方法触发 keypress 事件，或规定当发生 keypress 事件时运行的函数。
keypress 事件与 keydown 事件类似。当按钮被按下时发生该事件。
然而，keypress 事件不会触发所有的键（比如 ALT、CTRL、SHIFT、ESC）。请使用 keydown() 方法来检查这些键。
语法：$("p").click();// 执行点击事件
jquery对象.事件(function(){ // 执行点击事件，内嵌匿名函数
})：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--<script src="/jquery/static/jquery/jQuery.js"></script>-->
<!--CDN加速的方式-->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<body>
<h1 id="h1">单击事件</h1>
<h1 id="h2">双击事件</h1>
<h1 id="h3">鼠标移动到标签上的事件</h1>
<h1 id="h4">鼠标hover事件</h1>
<input id="input">
<input id="input1">
<input id="input2">
<form id="form" action="/jquery">
<input id="age" name="age">
<input id="name" name="name">
<input id="id" name="id">
<input id="input3" name="input3">
</form>
<button id="btn">手动提交表单呢？</button>
<button id="goLoad">去加载</button>
<div id="content">
</div>
<div style="background: green;height: 300px;overflow-y: scroll" id="scrollDiv">
<div style="height: 1000px">1</div>
</div>
</body>
<script>
$(function () {
$("#h1").click(function () {
console.log(this.id)
});
$("#h2").dblclick(function () {
console.log('双击事件')
});
$("#h3").mouseenter(function () {
console.log('鼠标移进来了')
});
$("#h3").mouseleave(function () {
console.log('鼠标移进出去了')
});
$("#h4").hover(function () {
console.log('鼠标进来')
}, function () {
console.log('鼠标出去')
});
$("#input").keypress(function () {
console.log('按下了按键');
});
$("#input1").keydown(function () {
console.log('按键按下触发');
})
$("#input2").keyup(function (event) {
console.log(event);
if (event.keyCod === 13) {
alert('去执行搜索功能')
}
console.log('按键松开触发');
});
$("#btn").click(function () {
alert('提交表单');
$("#form").submit();// 手动让表单提交
});
$("#age").change(function () {// change事件必须是内容发生变化才会触发
console.log(this.value);
});
$("#name").blur(function () {// 只要失去焦点就会触发，不管内容是否改变
console.log(this.value);
});
$("#id").focus(function () {
console.log('输入框获得了焦点');
});
// 一边输入一边就执行：百度的时候你去搜索一个内容 input事件，这种写法是错误的
// $("#input3").input(function () {
// console.log(this.value);
// });
// jQuery绑定事件的标准写法：
// $("#input3").on("input",function () {
// console.log(this.value);
// });
$("#input3").on({// 一口气绑定多个事件。
'input': function () {
console.log(this.value);
},
'blur': function () {
console.log('失去焦点的事件')
}
});
// 文档窗口事件了解即可：
// load可以根据一个url地址去加载 其他的页面或者数据：
$("#goLoad").click(function () {
$("#content").load("http://localhost:8080/jquery/views/test.html",
function (a, b, c) {// 回调函数有三个参数：看看分别是什么
console.log(a, b, c);
});
});
// 这个可以用来写单页面应用程序SPA（Single Page Application）
// Vue路由就是 类似功能
$(window).resize(function () {
console.log('窗口尺寸发生了变化');
});
$("#scrollDiv").scroll(function () {
console.log('滚了。。。')
});
//
$(window).unload(function () {// 砍掉了这个功能，展示不出这个效果。
alert('您确定关闭窗口吗')
})
});
</script>
</html>第6章：jQuey效果（了解。知道有这么个功能即可）
6.1 显示/隐藏
jQuery hide() 和 show()
6.2 淡入淡出：
$("button").click(function(){
$("#div1").fadeIn(); // 淡入
$("#div2").fadeIn("slow"); // 缓慢淡入
$("#div3").fadeIn(3000); // 具体淡入时间
});
$("button").click(function(){
$("#div1").fadeOut(); // 淡出
$("#div2").fadeOut("slow");// 缓慢淡出
$("#div3").fadeOut(3000);// 淡出时间设置
});
$("button").click(function(){
$("#div1").fadeToggle(); // 显示就隐藏，隐藏就显示，就像开关一样。
$("#div2").fadeToggle("slow");
$("#div3").fadeToggle(3000);
});6.3 滑动
$(selector).slideDown(speed,callback);
slideDown() // 滑下来（出现）
slideUp()// 滑上去（消失）
slideToggle()// 滑上去或者滑下来6.4 动画（了解）
$(selector).animate({params},speed,callback);
$("button").click(function(){
$("div").animate({left:'250px'});
});
$("button").click(function(){
$("div").animate({
left:'250px',
opacity:'0.5',
height:'150px',
width:'150px'
});
});第7章：🚩jQuey操作H5
7.1 text()、html()、val()函数
text:只设置/获得文字 html设置/获得html代码，可以是文字，可以有样式 val函数：给input设置value的值，或者取值。
7.2 attr()方法 获取/设置属性
设置或者取得属性值
7.3 css({}) 控制样式。
设置css样式：css({}) 取值：css(“color”)
7.4 🚩🚩添加/删除元素
append() - 在被选元素的里边的结尾插入内容 prepend() - 在被选元素的里边的开头插入内容 after() - 在被选元素之后插入内容 before() - 在被选元素之前插入内容
7.5 🚩🚩删除元素
remove() - 删除被选元素（及其子元素） empty() - 从被选元素里边删除子元素
第8章：🚩jQuery遍历（重点）与过滤（了解）
jquery对象数组.each(function (){ })
了解
last() 方法最后一个 eq(从0开始)下标选择[0] filter(选择器) not(选择器)
第9章：🚩🚩jQuery的Ajax方法
9.1 jQeury的ajax原生语法：
$.ajax({name:value, name:value, ... })
| 名称 | 值/描述 |
| async | 布尔值，表示请求是否异步处理。默认是 true。 |
| beforeSend(xhr) | 发送请求前运行的函数。 |
| cache | 布尔值，表示浏览器是否缓存被请求页面。默认是 true。 |
| complete(xhr,status) | 请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。 |
| contentType | 发送数据到服务器时所使用的内容类型。默认是：application/x-www-form-urlencoded" 默认就是表单数据，如果后期需要传递JSON字符串，请设置为"application/json"。 |
| context | 为所有 AJAX 相关的回调函数规定 "this" 值。 |
| data | 规定要发送到服务器的数据。 如果contentType是"application/json"的时候，一定务必传递的是JSON字符串！ |
| dataFilter(data,type) | 用于处理 XMLHttpRequest 原始响应数据的函数。 |
| dataType | 预期的服务器响应的数据类型。（默认json） 还有text/html |
| error(xhr,status,error) | 如果请求失败要运行的函数。 |
| global | 布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。 |
| ifModified | 布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。 |
| jsonp | 在一个 jsonp 中重写回调函数的字符串。 |
| jsonpCallback | 在一个 jsonp 中规定回调函数的名称。 |
| password | 规定在 HTTP 访问认证请求中使用的密码。 |
| processData | 布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。 |
| scriptCharset | 规定请求的字符集。 |
| success(result,status,xhr) | 当请求成功时运行的函数。 |
| timeout | 设置本地的请求超时时间（以毫秒计）。 |
| traditional | 布尔值，规定是否使用参数序列化的传统样式。 |
| type | 规定请求的类型（GET 或 POST）。 |
| url | 规定发送请求的 URL。默认是当前页面。 |
| username | 规定在 HTTP 访问认证请求中使用的用户名。 |
| xhr | 用于创建 XMLHttpRequest 对象的函数。 |
9.2 🚩get简写
$.get(url,{},function(){ },'json')
9.3 🚩post简写
$.post(url,{},function(){ },'json')
9.4 🚩$.ajaxPrefilter() ajax请求过滤
ajax请求前处理：
可以加前缀，可以加头信息加token，加一些配置
$.ajaxPrefilter((options) => { })
9.5 load()
将指定内容加载到某个元素中
$(selector).load(url,data,function(response,status,xhr))
作业：
1、预习jQuery的Ajax,尝试用ajax请求商品数据，用jQuery的操作标签的函数，将返回的商品对象展示到页面中。
