day37_jquery
今日内容
0 复习昨日
1 作业
2 JS和JQuery的互相转换【理解】
3 DOM
3.1 追加元素
3.2 删除元素
4 效果 【熟悉】
4.1 隐藏显示
4.2 淡入淡出
4.3 滑入滑出
4.4 动画
5 JQuery遍历【熟悉】
6 Ajax【重点】
6.1 FastMock网站
6.2 get
6.3 post(暂时不讲)
7 作业
0 复习昨日
1 css引入的三种方式
- css直接写在标签中
- 在html页面中使用style标签内写css
- 创建单独的css文件
2 js引入的三种方式
- js代码直接写在标签里面
- js代码放在页面中script标签中
- 创建单独js文件
3 jquery是啥,干啥的
jq是js框架,类库,封装js代码
jq操作BOM,DOM,动画,AJAX4 jquery的三种基本选择器
id -->$("#id")
class -->$(".class")
element -->$("element")5 jquery获得输入框的值
$(“input”).val()
6 获得/设置内容
val()
text()
html()
7 获得/设置属性
attr(name)
attr(name,value)
attr({name:value,name:value,…})
removeAttr(name)
8 获得/设置样式
addClass(classname)
removeClass(classname)
toggleClass(classname)
css(name)
css(name,value)
css({k1:v1,k2:v2,…})
1 作业
2 JS和JQuery的互相转换
JS操作是原生js操作,都是对象.属性操作
var ele = document.getElementById(id); var val = ele.value; ele.value = ""; ele.style = "";JQuery是封装js操作,全是函数操作
$("#id").val(); $("#id").val("值"); $("#id").css("color","red");
JS和JQuery是不同的
<body> <button id="btn">按钮button> <script src="./js/jquery-2.1.0.js">script> <script> // js获得btn对象 var jsBtn = document.getElementById("btn"); // 原生js对象 console.log(jsBtn); var jqBtn = $("#btn"); // 这是一个JQuery对象,虽然是通过id获得的一个btn对象 // 但是jq是将元素对象封装到jquery的数组中 console.log(jqBtn); script> body>
2.1 将JQuery对象转换成JS对象
// jquery转成js对象,只需要从jq数组中取出即可
var jsObj = jqBtn[0];
console.log(jsObj);
2.2 将JS对象转成JQuery对象
// js转成jq对象,只需要将js对象装进jq数组中
var jqObj = $(jsObj);
console.log(jqObj);
3 DOM
3.1 追加元素
内部追加,追加的元素变成子元素
- append 追加,元素内部后面追加
- prepend 追加,元素内部前面追加
外部追加,追加的元素变成了兄弟元素
- after 追加,元素外部后面追加
- before 追加,元素外部全面追加
<body>
<div id="box" style="width: 500px; height: 300px; border: 2px red solid">
<div
id="box-1"
style="width: 100px; height: 100px; background-color: green"
>div>
div>
<button id="btn-1">元素内部后面追加button>
<button id="btn-2">元素内部前面追加button>
<button id="btn-3">元素外部后面追加button>
<button id="btn-4">元素外部前面追加button>
<script src="./js/jquery-2.1.0.js">script>
<script>
$("#btn-1").click(() => {
// 元素内部后面
$("#box").append(
""
);
});
$("#btn-2").click(() => {
// 元素内部,前面追加
$("#box").prepend(
""
);
});
$("#btn-3").click(() => {
// 元素外部,后面追加
$("#box").after(
""
);
});
$("#btn-4").click(() => {
// 元素外部,前面追加
$("#box").before(
""
);
});
script>
body>
3.2 删除元素
删除元素
- empty() 删除子元素及内容,保留自己
- remove() 删除全部元素,包括自己
- remove(选择器) 删除指定选择器选到的元素
<body>
<div id="box" style="width: 500px; height: 300px; border: 2px red solid">
<div
id="box-1"
style="width: 100px; height: 100px; background-color: green"
>div>
div>
<button id="btn-1">元素内部后面追加button>
<button id="btn-2">元素内部前面追加button>
<button id="btn-3">元素外部后面追加button>
<button id="btn-4">元素外部前面追加button>
<button id="btn-5">empty删除元素,删除子元素button>
<button id="btn-6">remove删除元素,删除所有元素button>
<button id="btn-7">remove(选择器)删除元素,删除指定元素button>
<script src="./js/jquery-2.1.0.js">script>
<script>
$("#btn-1").click(() => {
// 元素内部后面
$("#box").append(
""
);
});
$("#btn-2").click(() => {
// 元素内部,前面追加
$("#box").prepend(
""
);
});
$("#btn-3").click(() => {
// 元素外部,后面追加
$("#box").after(
""
);
});
$("#btn-4").click(() => {
// 元素外部,前面追加
$("#box").before(
""
);
});
$("#btn-5").click(() => {
// 删除子元素,保留自己
$("#box").empty();
});
$("#btn-6").click(() => {
// 删除所有元素,包括自己
$("#box").remove();
});
$("#btn-7").click(() => {
// 删除选中元素中再次选中的元素
$("div").remove("#box-1");
});
script>
body>
4 效果
4.1 隐藏显示
- show 无动画直接显示
- show(speed,[callback]) 以指定速度完成显示,动作完成会触发回调函数
- 三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
- hide 无动画直接隐藏
- hide(speed,[callback]) 以指定速度完成隐藏,动作完成会触发回调函数
- 速度的写法
- 三种预定速度之一的字符串(“slow”, “normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
<body>
<div
id="box-1"
style="width: 200px; height: 200px; background-color: red"
>div>
<button id="btn-1">无动画直接隐藏button>
<button id="btn-2">有动画隐藏button>
<button id="btn-3">无动画直接显示button>
<button id="btn-4">有动画显示button>
<script src="./js/jquery-2.1.0.js">script>
<script>
$("#btn-1").click(() => {
$("#box-1").hide();
});
$("#btn-2").click(() => {
// $("#box-1").hide(3000); // 毫秒值
// $("#box-1").hide("fast"); // 固定速度单词
$("#box-1").hide(3000, () => {
alert("动作完成!");
});
});
$("#btn-3").click(() => {
$("#box-1").show();
});
$("#btn-4").click(() => {
$("#box-1").show(3000);
});
script>
body>
4.2 淡入淡出
- fadeIn(speed,[callback]) 淡入
- fadeOut(speed,[callback]) 淡出
- fadeTo(speed,opacity,[callback]) 淡入/淡出到指定透明度
- opacity 不透明,参数是数字,值是0-1之间
- 0是完全透明 1是完全不透明
- fadeToggle(speed,[callback]) 淡入/淡出效果切换
<body>
<div
id="box-1"
style="width: 200px; height: 200px; background-color: red"
>div>
<button id="btn-1">淡入-显示button>
<button id="btn-2">淡出-隐藏button>
<button id="btn-3">淡入/淡出到指定程度button>
<button id="btn-4">淡入/淡出切换button>
<script src="./js/jquery-2.1.0.js">script>
<script>
$("#btn-1").click(() => {
$("#box-1").fadeIn(2000);
});
$("#btn-2").click(() => {
$("#box-1").fadeOut(2000);
});
$("#btn-3").click(() => {
// 参数2是透明度,0-1之间
// 0完全透明 1完全不透明
$("#box-1").fadeTo(2000, 0.33);
});
$("#btn-4").click(() => {
$("#box-1").fadeToggle(2000);
});
script>
body>
4.3 滑入滑出
- slideDown(speed, [callback]) 从上至下滑入
- slideUp(speed, [callback]) 从下至上滑出
- slideToggle(speed, [callback]) 切换
<body>
<div
id="box-1"
style="width: 200px; height: 200px; background-color: red"
>div>
<button id="btn-1">滑入-显示button>
<button id="btn-2">滑出-隐藏button>
<button id="btn-3">滑入/滑出切换button>
<script src="./js/jquery-2.1.0.js">script>
<script>
$("#btn-1").click(() => {
$("#box-1").slideDown(2000);
});
$("#btn-2").click(() => {
$("#box-1").slideUp(2000);
});
$("#btn-3").click(() => {
$("#box-1").slideToggle(2000);
});
script>
body>
4.4 动画
- animate(参数1,参数2,参数3)
- 参数1 样式集合,用json形式写
- 参数2 速度,用速度单词,或者使用时间,毫秒
- 参数3 回调函数
<body>
<button id="go">Runbutton>
<div id="block">Hello!div>
<hr />
<button id="left">«button> <button id="right">»button>
<button id="change">变形button>
<div
class="block"
style="width: 100px; height: 100px; background-color: red"
>div>
<script src="./js/jquery-2.1.0.js">script>
<script src="./js/jquery.color.js">script>
<script>
$("#go").click(function () {
$("#block").animate(
{
width: "90%",
height: "100%",
fontSize: "10em",
borderWidth: 10,
},
2000
);
});
$("#right").click(function () {
$(".block").animate({ marginLeft: "50px" }, "slow");
});
$("#left").click(function () {
$(".block").animate({ marginLeft: "0px" }, "slow");
});
/**
* JQuery动画里面默认不支持颜色设置
* 需要外部设置一个颜色js,再引入
*/
$("#change").click(function () {
$(".block").animate(
{
backgroundColor: "green",
borderRadius: "50px",
marginLeft: "100px",
},
2000
);
});
script>
body>
5 JQuery筛选查找
5.1 过滤
<body>
<div>
<p>第一段p>
<p>第二段p>
<p class="p3">第三段p>
<p>第四段p>
div>
<button id="btn-1">eq(1)button>
<button id="btn-2">firstbutton>
<button id="btn-3">lastbutton>
<button id="btn-4">filterbutton>
<button id="btn-5">notbutton>
<script src="./js/jquery-2.1.0.js">script>
<script>
$("#btn-1").click(function () {
// eq根据下标找到元素,下标从0开始
console.log($("p").eq(1).text());
});
$("#btn-2").click(function () {
// 返回第一个
console.log($("p").first().text());
});
$("#btn-3").click(function () {
console.log($("p").last().text());
});
$("#btn-4").click(function () {
// filter是在前面选择器,再留下指定选择器的内容
console.log($("p").filter(".p3").text());
});
$("#btn-5").click(function () {
// not是在前面选择器,去掉指定选择器的内容
console.log($("p").not(".p3").text());
});
script>
body>
5.2 查找
查找祖先
- parent() 直接父级
- parents() 查找所有祖先,包括到html根标签
- parentsUntil(元素) 返回所有父级,直到指定元素停止
DOCTYPE html>
<html lang="en">
<head>
<title>查找title>
<style>
div {
border: 3px red solid;
}
style>
head>
<body>
<button id="btn-1">找直接祖先button>
<button id="btn-2">找所有祖先button>
<button id="btn-3">找所有祖先,直到body停button>
<div id="box-1" style="width: 700px; height: 700px">
box-1
<div id="box-2" style="width: 400px; height: 400px">
box-2
<div id="box-3" style="width: 100px; height: 100px">box-3div>
<div id="box-4" style="width: 100px; height: 100px">box-4div>
<div id="box-5" style="width: 100px; height: 100px">box-5div>
div>
div>
<script src="./js/jquery-2.1.0.js">script>
<script>
$("#btn-1").click(() => {
// 找到box-3的直接祖先,让其边框变黄
$("#box-3").parent().css("border-color", "yellow");
});
$("#btn-2").click(() => {
// 找到box-3的所有祖先,直到html
// $("#box-3").parents().css("border-color", "yellow");
console.log($("#box-3").parents());
});
$("#btn-3").click(() => {
// 找到box-3的所有祖先,直到直到的元素停止,不包含该元素
// $("#box-3").parentsUntil("body").css("border-color", "yellow");
console.log($("#box-3").parentsUntil("body"));
});
script>
body>
html>
查找后代
- children() 返回直接后代(子)
- find(选择器) 返回所有后代,再跟进指定选择器过滤
DOCTYPE html>
<html lang="en">
<head>
<title>查找title>
<style>
div {
border: 3px red solid;
}
style>
head>
<body>
<button id="btn-4">找直接后代button>
<button id="btn-5">找所有后代再过滤button>
<div id="box-1" style="width: 700px; height: 700px">
box-1
<div id="box-2" style="width: 400px; height: 400px">
box-2
<div id="box-3" class="sunzi" style="width: 100px; height: 100px">
box-3
div>
<div id="box-4" class="sunzi" style="width: 100px; height: 100px">
box-4
div>
<div id="box-5" class="sunzi" style="width: 100px; height: 100px">
box-5
div>
div>
div>
<script src="./js/jquery-2.1.0.js">script>
<script>
$("#btn-4").click(() => {
// 找box-1的直接后代
$("#box-1").children().css("border-color", "yellow");
});
$("#btn-5").click(() => {
// 找box-1的所有后代,再根据find中的选择器再过滤
// $("#box-1").find("*").css("border-color", "yellow");
$("#box-1").find(".sunzi").css("border-color", "yellow");
});
script>
body>
html>
查找兄弟
- siblings() 所有兄弟
- next() 下一个兄弟
- prev() 上一个兄弟
DOCTYPE html>
<html lang="en">
<head>
<title>查找title>
<style>
div {
border: 3px red solid;
}
style>
head>
<body>
<button id="btn-1">找直接祖先button>
<button id="btn-2">找所有祖先button>
<button id="btn-3">找所有祖先,直到body停button>
<hr />
<button id="btn-4">找直接后代button>
<button id="btn-5">找所有后代再过滤button>
<hr />
<button id="btn-6">找box-4所有兄弟button>
<button id="btn-7">找box-4前一个兄弟button>
<button id="btn-8">找box-4后一个兄弟button>
<div id="box-1" style="width: 700px; height: 700px">
box-1
<div id="box-2" style="width: 400px; height: 400px">
box-2
<div id="box-3" class="sunzi" style="width: 100px; height: 100px">
box-3
div>
<div id="box-4" class="sunzi" style="width: 100px; height: 100px">
box-4
div>
<div id="box-5" class="sunzi" style="width: 100px; height: 100px">
box-5
div>
div>
div>
<script src="./js/jquery-2.1.0.js">script>
<script>
$("#btn-6").click(() => {
// 找box-4的所有兄弟
$("#box-4").siblings().css("border-color", "green");
// console.log($("#box-4").siblings());
});
$("#btn-7").click(() => {
// 找box-4的前一个兄弟
$("#box-4").prev().css("border-color", "green");
});
$("#btn-8").click(() => {
// 找box-4的后一个兄弟
$("#box-4").next().css("border-color", "#007acc");
});
script>
body>
html>
6 Ajax
ajax 是异步JavaScript和XML(Asynchronous JavaScript and XML)
异步,页面中科院同时进行多个事情- 经典案例: 注册框,输入完用户名直接提示"已注册"
- 这就是异步,也就是
局部刷新
使用ajax与服务器进行异步交互,向服务器发送数据,接收服务器发来的数据
PS: 因为现在还没有学习服务器,所以今天的AJAX讲基础的使用,后续学完servlet服务器技术,再来使用ajax
6.1 FastMock网站
这个网站是用来模拟一个服务器地址,这个服务器可以提供一些数据,等会儿使用ajax请求这个服务器的数据
https://www.fastmock.site/mock/5c9f6e1ec0552bd6a3f2a62cb823edc0/qiushiju/users
6.2 $.get
get请求一般用来从服务器获得数据,一般就是用来查询数据
// $.get() 可以向服务器发送一个get请求
// $.get(url, [data], [callback], [type])
// url是服务器路径,必填
// data,是向服务器发送的数据,可选
// callback,请求完成后的回调函数,可选
// type,返回内容类型,可选
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Documenttitle>
head>
<body>
<button id="btn">$.get --> gobutton>
<table border="2" id="tb-users">
<tr>
<td>编号td>
<td>姓名td>
<td>分数td>
<td>班号td>
<td>生日td>
<td>组号td>
tr>
table>
<script src="./js/jquery-2.1.0.js">script>
<script>
$("#btn").click(function () {
// 发送ajax的get请求
// 回调函数是,请求完成后执行的函数
// 回调函数中,设置一个参数,参数就是服务器返回的数据
$.get("https://www.fastmock.site/mock/5c9f6e1ec0552bd6a3f2a62cb823edc0/qiushiju/users",
function (ret) {
alert("发送请求成功!");
console.log(ret);
if (ret.status == 200) {
var dataArr = ret.data;
for (var i = 0; i < dataArr.length; i++) {
var user = dataArr[i];
$("#tb-users").append(""+
""+user.sid+" "+
""+user.sname+" "+
""+user.score+" "+
""+user.cid+" "+
""+user.sbirthday+" "+
""+user.zid+" "+
" ")
}
}
}
);
});
script>
body>
html>
6.3 $.post(暂时不讲)
post一般是向服务器发送数据的,一般是用来添加
6.4 $.ajax
$.ajax 向服务器发送请求,这种写法很灵活,可以设置请求中的任何参数
7 作业
关于前端重点
- HTML 会一些标签
- CSS 会样式(盒子,定位)
- 原生js后续用的比较少
- jquery是重点, 选择器,和dom操作,ajax
0 昨天没有全部完成，补全
0 重复一遍代码
1 jq实现图书管理
2 使用jq+正则完成表单校验
检验规则：
• 帐号：不能为空，长度6~10之间，只能包含数字和字母
• 密码：不能为空，长度6~10
• 确认密码：要与密码一致
• 手机号：不能为空，满足手机号码规则
• 邮箱：不能为空，满足邮箱格式规则
3 预习mysql
r.sname+“”+
“”+user.score+“”+
“”+user.cid+“”+
“”+user.sbirthday+“”+
“”+user.zid+“”+
“”)
}
}
}
);
});
## 6.3 $.post(暂时不讲)
> post一般是向服务器发送数据的,一般是用来添加
## 6.4 $.ajax
> $.ajax 向服务器发送请求,这种写法很灵活,可以设置请求中的任何参数
# 7 作业
> 关于前端重点
>
> - HTML 会一些标签
> - CSS 会样式(盒子,定位)
> - 原生js后续用的比较少
> - jquery是重点, 选择器,和dom操作,ajax
0 昨天没有全部完成，补全
0 重复一遍代码
1 jq实现图书管理
2 使用jq+正则完成表单校验
检验规则：
• 帐号：不能为空，长度6~10之间，只能包含数字和字母
• 密码：不能为空，长度6~10
• 确认密码：要与密码一致
• 手机号：不能为空，满足手机号码规则
• 邮箱：不能为空，满足邮箱格式规则
3 预习mysql