前端学习笔记
1. 浏览器能识别的标签
浏览器可以识别很多标签+数据,例如:
<h1>中国</h1> -> 浏览器看见加大加粗
<span style='color:red'>中国</span> -> 浏览器看到字体变红
1.1 编码(head)
<meta charset="UTF-8">
1.2 title(head)
<head>
<meta charset="UTF-8">
<title>中国</title>
</head>
1.3 标题(body)
<body>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
</body>
1.4 div和span(body)
<div>内容</div>
<span>内容</span>
-
div,一个占一整行。 [块级标签]
-
span,有多大占多少。 [行内/内联标签]
注意:这两个标签 + CSS样式可实现很多功能。
1.4.5 超链接(div)
跳转到其他网站,需输入整个url:
<a href="https://cn.bing.com/">点击跳转</a>
跳转到自己其他的网站:
<a href="http://127.0.0.1:8000/show/info">点击跳转</a>
<a href="/show/info">点击跳转</a>
# 当前页面跳转
<a href="/show/info">点击跳转</a>
# 新的Tab页面打开
<a href="/show/info" target="_blank">点击跳转</a>
1.4.6 图片(div)
<img src="图片地址" />
直接显示别人的图片地址(可能存在防盗链):
<img src="https://pic4.zhimg.com/v2-b23f984c2aeaa7bed12e890b4338d499_720w.jpg" />
显示自己的图片:
- 自己项目中创建:static目录,图片要放在static
- 在页面上引入
<img src="/static/1.jpg" />
- 关于设置图片的高度和宽度
<img src="图片地址" style="height: 100px; width: 200px;"/>
<img src="图片地a址" style="height: 10%; width: 20%;"/>
小结
- 学习的标签
<h1></h1>
<div></div>
<span></span>
<a></a>
<img />
- 划分
块级标签:
<h1></h1>
<div></div>
行内标签:
<span></span>
<a></a>
<img></img>
- 嵌套
<div>
<span>时间:</span>
<span>2022-11-05</span>
<img />
<a></a>
<a href="">
<img src="图片地址" />
</a>
</div>
1.4.7 列表(body)
- 无序列表
<ul>
<li></li>
<li></li>
<li></li>
</ul>
- 有序列表
<ol>
<li></li>
<li></li>
<li></li>
</ol>
1.4.8 表格(body)
<table>
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td>01</td>
<td>Sam</td>
<td>男</td>
<td>18</td>
</tr>
<tr>
<td>02</td>
<td>Rose</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>03</td>
<td>Tank</td>
<td>男</td>
<td>18</td>
</tr>
</tbody>
</table>
1.4.9 input系列
#文本框
<input type="text" />
#密码框
<input type="password" />
#文件框
<input type="file" />
#单选框
<input type="radio" name="n1"/>男
<input type="radio" name="n1"/>女
#复选框
<input type="checkbox" />篮球
<input type="checkbox" />足球
<input type="checkbox" />排球
#按钮
<input type="button" value="确认"/> -->普通按钮
<input type="submit" value="确认"/> -->提交表单
1.4.10 下拉框
#单选
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
#多选
<select multiple>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
1.4.11 多行文本
<textarea></textarea>
知识点补充
浏览器向后端发送请求
-
GET请求 【URL方法 / 表单提交】
-
现象:GET请求、跳转、向后台传入数据数据会拼接在URL上。
https://www.sogou.com/web?query=安卓&age=19&name=xx
-
注意:GET请求数据会在URL中体现。
- POST请求 【表单提交】
- 现象:提交数据不在URL中二十在请求体中。
页面上的数据,想要提交到后台
-
form标签包裹要提交的数据的标签
- 提交方式:method=“get”
- 提交的地址:action=“目的地址”
- 在form标签里面必须有一个submit标签
-
在form里面的一些标签:input / select / textarea
- 一定要写name属性
总结
-
称呼
- HTML标签
-
HTML标签 (默认格式样式,可修改)
-
HTML标签与编程语言无关
-
提醒:HTML标签比较多,不必逐一学会,上述为开发页面必备
2. css样式
CSS,专门用来“美化”标签
- 基础CSS,写简单页面 & 看懂 & 改
- 模块,调整和修改
2.1 快速了解
<img src="..." style="height: 100px;" />
<div style="color: red;">中国</div>
2.2 CSS应用方式
1. 在标签上
<img src="..." style="height: 100px;" />
<div style="color: red;">中国</div>
2. 在head标签中写style标签(*)
<head>
<style>
.c1{
color: red;
}
</style>
</head>
<div class="c1">中国</div>
3. 写到文件中(*)
.c1{
height: 100px;
}
.c2{
color: red;
}
<head>
<link rel="stylesheet" href="common.css" />
</head>
<div class="c1">中国</div>
<div class="c2">中国</div>
2.3 选择器
-
ID选择器
#c1{ } <div id="c1"></div>
-
类选择器 (最多)
.c1{ } <div class="c1"></div>
-
标签选择器
div{ } <div>xxx</div>
-
属性选择器
input[type="text"]{ border: 1px solid red; } .v1[xx="123"]{ color: gold; }
<input type="text"> <input type="password"> <div class="v1" xx="123">a</div> <div class="v1" xx="456">b</div>
-
后代选择器
.yy li{ color: pink; } .yy > a{ color: dodgerblue; }
<div class="yy"> <a>百度</a> <div> <a>谷歌</a> </div> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> </div>
关于选择器:
- 多:类选择器、标签选择器、后代选择器
- 少:属性选择器、ID选择器
关于多个样式 & 覆盖的问题:
<head>
<style>
.c1{
color: red;
border: 1px solid red;
}
.c2{
font-size: 28px;
color: green;
}
</style>
</head>
<body>
<div class="c1 c2">中国</div>
</body>
补充:下面的不要覆盖上面
<head>
<style>
.c1{
color: red !important;
border: 1px solid red;
}
.c2{
font-size: 28px;
color: green;
}
</style>
</head>
<body>
<div class="c1 c2">中国</div>
</body>
2.4 样式
1. 高度和宽度
.c1{
height: 300px;
width: 500px;
}
注意事项:
- 宽度,支持百分比
- 行内标签,默认无效;块级标签,默认有效(右侧空白可通过浮动使用)
2. 块级和行内标签
- 块级
- 行内
- CSS样式:标签 ->
display: inline-block
示例:行内 & 块级特性
<head>
<style>
.c1{
display: inline-block;
height: 300px;
width: 500px;
color: red !important;
border: 1px solid red;
}
</style>
</head>
<body>
<span class="c1">中国</span>
<span class="c1">美国</span>
<span class="c1">俄国</span>
</body>
示例:块级 & 行内标签的设置
<head>
<style>
</style>
</head>
<body>
<div style="display: inline;">中国</div>
<span style="display: block;">美国</span>
</body>
3. 字体设置
- 颜色
- 大小
- 加粗
- 字体格式
<head>
<style>
.c1{
color: red !important;
font-size: 50px;
font-weight: 400;
font-family: Microsoft Yahei;
}
</style>
</head>
<body>
<div class="c1">中国</div>
</body>
4. 文字对齐方式
<head>
<style>
.c1{
height: 300px;
width: 500px;
border: 1px solid red;
text-align: center; /* 水平方向居中*/
line-height: 300px; /* 垂直方向居中*/
}
</style>
</head>
<body>
<div class="c1">中国</div>
</body>
5. 浮动
<body>
<span>中国</span>
<span style="float: right">俄国</span>
</body>
div默认块级标签,如果浮动起来就不一样
<head>
<style>
.c1{
float: left;
height: 200px;
width: 150px;
border: 1px solid red;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
</body>
如果让标签浮动起来之后,就会脱离文档流,需在最后加style="clear: both"
<head>
<style>
.c1{
float: left;
height: 200px;
width: 150px;
border: 1px solid red;
}
</style>
</head>
<body>
<div style="background-color: dodgerblue">
<div class="c1"></div>
<div class="c1"></div>
<div class="c1"></div>
<div style="clear: both"></div>
</div>
<div>中国</div>
</body>
6. 内边距
内边距,自己内部增加像素
<head>
<style>
.c1{
height: 200px;
width: 150px;
border: 1px solid red;
padding-top: 10px;
padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
}
</style>
</head>
<body>
<div class="c1">111</div>
<div class="c1">222</div>
</body>
<head>
<style>
.c1{
height: 200px;
width: 150px;
border: 1px solid red;
padding: 10px;
}
</style>
</head>
<body>
<div class="c1">111</div>
<div class="c1">222</div>
</body>
<head>
<style>
.c1{
height: 200px;
width: 150px;
border: 1px solid red;
padding: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<div class="c1">111</div>
<div class="c1">222</div>
</body>
7. 外边距
外边距,距离外部增加像素
<head>
<style>
.c1{
height: 200px;
width: 150px;
border: 1px solid red;
margin-top: 10px;
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}
</style>
</head>
<body>
<div class="c1">111</div>
<div class="c1">222</div>
</body>
总结
-
body标签,默认有一个外边距,造成页面四边都有白色间隙,如何去除?
body{ margin: 0; }
-
内容居中
-
文本居中,文本会在这个区域剧中
<div style="height: 300px; width: 500px; text-align: center;">中国</div>
-
区域居中,自己要有宽度 +
margin-left: auto; margin-right:auto;
.container{ width: 1000px; margin: 0 auto; } <div class="container">中国</div>
-
-
父亲没有高度或宽度,会被孩子支撑起来
-
如果存在浮动,一定要在同级最后加
style="clear: both"
-
如果要用别人的样式,
F12
查看并调用 -
先分析确定整体板块,然后填充样式
知识点补充
-
a标签是行内标签,行内标签的高度、内外边距,默认无效。
-
垂直方向居中
- 文本 +
line-height: 300px;
- 图片 + 边距
- 文本 +
-
a标签默认有下划线,加
text-decoration: none;
可以去除 -
设置透明度
opacity: 0.5; /* 0 - 1 */
1. 鼠标放上去之后发生的变化hover(伪类)
- 变色
.c1:hover{
color: red;
}
- 字体变大
a:hover{
font-size: 50px;
}
- 出现下拉框,图片等
.download{
display: none;
}
.app:hover .download{
display: block;
}
2. after(伪类)
.c1:after{
content: "第一";
}
<div class="c1">中国</div>
很重要,可以解决浮动脱离文档流的问题
.clearfix:after{
content: "";
display: block;
clear: both;
}
.item{
float: left;
}
<div class="clearfix">
<div class="item">111</div>
<div class="item">222</div>
<div class="item">333</div>
</div>
3. position
- fixed
- relative
- absolute
1. fixed
固定在窗口的某个位置。
案例:返回底部
.back{
position: fixed;
width: 40px;
height: 40px;
border: 1px solid red;
right: 10px;
bottom:50px;
}
<div style="height: 1000px; background-color: black"></div>
<div class="back"></div>
案例:对话框
.dialog{
positon: fixed;
width: 400px;
height: 400px;
background-color: white;
left: 0;
right: 0;
margin: 0 auto;
top:200px;
z-index: 1000;
}
.mask{
positon: fixed;
background-color: black;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0.7;
z-index: 999;
}
<div style="height: 1000px">111</div>
<div class="mask"></div>
<div class="dialog"></div>
可以通过z-index
实现遮罩顺序,z-index
大的在上面
2. relative和absolute
.c1{
height: 400px;
width: 400px;
border: 1px solid red;
margin: 100px;
position: relative;
}
.c1 .c2{
height: 40px;
width: 40px;
background-color: black;
position: absolute;
right: 10px;
bottom: 10px;
}
<div class="c1">
<div class="c2"></div>
</div>
4. border
.c1{
height: 400px;
width: 400px;
margin: 100px;
border: 1px solid red;
border-left: 10px solid black;
}
<div class="c1"></div>
边框透明色
.c1{
height: 400px;
width: 400px;
margin: 100px;
background-color: #5f5750;
border-left: 10px solid transparent;
}
.c1:hover{
border-left: 10px solid red;
}
<div class="c1">中国</div>
5. 背景色
.c1{
height: 400px;
width: 400px;
margin: 100px;
background-color: #5f5750;
}
<div class="c1">中国</div>
注意:以上CSS样式不是全部,但不必逐一学会,上述为开发页面必备
3. BootStrap
已经写好的CSS样式,如果想要使用BootStrap
- 下载BootStrap
- 使用
- 在页面上引入BootStrap
- 编写HTML时,按照BootStrap的规定来编写 + 自定制
3.1 导航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="bootstrap-5.1.3-dist/css/bootstrap.css">
</head>
<body>
<div class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled">Disabled</a>
</li>
</ul>
<form class="d-flex" role="search">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</div>
</body>
</html>
3.2 栅格
-
把整体划分为12个格子
-
分类
-
响应式,根据屏幕宽度不同
.col-sm- ≥576px .col-md- ≥768px .col-lg- ≥992px .col-xl- ≥1200px .col-xxl- ≥1400px
-
非响应式
<div class="col-xs-6" style="background-color: red">111</div> <div class="col-xs-6" style="background-color: green">222</div>
-
列偏移
<div class="col-sm-offset-2 col-sm-6" style="background-color: green">222</div>
-
案例:登录
- 宽度 + 区域居中
- 内边距
- 表单
案例:后台管理
- 导航
- 新建,按钮
- 表格
3.3 图标
-
Bootstrap有但不多
-
Font Awesome组件
-
下载
https://fontawesome.dashgame.com/
-
引入
<link rel="stylesheet" href="static/piugins/font-awesome-4.7.0/css/font-awesome.css">
-
使用
-
3.4 Bootstrap依赖
BootStrap依赖JavaScript的类库,JQuery
- 下载JQuery,在页面上应用JQuery
- 在页面上应用BootStrap的JavaScript的类库
4. JavaScript
前端三大组件:
-
HTML,纯简陋静态
-
CSS,好看
-
JavaScript,动态
-
编程语言,浏览器就是它的语言解释器
-
DOM和BOM
相当于编程语言内置的模块 例如:python中的re、random、time、json模块等
-
类库(模板)
JQuery是JavaScript的类库相当于编程语言的第三方模块 例如:requests、openpyxl
-
4.1 代码位置
<head>
<title></title>
<style></style>
<!-- 位置1 -->
<script type="text/javascript">
// 编写JavaScript代码
</script>
</head>
<body>
.
.
.
<!-- 位置2 -->
<script type="text/javascript">
// 编写JavaScript代码
</script>
</body>
JS代码的存在形式:
-
当前HTML中
<script type="text/javascript"> // 编写JavaScript代码 </script>
-
在其他js文件中,导入使用
<head> <title></title> <style></style> <!-- 位置1 --> <script src="static/1.js"></script> </head>
<body> . . . <!-- 位置2 --> <script src="static/1.js"></script> </body>
4.2 注释
-
HTML的注释
<!-- 注释内容 -->
-
CSS的注释,在
style代码块
中/* 注释内容 */
-
JavaScript的注释,在
script代码块
中// 注释内容 /* 注释内容 */
4.3 变量
- 定义
<script type="text/javascript">
var name = "张三";
</script>
- 输出
<script type="text/javascript">
var name = "张三";
console.log(name);
</script>
4.4 字符串类型
// 声明
var name = "张三";
var name = String("张三");
// 常见功能
var name = "中国共产党";
var v1 = name.length;
var v2 = name[0]; // name.charAt(0)
var v3 = name.trim(); // 去空白
var v4 = name.substring(1,2); // 前取后不取
案例:跑马灯
<span id="txt">中国共产党万岁</span>
<script type="text/javascript">
function show(){
// 1.去HTML中找到某个标签并获取它的内容(DOM)
var tag = document.getElementById("txt");
var dataString = tag.innerText;
// 2.动态,把文本中的第一个字符放在字符串的最后
var firstChar = dataString(0);
var otherString = dataString.substring(1, dataString.length);
var newText = otherString + firstChar;
// 3.在HTML标签中更新内容
tag.innerText = newText;
}
// JavaScript中的定时器
setInterval(show, 1000);
</script>
4.5 数组
// 定义
var v1 = [1,2,3,4];
var v2 = Array([1,2,3,4]);
// 操作
var v1 = [1,2,3,4];
v1[0]
v1[1] = "中国";
v1.push("qwe"); // 尾部追加[1,2,3,4,"qwe"]
v1.unshift("qwe"); // 首部增加["qwe",1,2,3,4]
v1.splice(索引,替换的数量,元素)
v1.splice(2,0,"中国"); // [1,2,"中国",3,4]
v1.pop() // 尾部删除
v1.shift() // 首部删除
v1.splice(2,1) // 删除索引为2的元素 [1,2,4]
var v1 = [1,2,3,4];
for(var index in v1){
// index = 0/1/2/3 data = v1[index]
}
for(var i = 0; i < v1.length; i++){
// i = 0/1/2/3 data = v1[index]
}
注意:break和continue
案例:动态数据
<ul id="city"></ul>
<script type="text/javascript">
var cityList = ["北京","上海","广州","深圳"];
for(var index in cityList){
var text = cityList[index];
// 创建 <li></li>
var tag = document.createElement("li");
// 在li标签中写入内容
tag.innerText = text;
// 添加到id=city的标签里面(DOM)
var parentTag = document.getElementById("city");
parentTag.appendChild(tag);
}
</script>
4.6 对象(字典)
info = {
"name": "中国",
"year": "73"
}
info = {
name: 中国,
year: 73
}
info.year
info.name = "China"
info["year"]
info["name"] = "China"
delete info["year"]
info = {
name: 中国,
year: 73
}
for(var key in info){
// key = name/year data = info[key]
}
案例:动态表格
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>year</th>
</tr>
</thead>
<tbody id="body">
</tbody>
</table>
<script type="text/javascript">
var info = {id: 1, name: 中国, year: 73};
// 创建 <tr></tr>
var tr = document.createElement("tr");
for(var key in info){
var text = info[key];
// 创建 <td></td>
var td = document.createElement("td");
// 在td标签中写入内容
td.innerText = text;
// 添加到tr标签里面
tr.appendChild(td);
}
// 添加到id=body的标签里面(DOM)
var parentTag = document.getElementById("body");
parentTag.appendChild(tr);
</script>
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>year</th>
</tr>
</thead>
<tbody id="body">
</tbody>
</table>
<script type="text/javascript">
var dataList = [
{id: 1, name: 中国, year: 73},
{id: 1, name: 中国, year: 73},
{id: 1, name: 中国, year: 73}
];
for(var index in dataList){
var info = dataList[index];
// 创建 <tr></tr>
var tr = document.createElement("tr");
for(var key in info){
var text = info[key];
// 创建 <td></td>
var td = document.createElement("td");
// 在td标签中写入内容
td.innerText = text;
// 添加到tr标签里面
tr.appendChild(td);
}
// 添加到id=body的标签里面(DOM)
var parentTag = document.getElementById("body");
parentTag.appendChild(tr);
}
</script>
4.7 条件语句
if (条件) {
}else{
}
if (1 == 1) {
}else{
}
if (条件) {
}else if (条件) {
}else if (条件) {
}else{
}
4.8 函数
function func(){
...
}
func()
5. DOM
DOM,是一个模块,模块可以对HTML页面中的标签进行操作
// 根据ID获取标签
var tag = document.getElementById("xxx");
// 获取标签中的文本
tag.innerText
// 修改标签中的文本
tag.innerText = "哈哈哈"
// 创建标签 <div></div>
var tag = document.createElement("div");
// 标签写内容
tag.innerText = "哈哈哈";
// 向标签中添加数据
var tag = document.getElementById("xxx");
var newTag = document.createElement("ooo");
newTag.innerText = "哈哈哈";
tag.appendChild(newTag);
5.1 事件绑定
<input type="button" value="添加" onclick="addCityInfo"/>
<ul id="city"></ul>
<script type="text/javascript">
function addCityInfo(){
var newTag = document.createElement("li");
newTag.innerText = "哈哈哈";
var tag = document.getElementById("city");
tag.appendChild(newTag);
}
</script>
<input type="text" placeholder="请输入内容" id="txtUser"/>
<input type="button" value="添加" onclick="addCityInfo"/>
<ul id="city"></ul>
<script type="text/javascript">
function addCityInfo(){
// 1.找到输入标签
var txtTag = document.getElementById("txtUser");
// 2.获取input框中用户输入的内容
var newString = txtTag.value;
// 判断输入是否为空,只有不空才能继续
if (newString.length > 0){
// 3.创建标签 <li></li> 中间的文本信息就是用户输入的内容
var newTag = document.createElement("li");
newTag.innerText = "哈哈哈";
// 4.标签添加到ul中
var tag = document.getElementById("city");
tag.appendChild(newTag);
// 5.将input框内容清空
txtTag.value = "";
}else{
alert("输入不能为空")
}
}
</script>
注意:
DOM中还有很多操作,可以实现很多功能,但是比较繁琐。
页面上的效果:JQuery来实现 / vue.js / react.js
6.JQuery
JQuery是一个JavaScript第三方模块(第三方类库)
- 基于JQuery,自己开发一个功能
- 现成的工具 依赖JQuery,例如:BootStrap动态效果
6.1 寻找标签(直接寻找)
-
ID
<h1 id="txt">中国</h1> <h1>中国</h1> <h1>中国</h1>
$("#txt")
-
样式选择器
<h1 class="c1">中国</h1> <h1 class="c1">中国人</h1> <h1 class="c2">中国</h1>
$("#.c1")
-
标签选择器
<h1 class="c1">中国</h1> <div class="c1">中国人</div> <h1 class="c2">中国</h1>
$("h1")
-
层级选择器
<h1 class="c1">中国</h1> <h1 class="c1"> <div class="c2"> <span></span> <a></a> </div> </h1> <h1 class="c2">中国</h1>
$(".c1 .c2 a")
-
多选择器
<h1 class="c1">中国</h1> <h1 class="c1"> <div class="c3"> <span></span> <a></a> </div> </h1> <h1 class="c2">中国</h1>
$(".c3, .c2, li")
-
属性选择器
<input type="text" name="n1"/> <input type="text" name="n1"/> <input type="text" name="n2"/>
$("input[name='n1']")
6.2 间接寻找
-
找到兄弟
<div> <div>北京</div> <div id="c1">上海</div> <div>广州</div> <div>深圳</div> </div>
$("#c1").prev() // 上一个 $("#c1") $("#c1").next() // 下一个 $("#c1").next().next() // 下一个的下一个 $("#c1").siblings() // 所有的
-
找父子
<div> <div> <div>北京</div> <div id="c1">上海 <div>青浦区</div> <div class="p">宝山区</div> <div>浦东新区</div> </div> <div>广州</div> <div>深圳</div> </div> <div> <div>北</div> <div>上</div> <div>广</div> <div>深</div> </div> </div>
$("#c1").parent() // 父亲 $("#c1").parent().parent() // 父亲的父亲 $("#c1").children() // 所有的孩子 $("#c1").children(".p") // 所有的孩子中寻找class=p $("#c1").find(".p") // 所有的子孙中寻找class=p $("#c1").find("div") // 所有的子孙中寻找div标签
案例:菜单切换
<head>
<style>
.menus{
width: 300px;
height: 800px;
border: 1px solid red;
}
.menus .header{
background-color: gold;
padding: 10px 5px;
border-bottom: 1px dotted #dddddd;
}
.menus .header a{
display: block;
padding: 5px 5px;
border-bottom: 1px dotted #dddddd;
}
.hide{
display: none;
}
</style>
</head>
<body>
<div class="menus">
<div class="item">
<div class="header" onclick="clickMe(this);">1111</div>
<div class="content hide">
<a>1000</a>
<a>0100</a>
<a>0010</a>
<a>0001</a>
</div>
</div>
<div class="item">
<div class="header" onclick="clickMe(this);">2222</div>
<div class="content hide">
<a>2000</a>
<a>0200</a>
<a>0020</a>
<a>0002</a>
</div>
</div>
<div class="item">
<div class="header" onclick="clickMe(this);">3333</div>
<div class="content hide">
<a>3000</a>
<a>0300</a>
<a>0030</a>
<a>0003</a>
</div>
</div>
</div>
<script src="static/jquery-3.6.1.min.js"></script>
<script>
function clickMe(self){
// 让自己下面的功能展示出来
$(self).next().removeClass("hide");
// 找父亲->父亲的所有兄弟->每个兄弟的子孙中寻找 class=content,添加hide样式
$(self).parent().siblings().find(".content").addClass("hide");
}
</script>
</body>
6.3 操作样式
- addClass
- removeClass
- hasClass,检查是否有样式及样式的内容
6.4 值的操作
<div id="c1">内容</div>
$("#c1").text() // 获取文本内容
$("#c1").text() // 设置文本内容
<input type="text" id="c2"/>
$("#c1").val() // 获取用户输入的值
$("#c1").val("哈哈哈") // 设置值
案例:动态创建数据
<input type="text" id="txtUser" placeholder="用户名"/>
<input type="text" id="txtEmail" placeholder="邮箱"/>
<input type="button" value="提交" onclick="getInfo()"/>
<ul id="view">
</ul>
<script src="static/jquery-3.6.1.min.js"></script>
<script>
function getInfo(){
// 1.获取用户输入的用户名和邮箱
var username = $("#txtUser").val();
var email =$("#txtEmail").val();
var newString = username + "-" + email;
// 2.创建li标签,在li标签内部写入内容
var li = $("<li>").text(newString);
// 3.把新创建的li标签添加到ul里面
$("#view").append(li);
}
</script>
6.5 事件
<input type="button" value="提交" onclick="getInfo()"/>
<script>
function getInfo(){
}
</script>
<ul>
<li>百度</li>
<li>搜狗</li>
<li>谷歌</li>
</ul>
<script>
$("li").click(function(){
// 点击li标签,自动执行该函数
// $(this) 当前点击的标签
})
</script>
在JQuery中可以删除某个标签
<div id="c1">内容</div>
$("#c1").remove();
当页面框架加载完成之后执行代码:
<ul>
<li>百度</li>
<li>搜狗</li>
<li>谷歌</li>
</ul>
<script>
$(function(){
// 当页面框架加载完成之后,自动就执行
$("li").click(function(){
$("this").remove();
})
})
</script>
案例:表格操作
<table border="1">
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>func</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>111</td>
<td>
<input type="button" value="删除" class="delete"/>
</td>
</tr>
<tr>
<td>2</td>
<td>222</td>
<td>
<input type="button" value="删除" class="delete"/>
</td>
</tr>
<tr>
<td>3</td>
<td>333</td>
<td>
<input type="button" value="删除" class="delete"/>
</td>
</tr>
</tbody>
</table>
<script src="static/jquery-3.6.1.min.js"></script>
<script>
$(function(){
// 找到所有class=delete的标签,绑定事件
$(".delete").click(function(){
// 删除当前行的数据
$(this).parent().parent().remove();
})
})
</script>
7. 前端整合
- HTML
- CSS
- JavaScript、JQuery
- BootStrap(动态效果依赖JQuery)
总结
-
了解HTML标签、标签结构,基于它可以实现简单的页面
-
CSS,了解基本样式;在别人模板的基础上该就可以
-
JavaScript、JQuery,了解基本使用
- 事件绑定 / 寻找标签 / 操作标签
- 导入现成插件
后续开发过程中,对于前端就是在BootStrap的基础上进行整改