一:项目
阿里云地址:
http://47.94.45.85//liupenggengen/index.html
github地址
https://github.com/liupeng1128/jiazhengxitong
二:知识梳理
0. 特点
兼容性
简化dom操作(批量操作)
链式操作(dom操作方法返回值为当前jQuery对象)
不污染顶级变量 $/jQuery
vue/react/angular(禁止使用jQuery)
jQuery
1. jQuery构造函数
$ = jQuery
1) $(回调函数)
文档加载完毕后执行该回调函数
window.onload = function(){}
2) $(css3选择器)
将选择到的dom元素加入到jquery类数组对象
3) $(标签)
$("<div>hello world</div>")
将参数中的标签转化dom对象,再封装为类数组对象
4) $(dom)
将dom对象转换为jQuery对象
2. jQuery对象
jQuery对象,类数组对象。数组中的元素是DOM对象
var one = document.getElementById("one")
one是Element的实例,可以调用Element、Node
one.children()
one.childNodes()
var $one = $(one)
$one是jQuery的实例,可以调用jQuery
$one.children()
$one.find();
...
<div class="one">one</div>
<div class="one">two</div>
<div class="one">three</div>
$(".one")
3. 选择器
核心选择器
层次选择器
属性选择器
伪类选择器
伪元素选择器
4. 属性、csss
attr()
获取或者设置attribute(核心、自有、自定义)
参数
1) attr(key)
2) attr(key,val)
prop()
获取或者设置property(核心、自有)
1) prop(key)
2) prop(key,val)
removeAttr(attrName)
removeProp(propName)
val()
获取或设表单元素的值
css()
获取或者设置样式
1) css(key)
1) css(key,val)
addClass()
removeClass()
hasClass()
5. DOM操作
clone()
克隆jQuery对象
参数
wrap()
为选中元素添加一个父元素
append()
为选中元素追加一个子元素
prepend()
为选中元素插入一个子元素
after()
在当前元素后添加一个兄弟元素
before()
在当前元素前添加一个兄弟元素
empty()
清空子元素
remove()
移除当前元素
replace()
替换元素
html()
获取或设置一个元素的html内容
text()
获取或试着一个元素的text内容
6. 遍历
each(function(index,item){})
map(function(index,item){});
eq()
获取类数组中的某一个jQuery对象
$("div")[0]
$("div").eq(0)
filter()
$("div:first-child")
$("div").filter(":first-child")
first()
last()
not(selector)
parent([selector]) 父元素
parents(selector) 父元素
children([selector]) 子元素
find(selector) 后代元素
next()
prev()
siblings()
7. 事件机制
on(eventType[,代理],handler)
off(eventType[,代理],handler)
on({
eventType1:handler1,
eventType2:handler2,
....
}[,代理])
click(handler);
速写 on("click",handler)
mouseover()
mouseout()
focus()
blur()
...
8. ajax
1) 底层接口
ajax(url,{
async
data
processData
method
dataType
响应结果 responseType json/xml/text/script...
contentType
application/x-www-form-urlencoded
text/plain
multipart/form-data
如果取其他值,在请求之前先发送一个options请求
beforeSend
success
xhr.status === 200
error
xhr.status !== 200 // 404 403 401 500
complete
});
ajaxSetup({});
2) 快捷应用
get(url[,data][,handler][,dataType]);
post(url[,data][,handler][,dataType]);
9. bom
alert() 警告框
prompt() 询问框,允许输入,并且将输入的结果返回
confirm() 确认框,用户选择点击确认或者取消,如果点击确认返回true
间歇调用
var id = setInterval(function(){},毫秒数);
clearInterval(id)
超时调用
var id = setTimeout(function(){},毫秒数);
clearTimeout(id)
1. 间歇与后台交互
2. 动画
呼吸灯
10. jquery动画
animate()
fadeIn
fadeOut
slideUp
slideDown
第三方库 velocityjs
day02 bootstrap
Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架,使得 Web 开发更加快捷。
1. 版本
v4.3.1
布局系统(12栅格系统)
css工具样式
组件库(结构,样式,行为)
模态框(事件)
下拉下单
2. 内容
1) css
bootstrap.css 未经压缩(注释,缩进)
bootstrap.min.css 压缩(体积小,传输速度快)
bootstrap.js
bootstrap.min.js
2) js,依赖jQuery
3. helloworld
1) 添加依赖
cdn
本地
模块化(es6)
2) 使用
4. 特点
1) 用于开发响应式的移动优先的网站
@media screen and (min-width:960px){
xxx
}
2) 提供了大量组件,可以简化开发
5. 布局
注意:
如果开发响应式网站,务必在head中添加如下代码
<meta name="viewport" content="width=device-width, initial-scale=1.0">
目的,使用相对单位解释px
网格系统,容器/行/列。一行分为12列(12栅格系统)
1) container/ container-fluid
容器,容器中包含多行
2) row
由于container具有padding,所有row中定义margin取值为负数,用于抵消父元素padding
3) col
col 极小屏 screen< 576px
col-sm 小屏 576px<screen<768px
col-md 中屏 768px<screen<992px
col-lg 大屏 992px<screen<1200px
col-xl 特大屏 1200px < screen
移动优先:
默认体现移动端(极小屏)的样式,如果想要覆盖这些样式,那需要添加对应大屏样式
.col-1 {
-ms-flex: 0 0 8.333333%;
flex: 0 0 8.333333%;
max-width: 8.333333%;
}
@media (min-width: 1200px){
.col-xl-1 {
-ms-flex: 0 0 8.333333%;
flex: 0 0 8.333333%;
max-width: 8.333333%;
}
.col-xl-2 {
-ms-flex: 0 0 16.666667%;
flex: 0 0 16.666667%;
max-width: 16.666667%;
}
}
<div class="col-1 "></div>
4) 盒子上的padding
px-1 ~ px-5
pl pr
py-1 ~ py-5
pt pb
5) 伸缩盒元素的纵向排列
align-items-start
align-items-center
align-items-end
6) 伸缩盒元素的横向排列
justify-content-start
justify-content-center
justify-content-end
7) 排序
order-序号
8) 偏移
offset-x
9) 自动外边距
ml-auto
mr-auto
6. 内容
1) reboot
重置样式
2) Typography
排版印刷
h1~h6
list-unstyled
3) 图片
img-fluid
img-thumbnail
4) 表格
table
table-dark、table-light
thead-dark、thead-light
table-striped
table-bordered
table-borderless
table-hover
table-sm
table-success、table-danger、table-info
table-responsive
7. 工具
1) 颜色
text-primary
text-danger
text-success
text-info
text-warning
text-light
text-dark
bg-danger
...
2) 边框
border
border-bottom、border-top、border-left、border-right
border-primary、border-danger、border-success
rounded-sm、 rounded-lg、rounded-0
3) 显示与隐藏
d-none、 d-block 、d-inline
d-lg-none、 d-sm-none 、d-md-none
4) 阴影
shadow-none
shadow-sm
shadow-lg
5) 文本
text-left、text-right、text-center
font-weight-bold
text-monospace
...
8. 组件
1) button
按钮
类:
btn 、
btn-outline-primary、btn-outline-success、...
btn-primary、btn-success、...
btn-lg 、btn-sm
2) alerts
提示框
类:
alert
alert-primary
alert-dismissible
属性:
data-dismiss="alert"
通过将元素从dom树中移除的方式来关闭alert
方法:
$().alert("close")
3) carousel
轮播图
data-interval="" 轮播时间
data-keyboard=""
data-pause=""
直接复制粘贴,然后修改路径即可(图片尺寸应该要有标准)
4) modal
模态框
类:
modal 容器(层罩)
modal-dialog modal-xl(模态框)
modal-content (模态框的内容容器)
modal-header (头)
modal-title 标题
modal-body 模态框内容区域
modal-footer 底部(关闭.提交)
属性:
data-dismiss=""
data-toggle="modal"
data-target="#exampleModal"
方法
$().modal("show")
$().modal("hide")
5) form
类:
form-group
form-control 、form-control-sm、form-control-lg
form-check、form-check-inline 、form-check-input、form-check-label
6) badge
徽章
类:
badge
badge-dark 、badge-light
7) breadcrumb
面包屑导航
breadcrumb
breadcrumb-item
8) collapse
折叠
类
collapse
show
$().collapse("toggler")
$().collapse("show")
$().collapse("hide")
9) Dropdown
下拉菜单
使用dropdown之前要先确保popper导入成功
<script src="https://cdn.bootcss.com/popper.js/1.15.0/umd/popper.js"></script>
类
dropdown
dropdown-menu
可以放任意其他的元素(自定义)
dropdown-item
dropdown-item
属性:
data-toggle="dropdown"
10) navs
导航
类
nav nav-tabs nav-pills
nav-item
nav-link nav-active