目录
一、异步请求局部刷新
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jzQG1CPR-1622609771127)(RackMultipart20210602-4-1s7eaya_html_9fd13dfcebd9ac4.png)]](https://img-blog.csdnimg.cn/20210602125629239.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTI5MzI4NzY=,size_16,color_FFFFFF,t_70)
?执行过程
用户页面中触发ajax请求，访问后端服务器，Web中间件拦截用户请求，转发后端程序进行数据处理，一般还需访问数据库，然后逐层返回。数据库返回数据处理服务，数据处理服务返回Web中间件，Web中间件返回ajax调用，将数据封装到返回的js对象中，目前主流返回数据为json字符串。在回调callback的方法中解析json中的数据，最终回显到页面上。通常我们使用jquery封装过的ajax，写法更加简洁灵活。
?
?二、jQuery
1、定义
jQuery是一门轻量的、免费开源的JS函数库，主要作用是用于简化JS代码
代码或项目对该技术的依赖程度，依赖程度越低，这个技术越轻，反之，依赖程度越高，这个技术越重。推荐使用轻量级的技术框架
jQuery的核心思想："写的更少，但做的更多"
通过 jQuery，您可以选取（查询，query） HTML 元素，并对它们执行"操作"（actions）。
jQuery** 库包含以下功能：**
- HTML 元素快速选取(给予css选择器,方便快速查询DOM文档中的元素)
- HTML 元素操作
- CSS 操作
- HTML 事件函数
- JavaScript 特效和动画
- HTML DOM 遍历和修改
- AJAX
2、jQuery使用以及入门
如何引入jQuery的文件：复制jQuery压缩包，找到HBuilder的文件夹指定项目名，粘贴进去
通过选取 HTML 元素，并对选取的元素执行某些操作。
语法格式：$(选择器).事件
$("p").hide() - 隐藏所有段落
$(".test").hide() - 隐藏所有 class="test" 的所有元素
$("#test").hide() - 隐藏所有 id="test" 的元素
2.1入门案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试jq语法</title>
<script src="jquery-1.8.3.min.js"></script>
<script>
// //获取p标签的元素，并修改样式
function fun(){
// //dom树方法获取元素
// // var a=document.getElementsByTagName("p");
// // a[0].innerHTML="变变变";
// //jq获取元素--语法格式：$(CSS选择器).事件
// //$("p").hide();//隐藏元素
var z=$("p").text("爸爸的爸爸叫爷爷");//jq使用.text()修改内容
$("p").click(function(){
$("p").text("高桌子低板凳都是木头")
});
}
</script>
</head>
<body>
<div id="m">
------d1------
</div>
<p onclick="fun();">----p1----</p>
</body>
</html>
3、jQuery的文档就绪
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试 jq的文档就绪</title>
<!-- 1. 导入jq文件 -->
<script src="jquery-1.8.3.min.js"></script>
<script>
//写法1的问题：想用的h1还没被加载，用时会报错
// 解决方案：写在h1加载之后 + 使用文档就绪函数(先导入jq)
// document.getElementsByTagName("h1")[0].innerHTML="我变了。。";
//写法2的：使用文档就绪函数(先导入jq)--是指文档都就绪了再用元素
//$(document).ready(function(){
$(function(){//文档就绪的简写方式
//document.getElementsByTagName("h1")[0].innerHTML="我变了。。";//js的dom写法
$("h1").text("我变了。。");//jq的写法
});
</script>
</head>
<body>
<h1>我是h1</h1>
</body>
</html>
三、JQuery的语法
1，选择器
标签名选择器： $(“div”) – 选中div
id选择器： $("#d1") – 选中id=d1的元素
class选择器： $(".cls") – 选中class=cls的元素
属性选择器： $("[href]") – 选中有href属性的元素
高级选择器： $(“div.d3”) – 选中class=d3的div
常用选择器：
? 过滤选择器
$("li:first") //第一个li
$("li:last") //最后一个li
$("li:even") //挑选下标为偶数的li
$("li:odd") //挑选下标为奇数的li
$("li:eq(4)") //下标等于 4 的li(第五个 li 元素)
$("li:gt(2)") //下标大于 2 的li
$("li:lt(2)") //下标小于 2 的li
? 内容过滤选择器
$("div:contains('Runob')") // 包含 Runob文本的元素
$("td:empty") //不包含子元素或者文本的空元素
? 可见性过滤选择器
$("li:hidden") //匹配所有不可见元素，或type为hidden的元素
$("li:visible") //匹配所有可见元素
? 属性过滤选择器
$("div[id]") //所有含有 id 属性的 div 元素
$("div[id='123']") // id属性值为123的div 元素
$("div[id!='123']") // id属性值不等于123的div 元素
? 状态过滤选择器
$("input:enabled") // 匹配可用的 input
$("input:disabled") // 匹配不可用的 input
$("input:checked") // 匹配选中的 input
$("option:selected") // 匹配选中的 option
? 表单选择器
$(":input") //匹配所有 input, textarea, select 和 button 元素
$(":text") //所有的单行文本框，$(":text") 等价于$("[type=text]")，推荐使用$("input:text")效率更高，下同
$(":password") //所有密码框
$(":radio") //所有单选按钮
$(":checkbox") //所有复选框
$(":submit") //所有提交按钮
$(":reset") //所有重置按钮
$(":button") //所有button按钮
$(":file") //所有文件域
–2,常用函数
text() html() val() — 获取或者设置值
hide() – 隐藏
$(“p”).css(“background-color”,“yellow”); --设置样式
show()—显示
fadeIn() — 淡入
fadeOut() — 淡出
–3,常用事件
单击事件–click !!!
双击事件–dblclick
鼠标移入事件–mouseenter
鼠标移出事件–mousleave
鼠标悬停事件–hover
键盘事件–keydown keyup keypress
3.1、事件的定义
页面对不同访问者的响应叫做事件。
事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
常见的DOM事件有很多:
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-OT1mLgQ3-1622609771155)(RackMultipart20210602-4-1s7eaya_html_41934a8b8ef4f294.png)]](https://img-blog.csdnimg.cn/20210602130250779.png)
常见事件：?
click() -- 单击事件
$("p").click( function(){ $(this).hide(); });
dblclick() -- 双击事件
$("p").dblclick(function(){ $(this).hide(); });
mouseenter() -- 鼠标指针穿过元素
$("#p1").mouseenter(function(){ alert('鼠标移到了 id="p1" 的元素上!'); });
mouseleave() -- 鼠标指针离开元素
$("#p1").mouseleave(function(){ alert("再见，您的鼠标离开了该段落。"); });
hover() -- 光标悬停事件
$("#p1").hover(
function(){ alert("你进入了 p1!"); }, //当鼠标移动到元素上时触发
function(){ alert("拜拜! 现在你离开了 p1!"); //当鼠标移出这个元素时触发
});
可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素
$("#hide").click(function(){ $("p").hide(); });
$("#show").click(function(){ $("p").show(); });
4、jq语法以及事件的结合练习
body里写网页元素，head里使用script修饰元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试jq语法、事件</title>
<!-- 1.引入jq -->
<script src="jquery-1.8.3.min.js"></script>
<!-- 2.使用jq语法 ：$(选择器).事件-->
<script>
//jq文档就绪函数:保证元素都被加载，否则使用时会报错
$(function(){
//练习1.单击id=d1的元素，隐藏id=p1的
$("#d1").click(function(){
$("#p1").hide();
});
});
//练习2.双击clas=“dd”的元素，给div加背景色
$(function(){
$(".dd").dblclick(function(){
$("div").css("background-color","green");
})
});
//练习3.鼠标进入id=“d1”的div，隐藏有href属性的元素
$(function(){
$("#d1").mouseenter(function(){
$("[href]").hide();
})
});
</script>
</head>
<body>
<div id="d1">---div1---</div>
<div class="dd">---div2---</div>
<div>---div3---</div>
<div class="dd">---div4---</div>
<p id="p1">---p1---</p>
<p>---p2---</p>
<a class="dd">---a1---</a>
<a href="#">---a2---</a>
<a href="#">---a3---</a>
</body>
</html>