个人网站能不能做论坛,网站购物车设计,做体育类网站素材,做网站用主机文章目录 HTML快速开发网站Flask页面结构标签基础标签超链接图片列表下拉框表格input系列多行文本form表单 网络请求HTML案例 CSSCSS盒模型CSS样式定义CSS选择器 CSS样式使用1. 在标签上直接写2. 在head标签中写3.写到css文件中 标签样式1. 高度和宽度2. 块级和行内标签3.字体设… 文章目录 HTML快速开发网站Flask页面结构标签基础标签超链接图片列表下拉框表格input系列多行文本form表单 网络请求HTML案例 CSSCSS盒模型CSS样式定义CSS选择器 CSS样式使用1. 在标签上直接写2. 在head标签中写3.写到css文件中 标签样式1. 高度和宽度2. 块级和行内标签3.字体设置4.文字对齐方式5.浮动6.内边距7.外边距 CSS样式案例1.头部导航条2.二级菜单3.推荐区域 CSS布局hover伪类after伪类displayposition1. fixed案例返回顶部案例对话框 2. relative和absolute案例二级菜单图片 BootStrap框架初识BootStrap导航条栅格系统container面板媒体对象分页BootStrap案例登录案例后台管理案例1 图标BootStrap依赖jQueryJavaScript定义JS特点变量名代码位置注释typeof操作符 JavaScript中的几个重要概念标识符关键字保留字大小写注释单行注释多行注释 定义变量赋值var关键字let和const关键字 数据类型数据类型字符串类型跑马灯案例 数组案例动态数据 对象字典案例动态表格 类型汇总基础类型String类型Number类型Boolean类型Null类型Undefined类型Symbol类型 引用类型Object类型Array类型Function类型 运算符算数运算符赋值运算符字符串运算符自增、自减运算符比较运算符逻辑运算符 输出语句alert()函数confirm()函数console.log()document.write()innerHTML 条件判断if语句if else语句if else if else语句swith case语句while循环语句do while循环语句for循环语句break和continuebreak语句continue语句 JS函数定义函数调用函数默认参数函数返回值 事件事件处理DOM事件绑定事件示例 作用域全局作用域局部作用域 案例表单验证验证码demo必填字段验证数据格式验证 jQuery库快速上手寻找标签直接寻找间接寻找案例菜单切换 样式操作值操作案例动态创建数据 事件案例表格数据删除 综合案例数据录入总结 HTML
快速开发网站Flask
pip install flask
# 安装flask框架from flask import Flask # 导入Flask类app Flask(__name__) # 习惯性书写# 创建了网址/show/info和函数的对应关系
# 以后用户在浏览器上访问/show/info网址自动执行index
app.route(/show/info)
def index():return 中国span stylecolor:red;你好/spanif __name__ __main__:app.run()Flask框架支持将标签写入文件
from flask import Flask,render_templateapp Flask(__name__)app.route(/show/info)
def index():# Flask内部会自动打开这个文件并读取内容将内容给用户返回。# 默认去当前项目目录的templates文件夹中找。return render_template(index.html)if __name__ __main__:app.run()创建如图所示文件夹:templates index.html
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDemo/title
/head
bodyh1中国/h1span你好/span/body
/html页面结构 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0title前端基础/title
/head
bodyspan普通文本用于分区/spanstrong这是加粗标签/stronginput typetext value行内块标签p这是一个段落会换行/ph1一级标题/h1h2二级标题/h2h3三级标题/h3ulli无序列表/lili无序列表/lili无序列表/li/uldiv盒标签用于分区spanhello world/span/div
/body
/html标签
基础标签
块级标签blockdiv,p,ul,li…独占一行可以显示的宽高行内标签inline能和其他元素共享一行无法显示的设置宽高行内块级标签inline-block能和其他元素共享一行可以显示的设置宽高 超链接
!-- 跳转别人的网址--
a hrefhttps://www.bilibili.com/点击跳转/a
!-- 跳转自己的网址--
a href/get/news点击跳转/a a hrefhttps://www.bilibili.com/ target_blank/atarget“_blank” 在新的页面打开而不影响原网页
图片 img 是一个自闭合标签也被称为空标签或空元素。自闭合标签是指在HTML中没有内容的元素它们在标签内没有任何文本或其他HTML元素。这些标签在HTML中只有一个开始标签没有对应的结束标签。 显示别人的图片
img src图片地址 /显示自己的图片
img src自己图片的地址/
前提在自己项目中创建:static目录图片要放在static中
在页面引入图片时
img src/static/pic1.jpg/在HTML5中使用自闭合标签时可以省略尾部的斜杠 /
列表
ulli这是无序列表/lili这是无序列表/lili这是无序列表/lili这是无序列表/li
/ul
olli这是有序列表/lili这是有序列表/lili这是有序列表/lili这是有序列表/li
/ol下拉框
h1下拉框/h1
selectoption北京/optionoption上海/optionoption深圳/option
/select
!-- 多选--
select multipleoption天津/optionoption南京/optionoption成都/option
/select
selectoption
/select表格
h1数据表格/h1
tabletheadtr thid/th th姓名/th th年龄/th/tr/theadtbodytr td001/td tdhzh/td td22/td /trtr td001/td tdhzh/td td22/td /trtr td001/td tdhzh/td td22/td /trtr td001/td tdhzh/td td22/td /trtr td001/td tdhzh/td td22/td /tr/tbody
/tabledemo
!DOCTYPE html
html langen
headmeta charsetUTF-8titleget_lists/titlestyle/*修改a标签为块级标签*/a {display: block}/style
/head
bodyh1用户列表/h1table border1
!-- 表头内容--theadtrthid/thth姓名/thth年龄/thth图片/thth更多/th/tr/thead
!-- 表格内容--tbodytrtd001/tdtdhzh/tdtd22/tdtdimg src/static/pic.jpg alt此图片不存在 styleheight: 50px;width: 50px/tdtda hrefhttps://www.bilibili.com/ target_blank点击跳转/aa href/get/news target_blank查看详情/a/td/trtrtd002/tdtdlainuo/tdtd23/tdtdimg src/static/pic1.jpg alt styleheight: 50px;width: 50px/tdtda hrefhttps://www.bilibili.com/ target_blank点击跳转/aa href/get/news target_blank查看详情/a/td/trtrtd003/tdtdpabi/tdtd18/tdtdimg src/static/pic1.jpg alt styleheight: 50px;width: 50px/tdtda hrefhttps://www.bilibili.com/ target_blank点击跳转/aa href/get/news target_blank查看详情/a/td/tr/tbody/table
/body
/html在HTML中img元素用于插入图像。alt是img元素的一个属性它表示图像的替代文本alternative text或者称为alt文本。 alt属性提供了一个描述图像的文本当图像无法加载时或者用户使用辅助技术例如屏幕阅读器浏览网页时这个文本将显示出来。这样做的目的是为了让用户了解图像的内容即使图像无法显示也能够传达相关信息。此外alt属性还可以在图像加载失败时显示错误信息帮助用户知道该图像未能正确加载。 input系列
span输入框/span
input typetext
span密码框/span
input typepassword
span文件上传/span
input typefile
span单选框/span
!-- name相同就是互斥的单选框name不同就可以都选的--
input typeradio namen1男
input typeradio namen1女
span复选框/span
input typecheckbox篮球
input typecheckbox网球
input typecheckbox足球
span按钮/span
input typebutton value普通按钮
input typesubmit value提交表单多行文本
h1多行文本/h1
!-- 默认高度为3行--
textarea rows 3/textareaform表单
form标签包裹要提交的数据的标签。 提交方式methodget提交的地址action/xxx/xxx/xx在form标签里面必须有一个submit标签。 在form里面的一些标签input/select/textarea 一定要写name属性 input typetext nameuu/
网络请求 在浏览器的URL中写入地址点击回车访问。 浏览器会发送数据过去本质上发送的是字符串
GET /explore http1.1\r\nhost:...\r\nuser-agent\r\n..\r\n\r\n浏览器会发送数据过去本质上发送的是字符串
POST /explore http1.1\r\nhost:...\r\nuser-agent\r\n..\r\n\r\n数据库浏览器向后端发送请求时 GET请求【URL方法 / 表单提交】 现象GET请求、跳转、向后台传入数据数据会拼接在URL上。 https://www.sogou.com/web?query安卓age19namexx注意GET请求数据会在URL中体现。 POST请求【表单提交】 现象提交数据不在URL中而是在请求体中。 比如登录操作from data中请求体
GET请求
app.route(/get/reg, methods[GET])
def get_reg():# 1.接收用户通过get形式发送过来的数据print(request.args)# 2.给用户返回结果return 注册成功!会显示在url上 POST请求
app.route(/post/reg, methods[POST])
def post_reg():# 1.接收用户通过post形式发送过来的数据print(request.form)# 2.给用户返回结果return 注册成功![外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yAiuVoSu-1692854467500)(image/image-20230728210308801.png)] HTML案例
from flask import Flask, render_template, requestapp Flask(__name__)app.route(/register, methods[GET, POST])
def register():if request.method GET:return render_template(register.html)else:# 1.接收用户通过post形式发送过来的数据username request.form.get(username)pwd request.form.get(pwd)gender request.form.get(gender)hobby_list request.form.get(hobby)city request.form.get(city)remark request.form.get(remark)print(username, pwd, gender, hobby_list, city, remark)# 2.给用户返回结果return 注册成功!if __name__ __main__:app.run()register.html
!DOCTYPE html
html langen
headmeta charsetUTF-8title用户注册/title
/head
bodyh1用户注册/h1form methodpost action/registerdiv用户名:input typetext nameusername/divdiv密码:input typepassword namepwd/divdiv性别:input typeradio namegender value1 男input typeradio namegender value2 女/divdiv爱好:input typecheckbox namehobby value1 篮球input typecheckbox namehobby value2 网球input typecheckbox namehobby value3 足球/divdiv城市:select namecityoption valuec1北京/optionoption valuec2上海/option/select/divdiv备注:textarea nameremark/textarea/divdivinput typesubmit valuesubmit提交/div/form
/body
/htmlCSS
CSS盒模型 浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型 (CSS basic box model)将所有元素表示为一个个矩形的盒子(box) Width主体宽度 Height主体高度 Border边框 Padding内边距 Margin外边距针对盒子四周的边距跟其他盒子的隔离不影响本身元素的宽高 只有padding width height border会影响实际的大小 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlecss盒模型/titlestyle.box {width: 300px;height: 300px;background: red;padding: 30px;border: 20px solid black;margin: 50px auto;}.box_content {width: 100%;height: 100%;background: blue;font-size: 24px;color: white;text-align: center;}/style
/head
bodydiv class boxdiv class box_content主体/div/div
/body
/html[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-unUpLTHx-1692854467500)(image/image-20230726160144092.png)]
盒子实际大小(30030203020) *(30030203020) 400 * 400
CSS样式定义 CSS 层叠样式表(Cascading Style Sheets) 样式定义如何显示HTML元素 CSS规则由两个主要的部分构成:选择器,以及一条或多条声明 权重优先级 !important行内样式ID选择器类选择器|属性选择器1伪类选择器元素选择器 !DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthcas, initial-scale1.0titlecss基础/titlestylediv {width: 100px;height: 100px;background: yellow;margin-bottom: 20px;}/* class选择器.类名 *//* 在语句后添加!important关键字这个语句变成权重最高 */.bd {background: green !important;}/* id选择器.id名 */#bd_pink {background: pink;}/style/head
bodydiv stylewidth: 100px;height: 100px;background: red;这是行内样式/divdiv这是内部样式/divdiv class bdclass选择器/divdiv class bdclass选择器/divdiv class bd id bd_pinkid选择器/div/body
/html/* 在语句后添加!important关键字这个语句变成权重最高 */.bd {background: green !important;}CSS选择器 ID选择器 #c1{}div idc1/div类选择器最多 .c1{}div clssc1/div标签选择器 div{}divxxx/div属性选择器 input[typetext]{border: 1px solid red;
}
.v1[xx456]{color: gold;
}input typetext
input typepassworddiv classv1 xx123s/div
div classv1 xx456f/div
div classv1 xx999a/div后代选择器 .yy li{color: pink;
}
.yy a{color: dodgerblue;
}div classyya百度/adiva谷歌/a/divulli美国/lili日本/lili韩国/li/ul
/div关于选择器
多类选择器、标签选择器、后代选择器
少属性选择器、ID选择器样式覆盖
Title
中国联通 CSS样式使用
1. 在标签上直接写
img src... styleheight:100px /div stylecolor:red;中国联通/div2. 在head标签中写
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.c1{color:red;}/style
/head
bodyh1 classc1用户登录/h1
h1 classc1用户登录/h1
h1 classc1用户登录/h1
h1 classc1用户登录/h1/body
/html3.写到css文件中
.c1{height:100px;
}.c2{color:red;
}
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlelink relstylesheet hrefcommon.css /
/head
bodyh1 classc1用户登录/h1
h1 classc2用户登录/h1
h1 classc2用户登录/h1
h1 classc1用户登录/h1/body
/html外部引用样式
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthcas, initial-scale1.0titlecss基础/title!-- 引用的是一个样式表推荐方式--link relstylesheet href./style.css/head/* style.css */
/* 不需要style标签声明 */
div {width: 100px;height: 100px;background: yellow;margin-bottom: 20px;
}
/* class选择器.类名 */
.bd {background: green;
}
/* id选择器.id名 */
#bd_pink {background: pink;
}在flask框架下css文件必须放在static目录下 三种使用方式
属性名: 值 行内样式 内部样式 通过选择器来选择对于的元素进行样式的设置 元素选择器类名选择器 class 一对多id 选择器 唯一性 引用方式
标签样式
1. 高度和宽度
.c1{height: 300px;width: 500px;
}注意事项
宽度支持百分比。行内标签默认无效块级标签默认有效霸道右侧区域空白也不给你占用
2. 块级和行内标签 块级 行内 css样式标签 - display:inline-block示例行内块级特性
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.c1{display: inline-block;height: 100px;width: 300px;border: 1px solid red;}/style
/head
bodyspan classc1中国/spanspan classc1联通/spanspan classc1联通/spanspan classc1联通/span
/body
/html示例块级和行内标签的设置
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle/style
/head
bodydiv styledisplay: inline;中国/divspan styledisplay: block;联通/span
/body
/html注意块级 块级行内。
3.字体设置
颜色大小加粗字体格式
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.c1{color: #00FF7F;font-size: 58px;font-weight: 600;font-family: Microsoft Yahei;}/style
/head
bodydiv classc1中国联通/divdiv中国移动/div
/body
/html4.文字对齐方式
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.c1{height: 59px;width: 300px;border: 1px solid red;text-align: center; /* 水平方向居中 */line-height: 59px; /* 垂直方向居中 */}/style
/head
bodydiv classc1郭智/div
/body
/html5.浮动
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
bodydivspan左边/spanspan stylefloat: right右边/span/div
/body
/htmldiv默认块级标签霸道如果浮动起来就不一样了。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.item{float: left;width: 280px;height: 170px;border: 1px solid red;}/style
/head
bodydivdiv classitem/divdiv classitem/divdiv classitem/divdiv classitem/divdiv classitem/div/div
/body
/html如果你让标签浮动起来之后就会脱离文档流。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.item {float: left;width: 280px;height: 170px;border: 1px solid red;}/style
/head
bodydiv stylebackground-color: dodgerbluediv classitem/divdiv classitem/divdiv classitem/divdiv classitem/divdiv classitem/divdiv styleclear: both;/div/divdiv你哦啊呀/div
/body
/html6.内边距
内边距我自己的内部设置一点距离。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.outer{border: 1px solid red;height: 200px;width: 200px;padding-top: 20px;padding-left: 20px;padding-right: 20px;padding-bottom: 20px;}/style
/head
bodydiv classouterdiv stylebackground-color: gold;听妈妈的话/divdiv小朋友你是否下水道发/div/div
/body
/html
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.outer{border: 1px solid red;height: 200px;width: 200px;padding: 20px;}/style
/head
bodydiv classouterdiv stylebackground-color: gold;听妈妈的话/divdiv小朋友你是否下水道发/div/div
/body
/html
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.outer{border: 1px solid red;height: 200px;width: 200px;padding: 20px 10px 5px 20px;}/style
/head
bodydiv classouterdiv stylebackground-color: gold;听妈妈的话/divdiv小朋友你是否下水道发/div/div
/body
/html7.外边距
外边距我与别人加点距离。
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
div styleheight: 200px;background-color: dodgerblue;/div
div stylebackground-color: red;height: 100px;margin-top: 20px;/div
/body
/htmlCSS样式案例
1.头部导航条
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle!--body标签默认有一个边距造成页面四边都有白色间隙--body{margin: 0;}.header{background: #333;}.container{width: 1000px;margin: 0 auto;}.container .menu{float: left;}.container .account{float: right;}.header a{color: #b0b0b0;line-height: 40px;display: inline-block;font-size: 12px;margin: 0 10px;}/style
/head
bodydiv classheaderdiv classcontainerdiv classmenua小米官网/aa小米商城/aaMIUI/aaLoT/aa云服务/aa天星科技/a/divdiv classaccounta登录/aa注册/a/div!--存在浮动需要添加此代码用于称其父类容器--div styleclear: both/div/div/div/body
/htmlbody标签默认有一个边距造成页面四边都有白色间隙如何去除呢 body{margin: 0;
}内容居中 文本居中文本会在这个区域中居中。 div stylewidth: 200px; text-align: center;武沛齐/div区域居中自己要有宽度 margin-left:auto;margin-right:auto .container{width: 980px;margin: 0 auto;
}div classcontaineradfasdf
/div父亲没有高度或没有宽度被孩子支撑起来。 如果存在浮动一定记得加入 。
2.二级菜单
!DOCTYPE html
html langen
headmeta charsetUTF-8titlesite_header/titlestylebody{margin: 0;}.site_header .container{width: 1226px;margin: 0 auto;}.site_header .ht{height: 100px;}.site_header .container .logo{float: left;width: 234px;}.site_header .container .logo a{display: inline-block;margin-top: 22px;}.site_header .container .menu_list{float: left;/*纵向高度100px居中*/line-height: 100px;}.site_header .container a{display: inline-block;/*上下内边距0左右内边距10px*/padding: 0 10px;color: #333;font-size: 16px;text-decoration: none;}.site_header .container a:hover{color: #ff6700;}.site_header .container .search{float: right;}/style
/head
bodydiv classsite_headerdiv classcontainerdiv classht logoa hrefhttps://www.mi.com/img src/static/logo_m2.png alt stylewidth: 56px;height: 56px/a/divdiv classht menu_lista hrefhttps://www.mi.com/Xiaomi手机/aa hrefhttps://www.mi.com/Redmi手机/aa hrefhttps://www.mi.com/电视/aa hrefhttps://www.mi.com/笔记本/aa hrefhttps://www.mi.com/平板/aa hrefhttps://www.mi.com/家电/aa hrefhttps://www.mi.com/路由器/aa hrefhttps://www.mi.com/服务中心/aa hrefhttps://www.mi.com/社区/a/divdiv classht search/divdiv styleclear:both/div/div/div/body
/html一二级菜单整合 xiaomi_index.html !DOCTYPE html
html langen
headmeta charsetUTF-8title一级二级菜单/titlelink relstylesheet href/static/xiaomi_index.css
/head
bodydiv classheaderdiv classcontainerdiv classmenua hrefhttps://www.mi.com/小米官网/aa hrefhttps://www.mi.com/小米商城/aa hrefhttps://www.mi.com/MIUI/aa hrefhttps://www.mi.com/LoT/aa hrefhttps://www.mi.com/云服务/aa hrefhttps://www.mi.com/天星数技/aa hrefhttps://www.mi.com/有品/aa hrefhttps://www.mi.com/小爱开放平台/aa hrefhttps://www.mi.com/企业团购/aa hrefhttps://www.mi.com/资质证照/aa hrefhttps://www.mi.com/协议规则/aa hrefhttps://www.mi.com/下载app/aa hrefhttps://www.mi.com/Select Location/a/divdiv classaccounta hrefhttps://www.mi.com/登录/aa hrefhttps://www.mi.com/注册/aa hrefhttps://www.mi.com/消息通知/a/divdiv styleclear: both/div/div/divdiv classsite_headerdiv classcontainerdiv classht logoa hrefhttps://www.mi.com/img src/static/logo_m2.png alt stylewidth: 56px;height: 56px/a/divdiv classht menu_lista hrefhttps://www.mi.com/Xiaomi手机/aa hrefhttps://www.mi.com/Redmi手机/aa hrefhttps://www.mi.com/电视/aa hrefhttps://www.mi.com/笔记本/aa hrefhttps://www.mi.com/平板/aa hrefhttps://www.mi.com/家电/aa hrefhttps://www.mi.com/路由器/aa hrefhttps://www.mi.com/服务中心/aa hrefhttps://www.mi.com/社区/a/divdiv classht search/divdiv styleclear:both/div/div/div
/body
/htmlxiaomi_index.css body{margin: 0;
}
.header{background: #333;
}
.header .container{width: 1000px;margin: 0 auto;
}.header .menu{float: left;
}
.header .account{float: right;
}
.header a{color: #b0b0b0;line-height: 40px;display: inline-block;font-size: 12px;margin: 0 5px;text-decoration: none;
}
.header a:hover{color: white ;
}.site_header .container{width: 1226px;margin: 0 auto;}.site_header .ht{height: 100px;}.site_header .container .logo{float: left;width: 234px;}.site_header .container .logo a{display: inline-block;margin-top: 22px;}.site_header .container .menu_list{float: left;/*纵向高度100px居中*/line-height: 100px;}.site_header .container a{display: inline-block;/*上下内边距0左右内边距10px*/padding: 0 10px;color: #333;font-size: 16px;text-decoration: none;}.site_header .container a:hover{color: #ff6700;}.site_header .container .search{float: right;}a标签是行内标签行内标签的高度、内外边距默认无效。 垂直方向居中 本文 line-height图片 边距 a标签默认有下划线。 鼠标放上去之后hover .c1:hover{...
}
a:hover{}3.推荐区域
html
!DOCTYPE html
html langen
headmeta charsetUTF-8title一级二级菜单/titlelink relstylesheet href/static/xiaomi_index.css
/head
bodydiv classheaderdiv classcontainerdiv classmenua hrefhttps://www.mi.com/小米官网/aa hrefhttps://www.mi.com/小米商城/aa hrefhttps://www.mi.com/MIUI/aa hrefhttps://www.mi.com/LoT/aa hrefhttps://www.mi.com/云服务/aa hrefhttps://www.mi.com/天星数技/aa hrefhttps://www.mi.com/有品/aa hrefhttps://www.mi.com/小爱开放平台/aa hrefhttps://www.mi.com/企业团购/aa hrefhttps://www.mi.com/资质证照/aa hrefhttps://www.mi.com/协议规则/aa hrefhttps://www.mi.com/下载app/aa hrefhttps://www.mi.com/Select Location/a/divdiv classaccounta hrefhttps://www.mi.com/登录/aa hrefhttps://www.mi.com/注册/aa hrefhttps://www.mi.com/消息通知/a/divdiv styleclear: both/div/div/divdiv classsite_headerdiv classcontainerdiv classht logoa hrefhttps://www.mi.com/img src/static/logo_m2.png alt stylewidth: 56px;height: 56px/a/divdiv classht menu_lista hrefhttps://www.mi.com/Xiaomi手机/aa hrefhttps://www.mi.com/Redmi手机/aa hrefhttps://www.mi.com/电视/aa hrefhttps://www.mi.com/笔记本/aa hrefhttps://www.mi.com/平板/aa hrefhttps://www.mi.com/家电/aa hrefhttps://www.mi.com/路由器/aa hrefhttps://www.mi.com/服务中心/aa hrefhttps://www.mi.com/社区/a/divdiv classht search/divdiv styleclear:both/div/div/divdiv classsliderdiv classcontainerdiv classitemimg src/static/big_banner.png alt图片不存在/div/div/divdiv classnewsdiv classcontainerdiv classchannel leftdiv classitema href#img src/static/button4.png altspan保障服务/span/a/divdiv classitema href#img src/static/button4.png altspan保障服务/span/a/divdiv classitema href#img src/static/button4.png altspan保障服务/span/a/divdiv classitema href#img src/static/button4.png altspan保障服务/span/a/divdiv classitema href#img src/static/button4.png altspan保障服务/span/a/divdiv classitema href#img src/static/button4.png altspan保障服务/span/a/divdiv classitema href#img src/static/button4.png altspan保障服务/span/a/divdiv styleclear: both/div/divdiv classlist-item lefta href#img src/static/button1.jpg alt/a/divdiv classlist-item lefta href#img src/static/button2.jpg alt/a/divdiv classlist-item lefta href#img src/static/button3.jpg alt/a/divdiv styleclear: both/div/div/div/body
/htmlcss
body{margin: 0;
}
img{width: 100%;height: 100%;
}
.left{float: left;
}
.container{width: 1226px;margin: 0 auto;
}.header{background: #333;
}
.header .container{width: 1000px;margin: 0 auto;
}.header .menu{float: left;
}
.header .account{float: right;
}
.header a{color: #b0b0b0;line-height: 40px;display: inline-block;font-size: 12px;margin: 0 5px;text-decoration: none;
}
.header a:hover{color: white ;
}.site_header .container{width: 1226px;margin: 0 auto;}.site_header .ht{height: 100px;}.site_header .container .logo{float: left;width: 234px;}.site_header .container .logo a{display: inline-block;margin-top: 22px;}.site_header .container .menu_list{float: left;/*纵向高度100px居中*/line-height: 100px;}.site_header .container a{display: inline-block;/*上下内边距0左右内边距10px*/padding: 0 10px;color: #333;font-size: 16px;text-decoration: none;}.site_header .container a:hover{color: #ff6700;}.site_header .container .search{float: right;}.slider .item{width: 1226px;height: 460px;margin: 0 auto;}.news{margin-top: 14px;}.news .channel{width: 228px;height: 164px;background-color: #5f5750;padding: 3px;}.news .channel .item{height: 82px;width: 76px;float: left;text-align: center;}.news .channel a{display: inline-block;font-size: 12px;padding-top: 10px;color: #fff;text-decoration: none;opacity: 0.7;}.news .channel a:hover{opacity: 1;}.news span{display: block;}。news .channel .item img{height: 24px;width: 24px;display: block;margin: 0 auto 4px;}.news .list-item{width: 316px;height: 170px;margin-left: 14px}.news .list-item a:hover{opacity: 0.6;}设置透明度 opacity:0.5; /* 0 ~ 1 */CSS布局
hover伪类
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.c1 {color: red;font-size: 18px;}.c1:hover {color: green;font-size: 50px;}.c2 {height: 300px;width: 500px;border: 3px solid red;}.c2:hover {border: 3px solid green;}.download {display: none;}.app:hover .download {display: block;}.app:hover .title{color: red;}/style
/head
body
div classc1联通/div
div classc2广西/divdiv classappdiv classtitle下载APP/divdiv classdownloadimg srcimages/qcode.png alt/div
/div/body
/htmlafter伪类
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.c1:after{content: 大帅哥;}/style
/head
bodydiv classc1吴阳军/divdiv classc1梁吉宁/div
/body
/html很重要的应用
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.clearfix:after{content: ;display: block;clear: both;}.item{float: left;}/style
/head
bodydiv classclearfixdiv classitem1/divdiv classitem2/divdiv classitem3/div/div
/body
/htmldisplaypositionwidth/height/padding/box-sizingFlex布局Grid布局响应式布局
display display是CSS中的一个属性用于定义HTML元素的显示类型display type。通过display属性你可以控制元素如何显示在页面上。 常用的display属性取值有以下几种 block: 元素将以块级元素的形式显示。这意味着元素会独占一行并且宽度会默认填满父容器的宽度。常见的块级元素有div, p, h1等。 inline: 元素将以内联元素的形式显示。这意味着元素不会独占一行它只会使用它需要的宽度并允许其他元素与其在同一行上。常见的内联元素有span, a, strong等。 inline-block: 元素将以内联块级元素的形式显示。这个值结合了inline和block的特性元素会在同一行显示但可以设置宽高等块级元素的属性。常见的内联块级元素有input, button等。 none: 元素将不会被显示即在页面中不占用空间并且不可见。 flex: 元素将以弹性盒模型的形式显示。这是CSS3中引入的布局模型允许更灵活的布局方式。 grid: 元素将以网格布局的形式显示。这也是CSS3中引入的布局模型允许使用网格来进行布局。 table: 元素将以表格的形式显示即类似于table元素。
等等…通过设置display属性你可以调整元素在页面中的布局和呈现方式使其适应不同的设计需求。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlecss布局/titlestyle/* 修改span为块级标签 */span { display: block;}/* 修改div为行内标签 */div {display: inline;}/* 修改p为行内块级标签 */p {display: inline-block;width: 50px;height: 100px;background: yellow;}/style
/head
bodyspan块级标签/spandiv行内标签/divp行内块标签/p
/body
/htmlflex弹性盒布局
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlecss布局/titlestyle.box {height: 300px;border: 10px solid black;/* 设置整体为弹性布局使三个盒子自动并排排列而不是竖向排列*/display: flex;/* justify-content: center; 水平居中 *//* align-items: center; 中心居中 *//* flex-direction: column; 竖向布局 */}.box-item {height: 70px;width: 100px;margin-top: 10px;margin-left: 10px;background: red}.box-flex {flex: 1}/style
/head
bodydiv classboxdiv classbox-item盒子1/divdiv classbox-item盒子2/div!-- 让第三个盒子充满剩下区域跟随父级的宽度变化 --div classbox-item box-flex盒子3/div/div
/body
/htmlposition 在CSS中position属性用于定义元素的定位方式即指定元素在文档流中的位置。position属性有四个主要的取值 static: 默认值元素按照正常的文档流进行排列。top, right, bottom, left, z-index属性对static定位的元素无效。 relative: 元素相对于其正常位置进行偏移但仍在文档流中占据原有空间。通过top, right, bottom, left属性可以控制元素的偏移位置。 absolute: 元素脱离正常的文档流相对于其最近的已定位非static的父元素进行定位。如果没有已定位的父元素则相对于文档的可视区域进行定位。通过top, right, bottom, left属性可以控制元素相对于其定位父元素的偏移位置。 fixed: 元素脱离正常的文档流相对于浏览器窗口进行定位。无论页面滚动与否元素都会固定在相对于浏览器窗口的位置。通过top, right, bottom, left属性可以控制元素在窗口中的固定位置。
除了这些主要的取值还有一种特殊的sticky定位方式它结合了relative和fixed的特性。元素在滚动到特定阈值位置时会变为固定定位超过阈值则变为相对定位。
例如以下是一个使用position属性的示例
.container {position: relative;
}.box {position: absolute;top: 50px;left: 20px;
}.fixed-box {position: fixed;top: 20px;right: 20px;
}在上述示例中.container元素使用position: relative来创建一个相对定位的容器。.box元素使用position: absolute相对于.container进行定位并设置top和left属性来控制其位置。.fixed-box元素使用position: fixed进行固定定位它会相对于浏览器窗口定位并设置top和right属性来控制其位置。 position定位 top/left/right/bottom relative 相对定位absolute 绝对定位fixed 固定定位
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titlecss position/titlestylebody {height: 3000px;}div {width: 100px;height: 70px;}.box {border: 10px solid black;height: 300px;width: 90%;}.green {background: green;/* 基于其正常位置的相对定位不影响其他元素并且不会影响父级的大小 */position: relative;top: 10px;left: 10px;}.red {background: red;/* 基于父级的绝对定位, 脱离文档流相当于重启一个新图层基于最近的父级定位 */position: absolute;left: 100px;}.yellow {background: yellow;/* 固定定位脱离文档流基于浏览器窗口定位 */position: fixed;}/style
/head
bodydiv classboxdiv classgreen相对定位/divdiv classred绝对定位/divdiv classyellow固定定位/div/div
/body
/html1. fixed
固定在窗口的某个位置。
案例返回顶部
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.back{position: fixed;width: 60px;height: 60px;border: 1px solid red;right: 10px;bottom: 50px;}/style
/head
bodydiv styleheight: 1000px;background-color: #5f5750/divdiv classback/div/body
/html案例对话框
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestylebody {margin: 0;}.dialog {position: fixed;height: 300px;width: 500px;background-color: white;left: 0;right: 0;margin: 0 auto;top: 200px;z-index: 1000;}.mask {background-color: black;position: fixed;left: 0;right: 0;top: 0;bottom: 0;opacity: 0.7;z-index: 999;}/style
/head
bodydiv styleheight: 1000pxasdfasdfasd/divdiv classmask/div
div classdialog/div/body
/html2. relative和absolute
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.c1{height: 300px;width: 500px;border: 1px solid red;margin: 100px;position: relative;}.c1 .c2{height: 59px;width: 59px;background-color: #00FF7F;position: absolute;right: 20px;bottom: 10px;}/style
/head
bodydiv classc1div classc2/div/div
/body
/html案例二级菜单图片
.app {position: relative}
.app .show {box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3); /* 设置透明度为0.5的黑色阴影 */position: absolute;top: 70px;height: 100px;width: 100px;display: none;border-radius: 10px;
}
.app:hover .show{display: block;
}a hrefhttps://www.mi.com/ classappXiaomi手机div classshowimg src/static/good1.png alt/div
/aBootStrap框架
是别人帮我们已写好的CSS样式我们如果想要使用这个BootStrap
下载BootStrap使用 在页面上引入BootStrap编写HTML时按照BootStrap的规定来编写 自定制。
初识BootStrap
V3版本
下载如下https://v3.bootcss.com/ 创建目录静态文件存放 plugins存放插件把bootstrap放入plugins 引用bootstrap模板使用已经编写好的css样式 !DOCTYPE html
html langen
headmeta charsetUTF-8title初识bootstrap/title
!-- 开发版本--link relstylesheet href/static/plugins/bootstrap-3.4.1/css/bootstrap.css
!-- 生产版本--link relstylesheet href/static/plugins/bootstrap-3.4.1/css/bootstrap.min.css
/head
body
input typebutton value提交 classbtn btn-primary
input typebutton value提交 classbtn btn-success
input typebutton value提交 classbtn btn-danger
input typebutton value提交 classbtn btn-danger btn-xs
/body
/html导航条
官方文档组件 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)
小组件是直接复制代码可用格式化代码自动缩进 从官方文档复制导航条区域粘贴到pycharm,格式化代码 !DOCTYPE html
html langen
headmeta charsetUTF-8title导航条/titlelink relstylesheet href/static/plugins/bootstrap-3.4.1/css/bootstrap.css
/head
body
div classnavbar navbar-defaultdiv classcontainer-fluid!-- Brand and toggle get grouped for better mobile display --div classnavbar-headerbutton typebutton classnavbar-toggle collapsed data-togglecollapsedata-target#bs-example-navbar-collapse-1 aria-expandedfalsespan classsr-onlyToggle navigation/spanspan classicon-bar/spanspan classicon-bar/spanspan classicon-bar/span/buttona classnavbar-brand href#Brand/a/div!-- Collect the nav links, forms, and other content for toggling --div classcollapse navbar-collapse idbs-example-navbar-collapse-1ul classnav navbar-navli classactivea href#Link span classsr-only(current)/span/a/lilia href#Link/a/lili classdropdowna href# classdropdown-toggle data-toggledropdown rolebutton aria-haspopuptruearia-expandedfalseDropdown span classcaret/span/aul classdropdown-menulia href#Action/a/lilia href#Another action/a/lilia href#Something else here/a/lili roleseparator classdivider/lilia href#Separated link/a/lili roleseparator classdivider/lilia href#One more separated link/a/li/ul/li/ulform classnavbar-form navbar-leftdiv classform-groupinput typetext classform-control placeholderSearch/divbutton typesubmit classbtn btn-defaultSubmit/button/formul classnav navbar-nav navbar-rightlia href#Link/a/lili classdropdowna href# classdropdown-toggle data-toggledropdown rolebutton aria-haspopuptruearia-expandedfalseDropdown span classcaret/span/aul classdropdown-menulia href#Action/a/lilia href#Another action/a/lilia href#Something else here/a/lili roleseparator classdivider/lilia href#Separated link/a/li/ul/li/ul/div!-- /.navbar-collapse --/div!-- /.container-fluid --
/div
/body
/html对于不符合自己要求的部分可以在style里重写样式
link relstylesheet href/static/plugins/bootstrap-3.4.1/css/bootstrap.css
style/*重写样式*/.btn-default {background: red;}
/style栅格系统
官方文档全局 CSS 样式 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)
全局样式是自己创建框架使用模板样式 把整体划分为了12格 分类根据显示设备选择 响应式根据屏幕宽度不同如果宽度低于支持宽度就不分格 !--1170px才生效--
.col-lg- 1170px
.col-md- 970px
.col-sm- 750px非响应式无论屏幕宽度都支持分格 div classcol-xs-6 stylebackground-color: red1/div
div classcol-xs-6 stylebackground-color: green2/div列偏移 divdiv classcol-sm-offset-2 col-xs-6 stylebackground: red1/divdiv classcol-xs-4 stylebackground: green2/div
/divcontainer
!--平铺流式布局--
div classcontainer-fluiddiv classcol-sm-9左边/divdiv classcol-sm-3右边/div
/div
!--居中对齐--
div classcontainerdiv classcol-sm-9左边/divdiv classcol-sm-3右边/div
/div面板
官方文档组件 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)
divdiv classcol-sm-91/divdiv classcol-sm-3div classpanel panel-defaultdiv classpanel-headingPanel heading without title/divdiv classpanel-bodyPanel content/div/divdiv classpanel panel-primarydiv classpanel-headingh3 classpanel-titlePanel title/h3/divdiv classpanel-bodyPanel content/div/div
/div媒体对象
官方文档组件 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)
可以自行修改媒体和文字内容
div classmediadiv classmedia-lefta href#img classmedia-object data-srcholder.js/64x64 alt64x64src#data-holder-renderedtrue stylewidth: 64px; height: 64px;/a/divdiv classmedia-bodyh4 classmedia-headingTop aligned media/h4pCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudincommodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentumnunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus./ppDonec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoquepenatibus et magnis dis parturient montes, nascetur ridiculus mus./p/div
/div
div classmediadiv classmedia-lefta href#img classmedia-object data-srcholder.js/64x64 alt64x64src#data-holder-renderedtrue stylewidth: 64px; height: 64px;/a/divdiv classmedia-bodyh4 classmedia-headingTop aligned media/h4pCras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudincommodo. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentumnunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus./ppDonec sed odio dui. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoquepenatibus et magnis dis parturient montes, nascetur ridiculus mus./p/div
/div分页
官方文档组件 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)
拷贝HTML代码
div classmedia...ul classpaginationlia href# aria-labelPreviousspan aria-hiddentrue«/span/a/lilia href#1/a/lilia href#2/a/lilia href#3/a/lilia href#4/a/lilia href#5/a/lilia href# aria-labelNextspan aria-hiddentrue»/span/a/li
/ulBootStrap案例
登录案例
表单官方文档全局 CSS 样式 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)
!DOCTYPE html
html langen
headmeta charsetUTF-8title登录/titlelink relstylesheet href/static/plugins/bootstrap-3.4.1/css/bootstrap.cssstyle.container {width: 400px;height: 400px;margin-top: 100px;padding: 20px 40px;border: 1px solid #dddddd;/*圆角*/border-radius: 5px;/*阴影 左右上下模糊距离阴影颜色*/box-shadow: 5px 5px 20px #aaa;}img {width: 100%;height: 100%;}.item-img {width: 180px;display: inline-block;float: right;border: 1px solid lightgrey;}h1 {margin-top: 10px;text-align: center;}/style
/head
body
div classcontainerh1用户登录/h1formdiv classform-grouplabel forexampleInputName2用户名或手机号/labelinput typetext classform-control idexampleInputName2 placeholderyourname/divdiv classform-grouplabel forexampleInputPassword1Password/labelinput typepassword classform-control idexampleInputPassword1 placeholderPassword/divdiv classform-group stylewidth: 150px;display: inline-block;label forexampleInputPassword1图片验证码/labelinput typetext classform-control placeholderText input/divdiv classitem-imgimg srcstatic/img/verification_code.png/divdiv classclear:both/divbutton typesubmit classbtn btn-primary登录/button/form
/div/body
/html后台管理案例1
表格官方文档全局 CSS 样式 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)
!DOCTYPE html
html langen
headmeta charsetUTF-8title后台管理1/titlelink relstylesheet href/static/plugins/bootstrap-3.4.1/css/bootstrap.css
/head
body
div classcontainerdiv classnavbar navbar-default!-- 响应式页面--div classnavbar-headerbutton typebutton classnavbar-toggle collapsed data-togglecollapsedata-target#bs-example-navbar-collapse-1 aria-expandedfalsespan classsr-onlyToggle navigation/spanspan classicon-bar/spanspan classicon-bar/spanspan classicon-bar/span/buttona classnavbar-brand href#中国联通xxx系统/a/divdiv classcollapse navbar-collapse idbs-example-navbar-collapse-1ul classnav navbar-navlia href#上海/a/lilia href#广西/a/li/ulul classnav navbar-nav navbar-rightlia href#登录/a/lilia href#注册/a/li/ul/div/divbutton typebutton classbtn btn-primary新建/buttondiv classpanel panel-default stylemargin-top: 20pxdiv classpanel-heading表单区域/divdiv classpanel-bodyform classform-inlinediv classform-grouplabel classsr-only forexampleInputEmail3Email address/labelinput typeemail classform-control idexampleInputEmail3 placeholderEmail/divdiv classform-grouplabel classsr-only forexampleInputPassword3Password/labelinput typepassword classform-control idexampleInputPassword3 placeholderPassword/divbutton typesubmit classbtn btn-success保存/button/form/div/divdiv classpanel panel-defaultdiv classpanel-headingh3 classpanel-title数据区域/h3/divdiv classpanel-bodytable classtable table-borderedtheadtrth#/ththFirst Name/ththLast Name/thth操作/th/tr/theadtbodytrth scoperow1/thtdMark/tdtdOtto/tdtdabutton typebutton classbtn btn-primary btn-xs编辑/buttonbutton typebutton classbtn btn-danger btn-xs删除/button/a/td/trtrth scoperow2/thtdJacob/tdtdThornton/tdtdabutton typebutton classbtn btn-primary btn-xs编辑/buttonbutton typebutton classbtn btn-danger btn-xs删除/button/a/td/trtrth scoperow3/thtdLarry/tdtdthe Bird/tdtdabutton typebutton classbtn btn-primary btn-xs编辑/buttonbutton typebutton classbtn btn-danger btn-xs删除/button/a/td/tr/tbody/table/div/divul classpaginationlia href# aria-labelPreviousspan aria-hiddentrue«/span/a/lilia href#1/a/lilia href#2/a/lilia href#3/a/lilia href#4/a/lilia href#5/a/lilia href# aria-labelNextspan aria-hiddentrue»/span/a/li/ul
/div
/div
/body
/html图标 bootstrap提供不多。 fontawesome组件 官方网址https://fontawesome.dashgame.com/ 下载 引入 注意引入的css的文件地址是相对地址否则无法识别到文件 link relstylesheet hrefstatic/plugins/font-awesome-4.7.0/css/font-awesome.css!DOCTYPE html
html langen
head
meta charsetUTF-8
title初识bootstrap/title
!-- 包含大量图标--
link relstylesheet hrefstatic/plugins/bootstrap-3.4.1/css/bootstrap.css!-- 包含大量图标--
link relstylesheet hrefstatic/plugins/font-awesome-4.7.0/css/font-awesome.css
/head
body
span classglyphicon glyphicon-search aria-hiddentrue1111/span
i classfa fa-address-book aria-hiddentrue你好/i
i classfa fa-bandcamp aria-hiddentrue世界/i
/body
/htmlBootStrap依赖jQuery jQuery 是一种主流的 JavaScript 库被广泛用于简化网页开发中的客户端脚本编写。 BootStrap依赖JavaScript的类库jQuery。 下载 jQuery在页面上应用上jQuery。在页面上应用BootStrap的JavaScript类库。即使用bootstrap里的动态样式 引入jquerybootstrap的动态样式才能生效 BootStrap的JavaScript插件 官方文档JavaScript 插件 · Bootstrap v3 中文文档 | Bootstrap 中文网 (bootcss.com)
!--先引入jquery,因为bootstrap.js需要依赖jquery--
script srcstatic/js/code.jquery.com_jquery-3.7.0.min.js/script
!--再引入bootstrap.js,是动态效果需要的js代码--
script srcstatic/plugins/bootstrap-3.4.1/js/bootstrap.min.js/script
!--script放在bodymowei--
/body
/html举例模态框 (动态实例)
!-- Button trigger modal --
button typebutton classbtn btn-primary btn-lg data-togglemodal data-target#myModal动态实例运行
/button!-- Modal --
div classmodal fade idmyModal tabindex-1 roledialog aria-labelledbymyModalLabeldiv classmodal-dialog roledocumentdiv classmodal-contentdiv classmodal-headerbutton typebutton classclose data-dismissmodal aria-labelClosespan aria-hiddentruetimes;/span/buttonh4 classmodal-title idmyModalLabel标题/h4/divdiv classmodal-body.../divdiv classmodal-footerbutton typebutton classbtn btn-default data-dismissmodal关闭/buttonbutton typebutton classbtn btn-primary保存/button/div/div/div
/div点击按钮出弹窗 # JavaScript JavaScript是一门编程语言。浏览器就是JavaScript语言的解释器。 DOM和BOM 相当于编程语言内置的模块。
例如Python中的re、random、time、json模块等。jQuery 相当于是编程语言的第三方模块。
例如requests、openpyxlJavaScript定义
JavaScript是一门编程语言。
JavaScript的意义是什么
让程序实现一些动态的效果。!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.menu {width: 300px;height: 200px;border: 2px solid red;}.header {height: 70%;background: yellow;}/style
/head
body
div classmenu
!-- onclick,js代码触发条件--div classheader onclickmyfunc()标题/divdiv classcontent内容/div
/div
!--js是绑定html使用的--
script typetext/javascriptfunction myfunc() {//alert(你好)confirm(是否要继续)}
/script/body
/html前端三大组件
HTML裸体。CSS好看的衣服。JavaScript动态。
JS特点
变量名 在 JavaScript 中我们以分号结束语句。 变量名称可以由数字、字母、美元符号 $ 或者下划线 _ 组成但是不能包含空格或者以数字为开头。 通过在变量前面使用关键字 var声明一个变量 var ourName;JavaScript 提供八种不同的数据类型它们是 undefined未定义、null空、boolean布尔型、string字符串、symbol、number数字、bigint可以表示任意大的整数和 object对象。 解释型语言 与C语言等编译型语言不同无需编译跨平台 C obj JAVA .class
单线程 JS引擎单线程 异步机制
ECMA标准 ECMAScript(ES),前端常说的ES6即ECMAScript 6.0 JavaScript是ECMA标准的实现
代码位置 写在/head前/style之后 写在/body前,整个body的末尾处推荐 因为html从上到下执行如果js很多放在head里会再加载网页前浪费很多时间
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle!-- css样式--/style!--位置1--script typetext/javascript//编写js代码 /script
/head
bodydiv classcontainerdiv classheader/divdiv classcontent /div/div!--位置2 推荐--script typetext/javascript//编写js代码 /script
/body
/htmlJS代码的存在形式 当前HTML中。 script typetext/javascript// 编写JavaScript代码
/script在其他js文件中导入使用。
my.js
function f1(){alert(123);
}导入js
!--位置 推荐--
script srcstatic/js/my.js/script注释 HTML的注释 !-- 注释内容 --CSS的注释style代码块内 /* 注释内容 */JavaScript的注释script代码块内 // 注释内容/* 注释内容 */typeof操作符
使用 typeof 操作符可以返回变量的数据类型。
typeof 操作符有带括号和不带括号两种用法如下例所示
typeof x; // 获取变量 x 的数据类型
typeof(x); // 获取变量 x 的数据类型JavaScript中的几个重要概念
标识符
所谓标识符就是名字。JavaScript 中的标识符包括变量名、函数名、参数名、属性名、类名等。
合法的标识符应该注意以下强制规则
第一个字符必须是字母、下划线(_)或美元符号$。除了第一个字符外其他位置可以使用 Unicode 字符。一般建议仅使用 ASCII 编码的字母不建议使用双字节的字符。不能与 JavaScript 关键字、保留字重名。
示例
var str 欢迎来到我的世界
document.write(str)关键字
关键字Keyword就是 JavaScript 语言内部使用的一组名字或称为命令。
这些名字具有特定的用途用户不能自定义同名的标识符。
具体说明如表所示。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ZV3uIJLV-1692854497553)(https://huaizhihua.oss-cn-beijing.aliyuncs.com/img/%E5%85%B3%E9%94%AE%E5%AD%97.png)]
保留字
保留字就是 JavaScript 语言内部预备使用的一组名字或称为命令。
这些名字目前还没有具体的用途是为 JavaScript 升级版本预留备用的建议用户不要使用。
具体说明如表所示。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-lRk4RBEj-1692854497553)(https://huaizhihua.oss-cn-beijing.aliyuncs.com/img/%E4%BF%9D%E7%95%99%E5%AD%97.png)]
大小写
JavaScript 严格区分大小写所以 Hello 和 hello 是两个不同的标识符。
注释
注释是给开发人员看的程序在执行时会自动忽略注释的内容
所以我们通常使用注释来为代码添加一些解释说明或描述以提高代码的可读性。
单行注释
单行注释以双斜杠//开头//之后的所有内容都会看作是注释的内容对//之前的内容则不会产生影响。
html
headtitleJavaScript/title
/head
bodydiv iddemo/divscript// 在 id 属性为 demo 的标签中添加指定内容document.getElementById(demo).innerHTML h2 idh2_id classh2_class我是二级标题/h2;/script
/body
/htmlinnerHTML属性允许更改html元素的内容 多行注释
多行注释以/*开头并以*/结尾出现在/*和*/之间的所有内容都会看作是注释的内容。
html
headtitleJavaScript/title
/head
bodydiv iddemo/divscript/*在 id 属性为 demo 的标签中添加指定内容*/document.getElementById(demo).innerHTML http://c.xxx.net/js/;/script
/body
/html定义变量
在 JavaScript 中定义变量需要使用var关键字语法格式如下
var 变量名;定义变量时可以一次定义一个或多个变量若定义多个变量则需要在变量名之间使用逗号,分隔开。
var a,b,c;变量定义后如果没有为变量赋值那么这些变量会被赋予一个初始值——undefined未定义。
赋值
var关键字
变量定义后可以使用等于号来为变量赋值等号左边的为变量的名称等号右边为要赋予变量的值。
var num; // 定义一个变量 num
num 1; // 将变量 num 赋值为 1此外也可以在定义变量的同时为变量赋值如下例所示
var num 1; // 定义一个变量 num 并将其赋值为 1
var a 2, b 3, c 4; // 同时定义 a、b、c 三个变量并分别赋值为 2、3、4let和const关键字
2015 年以前JavaScript 只能通过 var 关键字来声明变量。
在 ECMAScript6ES6发布之后新增了 let 和 const 两个关键字来声明变量其中
使用 let 关键字声明的变量只在其所在的代码块中有效类似于局部变量并且在这个代码块中同名的变量不能重复声明const 关键字的功能和 let 相同但使用 const 关键字声明的变量还具备另外一个特点那就是 const 关键字定义的变量一旦定义就不能修改即使用 const 关键字定义的为常量。
let name 小明; // 声明一个变量 name 并赋值为“小明”
let age 11; // 声明一个变量 age
let age 13; // 报错变量 age 不能重复定义
const PI 3.1415 // 声明一个常量 PI并赋值为 3.1415
console.log(PI) // 在控制台打印 PIvar与let区别
for (var i 0; i 10; i) {(function (i) {setTimeout(function () {console.log(i);}, 100);})(i);
}
// 输出10个10for (let i 0; i 10; i) {setTimeout(function () {console.log(i);}, 100);
}
// 输出0-9var:
1. 通过 for 循环我们在每次迭代中都会调用 setTimeout 函数将一个函数放入事件队列并设置在 100 毫秒后执行。这意味着在每次迭代中都会创建一个要执行的函数但这些函数在 100 毫秒后才会执行。2. for 循环迭代的过程非常快而且在 JavaScript 中事件队列中的函数在当前执行堆栈完成后才会执行。因此在 for 循环结束后事件队列中会有 10 个函数等待执行。3. 由于事件队列中的函数在 100 毫秒后才会执行当它们执行时循环已经结束变量 i 的值将变为 10。因此无论何时这些函数执行它们都会输出变量 i 的最终值 10。let:
因为 let 具有块级作用域每次循环迭代都会创建一个新的变量 i。这将导致每个函数闭包捕获的是不同的变量 i 值从而得到0-9的递增序列数据类型
数据类型 JavaScript 中的数据类型可以分为两种类型 基本数据类型值类型字符串String、数字Number、布尔Boolean、空Null、未定义Undefined、Symbol引用数据类型对象Object、数组Array、函数Function。
基础类型
基础的类型的值不可改变按值访问存在内存栈中 会隐式转换类型再去进行值对比 全等会既对比值也对比类型!与全等运算符是相反的。 这意味着严格不相等并返回 false 的地方用严格相等运算符会返回 true反之亦然。 严格不相等运算符不会转换值的数据类型。
引用类型
值可以被改变按地址访问属性名存在栈中并且生成一个指针指针指向内存堆中真实数据对比的是指针对象
var a abc
a 123 //重新创建了一个123对象a指向abc长时间不被引用会被js垃圾回收
a.toUpperCase()
var obj {name: 张三
}
obj.name 李四
console.log(obj) // 值被改变了
// {name: 李四}
var a 1
a True //True 转换为布尔值了
a True //FalseJavaScript编程语言。 script// 定义变量var name hzh;// 输出console.log(name);
/script查看输出结果 字符串类型
// 声明
// 定义字符串
console.log(name1) // 怀志华1
console.log(name2) // 怀志华2// 常见功能
var name js 你好 ;
// 获取字符串长度
var v1 name.length;
// 字符串索引
var v2 name[0]; // 等效于name.charAt(0)
// 去除两边空格
var v3 name.trim();
// 切片左闭右开
var v4 name.substring(0, 2);
console.log(v1) // 6
console.log(v2) // j
console.log(v3) // js 你好
console.log(v4) // js跑马灯案例
实现单个字符串流转的功能
script// 1.去html中找到某个标签并获取他的内容(DOM)var tag document.getElementById(txt);var data_string tag.innerText;// 2.跑马灯动态效果获取文本第一个字符放在字符串最后var first_char data_string[0];var other_string data_string.substring(1, data_string.length);var new_text other_string first_char// 3.在html中更新内容tag.innerText new_text;
/script函数封装功能
scriptfunction show() {// 1.去html中找到某个标签并获取他的内容(DOM)var tag document.getElementById(txt);var data_string tag.innerText;// 2.跑马灯动态效果获取文本第一个字符放在字符串最后var first_char data_string[0];var other_string data_string.substring(1, data_string.length);var new_text other_string first_char// 3.在html中更新内容tag.innerText new_text;}// js中的定时器每1000ms即一秒执行一次show函数setInterval(show, 1000);/script数组 类似py列表 // 定义
var v1 [11,22,33,44];
var v2 Array([11,22,33,44]);typeof(v1)/typeof(v2) - object 数组也是特殊的对象
// 操作
var v1 [11,22,33,44];v1[1]
v1[0] hzh;
// 添加
v1.push(联通); // 尾部追加 [11,22,33,44,联通]
v1.unshift(联通); // 头部添加 [联通, 11,22,33,44]
v1.splice(索引位置,0,元素);
v1.splice(1,0,中国); // 索引为1处添加 [11,中国,22,33,44]
// 删除
v1.pop() //尾部删除
v1.shift() //头部删除
v1.splice(索引位置,1)
v1.splice(2,1); // 索引为2的元素删除 [11,22,44];
// splice 0添加 1删除// 循环
var v1 [11,22,33,44];
// 注意循环的是**索引**而不是元素
// 注意循环里的idx是字符串类型的索引。
for(var idx in v1){// idx0/1/2/3/ datav1[idx]
}
for(let idx in v1){v1[idx] parseInt(idx)1;
}
var v1 [11,22,33,44];
for(var i0; iv1.length; i){// i0/1/2/3 datav1[idx]
}
// 每次循环结束执行i注意break和continue 和py中除代码书写结构外用法一致
案例动态数据
body
ul idcity/ul
script// 动态获取数据var city_list [北京, 上海, 深圳]for (var idx in city_list) {var text city_list[idx];// 创建li/li标签var tag document.createElement(li);// 在li标签中写入内容tag.innerText text;// 添加到idcity那个标签里面 DOMvar parent_tag document.getElementById(city);parent_tag.appendChild(tag);}
/script/body对象字典 类似py的字典 // 创建对象
info {name:hzh,age:18
}
// 推荐js冒号左边不加引号
info {name:hzh,age:18
}
// 获取对象值
info.age
info.name hzhinfo[age]
info[name] hzh//删除键
delete info[age]
info {name:hzh,age:18
}
//循环
for(var key in info){// keyname/age datainfo[key]
}注意:JavaScript 中当你想要使用一个变量的值作为属性名来访问对象的属性时你需要使用方括号 [] 来包裹属性名而不是使用点 . 运算符。测试对象属性
要检查某个对象是否具有一个属性你可以使用 .hasOwnProperty() 方法。 根据对象是否具有该属性someObject.hasOwnProperty(someProperty) 返回 true 或 false。案例动态表格
body
table border1theadtrthid/thth姓名/thth年龄/th/trtbody idbody/tbody/thead
/table
script// 数据列表var data_list [{id: 1, name: hzh, age: 18},{id: 2, name: hzh, age: 18},{id: 3, name: hzh, age: 18},{id: 4, name: hzh, age: 18},];for (var idx in data_list) {// 获取一行数据var info data_list[idx];// 创建一个tr标签var tr document.createElement(tr);for (var key in info) {// 获取键对应的值var text info[key];// 创建一个td标签var td document.createElement(td);// 将值放入td中td.innerText text;// 将td放入tr中tr.appendChild(td);// 根据id获取id标签var body_tag document.getElementById(body)// 将tr添加到tbody里body_tag.appendChild(tr)}}/script
/body类型汇总
基础类型
String类型
字符串String类型是一段以单引号或双引号包裹起来的文本例如 ‘123’、“abc”。
Number类型
数值Number类型用来定义数值JavaScript 中不区分整数和小数浮点数。
统一使用 Number 类型表示如下例所示
var num1 123; // 整数
var num2 3.14; // 浮点数Boolean类型
布尔Boolean类型只有两个值true真或者 false假在做条件判断时使用的比较多。
var a true; // 定义一个布尔值 true
var b false; // 定义一个布尔值 false
var c 2 1; // 表达式 2 1 成立其结果为“真true”所以 c 的值为布尔类型的 true
var d 2 1; // 表达式 2 1 不成立其结果为“假false”所以 c 的值为布尔类型的 falseNull类型
Null 是一个只有一个值的特殊数据类型表示一个“空”值即不存在任何值什么都没有用来定义空对象指针。
Undefined类型
Undefined 也是一个只有一个值的特殊数据类型表示未定义。当我们声明一个变量但未给变量赋值时这个变量的默认值就是 Undefined。例如
var num;
console.log(num); // 输出 undefinednull undefined
zhangsan.match(/abc/g)//null
var c //未赋值
console.log(c) //undefinedSymbol类型
Symbol 是 ECMAScript6 中引入的一种新的数据类型表示独一无二的值Symbol 类型的值需要使用 Symbol() 函数来生成如下例所示
var str 123;
var sym1 Symbol(str);
var sym2 Symbol(str);
console.log(sym1); // 输出 Symbol(123)
console.log(sym2); // 输出 Symbol(123)const info {name: 张三,[Symbol(job)]: 盗贼
}
const info1 {[Symbol(job)]: 囚徒
}// 就不会覆盖而是覆盖引用类型
Object类型
javaScript 中的对象Object类型是一组由键、值组成的无序集合定义对象类型需要使用花括号{ }语法格式如下
{name1: value1, name2: value2, name3: value3, ..., nameN: valueN}其中 name1、name2、…、nameN 为对象中的键value1、value2、…、valueN 为对应的值。
在 JavaScript 中对象类型的键都是字符串类型的值则可以是任意数据类型。要获取对象中的某个值可以使用对象名.键的形式如下例所示
var person {name: Bob,age: 20,tags: [js, web, mobile],city: Beijing,hasCar: true,zipcode: null
};
console.log(person.name); // 输出 Bob
console.log(person.age); // 输出 20new 关键字 // new String(abc)所以可以调用String的方法创建的是一个临时的对象
var str abc
str.length//3 //str是基础类型
var str1 new String(abc)//创建了一个对象
str1
//String {abc} //str1是字符串类型
String(123)//直接使用String时就是类型转换,而new是创建了一个对象
//包装对象
new String();
new Number();
new Boolean();Array类型
数组Array是一组按顺序排列的数据组合。
数组中的每个值都称为元素而且数组中可以包含任意类型的数据。
在 JavaScript 中定义数组需要使用方括号[ ]数组中的每个元素使用逗号进行分隔例如
[1, 2, 3, hello, true, null]另外也可以使用 Array() 函数来创建数组如下例所示
var arr new Array(1, 2, 3, 4);
console.log(arr); // 输出 [1, 2, 3, 4]Function类型
函数Function是一段具有特定功能的代码块。
函数并不会自动运行需要通过函数名调用才能运行如下例所示
function sayHello(name){return Hello, name;
}
var res sayHello(Peter);
console.log(res); // 输出 Hello, Peter运算符
运算符是用来告诉 JavaScript 引擎执行某种操作的符号。
例如加号表示执行加法运算减号-表示执行减法运算等。
算数运算符
算数运算符用来执行常见的数学运算例如加法、减法、乘法、除法等。
下表中列举了 JavaScript 中支持的算术运算符
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VAqAcSCw-1692854497554)(https://huaizhihua.oss-cn-beijing.aliyuncs.com/img/%E7%AE%97%E6%95%B0%E8%BF%90%E7%AE%97%E7%AC%A6.png)]
var x 10,y 4;
console.log(x y , x y); // 输出x y 14
console.log(x - y , x - y); // 输出x - y 6
console.log(x * y , x * y); // 输出x * y 40
console.log(x / y , x / y); // 输出x / y 2.5
console.log(x % y , x % y); // 输出x % y 2赋值运算符
赋值运算符用来为变量赋值下表中列举了 JavaScript 中支持的赋值运算符
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DZ7VacLS-1692854497554)(https://huaizhihua.oss-cn-beijing.aliyuncs.com/img/%E8%B5%8B%E5%80%BC%E8%BF%90%E7%AE%97%E7%AC%A6.png)]
var x 10;
x 20;
console.log(x); // 输出30
var x 12,y 7;
x - y;
console.log(x); // 输出5
x 5;
x * 25;
console.log(x); // 输出125
x 50;
x / 10;
console.log(x); // 输出5
x 100;
x % 15;
console.log(x); // 输出10字符串运算符
JavaScript 中的和运算符除了可以进行数学运算外还可以用来拼接字符串其中
运算符表示将运算符左右两侧的字符串拼接到一起运算符表示先将字符串进行拼接然后再将结果赋值给运算符左侧的变量。
var x Hello ;
var y World!;
var z x y;
console.log(z); // 输出Hello World!
x y;
console.log(x); // 输出Hello World!自增、自减运算符
自增、自减运算符用来对变量的值进行自增1、自减-1操作。
下表中列举了 JavaScript 中支持的自增、自减运算符
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-foauhopX-1692854497555)(https://huaizhihua.oss-cn-beijing.aliyuncs.com/img/%E8%87%AA%E5%A2%9E%EF%BC%8C%E8%87%AA%E5%87%8F%E8%BF%90%E7%AE%97%E7%AC%A6.png)]
var x;
x 10;
console.log(x); // 输出11
console.log(x); // 输出11
x 10;
console.log(x); // 输出10
console.log(x); // 输出11
x 10;
console.log(--x); // 输出9
console.log(x); // 输出9
x 10;
console.log(x--); // 输出10
console.log(x); // 输出9比较运算符
比较运算符用来比较运算符左右两侧的表达式比较运算符的运算结果是一个布尔值。
结果只有两种不是 true 就是 false。
下表中列举了 JavaScript 中支持的比较运算符
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s0XMLDJ5-1692854497555)(https://huaizhihua.oss-cn-beijing.aliyuncs.com/img/%E6%AF%94%E8%BE%83%E8%BF%90%E7%AE%97%E7%AC%A6.png)]
var x 25;
var y 35;
var z 25;
console.log(x z); // 输出 true
console.log(x z); // 输出 false
console.log(x ! y); // 输出 true
console.log(x ! z); // 输出 true
console.log(x y); // 输出 true
console.log(x y); // 输出 false
console.log(x y); // 输出 true
console.log(x y); // 输出 false逻辑运算符
逻辑运算符通常用来组合多个表达式逻辑运算符的运算结果是一个布尔值。
只能有两种结果不是 true 就是 false。
下表中列举了 JavaScript 中支持的逻辑运算符
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1UMeuq5e-1692854497555)(https://huaizhihua.oss-cn-beijing.aliyuncs.com/img/%E9%80%BB%E8%BE%91%E8%BF%90%E7%AE%97%E7%AC%A6.png)]
var year 2021;
// 闰年可以被 400 整除也可以被 4 整除但不能被 100 整除
if((year % 400 0) || ((year % 100 ! 0) (year % 4 0))){console.log(year 年是闰年。);
} else{console.log(year 年是平年。);
}输出语句
某些情况下我们可能需要将程序的运行结果输出到浏览器中。
JavaScript 中为我们提供了多种不同的输出语句来向浏览器中输出内容
使用 alert() 函数来弹出提示框使用 confirm() 函数来弹出一个对话框使用 document.write() 方法将内容写入到 HTML 文档中使用 innerHTML 将内容写入到 HTML 标签中使用 console.log() 在浏览器的控制台输出内容。
alert()函数
使用 JS alert() 函数可以在浏览器中弹出一个提示框。
在提示框中我们可以定义要输出的内容
html langen
headmeta charsetUTF-8titleJavaScript/title
/head
bodyscript typetext/javascriptvar a 11,b 5;window.alert(a * b a * b);/script
/body
/htmlconfirm()函数
JS confirm() 函数与 alert() 函数相似它们都是 window 对象下的函数同样可以在浏览器窗口弹出一个提示框不同的是使用 confirm() 函数创建的提示框中除了包含一个“确定”按钮外还有一个“取消”按钮。如果点击“确定”按钮那么 confirm() 函数会返回一个布尔值 true如果点击“取消”按钮那么 confirm() 函数会返回一个布尔值 false。
html langen
headmeta charsetUTF-8titleJavaScript/title
/head
bodyscript typetext/javascriptvar res window.confirm(这里是要显示的内容);if(res true){alert(你点击了“确定”按钮);}else{alert(你点击了“取消”按钮);}/script
/body
/htmlconsole.log()
使用 JS console.log() 可以在浏览器的控制台输出信息我们通常使用 console.log() 来调试程序。
要看到 console.log() 的输出内容需要先打开浏览器的控制台。以 Chrome 浏览器为例要打开控制台您只需要在浏览器窗口按 F12 快捷键或者点击鼠标右键并在弹出的菜单中选择“检查”选项即可。最后在打开的控制台中选择“Console”选项
html langen
headmeta charsetUTF-8titleJavaScript/title
/head
bodyscript typetext/javascriptvar myArr [Chrome,Firefox,Edge,Safari,Opera];console.log(myArr);/script
/body
/htmldocument.write()
使用 JS document.write() 可以向 HTML 文档中写入 HTML 或者 JavaScript 代码。
html langen
headmeta charsetUTF-8titleJavaScript/title
/head
bodyscript typetext/javascriptdocument.write(p现在的时间是/p);document.write(Date());/script
/body
/htmlinnerHTML
与前面介绍的几个函数不同innerHTML 是一个属性而不是一个函数。
通过它可以设置或者获取指定 HTML 标签中的内容。
示例代码如下
html langen
headmeta charsetUTF-8titleJavaScript/title
/head
bodydiv iddemoJavaScript 输出/divscript typetext/javascriptvar demo document.getElementById(demo);demo.innerHTML h2innerHTML/h2/script
/body
/html条件判断
条件判断语句是程序开发过程中一种经常使用的语句形式。
和大部分编程语言相同JavaScript中也有条件判断语句。
if语句
if 语句是 JavaScript 中最简单的条件判断语句。
语法格式如下
if(条件表达式){// 要执行的代码;
}当条件表达式成立即结果为布尔值 true 时就会执行{ }中的代码。
html langen
headmeta charsetUTF-8titleJavaScript/title
/head
bodyscript typetext/javascriptvar age 20;if(age 18){ // 如果 age 18 的结果为 true则执行下面 { } 中的代码alert(adult);}/script
/body
/htmlif else语句
if else 语句是 if 语句的升级版它不仅可以指定当表达式成立时要执行的代码还可以指定当表达式不成立时要执行的代码语法格式如下
if(条件表达式){// 当表达式成立时要执行的代码
}else{// 当表达式不成立时要执行的代码
}示例代码如下
html langen
headmeta charsetUTF-8titleJavaScript/title
/head
bodyscript typetext/javascriptvar now new Date(); // 获取当前的完整日期var dayOfWeek now.getDay(); // 获取一个 0-6 之间的数字用来表示当前是星期几0 表示星期日、1 表示星期一、以此类推if (dayOfWeek 0 dayOfWeek 6) { // 判断如果当前是星期一到星期五中的一天则输出“Have a nice day!”若不是则输出“Have a nice weekend!”alert(Have a nice day!);} else {alert(Have a nice weekend!);}/script
/body
/htmlif else if else语句 类似py elif语句 if 和 if else 语句都只有一个条件表达式而 if else if else 语句是它们更高级的形式。
在 if else if else 语句中允许您定义多个条件表达式并根据表达式的结果执行相应的代码。
语法格式如下
if (条件表达式 1) {// 条件表达式 1 为真时执行的代码
} else if (条件表达式 2) {// 条件表达式 2 为真时执行的代码
}
...else if (条件表达式N) {// 条件表达式 N 为真时执行的代码
} else {// 所有条件表达式都为假时要执行的代码
}示例代码如下
html langen
headmeta charsetUTF-8titleJavaScript/title
/head
bodyscript typetext/javascriptvar now new Date(); // 获取当前的完整日期var dayOfWeek now.getDay(); // 获取一个 0-6 之间的数字用来表示当前是星期几0 表示星期日、1 表示星期一、以此类推if(dayOfWeek 0) { // 判断当前是星期几alert(星期日)} else if(dayOfWeek 1) {alert(星期一)} else if(dayOfWeek 2) {alert(星期二)} else if(dayOfWeek 3) {alert(星期三)} else if(dayOfWeek 4) {alert(星期四)} else if(dayOfWeek 5) {alert(星期五)} else {alert(星期六)}/script
/body
/htmlswith case语句
JS switch case 语句与语句的多分支结构类似都可以根据不同的条件来执行不同的代码。
但是与 if else 多分支结构相比switch case 语句更加简洁和紧凑执行效率更高。
switch case 语句的语法格式如下
switch (表达式){case value1:statements1 // 当表达式的结果等于 value1 时则执行该代码break;case value2:statements2 // 当表达式的结果等于 value2 时则执行该代码break;......case valueN:statementsN // 当表达式的结果等于 valueN 时则执行该代码break;default :statements // 如果没有与表达式相同的值则执行该代码
}switch 语句根据表达式的值依次与 case 子句中的值进行比较
如果两者相等则执行其后的语句段当遇到break关键字时则跳出整个switch语句。如果不相等则继续匹配下一个case。switch 语句包含一个可选的 default 关键字如果在前面的 case 中没有找到相等的条件则执行 default 后面的语句段。
示例代码如下
var id 3;
switch (id) {case 1 :console.log(普通会员);break; //停止执行跳出switchcase 2 :console.log(VIP会员);break; //停止执行跳出switchcase 3 :console.log(管理员);break; //停止执行跳出switchdefault : //上述条件都不满足时默认执行的代码console.log(游客);
}while循环语句
循环就是重复做一件事在编写代码的过程中我们经常会遇到一些需要反复执行的操作。
循环可以减轻编程压力避免代码冗余提高开发效率方便后期维护。
while 循环的语法格式如下
while (条件表达式) {// 要执行的代码
}示例代码
var i 1;
while( i 5) {document.write(i, );i;
}do while循环语句
do while 循环与while 循环非常相似不同之处在于do while 循环会先执行循环中的代码然后再对条件表达式进行判断。因此无论条件表达式是真还是假do while 循环都能至少执行一次而 while 循环就不行了如果条件表达式为假会直接退出 while 循环。
do {// 需要执行的代码
} while (条件表达式);示例代码
var i 1;
do{document.write(i );i;
}while (i 5);for循环语句
for 循环中包含三个可选的表达式 initialization、condition 和 increment其中
initialization为一个表达式或者变量声明该步骤称为“初始化计数器变量”在循环过程中只会执行一次condition为一个条件表达式与 while 循环中的条件表达式功能相同通常用来与计数器的值进行比较以确定是否进行循环通过该表达式可以设置循环的次数increment为一个表达式用来在每次循环结束后更新递增或递减计数器的值。
示例代码
for (var i 1; i 10; i) {document.write(i );
}运行结果
1 2 3 4 5 6 7 8 9 10
示例使用for循环遍历数组中的内容
var fruits [python, java, php, mysql, redis];
for(var i 0; i fruits.length; i) {document.write(fruits[i] emsp;);
}break和continue
默认情况下循环会在表达式结果为假时自动退出循环否则循环会一直持续下去。某些情况下我们不用等待循环自动退出可以主动退出循环JavaScript 中提供了 break 和 continue 两个语句来实现退出循环和退出跳过当前循环下面我们就来详细介绍一下。
break语句
使用 break 语句还可以用来跳出循环让程序继续执行循环之后的代码。
示例
for (var i 0; i 10; i) {if(i 5) {break;}document.write(i i br);
}
document.write(循环之外的代码);continue语句
continue 语句用来跳过本次循环执行下次循环。
示例
for (var i 0; i 10; i) {if(i % 2 0) {continue;}document.write(i nbsp;);
}JS函数
定义函数
JS 函数声明需要以 function 关键字开头之后为要创建的函数名称function 关键字与函数名称之间使用空格分开函数名之后为一个括号( )括号中用来定义函数中要使用的参数多个参数之间使用逗号,分隔开一个函数最多可以有 255 个参数最后为一个花括号{ }花括号中用来定义函数的函数体即实现函数的代码如下所示
function functionName(parameter_list) {// 函数中的代码
}代码示例如下
function sayHello(name){document.write(Hello name);
}调用函数
一旦定义好了一个函数我们就可以在当前文档的任意位置来调用它。调用函数非常简单只需要函数名后面加上一个括号即可例如 alert()、write()。注意如果在定义函数时函数名后面的括号中指定了参数那么在调用函数时也需要在括号中提供对应的参数。
示例如下
function sayHello(name){document.write(Hello name);
}
// 调用 sayHello() 函数
sayHello(python);默认参数
在定义函数时可以为函数的参数设置一个默认值这样当我们在调用这个函数时如果没有提供参数就会使用这个默认值作为参数值如下例所示
function sayHello(name World){document.write(Hello name);
}
sayHello();
sayHello(python);函数返回值
在函数中可以使用 return 语句将一个值函数的运行结果返回给调用函数的程序这个值可以是任何类型例如数组、对象、字符串等。对于有返回值的函数可以会使用一个变量来接收这个函数的返回值示例代码如下
function getSum(num1, num2){return num1 num2;
}
var sum1 getSum(7, 12); // 函数返回值为19
var sum2 getSum(-5, 33); // 函数返回值为28另外一个函数只能有一个返回值若要返回多个值则则可以将值放入一个数组中然后返回这个数组即可。
事件
事件处理
DOM
DOM是Document Object Model文档对象模型的缩写。它是一种编程接口API用于在HTML和XML文档中以对象的方式表示和操作文档。
DOM就是一个模块模块可以对HTML页面中的标签进行操作。
!-- 根据ID获取标签--
var tag document.getElementById(xx);!--获取标签中的文本--
tag.innerText!--修改标签中的文本--
tag.innerText 哈哈哈哈哈;!--创建标签 div哈哈哈哈哈/div--
var tag document.createElement(div);!--标签写内容--
tag.innerText 哈哈哈哈哈;
ul idcity/ulscript typetext/javascriptvar tag document.getElementById(city);var newTag document.createElement(li);newTag.innerText 北京;// 把newTag标签添加到页面里tag.appendChild(newTag);
/script事件绑定
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
input typetext placeholder请输入内容 idtxtUser/
input typebutton value点击添加 onclickaddCityInfo()
ul idcity/ulscript typetext/javascriptfunction 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 newString;// 4.标签添加到ul中var parentTag document.getElementById(city);parentTag.appendChild(newTag);// 3.将input框内容清空txtTag.value ;}else{alert(输入不能为空);}}/script
/body
/html注意DOM中还有很多操作。
DOM可以实现很多功能但是比较繁琐。
页面上的效果jQuery来实现 / vue.js / react.jsJS 事件event是当用户与网页进行交互时发生的事情例如单机某个链接或按钮、在文本框中输入文本、按下键盘上的某个按键、移动鼠标等等。当事件发生时您可以使用 JavaScript 中的事件处理程序也可称为事件监听器来检测并执行某些特定的程序。
一般情况下事件的名称都是以单词on开头的例如点击事件 onclick、页面加载事件 onload 等。下表中列举了一些 JavaScript 中常用的事件。 事件只有与 HTML 元素绑定之后才能被触发为 HTML 元素绑定事件处理程序的方法由很多最简单的就是通过 HTML事件属性来直接绑定事件处理程序例如 onclick、onmouseover、onmouseout 等属性。
以 onclick 属性为例通过该属性我们可以为指定的 HTML 元素定义鼠标点击事件即在该元素上单击鼠标左键时触发的事件示例代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8titleJavaScript/title
/head
bodybutton typebutton onclickmyBtn()按钮/buttonscript typetext/javascriptfunction myBtn(){alert(Hello World!);}/script
/body
/html我们也可以直接使用 JavaScript 中提供的内置函数来为指定元素绑定事件处理程序如下例所示
!DOCTYPE html
html langen
headmeta charsetUTF-8titleJavaScript/title
/head
bodybutton typebutton idmyBtn按钮/buttonscriptfunction sayHello() {alert(Hello World!);}document.getElementById(myBtn).onclick sayHello;/script
/body
/html事件示例
一般情况下事件可以分为四大类——鼠标事件、键盘事件、表单事件和窗口事件另外还有一些其它事件。下面通过几个示例来简单介绍一些比较常用的事件。
onmouseover事件 onmouseover 事件就是指当用户鼠标指针移动到元素上时触发的事件示例代码如下 !DOCTYPE html
html langen
headmeta charsetUTF-8titleJavaScript/title
/head
bodybutton typebutton onmouseoveralert(鼠标已经移动到了该按钮上);请将鼠标移动至此处/buttonbra href# onmouseovermyEvent()请将鼠标移动至此处/ascriptfunction myEvent() {alert(鼠标已经移动到了该链接上);}/script
/body
/htmlonmouseout事件 onmouseout 事件会在鼠标从元素上离开时触发示例代码如下 !DOCTYPE html
html langen
headmeta charsetUTF-8titleJavaScript/title
/head
bodydiv stylewidth: 350px; height: 200px; border:1px solid black idmyBox/divscriptfunction myEvent() {alert(您的鼠标已经离开指定元素);}document.getElementById(myBox).onmouseout myEvent;/script
/body
/htmlonkeydown事件 onkeydown 事件是指当用户按下键盘上的某个按键时触发的事件示例代码如下 !DOCTYPE html
html langen
headmeta charsetUTF-8titleJavaScript/title
/head
bodyinput typetext onkeydownmyEvent()scriptfunction myEvent() {alert(您按下了键盘上的某个按钮);}/script
/body
/htmlonkeyup事件 onkeyup 事件是指当用户按下键盘上的某个按键并将其释放即按下并松开某个按键时触发的事件示例代码如下 !DOCTYPE html
html langen
headmeta charsetUTF-8titleJavaScript/title
/head
bodyinput typetext onkeyupmyEvent()scriptfunction myEvent() {alert(您按下了键盘上的某个按钮并将其释放了);}/script
/body
/html作用域
在 JavaScript 中您可以在任意位置声明变量但不同的位置会影响变量的可用范围这个范围称为作用域。作用域可以大致分为两种类型分别是全局作用域和局部作用域。下面就来分别介绍一下。
全局作用域
全局作用域是指变量可以在当前脚本的任意位置访问拥有全局作用域的变量也被称为“全局变量”一般情况下拥有以下特征的变量具有全局作用域
最外层的函数和在最外层函数外面定义的变量拥有全局作用域所有未定义直接赋值的变量拥有全局作用域所有 window 对象的属性拥有全局作用域例如 window.name、window.location、window.top 等。
示例代码如下
var str Hello World!;
function myFun(){document.write(str); // 输出Hello World!
}
myFun();
document.write(str); // 输出Hello World!局部作用域
在函数内部声明的变量具有局部作用域拥有局部作用域的变量也被称为“局部变量”局部变量只能在其作用域中函数内部使用。示例代码如下
function myFun(){var str Hello World!;document.write(str); // 输出Hello World!
}
document.write(str); // 报错str is not defined在函数内定义的局部变量只有在函数被调用时才会生成当函数执行完毕后会被立即销毁。
案例表单验证
表单是 Web 应用网站的重要组成部分通过表单可以收集用户提交的信息例如姓名、邮箱、电话等。由于用户在填写这些信息时有可能出现一些错误例如输入手机号时漏掉了一位、在输入的内容前后输入空格、邮箱的格式不正确等。为了节省带宽同时避免这些问题对服务器造成不必要的压力我们可以使用 JavaScript 在提交数据之前对数据进行检查确认无误后再发送到服务器。
使用 JavaScript 来验证提交数据客户端验证比将数据提交到服务器再进行验证服务器端验证用户体验要更好因为客户端验证发生在用户浏览器中无需向服务器发送请求所以速度更快而服务器端验证需要先将数据提交到服务器然后服务器再将结果返回给浏览器用户需要等待服务器响应结果才能知道哪里出了问题。
表单验证通常由两个部分组成
必填字段验证确保必填的字段都被填写数据格式验证确保所填内容的类型和格式是正确的、有效的。
验证码demo
!DOCTYPE html
html langen
head
meta charsetUTF-8
titleTitle/title
style
.container {
width: 300px;
height: 50px;
margin: 200px auto;
padding: 100px;
border: red solid 1px;
text-align: center;
font-size: 24px;
}
/style
/head
body
div classcontainer
!-- onsubmit return true则提交表单false则阻住提交--
form action methodpost onsubmitreturn validateForm();
label验证码/label
input typetext idvailcode namecaptcha placeholder验证码
span idcaptcha onclickgetCaptcha()/spanbr
input typesubmit idnewVailcode value提交
/form
/div
script
var capCode getCaptcha(); function getCaptcha() {
var cap Math.floor(Math.random() * 10000).toString();
if (cap.length ! 4) { cap 0;
}
document.getElementById(captcha).innerHTML cap;
return capCode cap;
} function validateForm() {
var captchaInput document.querySelector(input[namecaptcha]).value; if (captchaInput ) {
alert(请输入验证码);
return false; // 阻止表单提交
} else if (capCode ! captchaInput) {
alert(验证码不正确);
return false; // 阻止表单提交
}
alert(验证码正确)
return true; // 允许表单提交
}
/script
/body
/html必填字段验证
必填字段验证在用户注册时比较常见通过必填字段验证能够确保表单中的必填字段都被填写例如用户名、密码、邮箱等。
示例代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8title必填字段验证/titlestyle.error{color: red;}/style
/head
body
form onsubmitreturn validateForm() action methodpostfieldset styletext-align: center;width: 300px;position: relativelegend注册:/legenddiv classrowlabel账emsp;号/labelinput typetext namenamespan classerror idnameErr/span/divdiv classrowlabel密emsp;码/labelinput typepassword namepwdspan classerror idpwdErr/span/divdiv classrowlabel邮emsp;箱/labelinput typetext nameemailspan classerror idemailErr/span/divdiv classrowlabel电emsp;话/labelinput typetext namemobile maxlength11span classerror idmobileErr/span/divdiv classrowlabel验证码/labelinput typetext namecaptcha maxlength4 stylewidth: 120px;span idcaptcha onclickgetCaptcha()/spanspan classerror idcaptchaErr/span/divdiv classrowinput typesubmit value注册/div/fieldset/form
script// 生成验证码var captcha getCaptcha();// 获取验证码function getCaptcha(){var cap Math.floor(Math.random()*10000).toString();if(cap.length ! 4) cap 0;captcha cap;document.getElementById(captcha).innerHTML cap;}// 显示错误消息function printError(elemId, hintMsg) {document.getElementById(elemId).innerHTML hintMsg;}// 验证表单数据function validateForm() {// 获取表单元素的值var name document.querySelector(input[namename]).value;var pwd document.querySelector(input[namepwd]).value;var email document.querySelector(input[nameemail]).value;var mobile document.querySelector(input[namemobile]).value;var captcha document.querySelector(input[namecaptcha]).value;if(name || name null){printError(nameErr, 用户名不能为空);return false;}if(pwd || pwd null){printError(pwdErr, 密码不能为空);return false;}if(email || email null){printError(emailErr, 邮箱不能为空);return false;}if(mobile || mobile null){printError(mobileErr, 手机号不能为空);return false;}if(captcha || captcha null){printError(captchaErr, 验证码不能为空);return false;}}// 清空 input 标签后的提示信息var tags document.getElementsByTagName(input);for (var i 0; i tags.length; i) {//元素内容发生改变触发onchange事件tags[i].onchange function(){//this.name 获取标签的name属性var idname this.name Err;document.getElementById(idname).innerHTML ;}}/script
/body
/html数据格式验证
数据格式验证就是通过正则表达式来验证用户所填的数据是否符合要求以邮箱地址为例正确的邮箱地址中要包含一个和一个.而且不能是邮箱地址的第一个字符.要出现在之后。
示例代码如下
!DOCTYPE html
html langen
headmeta charsetUTF-8title数据格式验证/titlestyle.error{color: red;font-size: 10px;}/style
/head
body
form onsubmitreturn validateForm() action methodpostfieldset styletext-align: center;width: 350px;position: relativelegend注册:/legenddiv classrowlabel账emsp;号/labelinput typetext namenamebrspan classerror idnameErr/span/divdiv classrowlabel密emsp;码/labelinput typepassword namepwdbrspan classerror idpwdErr/span/divdiv classrowlabel邮emsp;箱/labelinput typetext nameemailbrspan classerror idemailErr/span/divdiv classrowlabel电emsp;话/labelinput typetext namemobile maxlength11brspan classerror idmobileErr/span/divdiv classrowlabel验证码/labelinput typetext namecaptcha maxlength4 stylewidth: 120px;span idcaptcha onclickgetCaptcha()/spanbrspan classerror idcaptchaErr/span/divdiv classrowinput typesubmit value注册/div/fieldset/form
script// 生成验证码var capCode getCaptcha();// 获取验证码function getCaptcha(){var cap Math.floor(Math.random()*10000).toString();if(cap.length ! 4) cap 0;document.getElementById(captcha).innerHTML cap;return capCode cap;}// 清空 input 标签后的提示信息var tags document.getElementsByTagName(input);for (var i 0; i tags.length; i) {tags[i].onchange function(){var idname this.name Err;document.getElementById(idname).innerHTML ;}}// 显示错误消息function printError(elemId, hintMsg) {document.getElementById(elemId).innerHTML hintMsg;}// 验证表单数据function validateForm() {// 获取表单元素的值var name document.querySelector(input[namename]).value;var pwd document.querySelector(input[namepwd]).value;var email document.querySelector(input[nameemail]).value;var mobile document.querySelector(input[namemobile]).value;var captcha document.querySelector(input[namecaptcha]).value;if(name || name null){printError(nameErr, 用户名不能为空);return false;}if(pwd || pwd null){printError(pwdErr, 密码不能为空);return false;}if(email || email null){printError(emailErr, 邮箱不能为空);return false;} else {var regex /^\S\S\.\S$/;if(regex.test(email) false) {printError(emailErr, 请输入正确的邮箱地址);return false;}}if(mobile || mobile null){printError(mobileErr, 手机号不能为空);return false;}if(captcha || captcha null){printError(captchaErr, 验证码不能为空);return false;} else {console.log(capCode);console.log(captcha);if(capCode ! captcha){printError(captchaErr, 验证码有误);return false;}}}/script
/body
/htmljQuery库
jQuery是一个JavaScript第三方模块第三方类库。
基于jQuery自己开发一个功能。现成的工具 依赖jQuery例如BootStrap动态效果。
快速上手 下载jQuery https://jquery.com/应用jQuery
简单案例
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
h1 idtxt中国你好/h1!--导入jquery--
script srcstatic/js/code.jquery.com_jquery-3.7.0.min.js/script
script// 利用jquery中功能实现修改页面内容// 找到idtxt的标签进行内容修改// jquery的方法比dom方法简单$(#txt).text(美国你好);// dom的方法document.getElementById(txt).innerText 英国你好;/script/body
/html寻找标签
直接寻找
ID选择器
h1 idtxt中国联通/h1
h1中国联通/h1
h1中国联通/h1$(#txt)样式选择器 h1 classc1中国联通1/h1
h1 classc1中国联通2/h1
h1 classc2中国联通3/h1$(.c1)标签选择器 h1 classc1中国联通1/h1
div classc1中国联通2/h1
h1 classc2中国联通3/h1$(h1)层级选择器 h1 classc1中国联通1/h1
h1 classc1div classc2span/spana/a/div
/h1
h1 classc2中国联通3/h1$(.c1 .c2 a)多选择器 h1 classc1中国联通1/h1
h1 classc1div classc3span/spana/a/div
/h1
h1 classc2中国联通3/h1
ullixx/lilixx/li
/ul$(#c3,#c2,li)属性选择器 input typetext namen1 /
input typetext namen1 /
input typetext namen2 /$(input[namen1])间接寻找 找同级兄弟标签 divdiv北京/divdiv idc1上海/divdiv深圳/divdiv广州/div
/div$(#c1).prev() // 上一个
$(#c1)
$(#c1).next() // 下一个
$(#c1).next().next() // 下一个、下一个$(#c1).siblings() // 所有的同级兄弟找父子 divdivdiv北京/divdiv idc1div青浦区/divdiv classp10宝山区/divdiv浦东新区/div/divdiv深圳/divdiv广州/div/divdivdiv陕西/divdiv山西/divdiv河北/divdiv河南/div/div
/div$(#c1).parent() // 父亲
$(#c1).parent().parent() // 父亲、父亲$(#c1).children() // 所有的儿子
$(#c1).children(.p10) // 所有的儿子中寻找classp10$(#c1).find(.p10) // 去所有子孙中寻找classp10
$(#c1).find(div) // 去所有子孙中寻找div案例菜单切换
默认内容隐藏点击标题显示内容
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlestyle.menu {width: 200px;height: 800px;border: 1px solid red;}.menu .header {background: yellow;/*内边距 上下10px,左右5px*/padding: 10px 5px;border-bottom: 1px red solid;/*鼠标样式修改为小手*/cursor: pointer;}.menu .content a {display: block;padding: 5px 5px;/*虚线*/border-bottom: 1px dotted brown;}/*隐藏显示*/.hide {display: none;}/style
/head
body
div classmenudiv classitem
!-- 这里的 this 是一个特殊的关键字在这个上下文中它指向触发了事件的元素--div classheader onclickclick_me(this)上海/divdiv classcontent hidea href#宝山/aa href#宝山/aa href#宝山/a/div/divdiv classitemdiv classheader onclickclick_me(this)北京/divdiv classcontent hidea href#海淀/aa href#海淀/aa href#海淀/aa href#海淀/a/div/div/divscript srcstatic/js/code.jquery.com_jquery-3.7.0.min.js/script
scriptfunction click_me(self){// $(self) - 表示当前点击的那个标签。// $(self).next() 下一个标签// $(self).next().removeClass(hide); 删除样式$(self).next().removeClass(hide);}
/script/body
/html点击标签显示内容再点击则隐藏内容
scriptfunction click_me(self){var is_hide $(self).next().hasClass(hide)if (is_hide){// 如果有hide标签则去除hide$(self).next().removeClass(hide)}else{// 没有hide 标签则添加$(self).next().addClass(hide)}}
/script点击标题显示内容时隐藏其他标标题内容
scriptfunction click_me(self){// 将点击的标签下的content标签去除hide标签以显示自己标题下面的内容$(self).next().removeClass(hide);// 找到父级item的其他所有同级item里的content标签然后再添加hide标签隐藏内容$(self).parent().siblings().find(.content).addClass(hide)}
/script样式操作
addClassremoveClasshasClass
值操作
div idc1内容/div
$(#c1).text() // 获取文本内容
$(#c1).text(休息) // 设置文本内容
input typetext idc2 /
$(#c2).val() // 获取用户输入的值
$(#c2).val(哈哈哈) // 设置值案例动态创建数据
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
input typetext idtxt_user placeholder用户名
input typetext idtxt_email placeholder邮箱
input typebutton value提交 onclickget_info()ul idview/ul
script srcstatic/js/code.jquery.com_jquery-3.7.0.min.js/script
scriptfunction get_info() {// 获取用户输入的用户名和密码var user_name $(#txt_user).val();var user_email $(#txt_email).val();var data user_name 和 user_email;// 创建li标签在li内容写入内容var new_li $(li).text(data);// 把新创建li标签添加到ul里面$(#view).append(new_li)}
/script
/body
/html事件
比dom的代码量减少
input typebutton value提交 onclickgetInfo()/scriptfunction getInfo() {}
/script
ulli百度/lili谷歌/lili搜狗/li
/ulscript$(li).click(function(){// 点击li标签时自动执行这个函数// $(this) 当前你点击的是那个标签。});
/script
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
ulli百度/lili谷歌/lili搜狗/li
/ulscript srcstatic/jquery-3.6.0.min.js/script
script$(li).click(function () {var text $(this).text();console.log(text);});/script
/body
/html在jQuery中可以删除某个标签。 div idc1内容/div$(#c1).remove();案例删除元素
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
ulli百度/lili谷歌/lili搜狗/li
/ulscript srcstatic/jquery-3.6.0.min.js/script
script$(li).click(function () {$(this).remove();});/script
/body
/html当页面框架加载完成之后执行代码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
ulli百度/lili谷歌/lili搜狗/li
/ulscript srcstatic/jquery-3.6.0.min.js/script
script$(function () {// 当页面的框架加载完成之后自动就执行。$(li).click(function () {$(this).remove();});});
/script
/body
/html案例表格数据删除
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title
/head
body
table border1theadtrthid/thth姓名/thth操作/th/tr/theadtbodytrtd001/tdtd怀志华1/tdtdinput typebutton value删除 classdelete/td/trtrtd002/tdtd怀志华2/tdtdinput typebutton value删除 classdelete/td/trtrtd001/tdtd怀志华3/tdtdinput typebutton value删除 classdelete/td/tr/tbody
/tablescript srcstatic/js/code.jquery.com_jquery-3.7.0.min.js/script
script$(function () {// 找到所有classdelete的标签,绑定事件$(.delete).click(function () {// 找到tr,删除当前行数据$(this).parent().parent().remove()})})
/script
/body
/html综合案例数据录入
HTMLCSSJavaScript、jQueryBootStrap动态效果依赖jQuery。 前提准备 导入标准流程 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/title!-- 1.引入bootstrap css--link relstylesheet hrefstatic/plugins/bootstrap-3.4.1-dist/css/bootstrap.css!-- 2.引入font-awesome css--link relstylesheet hrefstatic/plugins/font-awesome-4.7.0/css/font-awesome.css
/head
body!--3.引入bootstrap的依赖jquery--script srcstatic/js/code.jquery.com_jquery-3.7.0.min.js/script!--4.引入bootstrap,js--script srcstatic/plugins/bootstrap-3.4.1-dist/js/bootstrap.js/script
/body
/html可以使用所有bootstrap的样式了
!DOCTYPE html
html langen
headmeta charsetUTF-8title数据录入/titlelink relstylesheet hrefstatic/plugins/bootstrap-3.4.1-dist/css/bootstrap.css!--引入时间选择插件css--link relstylesheet hrefstatic/plugins/bootstrap-datepicker/css/bootstrap-datepicker.css/head
body
div classcontainerform classform-horizontal stylemargin-top: 50px;border: 2px solid black;padding: 10pxdiv classrow clearfixdiv classcol-xs-6!-- 姓名--div classform-grouplabel classcol-sm-2 control-label姓名/labeldiv classcol-sm-10input typetext placeholder姓名/div/div/divdiv classcol-xs-6!-- 年龄--div classform-grouplabel classcol-sm-2 control-label年龄/labeldiv classcol-sm-10input typetext placeholder年龄/div/div/div/divdiv classrow clearfixdiv classcol-xs-6!-- 薪资--div classform-grouplabel classcol-sm-2 control-label薪资/labeldiv classcol-sm-10input typetext placeholder薪资/div/div/divdiv classcol-xs-6!-- 部门--div classform-grouplabel classcol-sm-2 control-label部门/labeldiv classcol-sm-10select classform-controloptionIT部门/optionoption销售部门/optionoption运营部门/optionoption售后部门/option/select/div/div/div/divdiv classrow clearfixdiv classcol-xs-6!-- 入职日期--div classform-grouplabel classcol-sm-2 control-label入职日期/labeldiv classcol-sm-10input typetext iddt placeholder入职日期/div/div/div/divdiv classrow clearfixdiv classcol-xs-6!-- 提交--div classform-groupdiv classcol-sm-offset-2 col-sm-10button typesubmit classbtn btn-primary提交/button/div/div/div/div/form
/divscript srcstatic/js/code.jquery.com_jquery-3.7.0.min.js/script
script srcstatic/plugins/bootstrap-3.4.1-dist/js/bootstrap.js/script
!--引入时间选择插件js--
script srcstatic/plugins/bootstrap-datepicker/js/bootstrap-datepicker.js/script
!--引入中文包--
script srcstatic/plugins/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js/script
script// 日期选择相当于内部绑定了一个事件$(function () {$(#dt).datepicker({format: yyyy-mm-dd,startDate: 0,language: zh-CN,autoclose: true});})
/script/body
/html总结
了解HTML标签、标签结构基于他可以实现简单的页面。CSS了解基本样式 在别人模板的基础改就可以。JavaScript、jQuery了解基本使用 事件绑定/寻找标签/操作标签。导入现成插件。 后续开发过程中对于前端就是在BootStrap的基础整改。
