day06
一、jquery动画
1.animate({params},speed,callback) 设置动画
2.stop() 方法用于在动画或效果完成前对它们进行停止
<!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>Document</title>
<script src="../js/jquery-3.5.1.min.js" type="text/javascript"></script>
<style>
div {
width: 200px;
height: 200px;
background-color: red;
/* 动画需要给一个定位 */
position: relative;
}
</style>
</head>
<body>
<div></div>
<button id="tv_id01">点击</button>
<button id="tv_id02">停止</button>
<script>
//注意点：在animate()方法啊里面，前面的参数有多个使用大括号括起来
//后面跟的参数是这个动画移动的时间
$("#tv_id01").click(function() {
$("div").animate({
left: '250px'
}, 4000);
});
//动画停止移动
$("#tv_id02").click(function() {
$("div").stop();
});
</script>
</body>
</html>
二、jquery操作DON
2.1 操作属性方法
1.attr() 设置或返回匹配元素的属性和值
2.html() 设置或返回匹配的元素集合中的 HTML 内容
3.val() 设置或返回匹配元素的值
4.text() 设置文本内容
5.prop() 设置或返回匹配元素的属性和值（现在的开发一般使用prop而不是用attr）
<!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>Document</title>
<script src="../js/jquery-3.5.1.min.js" type="text/javascript"></script>
</head>
<body>
<input type="button" id="tv_in" value="单击" onclick="show()">
<input type="text" id="tv_u">
<div>
<h1>牛逼冲天</h1>
</div>
<script>
function show() {
// alert($("#tv_in").prop("input"));
//使用这个是需要修改标签的话，在寻找的是他的父标签，html()是可以识别标签的
// $("div").html("<span>还是你牛逼</span>");
//使用text是想修改文本内容，拿取的是需要修改的标签
// $("h1").text("<span>还是你牛逼</span>");
//通过jquery来获取输入框的值
// alert($("#tv_u").val());
//修改输入框里面的value值
$("#tv_u").val("你不行呀！")
}
</script>
</body>
</html>
2.2 计时器-案例
step01 需求
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-4NSWexEy-1647951693669)(E:/%E8%87%AA%E5%B7%B1%E7%AC%94%E8%AE%B0/%E5%89%8D%E7%AB%AF%E7%AC%94%E8%AE%B0/image-20220322162405768.png)]
step02 代码
<!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>Document</title>
<script src="../js/jquery-3.5.1.min.js" type="text/javascript"></script>
</head>
<body>
<input type="button" value="请阅读(60)秒" id="tv_id">
<script>
//准备函数
$("#tv_id").ready(function() {
$("#tv_id").prop("disabled", true)
})
//使value变化
//定时函数
var t = setInterval("showTime()", 100);
//时间ti
var ti = 60;
//函数
function showTime() {
//进行ti的判断
if (ti > 0) {
//改变value值
ti--;
console.log(ti);
$("#tv_id").val("请阅读(" + ti + ")秒");
} else {
$("#tv_id").val("点击");
$("#tv_id").prop("disabled", false)
//移除定时器
clearInterval(t);
}
}
</script>
</body>
</html>
2.3 添加元素
1.append() 在被选元素的结尾插入内容
2.prepend() 在被选元素的开头插入内容
3.after() 在被选元素下面插入内容
4.before() 在被选元素上面插入内容
<!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">
<script src="../js/jquery-3.5.1.min.js" type="text/javascript"></script>
<title>Document</title>
</head>
<body>
<div>
<input type="button" value="点击" onclick="show()">
<p>罗志祥</p>
<script>
function show() {
//后面添加
// $("p").append("进去了");
//前面添加
// $("p").prepend("吴一凡");
//下面添加
// $("p").after("你牛逼了呀！");
//上面添加
$("p").before("不想来了");
}
</script>
</div>
</body>
</html>
2.4 删除元素
1.remove() 删除被选元素（及其子元素）(删除子元素包括本身)
2.empty() 从被选元素中删除子元素(删除子元素)
<!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>Document</title>
<script src="../js/jquery-3.5.1.min.js" type="text/javascript"></script>
</head>
<body>
<input type="button" value="点击" onclick="show()">
<div>
<p>罗志祥</p>
<div id="tv_div01">你好呀
<p>吴亦凡</p>
</div>
</div>
<script>
function show() {
//删除子元素
$("#tv_div01").empty();
//删除子元素以及本身
// $("#tv_div01").remove();
}
</script>
</body>
</html>
2.5 删除和添加类样式
1.addClass() 向匹配的元素添加指定的类名
2.removeClass() 从所有匹配的元素中删除全部或者指定的类
3.toggleClass() 从匹配的元素中添加或删除一个类。
<!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>Document</title>
<script src="../js/jquery-3.5.1.min.js" type="text/javascript"></script>
<style>
.bul {
height: 200px;
width: 300px;
background-color: orange;
border: solid 1px red;
color: blue;
}
</style>
</head>
<body>
<input type="button" value="增加类样式" id="tv_cla" />
<input type="button" value="删除类样式" id="tv_cla02" />
<input type="button" value="增加和删除类样式" id="tv_cla03" />
<div id="tv_id">
</div>
<script>
//增加
$("#tv_cla").click(function() {
$("#tv_id").addClass("bul");
});
//删除
$("#tv_cla02").click(function() {
$("#tv_id").removeClass("bul");
});
//增加和删除
$("#tv_cla03").click(function() {
$("#tv_id").toggleClass("bul");
});
</script>
</body>
</html>
2.6 改变css样式
语法：$(选择器).css({"属性名":"属性值"，"属性名":"属性值"})
<!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>Document</title>
<script src="../js/jquery-3.5.1.min.js" type="text/javascript"></script>
</head>
<style>
div {
border: solid 2px red;
}
</style>
<body>
<input type="button" value="点击" onclick="show()">
<div id="tv_div"></div>
<script>
function show() {
$("#tv_div").css({
"width": "300px",
"height": "300px",
"border": " solid 2px red;"
})
}
</script>
</body>
</html>
三、jquery的常用的选择器
3.1 过滤选择器
| 符号 | 用法 | 描述 |
|---|---|---|
| ：first | $(“p:first”） | 获取第一个 元素 |
| ：last | $(“p:last”) | 获取最后一个 元素 |
| ：even | $(“p:even”) | 获取偶数个的 标签元素（获取到的是数组） |
| ：ood | $(“p:odd”) | 获取到奇数个的 的元素（获取到的是数组） |
| ：eq（index） | $(“p:eq(3)”) | 获取到第3个 元素（index是从0开始的） |
| ：gt(index) | $(“p:gt(3)”) | 列出index大于3的元素 |
| ：lt(index) | $(“p:lt(3)”) | 列出index小于3的元素 |
| ：not(selector) | $(“input:not(:empty)”) | 所有不为空的input元素 |
<!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>Document</title>
<script src="../js/jquery-3.5.1.min.js" type="text/javascript"></script>
</head>
<body>
<div>0000000000000000000</div>
<div>1111111111111111111</div>
<div>2222222222222222222</div>
<div>3333333333333333333</div>
<div>4444444444444444444</div>
<div>5555555555555555555</div>
<div>6666666666666666666</div>
<div>7777777777777777777</div>
<div>8888888888888888888</div>
<div>9999999999999999999</div>
<script>
function show() {
//第一个元素
// alert($("div:first").html());
//最后一个
// alert($("div:last").html());
//偶数
// var arrays = $("div:even");
//大于5的
var arrays = $("div:gt(5)");
for (var i = 0; i < arrays.length; i++) {
alert(arrays[i].innerHTML)
}
}
show();
</script>
</body>
</html>
3.2 层级选择器
1.parent child parent元素包含儿子，还包含孙子(如果儿子孙子有多个，那么获取的是数组)
2.parent > child parent元素包含儿子，不包含孙子（数组）
3.prve + next prve第一个div兄弟元素 （单个）
4.prve ~ next prve的所有的div兄弟元素 （数组）
<!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>Document</title>
<script src="../js/jquery-3.2.1.min.js" type="text/javascript"></script>
</head>
<body>
<div id="tv_div01">
<span>11</span>
<div>22</div>
<div>
<div>333</div>
</div>
</div>
<div>44</div>
<div>555</div>
<script>
function show() {
//包含孙子
// var arrays = $("#tv_div01 div");
//不包含孙子
// var arrays = $("#tv_div01 > div");
//获取所有的兄弟
// var arrays = $("#tv_div01 ~ div");
// for (var i = 0; i < arrays.length; i++) {
// alert(arrays[i].innerHTML)
// }
//获取第一个兄弟
var arrays = $("#tv_div01 + div");
alert(arrays.html())
}
show();
</script>
</body>
</html>
3.3 属性选择器
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wFOlRvnk-1647951693671)(C:/Users/%E6%82%B2%E9%99%8C/AppData/Roaming/Typora/typora-user-images/image-20220322195154232.png)]
<!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>Document</title>
<script src="../js/jquery-3.2.1.min.js" type="text/javascript"></script>
</head>
<body>
<input type="button" value="点击">
<input type="button" value="双击">
<input type="button" value="不点击">
<script>
function show() {
var arrays = $("[value='双击']");
alert(arrays.html())
// for (var i = 0; i < arrays.length; i++) {
// alert(arrays[i].innerHTML)
// }
}
show();
</script>
</body>
</html>
四、 validation框架（参考文档）
五、bootstrap
5.1简介
1.基于html、css、javascript开发的简洁、直观、强悍的前端框架
2.Bootstrap前端框架：半成品，使用框架开发效率高
3.好处：
A.提供大量的css样式，以及js的组成，实现的页面更加的简单，美观
B.响应式布局：一套代码可以适应不同分辨率的设备
5.2 Bootstrap的基础搭建
步骤：1、官网下载相关的bootstrap素材
2、复制里面的文件到html的相关的文件夹里
3、新件html文件，引入相关的文件
5.3 响应式布局
1.概念；一套代码可以在不同的分辨率的设备里使用
2.实现：依赖于栅格布局，每一行站12格
3.步骤：
A.定义一个容器(table)
a.container
b.container-fluid
B.定义行(tr)
a.row
C.定义元素以及所占的格子数：语法：col-设备序号-所占格子数
a..col-xs- 超小屏幕 手机 (<768px)
b..col-sm- 小屏幕 平板 (≥768px)
c..col-md- 中等屏幕 桌面显示器 (≥992px)
d..col-lg- 大屏幕 大桌面显示器 (≥1200px)
<!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>Document</title>
<link rel="stylesheet" href="../css/bootstrap.css">
<script src="../js/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="../js/bootstrap.js" type="text/javascript"></script>
<style>
.inner {
height: 20px;
border: solid 2px red;
}
</style>
</head>
<body>
<!-- 定义一个容器 -->
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 inner"></div>
<div class="col-lg-4 inner"></div>
<div class="col-lg-4 inner"></div>
</div>
</div>
</div>
</body>
</html>
t src="…/js/jquery-3.2.1.min.js" type=“text/javascript”>
<div class="row">
<div class="col-lg-4 inner"></div>
<div class="col-lg-4 inner"></div>
<div class="col-lg-4 inner"></div>
</div>
</div>
</div>
2833
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
