文章目录
- 一、Flask网页开发
- 1.1创建一个名为web1.py的python文件
- 1.2 templates目录
- 创建文件index.html
- 二、html标签
- 2.1 编码
- 2.2title < head >
- 2.3 标题< h>
- 2.4 div和span
- 2.5超链接
- 1.在index.xml文件中补充。
- 2.修改web1.py文件
- 3.添加get_self.html
- 4.效果
- 2.6图片
- 1.格式
- 2.图片大小
- 3.本地图片的存放
- 效果
- 小结
- 标签嵌套：
- 创建商品列表
- 效果图
- 2.7列表
- 2.7.1无序列表
- 2.7.2有序列表
- 2.8表格
- 2.9 input系列
- 2.10 下拉框
- 2.11 多行文本
- 2.12 用户注册案例
- 2.13案例：简单的用户注册登录系统
- 1.用户注册的页面
- 2.用户登录页面
- 3.用户登录后的页面
- 4.flask框架搭建web
- 5.效果
- 三、CSS
- 3.1CSS方式
- 3.1.1在标签上
- 3.1.2在head标签的style上(*)
- 3.1.3 写到文件中(*)
- 3.2选择器
- 1.ID选择器 #c1
- 2.类选择器 .c2 **
- 3.标签选择器 **
- 4，属性选择器
- 5.后代选择器 **
- 6.样式覆盖问题
- 3.3样式
- 1.高度和宽度
- 2. 块级和行内标签
- 3.字体和对齐方式：
- 4. 浮动
- 5. 内边距
- 6. 外边距
- 7.全图页面和内容居中
- 8.hover：设置变色
- 9.after 尾部添加东西
- 10 fixed 返回顶部
- 10.对话框
- 11.border边框
- 3.4小米商城案例
- 1. 案例1：小米顶部
- 2.案例2：二级菜单
- 3.案例3：顶部和菜单整合
- 4.小结
- 5.案例4：推荐区域
- 四、Bootstrap
- 4.1引入bootstrap
- 1. 下载bootstrap
- 2. 项目结构：
- 3.引入bootstrap
- 4.2导航栏
- 1. 修改样式
- 2.修改body中的文本
- 4.3栅格
- 4.4 container
- 4.5 面板
- 4.6分页
- 4.7图标
- 如何使用
- 案例一：登录页面
- 案例二：后台页面
- 4.8 Bootstrap动态效果
- 五、Javascript
- 5.1js放置位置
- 5.2HTML中相关代码的注释
- 5.3 变量
- 5.3.1 字符串类型
- 5.3.2 数组
- 5.3.3 字典
- 5.4 条件语句
- 5.5 函数
- 5.6 DOM
- 5.7 事件绑定
- 5.8总结
- 6 Jquery
- 6.1快速上手
- 6.2 寻找标签（直接）
- 6.2.1 ID选择器
- 6.2.2样选择器
- 6.2.3标签选择器
- 6.2.4层级选择器
- 6.2.5多选择器
- 6.2.6属性选择器
- 6.3 寻标签（间接）
- 6.3.1找兄弟
- 6.3.1找父亲
- 案例一: 菜单的切换
- 6.4值的操作
- 6.5事件
- 案例: 表格操作
- 七、前端整合
知识总结：
Python_web前端开发
一、Flask网页开发
python 安装Flask web框架
pip install flask
1.1创建一个名为web1.py的python文件
from flask import Flask app = Flask(__name__) #创建了网址和函数的对应关系 #访问网址会自动调用函数 @app.route('/show/info') def index(): return 'hello word' if __name__ == '__main__': app.run()
1.2 templates目录
简介：templates用来返回html的页面，而非文本。
创建文件index.html
结构如下
index.xml内容如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>hello world</h1> ->如果网页还需添加东西，可在<body>下添加 </body> </html>
web1.py内容如下：
from flask import Flask, render_template app = Flask(__name__) #创建了网址和函数的对应关系 #访问网址会自动调用函数 @app.route('/show/info') def index(): #Flask内部会自动打开这个文件，并读取内容，将内容给用户返回。 #默认：去当前项目目录的templates文件夹中找 return render_template('index.html') if __name__ == '__main__': app.run()
重新运行后：
二、html标签
固定格式：h/div/span/a/img/ul/li/table/input/form
2.1 编码
通用的字符编码
< meta charset=“UTF-8”>
2.2title < head >
<head> <meta charset="UTF-8"> <title>title</title> </head>
2.3 标题< h>
<body> <h1>一级标题</h1> <h2>二级标题</h1> <h3>三级标题</h1> ... </body>
2.4 div和span
<div>内容</div> <span>hello world</span>
div:一个人占一整行；
span：用多少占多少【行内标签、内联标签】
***span同行则内容相连，span不同行则内容间有空格。
2.5超链接
设置一个跳转到本地链接和一个跳转到非本地链接。
1.在index.xml文件中补充。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的联通</title> </head> <body> <h1 >自己的网址</h1> <a href="/show/get_self">点击跳转到自己的网址</a> </body> <body> <h1 >别人的网址</h1> <a href="https://www.csdn.net/">点击跳转别人的网站百度</a> </body> </html>
**注意：**本连链接可以只写路径即可，而非本地链接则需要完整的链接。
2.修改web1.py文件
在文件中添加一个读取自己网址
from flask import Flask, render_template app = Flask(__name__) #创建了网址和函数的对应关系 #访问网址会自动调用函数 @app.route('/show/info') def index(): #Flask内部会自动打开这个文件，并读取内容，将内容给用户返回。 #默认：去当前项目目录的templates文件夹中找 return render_template('index.html') @app.route('/show/get_self') def get_self(): #Flask内部会自动打开这个文件，并读取内容，将内容给用户返回。 #默认：去当前项目目录的templates文件夹中找 return render_template('get_self.html') if __name__ == '__main__': app.run()
3.添加get_self.html
在templates目录下创建get_self.html，并添加以下内容。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>自己的网址</h1> <div>欢迎来到我的网站</div> </body> </html>
4.效果
项目结构：
运行后的效果。
2.6图片
1.格式
<imgsrc="图片链接 ”>
2.图片大小
方法一：百分比
< img style=“height:10% ;width:10% " src=”/static/1711707418779.jpg">
方法二：像素大小
<img style=“height:100px;width:100px “src=”/static/1711707418779.jpg”>
3.本地图片的存放
在项目中创建static目录下，用来存放自己的图片文件。
在index.html文件添加以下代码。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>我的联通</title> </head> <body> <h1 >自己的网址</h1> <a href="/show/get_self">点击跳转到自己的网址</a> <img style="height:100px;width:10% " src="/static/1711707418779.jpg"> </body> <body> <h1 >别人的网址</h1> <a href="https://www.csdn.net/">点击跳转别人的网站百度</a> <img style="height:100px;width:100px " src="https://copyright.bdstatic.com/vcg/creative/cc9c744cf9f7c864889c563cbdeddce6.jpg@h_1280"> </body> </html>
效果
小结
块级标签
-< h1> < /h1>
- < div>< /div>
行内标签
- < span></ span>
- < a>< /a>
- < img />
标签嵌套：
可以实现点击图片跳转到其他链接。
创建商品列表
在static目录下添加三张图片：
在web1.py中添加一个获取货物链接的方法：
@app.route('/goods/list') def get_product(): return render_template('get_product.html')
添加get_product.html，内容如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Tittle</title> </head> <body> <h1>商品列表</h1> <a href="https://www.mi.com/shop/buy/detail?product_id=19715"> <img src="/static/product1.png" style="width: 150px;"/> </a> <a href="https://www.mi.com/shop/buy/detail?product_id=19715"> <img src="/static/product2.png" style="width: 150px;"/> </a> <a href="https://www.mi.com/shop/buy/detail?product_id=19715"> <img src="/static/product3.png" style="width: 150px;"/> </a> </body> </html>
效果图
2.7列表
2.7.1无序列表
在get_product.html文件中添加：
<ul> <li>中国移动</li> <li>中国联通</li> <li>中国电信</li> </ul>
2.7.2有序列表
在get_product.html文件中添加：
- 中国移动
- 中国联通
- 中国电信
2.8表格
web1.py添加：
@app.route('/get/table') def get_table(): return render_template('get_table.html')
创建文件get_table.html并添加内容：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1"> <thead> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th></tr> </thead> <tbody> <tr><td>1</td><td>张三</td><td>20</td></tr> <tr><td>2</td><td>李四</td><td>20</td></tr> <tr><td>3</td><td>王五</td><td>20</td></tr> <tr><td>4</td><td>赵六</td><td>20</td></tr> </tbody> </table> </body> </html>
其中border="1”是添加格式框。
2.9 input系列
<!-- 文本与密码 --> <div><input type= 'text'></div> <input type="password"> <!-- 选择文件 --> <input type="file"> <!-- 单选框 --> <input type="radio" name="n1">男 <input type="radio" name="n2">女 <!-- 复选框 --> <input type="checkbox" />篮球 <input type="checkbox" />游泳 <input type="checkbox" />羽毛球 <input type="checkbox" />篮球 <!-- 按钮 --> <input type="button" value="提交">普通提交 <input type="submit" value="提交">提交表单
2.10 下拉框
.<select> <option>北京</option> <option>上海</option> <option>深圳</option> </select>
2.11 多行文本
<textarea></textarea>
2.12 用户注册案例
在web1.py文件中添加
@app.route('/register') def get_register(): return render_template('register.html')
在register.html文件中添加：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>register</title> </head> <body> <h1>用户注册</h1> <div> 用户名: <input type="text" /> </div> <div> 密码: <input type="password" /> </div> <div> 性别: <input type="radio" name="sex"/>男 <input type="radio" name="sex"/>女 </div> <div> 爱好: <input type="checkbox">唱 <input type="checkbox">跳 <input type="checkbox">Rap <input type="checkbox">篮球 </div> <div> 城市: <select> <option>北京</option> <option>上海</option> <option>深圳</option> </select> </div> <div> 备注: <textarea cols="30" rows="10"></textarea> </div> <div> <input type="button" value="button提交"> <input type="submit" value="submit提交"> </div> </body> </html>
2.13案例：简单的用户注册登录系统
提交有两种方式：
GET: 可通过URL/表单提交
POST: 只能通过表单提交,提交数据不在URL而是在请求体中
form表单可以提交的前提条件:
提交方式: method=“get”
提交地址: action=“/xxx/xxx/xxx”
在form标签里面必须有一个submit标签
每个标签有name属性
项目结构：
1.用户注册的页面
register.html添加以下内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!-- get方法注册--> ```css <h1>注册表1</h1> <form method="post" action="/register"> <div> 用户名：<input style="text" name="user"> </div> <div> 密码：<input style="password" name="pwd"> </div> <div> <input type="radio" name="gender" value="1"> 男 <input type="radio" name="gender" value="2"> 女 </div> <div> 爱好 <input type="checkbox" name="hobby" value="a">篮球 <input type="checkbox" name="hobby" value="b">足球 <input type="checkbox" name="hobby" value="c">棒球 </div> <div> 城市： <select name="city"> <option value="bj">北京</option> <option value="sh">上海</option> <option value="sz">深圳</option> </select> </div> <div> 擅长领域： <select name="skill" multiple> <option value="1">打游戏</option> <option value="2">英语</option> </select> </div> <div> 备注:<textarea name="more"></textarea> </div> <div> <input type="submit" value="submit提交"> </div> </form> </body> </html>
2.用户登录页面
login.html，添加以下内容：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>欢迎登录</h1> <form method="post" action="/login"> 账号：<input type="text" name="user"> 账号：<input type="text" name="pwd"> 提交：<input type="submit" name="button" value="submit"> </form> </body> </html>
3.用户登录后的页面
index.html，添加以下内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border="1"> <thead> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th></tr> </thead> <tbody> <tr><td>1</td><td>张三</td><td>20</td></tr> <tr><td>2</td><td>李四</td><td>20</td></tr> <tr><td>3</td><td>王五</td><td>20</td></tr> <tr><td>4</td><td>赵六</td><td>20</td></tr> </tbody> </table> </body> </html>
4.flask框架搭建web
在web.py中添加
from flask import Flask,render_template,request app = Flask(__name__) @app.route('/register',methods=['GET','POST']) def register(): if request.method == "GET": return render_template('register.html') else: user = request.form.get('user') pwd = request.form.get('pwd') gender = request.form.get('gender') hobby_list = request.form.getlist('hobby_list') city = request.form.get('city') skill_list = request.form.getlist('skill_list') more = request.form.getlist('more') print(user,pwd,gender,hobby_list,city,skill_list,more) return "注册成功" #get方式 @app.route('/login',methods=['GET','POST']) def do_register(): if request.method == "GET": return render_template('login.html') else: return render_template('index.html') if __name__ == '__main__': app.run()
5.效果
- 注册页面
- 在pycharm后台拿到账号和密码
- 在登录页面登录
- 登录完跳转到
三、CSS
简介：专门用来”美化“标签。
高度/宽度/块级or行内or块级行内/浮动/字体/文字对齐方式/内边距/外边距
关于边距：
-body
-区域居中
3.1CSS方式
3.1.1在标签上
<img src="..." stype="height: 100px"> <div stype="height: 100px">hello</div>
3.1.2在head标签的style上(*)
<head> <meta charset="UTF-8"> <title>Title</title> <style> .c1 { color:red } </style> </head> <body> <h1 class="c1">hello</h1>
3.1.3 写到文件中(*)
在static目录下创建 common.css文件
.XX{ color: red; }
调用CSS样式::
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="/static/common.css"> </head> <body> <h1 class="XX">hello</h1> </body> </html>
3.2选择器
1.ID选择器 #c1
<head> <meta charset="UTF-8"> <title>Title</title> <style> #c1 { color: red; } </style> </head> <body> <h1 id="c1">hello</h1> </body>
2.类选择器 .c2 **
<head> <meta charset="UTF-8"> <title>Title</title> <style> #c1 { color: red; } .c2 { color: green; } div { color: red; } </style> </head> <body> <h1 >x</h1> <div id="c1">小明</div> <div class="c2">小红宏</div> <div>小丽丽里</div>
3.标签选择器 **
<head> <meta charset="UTF-8"> <title>Title</title> <style> div { color: red; } </style> </head> <body> <div>小丽丽里</div>
4，属性选择器
.v1[value="xx"]{ color: gold; } <div class="v1">小明</div> <div class="v1" value="xx">小红宏</div>
找到标签为value=“xx”，才能做相应的操作。
5.后代选择器 **
指定对应的标签生效。
.ss a{ color:green; } <div class="ss"> <a>百度</a> <div> <a>谷歌</a> </div> <ul> <li>美国</li> <li>英国</li> </ul> </div>
指定ss 类下的a标签生效
6.样式覆盖问题
.c1 { color:red; } .c2 { color:gold; } <div class="c2 c1" value="xx">小红宏</div>
按style的顺序来生效的。class=“c1 c2”或者class=“c2 c1” 都是选择c2进行生效，c1则被覆盖，要使c1不被覆盖则需要增加 ！important；
eg：
.c1 { color:red ！important; }
3.3样式
1.高度和宽度
.c1{
height:300px;
widht:30%
}
注意事项：
- 支持百分比
- 行内标签: 默认无效
- 块级标签: 默认有效(右边的剩余空白区域也会被占用)
2. 块级和行内标签
display:inline-block 使行内标签对 height 和 width 生效
.c4 { display: inline-block; height: 300px; width: 500px; border: 1px solid red; } </style> <body> <span class="c3">块级和行内标签</span> </body>
块级与行内标签的转换
<div style="display: inline;">块级转行内</div> <span style="display: block;">行内转块级</span>
注意：块级+块级&行内
3.字体和对齐方式：
<head> <meta charset="UTF-8"> <title>Document</title> <style> .c1 { color: #00FF7F; /* 字体颜色 */ font-size: 20px; /* 字体大小 */ font-weight: 600; /* 字体粗细 */ font-family: Microsoft Yahei; /* 字体样式 */ text-align: center; /* 水平方向居中 */ line-height: 50px; /* 垂直方向居中 */ border: 1px solid red; /* 边框 */ } </style> </head>
4. 浮动
如果在块级标签中，加入了float属性，那么这个块级标签奖不会再占用一整行，而是自己有多大就占用多大。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .item { float: left; width: 280px; height: 170px; border: 1px solid red; } </style> </head> <body> <div> <div class="item"></div> </div> </body> </html>
如果你让标签浮动起来之后，就会脱离文档流。
例如下面的例子中，我们给div的父标签赋予了一个蓝色的背景，但是你不会看到蓝色背景。因为他被浮动的div字标签挡住了。
<body> <div style="background-color: blue;"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> </body>
此时父标签中的背景blue是没有显示的，如图
解决办法: 在同级子标签的最下面添加 style=“clear: both;”
<body> <div style="background-color: blue;"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div style="clear: both;"></div> </div> </body>
5. 内边距
格式：
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
<style> .outer { border: 1px solid red; height: 200px; width: 200px; padding-top: 20px; padding-left: 20px; padding-right: 20px; padding-bottom: 20px; } </style> <div class="outer"> <div>小明</div> <div>w小红</div> </div>
6. 外边距
margin
<body> <div style="height: 200px; background-color: aquamarine;"></div> <div style="height: 200px; background-color:blueviolet; margin-top: 20px;"></div> </body>
7.全图页面和内容居中
全图页面：
body{ margin:0; }
内同居中：
- 文本居中，文本会在这个区域中居中
<div style="width：200px; text-align:center;">橙汁</div>
2. 区域居中,自己要有宽度+margin-left:auto;margin-right:auto;
<style> .container{ width:500px; margin:0 auto; } </style> <div class="container">橙汁2</div>
- 父亲没有高度或者宽度，被孩子支撑起来
8.hover：设置变色
简介：鼠标接触目标就会显示不同的信息。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .c1 { color:brown; } .c1:hover { color: red; font-size: 20px; } .c2 { width: 300px; height: 300px; } .c2:hover { border: 3px solid red; } .download { display: none; } .app:hover .download { display: block; } </style> </head> <body> <div class="c1">鼠标靠近我变成red</div> <div class="c2">鼠标靠近我变成red</div> <div class="app"> <div>鼠标放我这里触发显示二维码</div> <div class="download"> <img src="static/img_1.png" alt=""> </div> </div> </body> </html>
9.after 尾部添加东西
用来清除掉浮动，不用每次都写stype=“clear: both;”。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .clearfie:after { content: ""; display:block; clear:both } </style> </head> <body> <div class="c1"> <div class="item">1</div> <div class="item">1</div> <div class="item">1</div> </div> </body> </html>
10 fixed 返回顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .back { position: fixed; width: 60px; height: 60px; border: 1px solid red; right: 50px; bottom: 50px;} </style> </head> <body> <div style="height:1000px;background-color:#b0b0b0"></div> <div class="back"></div> </body> </html>
10.对话框
.app{ position: relative; } .app .download { position: absolute; display: none; height: 100px; width: 100px; } .app:hover .download { display: block; } <a href="https://www.mi.com" class="app" >下载app <div class="download"> <img src="static/img_5.png" ></div> </a>
11.border边框
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .left { float: left; } .c1 { height: 200px; width: 300px; border: 3px dotted #00FF7F; margin: 50px; } .c2 { height: 200px; width: 300px; border: 3px solid red; border-left: 10px solid green; margin: 50px; } .c3 { height: 200px; width: 300px; margin: 50px; background-color: bisque; border-left: 2px solid transparent; /* 透明色 */ } .c3:hover { border-left: 2px solid rgb(35, 211, 19); } </style> </head> <body> <div class="c1 left">虚线~</div> <div class="c2 left">实线</div> <div class="c3 left">透明色，碰到我会变色哦</div> <div style="clear: both;"></div> </body> </html>
3.4小米商城案例
1. 案例1：小米顶部
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { margin:0 } .site-topbar { height: 40px; font-size: 12px; color: #b0b0b0; background: #333; } .container{ width: 1226px; margin-right: auto; margin-left: auto; } .site-topbar .menu { float: left; height: 40px; line-height: 40px; } .site-topbar .accont { float: right; height: 40px; line-height: 40px; } </style> </head> <body> <div class="site-topbar"> <div class="container"> <div class="menu"> <a>小米官网 </a> <a> 小米商城 </a> <a>小米澎湃OS</a> <a> IoT </a> <a> 云服务</a> </div> <div class="accont"> <a>登录 </a> <a> 注册 </a> </div> </div> </div> </body> </html>
2.案例2：二级菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .body{ margin:0; } .sub_header{ height:100px; } .container{ width:1128px; margin:0 auto; } .sub_header .logo_mi{ width:234px; float:left; } .sub_header .logo_mi a{ margin-top:22px; display:inline-block; } .sub_header .logo_mi a img{ height:56px; width:56px; } .sub_header .menu{ float:left; line-height:100px; } .sub_header .menu a{ display:inline-block; padding:0 15px; color:#333; font-size: 16px; text-decoration:none; } .sub_header .menu a:hover{ color:#ff6700; } .sub_header .search{ float:left; } </style> </head> <body> <div class="sub_header"> <div class="container"> <div class="hw logo_mi"> <!--a行内标签;默认设置高度、边距无效,转成块级&行内+块级--> <a href="https://www.mi.com/" > <img src="static/img_1.png"> </a> </div> <div class="hw menu"> <a href="https://www.mi.com/">xiaomi手机</a> <a href="https://www.mi.com/">redmi手机</a> <a href="https://www.mi.com/">电视</a> <a href="https://www.mi.com/">笔记本</a> </div> <div class="hw search"></div> <div style="clear:both;"></div> </div> </div> </body> </html>
3.案例3：顶部和菜单整合
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小米商城</title> <style> /* 去掉body的边距 */ body { margin: 0; } .header { background-color: #333; } /* 让中间内容居中 */ .container { width: 1226px; margin: 0 auto; /* 上下为0, 左右为auto */ } /* header class 下的标签 a 自动应用这个样式 */ .header a { color: #b0b0b0; line-height: 40px; display: inline-block; font-size: 12px; } .header .menu { float: left; color: white; } .header a { text-decoration: none; } .header a:hover { color: white; } .header .account { float: right; color: white; } .sub_header{ height:100px; } .sub_header .logo_mi{ width:234px; float:left; } .sub_header .logo_mi a{ margin-top:22px; display:inline-block; } .sub_header .logo_mi a img{ height:56px; width:56px; } .sub_header .menu{ float:left; line-height:100px; } .sub_header .menu a{ display:inline-block; padding:0 15px; color:#333; font-size: 16px; text-decoration:none; } .sub_header .menu a:hover{ color:#ff6700; } .sub_header .search{ float:left; } </style> </head> <body> <div class="header"> <div class="container"> <div class="menu"> <a href="https://www.mi.com">小米商城</a> <a href="https://www.mi.com">MIUI</a> <a href="https://www.mi.com">云平台</a> <a href="https://www.mi.com">有品</a> <a href="https://www.mi.com">小爱开放平台</a> </div> <div class="account"> <a href="https://www.mi.com">登录</a> <a href="https://www.mi.com">注册</a> <a href="https://www.mi.com">消息通知</a> </div>' <div style="clear: both;"></div> </div> </div> <div class="sub_header"> <div class="container"> <div class="hw logo_mi"> <!--a行内标签;默认设置高度、边距无效,转成块级&行内+块级--> <a href="https://www.mi.com/" > <img src="static/img_1.png"> </a> </div> <div class="hw menu"> <a href="https://www.mi.com/">xiaomi手机</a> <a href="https://www.mi.com/">redmi手机</a> <a href="https://www.mi.com/">电视</a> <a href="https://www.mi.com/">笔记本</a> </div> <div class="hw search"></div> <div style="clear:both;"></div> </div> </div> </body> </html>
4.小结
a. a标签是行内标签，行内标签的高度、内外边距、默认无效
b. 垂直方向居中
1）文本—>line-height
2）图片 —> 边距
c. a标签默认有下划线。
1）通过加样式去除。text-decoration:none
d.鼠标放上去之后可变色
1）增加hover
.header a:hover { color: white; }
5.案例4：推荐区域
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>小米商城</title> <style> body { margin: 0; } img{ width:100%; height:100%; } .left{ float:left; } .header { background-color: #333; } /* 让中间内容居中 */ .container { width: 1226px; margin: 0 auto; /* 上下为0, 左右为auto */ } /* header class 下的标签 a 自动应用这个样式 */ .header a { color: #b0b0b0; line-height: 40px; display: inline-block; font-size: 12px; } .header .menu { float: left; color: white; } .header a { text-decoration: none; } .header a:hover { color: white; } .header .account { float: right; color: white; } .sub_header{ height:100px; } .sub_header .logo_mi{ width:234px; float:left; } .sub_header .logo_mi a{ margin-top:22px; display:inline-block; } .sub_header .logo_mi a img{ height:56px; width:56px; } .sub_header .menu{ float:left; line-height:100px; } .sub_header .menu a{ display:inline-block; padding:0 15px; color:#333; font-size: 16px; text-decoration:none; } .sub_header .menu a:hover{ color:#ff6700; } .sub_header .search{ float:left; } .slider img{ width: 1226px; height: 460px; } .news{ margin-top: 14px; } .news .channel{ width:228px; height:164px; background-color:#5f5750; padding:3px; } .news .list-item{ width:316px; height:170px; } .news .channel .item{ height:82px; width:76px; float:left; text-align:center; } .news .channel .item img{ height:26px; width:26px; display:block; margin:0 auto 4px; } .news .channel .item a{ display:inline-block; font-size:12px; padding-top:18px; color:#fff; opacity:0.7; text-decoration:none; } .news .channel .item a:hover{ opacity:1; } </style> </head> <body> <div class="header"> <div class="container"> <div class="menu"> <a href="https://www.mi.com">小米商城</a> <a href="https://www.mi.com">MIUI</a> <a href="https://www.mi.com">云平台</a> <a href="https://www.mi.com">有品</a> <a href="https://www.mi.com">小爱开放平台</a> </div> <div class="account"> <a href="https://www.mi.com">登录</a> <a href="https://www.mi.com">注册</a> <a href="https://www.mi.com">消息通知</a> </div>' <div style="clear: both;"></div> </div> </div> <div class="sub_header"> <div class="container"> <div class="hw logo_mi"> <!--a行内标签;默认设置高度、边距无效,转成块级&行内+块级--> <a href="https://www.mi.com/" > <img src="static/img_1.png"> </a> </div> <div class="hw menu"> <a href="https://www.mi.com/">xiaomi手机</a> <a href="https://www.mi.com/">redmi手机</a> <a href="https://www.mi.com/">电视</a> <a href="https://www.mi.com/">笔记本</a> </div> <div class="hw search"></div> <div style="clear:both;"></div> </div> </div> <div class="slider"> <div class="container"> <div class="sd_img"> <a> <img src="static/img_3.png" alt=""> </a> </div> </div> </div> <div class="news"> <div class="container"> <div class="channel left"> <div class="item"> <a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search"> <img src="static/img_6.png" alt=""> <span>保障服务</span> </a></div> <div class="item"> <a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search"> <img src="static/img_7.png" alt=""> <span>企业团购</span> </a></div> <div class="item"><a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search"> <img src="static/img_8.png" alt=""> <span>F码通道</span> </a></div> <div class="item"> <a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search"> <img src="static/img_9.png" alt=""> <span>米粉卡</span> </a></div> <div class="item"> <a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search"> <img src="static/img_10.png" alt=""> <span>以旧换新</span> </a></div> <div class="item"><a href="https://api.jr.mi.com/activity/scene/scenePCsearch.html?from=search"> <img src="static/img_11.png" alt=""> <span>话费充值</span> </a></div> </div> <div class="list-item left" style="margin-left:10px"> <img src="static/img_4.png" /> </div> <div class="list-item left" style="margin-left:10px"> <img src="static/img_5.png" /> </div> <div class="list-item left" style="margin-left:10px"> <img src="static/img_4.png" /> </div> <div class="clear:both"></div> </div> </div> </body> </html>
四、Bootstrap
简介：别人写好的CSS样式。
使用方式:
在页面上引入 Bootstrap
编写HTML时,按照Bootstrap的规定来编写或者自定制
4.1引入bootstrap
1. 下载bootstrap
https://v3.bootcss.com/getting-started/#download
2. 项目结构：
将下载好的bootstrap放在plugins目录下。
3.引入bootstrap
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <!-- 开发版本 --> <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css"> <!-- 生产版本 --> <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.min.css"> </head> <body> <input type="button" value="提交"> <input type="button" value="提交" class="btn btn-primary"> <input type="button" value="提交" class="btn btn-success"> <input type="button" value="提交" class="btn btn-danger"> <input type="button" value="提交" class="btn btn-danger btn-xs"> </body> </html>
4.2导航栏
地址：https://v3.bootcss.com/components/#nav
借用代码，进行开发成自己想要的页面。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css"> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> <li role="separator" class="divider"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> </body> </html>
1. 修改样式
在head中添加相关的样式进行覆盖即可
<head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css"> <style> .navbar { border-radius:0; } </style> </head>
原本引用的插件的样式为border-radius:4; 将其改成了 border-radius:0;
2.修改body中的文本
修改相应的数据即可，
4.3栅格
栅格介绍
栅格主要有4种共分为两种格式：
- 响应式:根据你的页面的大小来进行调整
.col-sm- : 750px
.col-md- : 970px
.col-lg- : 1170px
<div class="col-md-7" style="background-color: brown;">1</div> <div class="col-md-5" style="background-color: green;">2</div>
- 非响应式：固定栅格的比例，不会随页面的大小进行变换
.col-xs-
<div class="col-xs-7" style="background-color: brown;">1</div> <div class="col-xs-5" style="background-color: green;">2</div>
- 列偏移
.col-sm-offset-
<div class="col-xs-1" style="background-color: brown;">1</div> <div class="col-sm-offset-2 col-xs-1" style="background-color: green;">2</div>
4.4 container
- container
<div class="container clearfix"> <div class="col-sm-6">左边</div> <div class="col-sm-6">右边</div> </div>
- container-fluid
<div class="container-fluid clearfix"> <div class="col-sm-6">左边</div> <div class="col-sm-6">右边</div> </div>
4.5 面板
面板介绍
<div> <div class="col-sm-6">左边</div> <div class="col-sm-6"> <div class="panel panel-default"></div> <div class="panel-body">Basic panel example</div> </div> <div class="col-sm-6">左边</div> <div class="col-sm-6"> <div class="panel panel-default"></div> <div class="panel-body">Basic panel example</div> </div> <div class="col-sm-6">左边</div> <div class="col-sm-6"> <div class="panel panel-default"></div> <div class="panel-body">Basic panel example</div> </div> </div>
4.6分页
分页地址
分页有多种形式可以选择。
4.7图标
> 下载地址
下载完放在plugins文件夹下
如何使用
- 引入插件
<link href="static/plugins/font-awesome-4.7.0/css/font-awesome.css" rel="stylesheet">
- 选取想要的图标
<td> <button class="btn btn-primary btn-xs" type="button"> <i class="fa fa-address-card-o" aria-hidden="true"></i>保存</button> <button class="btn btn-warning btn-xs" type="button">退出</button> </td>
案例一：登录页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css"> <style> .ct { margin-left: auto; /* 水平居中 */ margin-right: auto; margin-top: 200px; width: 300px; height: 300px; border-radius: 10px; /* 圆角*/ box-shadow: -5px 5px 10px #aaa; /* 阴影 水平 垂直 厚度 颜色*/ border: 2px solid black; padding: 20px 40px; /* 内边距 */ } .ct h1 { text-align: center; margin-top: 10px; } .ct button { margin: 20px; } </style> </head> <body> <div class="ct"> <div> <h1>用户登录</h1> </div> <div> <form> <div class="form-group"> <label for="exampleInputEmail1">用户名</label> <input type="email" class="form-control" id="exampleInputEmail1" placeholder="请输入用户名"> </div> <div class="form-group"> <label for="exampleInputPassword1">密码</label> <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password"> </div> <div style="text-align: center"> <button type="submit" class="btn btn-primary">登 录</button> <button type="submit" class="btn btn-default">注 册</button> </div> </form> </div> </div> </body> </html>
案例二：后台页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="static/plugins/bootstrap-3.4.1/css/bootstrap.css" rel="stylesheet"> </head> <body> <nav class="navbar navbar-default"> <div class="container-fluid"> <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button aria-expanded="false" class="navbar-toggle collapsed" data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" type="button"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Brand</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li> <li><a href="#">Link</a></li> <li class="dropdown"> <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider" role="separator"></li> <li><a href="#">Separated link</a></li> <li class="divider" role="separator"></li> <li><a href="#">One more separated link</a></li> </ul> </li> </ul> <form class="navbar-form navbar-left"> <div class="form-group"> <input class="form-control" placeholder="Search" type="text"> </div> <button class="btn btn-default" type="submit">Submit</button> </form> <ul class="nav navbar-nav navbar-right"> <li><a href="#">Link</a></li> <li class="dropdown"> <a aria-expanded="false" aria-haspopup="true" class="dropdown-toggle" data-toggle="dropdown" href="#" role="button">Dropdown <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li class="divider" role="separator"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="container clearfix"> <div style=""> <div class="panel panel-default"> <div class="panel-heading">表单列表</div> <div class="panel-body"> <form class="form-inline"> <div class="form-group"> <label for="exampleInputName2">账号</label> <input class="form-control" id="exampleInputName2" placeholder="邮箱账号" type="text"> </div> <div class="form-group"> <label for="exampleInputEmail2">密码</label> <input class="form-control" id="exampleInputEmail2" placeholder="例如:jane.doe@example.com" type="email"> </div> <button class="btn btn-default" type="submit">保存</button> </form> </div> </div> </div> <div class="bs-example " data-example-id="contextual-table" style="margin-top:10px"> <table class="table table-hover"> <thead> <tr> <th>#</th> <th>Column heading</th> <th>Column heading</th> <th>Column heading</th> </tr> </thead> <tbody> <tr class="active"> <th scope="row">1</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr> <th scope="row">2</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> <tr class="success"> <th scope="row">3</th> <td>Column content</td> <td>Column content</td> <td>Column content</td> </tr> </tbody> </table> </div> <nav aria-label="Page navigation"> <ul class="pagination"> <li> <a aria-label="Previous" href="#"> <span aria-hidden="true">«</span> </a> </li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li> <a aria-label="Next" href="#"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> </div> </body> </html>
4.8 Bootstrap动态效果
想要实现页面动态效果，则Bootstrap需要依赖JS（Javascript）和JQuery。且JQuery 是 Javascript 的类库。
下载JQuery
复制链接到中IDM中下载
- 将下载的文件放在js文件夹中
- 引入js，因为bootstrap依赖js，故也需要将bootstrap下的js引入。
<body> ······ <script src="static/js/jquery-3.7.1.min.js"></script> <script src="static/plugins/bootstrap-3.4.1/js/bootstrap.js"></script> </body>
- 效果图
五、Javascript
简介：实现页面动态画面
## 5.1间单案例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .menus { width: 200px; border: 1px solid red; } .menus .header { background-color: green; padding: 20px 10px; } </style> </head> <body> <div class="menus"> <div class="header" onclick="myFunc()">大标题</div> <div class="item">内容</div> </div> <script type="text/javascript"> function myFunc() { <!--confirm("是否要继续?")--> alert("hello word") } </script> </body> </html>
在body中间添加script代码，点击绿色部分会弹出相关内容，如图所示：
5.1js放置位置
- 在HTML中可放在head和body中。
- 一般放在body体中，执行完html代码再执行JS代码。
- 放在单独的文件夹中，一般的结构如下
在html文件的body体中添加：
<body> <script src="static/js/my.js"></script> </body>
5.2HTML中相关代码的注释
-
HTML的注释
<!-- 注释内容 --> -
CSS的注释
/* 注释内容 */ -
Javascript的注释
有两种，如下
// 注释内容
/* 注释内容 */
5.3 变量
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> var name = "变量"; console.log(name); //打印变量 </script> </body> </html>
会在控制台下打印相关的变量。
5.3.1 字符串类型
声明变量
var name = "helloworld"; var name = String("helloworld");
字符串常见功能
var name = "中国联通" var v1 = name.length; //获取长度 var v2 = name[0]; //获取第一个字符 var v3 = name.trim(); //去除空白 var v4 = name.substring(0,2) //切片, 前取后不取
- 案例: 跑马灯
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="txt">欢迎光临</div> <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中的定时器 //每秒钟执行这个show函数 setInterval(show, 1000); //毫秒 </script> </body> </html>
5.3.2 数组
var v1 = [11,22,33,44]; var v2 = Array([11,22,33,44]); //操作 var v1 = [11,22,33,44]; v1[1] v1[0] = "poker" //追加 v1.push("联通"); //尾部追加 [11,22,33,44,"联通"] v1.unshift("联通"); //头部追加 ["联通",11,22,33,44] v1.splice(索引,0,元素); v1.splice(1,0,"中国"); //指定位置追加 [11,"中国",22,33,44] //删除 v1.pop(); //尾部删除 v1.shift(); //头部删除 v1.splice(索引位置,1); v1.splice(2,1); //索引为 2 的元素删除 [11,22,44] //循环 var v1 = [11,22,33,44]; //循环的是索引 for(var index in v1){ //data=v1[index] ... } for(var i=0; i<v1.length; i++){ ... }
- 案例: 动态数据
动态创建
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <ul id="city"> <!-- <li>广东</li> <li>深圳</li> <li>汕头</li> --> </ul> <script type="text/javascript"> var cityList = ["广东","深圳","汕头"]; for(var idx in cityList) { var text = cityList[idx]; //创建 <li></li> 标签 var tag = document.createElement("li"); //在 li 标签中写入内容 tag.innerText = text; //添加到 id=city 那个标签的里面 DOM var parentTag = document.getElementById("city"); parentTag.appendChild(tag); } </script> </body> </html>
5.3.3 字典
info = { "name":"poker", "age":18, } info.age; info.name = "toker" info["age"] info["name"] = "toker"; delete info["age"] //循环 for(var key in info){ //key值 data=info[key] ... }
- 案例：动态表格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table border="1"> <thead> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody id="body"> <tr> <!-- <td>1</td> <td>poker</td> <td>25</td> --> </tr> </tbody> </table> <script type="text/javascript"> var dataList = [ { id: 1, name: "poker", age: 25 }, { id: 1, name: "poker", age: 25 }, ]; for (var idx in dataList) { var info = dataList[idx] //1.创建 tr 标签 var tr = document.createElement("tr") for (var key in info) { var text = info[key]; //2.创建 td 标签 var td = document.createElement("td"); td.innerText = text; tr.appendChild(td); } //3. 追加数据 var bodyTag = document.getElementById("body"); bodyTag.appendChild(tr); } </script> </body> </html>
5.4 条件语句
if (条件) { ... else if (条件){ ... }else{ ... }
5.5 函数
//函数定义 function func(){ ... } //调用函数 func()
5.6 DOM
简介：DOM是一个模块，该功能是对html中的标签进行相应的操作
//根据 ID 获取标签 var tag = doucment.getElementById("xx"); //获取标签中的文本 tag.innerText //修改标签中的文本 tag.innerText = "hhhhhhh";
案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <ul id="city"> <!-- <li>广东</li> <li>深圳</li> <li>汕头</li> --> </ul> <script type="text/javascript"> var cityList = ["广东","深圳","汕头"]; for(var idx in cityList) { var text = cityList[idx]; //创建 <li></li> 标签 var tag = document.createElement("li"); //在 li 标签中写入内容 tag.innerText = text; //添加到 id=city 那个标签的里面 DOM var parentTag = document.getElementById("city"); parentTag.appendChild(tag); } </script> </body> </body> </html>
5.7 事件绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <input type="text" placeholder="请输入内容" id="content"> <input type="button" value="点击添加" onclick="addCityInfo()"> <ul id="city"> </ul> <script type="text/javascript"> function addCityInfo() { //1.找到标签 var userContent = document.getElementById("content"); //2.获取input中用户输入的内容 var newString = userContent.value; //判断用户输入是否为空 if (newString.length > 0) { //3.创建 li 标签,传入用户输入的内容 var newTag = document.createElement("li"); newTag.innerText = newString; //4.标签添加到 ul 中 var parentTag = document.getElementById("city"); parentTag.appendChild(newTag); //5.将 input text 内容清空 userContent.value = ""; }else{ alert("输入不能为空!") } } </script> </body> </html>
5.8总结
了解其大概的作用即可，自己手写SJ代码很繁琐，一般都是用别人做好的DOM，即Jquery。
6 Jquery
简介：是一个简化Javascript的库
6.1快速上手
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h1 id="txt">广东</h1> <script src="static/js/jquery-3.7.1.min.js"></script> <script type="text/javascript"> //使用JQuery修改内容 $("#txt").text("汕头"); </script> </body> </html>
这里输出的的是汕头而不再是广州了。
6.2 寻找标签（直接）
6.2.1 ID选择器
再HTML中的代码：
<h1 id="txt">广东</h1>
JQuery操作：
$("#txt")
6.2.2样选择器
再HTML中的代码：
<h1 class="c1">广东</h1>
JQuery操作：
$("h1")
6.2.3标签选择器
再HTML中的代码：
<h1 class="c1">广东</h1> <h1 class="c2">汕头</h1>
JQuery操作：
会选择h1的所有标签
$("h1")
6.2.4层级选择器
再HTML中的代码：
<div class="c1"> <div class="c2"> <h1>123</h1> </div> </div>
JQuery操作：
$(".c1 .c2 h1")
6.2.5多选择器
<div class="c1"> <div class="c2"> <h1>123</h1> </div> </div> <div class="c3"> <div class="c4"> <h1>123</h1> <li>456</li> </div> </div>
JQuery操作：
$("#c1,#c3,li")
6.2.6属性选择器
<input type="text" name="n1" /> <input type="text" name="n2" />
JQuery操作：
$("input[name='n1']")
6.3 寻标签（间接）
本节操作类似如树查zhao的操作。
6.3.1找兄弟
<div> <div>北京</div> <div id="c1">上海</div> <div>深圳</div> <div>广州</div> </div>
JQuery操作:
$("#c1").prev() //上一个 $("#c1") $("#c1").next() //下一个 $("#c1").next().next() //下一个的下一个 $("#c1").siblings() //所有的
6.3.1找父亲
<div> <div> <div>北京</div> <div id="c1"> <div>浦东新区</div> <div>静安区</div> <div>奉贤区</div> </div> <div>深圳</div> <div>广州</div> </div> <div> <div>北京</div> <div id="c1">上海</div> <div>深圳</div> <div>广州</div> </div> </div>
JQuery操作: $("#c1").parent() //父亲 $("#c1").parent().parent() //父亲的父亲 $("#c1").children() //所有的儿子 $("#c1").children(".p10") //所有的儿子中寻找class=p10 $("#c1").find(".p10") //所有的子孙中寻找class=p10 $("#c1").children("div") //所有的儿子中寻找标签 div
案例一: 菜单的切换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .menus { width: 200px; height: 1000px; border: 1px solid red; } .menus .header { background-color: green; padding: 5px 5px; border-bottom: 1px dotted gray; cursor: pointer; } .menus .content a { display: block; padding: 5px 5px; border-bottom: 1px dotted gray; } .hide { display: none; } </style> </head> <body> <div class="menus"> <div class="item"> <div class="header" onclick="clickMe(this);">天津</div> <div class="content"> <a>静海区</a> <a>东丽区</a> <a>西青区</a> <a>宝坻区</a> <a>滨海新区</a> </div> </div> <div class="item"> <div class="header" onclick="clickMe(this);">上海</div> <div class="content hide"> <a>静安区</a> <a>奉贤区</a> <a>浦东新区</a> <a>徐汇区</a> <a>青浦区</a> </div> </div> <div class="item"> <div class="header" onclick="clickMe(this);">上海1</div> <div class="content hide"> <a>静安区</a> <a>奉贤区</a> <a>浦东新区</a> <a>徐汇区</a> <a>青浦区</a> </div> </div> <div class="item"> <div class="header" onclick="clickMe(this);">上海2</div> <div class="content hide"> <a>静安区</a> <a>奉贤区</a> <a>浦东新区</a> <a>徐汇区</a> <a>青浦区</a> </div> </div> </div> <script src="static/js/jquery-3.7.1.min.js"></script> <script type="text/javascript"> function clickMe(self) { //1.让菜单展示出来 $(self).next().removeClass("hide"); //2.找父亲,父亲的所有兄弟,再去每个兄弟的子孙中寻找 class="content", 添加 hide 样式 $(self).parent().siblings().find(".content").addClass("hide"); } </script> </body> </html>
点击绿色标签会弹出子标题内容，而其他绿色的子标题都会关闭。
6.4值的操作
<div id="c1">内容</div> <input type="text " id="c2"/>
JQuery操作:
$("#c1").text() //获取文本内容 $("#c1").text("abc") //设置文本内容 $("#c2").val() //获取用户输入的值 $("#c2").val(123") //设置值
案例: 动态创建数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <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/js/jquery-3.7.1.min.js"></script> <script> function getInfo() { //1.获取用户输入的用户名与密码 var username = $("#txtUser").val(); var email = $("#txtEmail").val(); dataString = username + ":" + email //2.创建li标签, 在li内部写入内容 var newLi = $("<li>").text(dataString); //3.把新创建的li标签添加到ul里面 $("#view").append(newLi); } </script> </body> </html>
6.5事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <ul> <li>广东</li> <li>深圳</li> <li>汕头</li> </ul> <script src="static/js/jquery-3.7.1.min.js"></script> <script> $("li").click(function(){ // 点击li标签时,自动执行这和函数 // $(this) 当前你点击的是哪个标签 }); </script> </body> </html>
在JQuery可以删除指定的标签
<script src="static/js/jquery-3.6.1.min.js"></script> <script> $("li").click(function(){ // 点击li标签时,自动执行这和函数 // $(this) 当前你点击的是哪个标签 $(this).remove(); }); </script>
案例: 表格操作
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <table border="1"> <thead> <tr> <th>ID</th> <th>姓名</th> <th>年龄</th> </tr> </thead> <tbody id="body"> <tr> <td>1</td> <td>橙汁</td> <td> <input type="button" value="删除" class="delete" /> </td> </tr> <tr> <td>2</td> <td>橙汁</td> <td> <input type="button" value="删除" class="delete" /> </td> </tr> </tbody> </table> <script src="static/js/jquery-3.7.1.min.js"></script> <script> $( function () { $(".delete").click(function () { $(this).parent().parent().remove(); }); } ) </script> </body> </html>
点击删除会删除相关联的一整行。
七、前端整合
HTML、CSS、JS、JQuery的整合
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="static/plugins/bootstrap-3.4.1/css/bootstrap.css"> <link rel="stylesheet" href="static/plugins/font-awesome-4.7.0/css/font-awesome.css"> <style> </style> </head> <body> <div class="container"> <form class="form-horizontal" style="margin-top: 30px;"> <!-- 引入栅格系统 --> <!-- 姓名和年龄 --> <div class="row clearfix"> <div class="col-xs-6"> <div class="form-group"> <label class="col-sm-2 control-label">姓名</label> <div class="col-sm-10"> <input type="text" class="form-control" placeholder="姓名"> </div> </div> </div> <div class="col-xs-6"> <div class="form-group"> <label class="col-sm-2 control-label">年龄</label> <div class="col-sm-10"> <input type="text" class="form-control" placeholder="年龄"> </div> </div> </div> </div> <!-- 部门和薪资 --> <div class="row clearfix"> <div class="col-xs-6"> <div class="form-group"> <label class="col-sm-2 control-label">部门</label> <div class="col-sm-10"> <select class="form-control"> <option>IT部</option> <option>运营部</option> <option>销售部</option> <option>售前部</option> </select> </div> </div> </div> <div class="col-xs-6"> <div class="form-group"> <label class="col-sm-2 control-label">薪资</label> <div class="col-sm-10"> <input type="text" class="form-control" placeholder="薪资"> </div> </div> </div> </div> <!-- 入职时间和密码 --> <div class="row clearfix"> <div class="col-xs-6"> <div class="form-group"> <label class="col-sm-2 control-label">入职时间</label> <div class="col-sm-10"> <input type="date" class="form-control" placeholder="入职时间"> </div> </div> </div> </div> <div class="row clearfix"> <div class="col-xs-6"> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="btn btn-primary">Sign in</button> </div> </div> </div> </div> </form> </div> </body> </html>
