目录
前端:
需要了解的原理:
JS特点:
- js是一个轻量级的语言,可以插入html页面的编程语言处理逻辑
JS和html css的区别:
html是纯文本文件,使用标签来描述问题,而css是描述标签的样式,让页面更好看,而js是一个轻量级的语言,他可以切入到html页面的编程语言,js也是可以处理逻辑
什么是jquery:
jquery是一个快速简洁的js框架,封装了js代码的模块,极大的简化了js的编程
优势:
js代码对浏览器的兼容性做的更好了
隐式循环
链式操作
封装了js代码的模块,封装了dom节点,封装了操作dom节点的简便方法
web端的组成:
html 纯文本文件,使用标签来描述文字的,是一种描述性的标记语言
css 描述了标签的样式,让页面更好看
js/jq 动态的效果
http和socket:
前端是怎么交互的:http基于tcp-socket协议,后端发送的字符串到前端来,前端浏览器进行渲染,然后将发来的内容展示到网页上
http reques :http请求
http response :http响应
html:
超文本标记语言就是纯文本文件,使用标签来描述文字的,是一种描述性的标记语言
超文本:图片,音频,视频
标记:所有内容都是包裹在标签中
切记标签一定要闭合
标记(标签)的分类:
双标标记:
<body> <body>
(双闭合标记)单标标记:
<meta>
(单闭合标记)
标签:
head:一个人的思想
- 写在head标签的内容不不可见
title:
- 9989整个网页的标题,游览器最上方显示
meta:
- 网页的源信息,收录,编码,游览器版本,关键字,网页的描述
boby:显示的代码
<!doctype html> #版本,默认html5 <html lang="zh-cn"> #编码 <head> #head下的内容不可见 <meta charset="UTF-8"> <meta name="viewport" content="python,go"> #百度收录 <meta http-equiv="refresh" content="2;URL=http://www.baidu.com"> #重定向 <meta name="Description" content="搜索页面的标签/> <title>haha</title> #显示在网页标签上的名字 </head> <body> </body> </html> import socket sk = socket.socket() sk.bind(("192.168.13.146",6677)) sk.listen() while 1: try: conn,addr = sk.accept() ret = conn.recv(1024) conn.send(b"HTTP/1.1 200 OK \r\n\r\n") with open('demo-01.html', encoding='utf-8') as f: conn.send(f.read().encode('utf-8')) except Exception as e: print(e)
内联标签(行内元素)
注释:
<!--注释-->
字体标签:b标签加粗,strong标签不换行
斜体:i标签或者em
上下标:sup sub
中划线:del或s del新标签,在字符串中划一条横线
下划线:u
空格:br/ 换行
特性:空白折叠, 空格,< 大于号,> 小于号
span:没有任何样式的标签
img 单边标签-内联:
<img src="资源路径" alt="图裂说明" height="200px">
src 图片的网络地址,(width宽度 height高度)宽高二选一
src 本地路径存放 img/0.jpg
alt 在图片加载失败的时候显示内容,用户体验,爬虫
a 超链接标签:
<a href="http://www.baidu.com" target="_blank">进入百度</a>
href
- 属性可以连接网络资源,点击跳转
- href=mailto:邮箱地址 连接到本地邮件服务器
锚连接:
#先定义a标签,在通过a标签 文件+之前定义好的A标签内容 #demo-01.html 可以跳转到另一个页面的具体位置 <a name="top">顶部</a> <a href="#top">回到顶部</a>
target:
- self:默认在当前网页打开
- _blank:在新网页跳转打开
- title:鼠标悬浮显示小标题
块级标签(占满一整行)
标题标签:h1-h6
段落标签:
<p> </p>
自动在段落中添加空白 文本级标签(内部不能在嵌套别的标签) `没有样式:
<div>海洋</div>
没有任何效果的块标签分割线 :
<hr>分割线</hr>
列表:
ul:无序列表:常用
属性type:disc(默认)\square(实心方形)\circle(空心圆)\none(不显示样式) <!--设置不显示任何样式--> <ul type="none"> <li>手机</li> <li>电脑</li> </ul> <!--设置显示实心方块--> <ul type="square"> <li>旧电脑</li> <li>旧家具</li> </ul> <!--设置显示空心圆--> <ul type="circle"> <li>旧电脑</li> <li>旧家具</li> </ul> <!--默认显示实心圆 disc--> <ul> <li>旧电脑</li> <li>旧家具</li> </ul>
ol :有序列表
属性type:1(默认)\a(小写字母)\A(大写字母)\I(罗马数字) 属性start:开始位置(了解) <!--默认显示1,2,3序号,可以指定开始的值--> <ol> <li>长头发</li> <li>旧家电</li> </ol> <!--设置根据a,b,c显示,可以指定开始的值--> <ol type="a" start="2"> <li>长头发</li> <li>旧家电</li> </ol> <!--设置根据A,B,C显示,可以指定开始的值--> <ol type="A" start="26"> <li>长头发</li> <li>旧家电</li> </ol> <!--设置根据罗马数字,可以指定开始的值--> <ol type="I"> <li>长头发</li> <li>旧家电</li> </ol>
dl:定义列表:
<!--带标题的列表--> <dl> <dt>title</dt> <!--dt表示标题--> <dd>alex</dd> <!--dd表示内容--> <dd>wusir</dd> <dd>太白</dd> <dt>title</dt> <dd>alex</dd> <dd>wusir</dd> <dd>太白</dd> </dl>
list-style:去掉列表样式:
在css中去掉列表的样式 ul,li{ list-style: none; }
表格:
标准表格:thead tbody的内容
tr表示每一行 表头:th表示thead中的每一个元素 内容:td表示tbody中的每一个元素 如果要将两个单元格合并,那肯定就要删掉一个单元格。 单元格的属性: colspan:横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。 rowspan:纵向合并。例如rowspan="2"表示当前单元格在垂直方向上 border线框 cellpadding内容距离 ellspacing外边框距离 <table border="1" cellpadding="10px" cellspacing="5px"> <thead> <tr> <th>第一列</th> <th>第二列</th> <th>第三列</th> </tr> </thead> <tbody> <tr> <td colspan="2">第一个值</td> <td>dudu</td> </tr> <tr> <td>第二个值</td> <td>wahaha</td> <td rowspan="2">ab钙</td> </tr> <tr> <td>第三个值</td> <td>wahaha</td> </tr> </tbody> </table>
不写thead只写tbody 就没有表头样式
<table border="1" cellpadding="10px" cellspacing="5px"> <tbody> <tr> <td colspan="2">第一个值</td> <td>dudu</td> </tr> <tr> <td>第二个值</td> <td>wahaha</td> <td rowspan="2">ab钙</td> </tr> <tr> <td>第二个值</td> <td>wahaha</td> </tr> </tbody> </table>
from 表单:
input 输入框 :
form : 表单标签 action : 提交到的地址,把表单中的数据提交到对应的地址上 input : type种类:text,password,radio,checkbox,submit name:value :把数据提交到后台的,提交的是input标签的name值和value值 placeholder:输入框的默认提示文字 checked: checked属性表示默认选中 readonly :对于输入框的禁止修改 可以提交 disabled :对于所有元素不能修改 也不能提交 <!--注意:如果设置了readonly,只能给输入框的模式设置,那么不能修改,但是可以提交--> <!--注意:如果设置了disabled,可以给所有的表单元素设置,那么不能修改,也不能提交--> button : input的submit类型和button放在form表单中都表示提交 <form action="http://192.168.13.80:8899"> <input type="text" name='username' placeholder="请输入用户名或密码" > <input type="password" name="password" value="dada" disabled> <input type="radio" name="sex" value="1" checked > 男 <input type="radio" name="sex" value="2" > 女 <input type="checkbox" name="hobby" value="a" checked> 抽烟 <input type="checkbox" name="hobby" value="b" checked> 喝酒 <input type="checkbox" name="hobby" value="c"> 抠脚 <input type="submit" value="表单按钮"> <button>提交按钮</button> <!--注意 input的submit类型和button放在form表单中都表示提交--> text-align: right; 样式输入框提示右浮动
其他类型:
reset:重置 hidden:隐藏输入框 button:普通按钮 file:文件选择框 date:日期输入框 注意: 如果是file类型的input标签需要修改表单的enctype类型Multipart/form-data <form> <input type="hidden"> <input type="reset"> <input type="button" value="普通按钮"> #button放在外面就是普通按钮,放在form表示提交 <input type="file"> <input type="date"> </form>
lable+input:
lable: for属性,点击lable中的内容,让for标示的id对应的元素获得焦点 <label for="user">姓名 : </label> <input type="text" name='username' id="user" >
textarea 文本框:
#内容较多时使用 <textarea name="" id="" cols="30" rows="10"></textarea>
select 选择框:
select选择框: multiple:设置多选框 size:选择框内显示数量 option选项: selected:默认选中 <select name="city" id="a" size="3"> <option value="1" selected>北京</option> <option value="2">上海</option> <option value="3">天津</option> </select> <select name="" id="" multiple> <option value="" selected>抽烟</option> <option value="" selected>喝酒</option> <option value="" >烫头</option> </select> <!--注意:默认是单选--> <!--注意:使用multiple属性设置为多选:按住鼠标下拉,按住ctrl选,按住shift选--> import socket sk = socket.socket() sk.bind(('192.168.13.80',8899)) sk.listen() try: conn,addr = sk.accept() ret = conn.recv(1024) print(ret) with open('demo-01.html',encoding='utf-8') as f: conn.send(f.read().encode('GBK')) except Exception as e: print(e) finally: conn.close() sk.close()
css:
层叠样式表,作用就是给HTML页面标签添加各种样式
样式
样式的引入:
<head> <meta charset="UTF-8"> <title>Title</title> <!--引入方式二:内接引入--> <!--<style>--> <!--div{--> <!--color: blue;}--> <!--</style>--> <!--引入方式三: 外接样式-链接式 :link导入一个连接 重点重点重点*****--> <!--<link rel="stylesheet" href="index.css">--> <!--引入方式四: 外接样式-导入式 :style导入一个@import url('路径')--> <!--<style>--> <!--@import url("index.css");--> <!--</style>--> </head> <body> <!--引入方式一 :行内引入--> <!--<div style="color:red">wahaha</div>--> <body>
几个基础样式
<style> div{ color: red; width: 200px; height: 200px; background-color: yellow; /*background-color: yellow;* 注释css样式/ } </style> <body> <div>qqxing</div> <div>qqxing</div> </body>
选择器:
基本选择器(中要)
标签:div 类:.sp id:#div1 通用选择器:*
标签名直接选择标签,#选择id, .表示class,*表示所有标签
<style>
span{
color:green}
div{
color: #c4db69}
a{
color: red;}
</style>
1.样式的继承 : 子元素会继承父元素的样式(但是a标签除外)
2.要想对a标签进行样式设置,必须直接找到a标签的位置,对a单独设置
3.样式之间的重叠部分是有优先级的,继承下来的样式的优先级为0(最低)
#div1{ #内容标签的会进行匹配
color: cornflowerblue;}
.sp{
color: orangered;}
*{ #通用选择器:所有的标签都会被选中
color: yellow;}
#内容id class优先级高
<body>
<div id="div1">
wahaha1
<span class="sp">我是一个div1-span</span>
</div>
<span>只有span</span>
<div>
wahaha2
<span class="sp">我是一个div2-span</span>
<a href="http:www.taobao.com">我是一个div-span</a>
</div>
</body>
高级选择器
后代选择器:div p 表示div标签下的所有的p标签
子代选择器:div>p 表示div下面一层所有的p标签
毗邻选择器:div+p 找div的兄弟标签中的下一个p标签
弟弟选择器:div~p 找div下的所有弟第p标签
属性选择器:div[title] div[title='aaa'] 找到所有含有title属性的div/找到所有title属性='aaa'的div
并集选择器:ul,li 所有,分隔的标签都要找到
交集选择器:div.aa 找所有class='aa'的div标签
伪类选择器:a:active鼠标按下 link连接未访问之前 visited连接访问后
input:focus 输入框获得焦点
hover:鼠标悬浮
伪元素选择器:first-letter第一个字的样式
before(after)值这个标签的前面(后面)加content,给这个content设置样式
后代\子代:
后代选择器:找的是子孙
子代选择器:只找子代
后代选择器:表示div 标签下的所有span标签
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div span{
color: tomato;
}
</style>
</head>
<body>
<div>
我是div标签的content
<span>西红柿色1</span>
<p>
在div-p标签中
<span>西红柿色2</span>
</p>
</div>
<span>我只是一个单纯的span标签</span>
</body>
子代选择器:div>span 表示div下面一层所有的span标签
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div>span{
color: tomato;
}
</style>
</head>
<body>
<div>
我是div标签的content
<span>西红柿色1</span>
<p>
在div-p标签中
<span>西红柿色2</span>
</p>
</div>
<span>我只是一个单纯的span标签</span>
</body>
毗邻+\弟弟~
毗邻: span+a 找div兄弟标签中的下一个p标签
<style>
span+a{
color: tomato;}
</style>
<div>
<a>我是a0标签</a>
<span>span标签</span>
<a>我是a1标签</a> <!--变色-->
<a>我是a2标签</a>
</div>
弟弟: span~a 找div下的所有弟弟p标签
<style>
span~a{
color: tomato;
}
</style>
<div>
<a>我是a0标签</a>
<span>span标签</span>
<a>我是a1标签</a> <!--变色-->
<a>我是a2标签</a> <!--变色-->
</div>
并集交集选择器
并集:逗号分隔的标签都要找到
<style>
ul,ol,span{
background-color: gainsboro;
}
</style>
<body>
<ul>
<li>u-first</li>
</ul>
<ol>
<li>o-first</li>
</ol>
</body>
交集选择器:只有class中含有box1.box2才可以渲染染色
<style>
div.box1.box2{
background-color: red;
width: 200px;
height: 200px;
}
</style>
<body>
<div class="box1 box2">box1box2</div>
<div class="box1">box1</div>
<div>aaa</div>
<span class="box1">span标签</span>
</body>
属性选择器(属性对应属性)
属性选择器 [属性]/[属性='值']
<style>
/*a[href]{*/
/*color: green;*/
/*}*/
/*a[href='http://www.taobao.com']{*/
/*color: lightpink;*/
/*}*/
input[type='text']{
background-color: red;
}
</style>
<body>
<div>
<a href="http://www.taobao.com">我是a0标签</a>
<span>span标签</span>
<a href="http://www.jd.com">我是a1标签</a>
<a href="http://www.mi.com">我是a2标签</a>
<a>没有href属性</a>
</div>
<input type="text">
<input type="password">
</body>
伪类选择器:
a : link:没有被访问a标签的样式 visited:访问过后的颜色 active:输入点击摁住的颜色
input: focus 输入框获得焦点,框内背景色
通用: hover 鼠标悬浮时候的颜色
<style>
a:link{
color:tomato;
}
a:visited{
color: gray;
}
a:active{
color: green;
}
input:focus{
background-color: aquamarine;
}
div{
width: 100px;
height: 100px;
background-color: lightgray;
}
div:hover{
background-color: red;
}
</style>
<body>
<a href="http://www.jd.com">京东</a>
<a href="http://www.xiaohuar.com">校花</a>
<input type="text">
<div></div>
</body>
伪元素选择器:
first-letter:设置第一个首字母样式
before :在内容前添加样式
after : 在内容后面添加样式*****
<style>
/*div:first-letter{*/
/*color: red;}*/
div:before{
content: '**';
color: pink;}
div:after{
content: '.....';
color: lightblue;}
</style>
<body>
<div>春江水暖鸭先知</div>
</body>
css选择器优先级:
行内>id选择器>类选择器>标签选择器>继承
1000 100 10 1 0
所有的值可以累加但是不进位
优先级如果相同,写在后面的生效
<style>
div{
width: 200px;
height: 200px;
background-color: red;
}
div.a.b{
background-color: gray;
}
div.a{
background-color: blue !important; !important提高样式优先级
}
#aa{
background-color: lightpink;
}
</style>
<body>
<div class="a b" id="aa">aaa</div> #id优先级最高,之后是类,最后是标签
<div>bbb</div>
<div>ccc</div>
<div>ddd</div>
</body>
颜色表示:
rgb表示法:
rgb :red green blue 光谱三原色
rgb(255,255,255) 白色
rgb(0,0,0) 黑色
16进制的颜色表示法
#000000-#FFFFFF
#000 - #FFF
单词表示法:
# red green
rgba表示法:
#a表示的是透明度 0-1,0是完全透明,1是不透明
https://htmlcolorcodes.com/zh/yanse-ming/
字体:
<style>
p{
font-family: '楷体';
font-weight: bold; 变粗
font-size: 30px; 字体大小
text-align: right; 右对齐
/*text-decoration: overline;*/ 上标线
/*text-decoration: underline;*/ 下标线
text-indent: 2em; em单位是一个相对单位,相对当前字体大小的像素是1em
text-shadow: 5px 5px 5px red;} 阴影字体颜色
div{
height: 200px;
line-height: 200px;
font-size: 20px;
background-color: orange;} 设置背景颜色
a{
text-decoration: none;}
</style>
<body>
<p>我是一个p标签</p>
<div>我是一个p标签</div>
<a href="">娃哈哈</a>
</body>
文本:
text-align 文字的水平对齐
left 左对齐
center 居中
reght 右对齐
text-decoration 文本装饰
none; 没有下划线
line-through; 中划线
overline; 上划线
underline; 下划线
text-indent 文本缩进
text-indent: 2em; em单位是一个相对单位,相对当前字体大小的像素是1em
line-height 行高,设置行高=容器高度,文字自动垂直居中
line-height: 200px;
文字溢出
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.div0 {
width: 300px;
border: 1px solid darkblue;
}
.div1 {
width: 300px;
border: 1px solid red;
/*强制在一行内显示*/
white-space: nowrap;
/*超出部分隐藏*/
overflow: hidden;
}
.div2 {
width: 300px;
border: 1px solid black;
/*强制在一行内显示*/
white-space: nowrap;
/*超出部分隐藏*/
overflow: hidden;
/*修剪超出的文本*/
text-overflow: clip;
}
.div3 {
width: 300px;
border: 1px solid chocolate;
/*强制在一行内显示*/
white-space: nowrap;
/*超出部分隐藏*/
overflow: hidden;
/*显示省略符号来代表被修剪的文本*/
text-overflow: ellipsis;
}
</style>
<body>
<div class="div0">各国领导人感谢中方作为东道主对各国参展给予的大力支持</div><br>
<div class="div1">各国领导人感谢中方作为东道主对各国参展给予的大力支持</div><br>
<div class="div2">各国领导人感谢中方作为东道主对各国参展给予的大力支持</div><br>
<div class="div3">各国领导人感谢中方作为东道主对各国参展给予的大力支持</div><br>
</body>
背景图片:
background-color: red; 在没有背景图片覆盖的范围显示背景颜色
background-image: url('timg.jpg'); 设置背景图片
height: 400px;
width: 400px;
background-repeat: no-repeat; 设置图片不重复 repeat-x水平重复 repeat-y垂直重复
background-position: right top; 图片的位置 左中右x 上中下y
/*left center right /top center bottom*/
background-attachment: fixed; 在窗口中固定图片的位置,滚动位置不变
background:red url("timg.jpg") no-repeat left center; 把所有的设置综合写在background中
<style>
div{
/*background-color: red;*/
/*background-image: url('222.jpg');*/
height: 400px;
width: 400px;
background:red url("222.jpg") no-repeat left center;
/*background-attachment: fixed*/} 固定图片位置
</style>
<body>
<div>
<p>大长腿</p>
</div>
</body>
边框的设置:
width: 100px;
height: 100px;
border-color: tomato green gray yellow;
border-width: 1px 3px 5px 7px;
border-style: solid dotted dashed double;
/*一个值:上下左右
四个值:遵循顺时针上右下左
三个值:上 右左 下
两个值:遵循上下 左右
border-top-style:dotted; 单独设置顶线的样式(top,left,bottom,right)
border-left-style:solid; 单独设置左边线的样式
border-top-color:red; 单独设置顶线颜色
border:yellow solid 10px; 统一设置边框的颜色 样式 宽度 ***
示例:
<style>
div{
width: 100px;
height: 100px;
border: solid 2px red;
border-color: tomato green gray yellow;
border-width: 1px 3px 5px 7px;
border-style: solid dotted dashed double;
/*border:yellow solid 10px;*/}
div.brother{
display: none;}
</style>
<body>
<div class="brother"></div>
<div>海洋</div>
<a href="">手机</a>
<a href="">小米商城</a>
</body>
块和行内的概念\转换:
- 行内元素:
- 与其他行内元素并排;
- 不能设置宽、高。默认的宽度,就是文字的宽度
- 块级元素:
- 霸占一行,不能与其他任何元素并列;
- 能接受宽、高。如果不设置宽度,那么宽度将默认变为父亲的100%
示例:
display的属性值 : block块 inline行内 inline-block行内快 none display: block; 独占一行,元素合并在一行内,并且可以设置宽高 display: inline-block; 既可以设置宽高又不会独占一行 行内\块转行内快 ******常用 display: inline; 表示一个行内元素,不能设置宽高 display: none; 不仅不显示内容,连位置也不占了 <style> a{ /*display: block;*/ #将连个a标签放在一个行内 display:inline-block; color:blue; #字体颜色 height: 30px; #字体大小 background-color: red; #颜色 text-decoration: none; #没有下划线 line-height: 30px; #背景颜色 text-align: center; #文字居中水平对齐 } </style> <body> <div class="brother"></div> <div></div> <a href="">手机</a> <a href="">小米商城</a> </body>
盒模型:
在网页中显示方方正正的盒子称为盒模型
盒模型有两种:标准模型和IE模型。我们在这里重点讲标准模型。
border : 边框的宽度 padding : 内边距的距离 content : width height 背景包含的部分:padding + conntent 计算一个盒子的总大小: 宽width+2padding+2border 高height+2padding+border 外边距 margin 上下的盒子如果设置bottom和top会导致塌陷,取两个设置的最大值作为外边距 margin: 0 auto;表示左右居中(父盒子宽度,子盒子宽度) 分方向的设置 border-top border-right border-bottom border-left padding-top padding-right padding-bottom padding-left margin-top margin-right margin-bottom margin-left 给图形设置圆角 border-radius: 5px; 盒子模型: <style> body{ margin: 0; } div{ width: 200px; /*content内容部分的宽*/ #设置块大小和颜色 height: 200px; background-color: yellow; #设置块背景颜色 border:blue solid 10px; #外边距大小 padding: 30px; #外边距到内容边距大小 /*padding: 内边距*/ } div.box2{ margin-top: 20px; margin-left: 20px; margin-bottom: 20px; #设置上下左右大小 } .box3{ margin-top:40px #设置上下两个模块的距离 } </style> <body> <div class="box2">盒子的大小 宽+padding*2+边*2 高+padding*2+边*2</div> <div class="box3">盒子2</div> </body>
盒子居中:
<style> div.father{ width: 800px; height: 40px; background-color: darkgray; } div.son{ width: 500px; height: 35px; padding: 5px 0 0 10px; background-color: blue; /*margin-left: auto;*/ /*margin-right: auto;*/ margin: 0 auto; } </style> body> <div class="father"> <div class="son"> 你好 </div> </div> </body>
三角形:
<style> div{ width: 0; height: 0; border-color: red transparent transparent transparent; border-width: 50px; border-style: solid; } </style> <body> <div></div> </body>
图片变圆:
#img直接行内引用调用style块 <body> <div class="box2" > <img style="border-radius: 100px" src="222.jpg" alt=""> </div> </body>
浮动:
float:表示浮动的意思。它有四个值。
-
-
- none: 表示不浮动,默认
- left: 表示左浮动
- right:表示右浮动
-
-
示例:
浮动的元素会脱离标准文档流,原本块级元素就不再独占整行了 并且在原页面中也不占位置了,之后的元素会挤到页面上影响页面的排版 清除浮动 clear:both 伪元素清除法: .clearfix:after{ content: ''; clear: both; display: block; } <body> <div class="father clearfix"> <div class="box"></div> <div class="box"></div> </div> <div class="main"> 主页的内容 </div> </body> 示例: <style> div.main{ height: 100px; background-color: darkgray;} div.box{ width: 100px; height: 100px; border: solid red; background-color: yellow; float: right; #当设置了浮动,子类会覆盖父类部分 } div.father{ background-color: blue; #父类宽高都没有设置,大小随着子类大小走 /*overflow: hidden;*/ #当父类清除浮动则并排显示, } /*.clear{*/ /*clear: both;*/ /*}*/ /*.clearfix:after{*/ /*content: '';*/ /*clear: both;*/ /*display: block;*/ /*}*/ </style> <body> <div class="father clearfix"> <div class="box"></div> <div class="box"></div> </div> <div class="main"> 主页的内容 </div> </body>
overflow:
内容多余标签的大小
示例:
visible 可见(默认) hidden 超出部分隐藏 scroll 超出显示滚动条 <style> div{ width: 100px; height: 100px; background-color: chartreuse; overflow: visible; } </style> <body> <div> <p>两只老虎,两只老虎跑得快</p> <p>两只老虎,两只老虎跑得快</p> <p>两只老虎,两只老虎跑得快</p> <p>两只老虎,两只老虎跑得快</p> <p>两只老虎,两只老虎跑得快</p> </div> </body>
定位:
定位有三种:相对定位、绝对定位、固定定位
position : 相对:relative 绝对:absolute 固定:fixed top:10px; right:10px; bottom:10px; left:10px; 相对定位 :相对自己原来的位置移动,移动之后还占据原来的位置 绝对定位 :固定在页面不会随着页面而走动,不会占据原来的位置,层级的提升 作用:页面布局常见的“父相子绝”,一定要会!!!! (绝对定位是相对于整个html页面,不会占据原来的位置,层级的提升 如果我们设置了绝对定位的元素 的父元素 没有设置position,那么我们对元素的所有设置都是基于整 个页面 如果设置了position,那么子盒子的absolute位置会根据父盒子的位置定位 父相子绝:子元素设置的绝对位置会对应着祖级元素的相对位置) 固定定位 :固定是相对于整个窗口的,随着窗口移动 作用: 1.返回顶部栏 2.固定导航栏 3.小广告 <style> div.father{ width: 400px; height: 2000px; background-color: lightgray; position: absolute; #设置底板固定 } div{ width: 100px; #设置div块图片的大小 height: 100px; } .d1{ background-color: red;} .d2{ background-color: yellow; position: absolute; #将d2往左绝对定位100px,绿色块直接飘上来,而相对还会站原来位置 left:100px;} .d3{ background-color: green;} img{ position: fixed; #将绝对图片设置成固定定位,这个图片会随着页面走动,提升层级 right: 20px; bottom:100px; } .d4{ opacity: 1; } </style> <body> <div class="father"> <div class="d1"></div> <div class="d2"></div> <div class="d3"></div> </div> <div class="d4"> 你好你好娃哈哈 <img src="222.jpg" alt=""> </div> </body>
z-index 优先级:
指的就是各个盒子重叠在一起谁上谁下的问题。
四大特性,只要你记住了,页面布局就不会出现找不到盒子的情况。 z-index 值表示谁压着谁,数值大的压盖住数值小的, 只有定位了的元素,才能有z-index,也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-index,而浮动元素不能使用z-index z-index值没有单位,就是一个正整数,默认的z-index值为0如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面压着别人,定位了元素,永远压住没有定位的元素。 从父现象:父亲怂了,儿子再牛逼也没用
示例:
<style> .father{ position: absolute; top: 0; left: 0; width: 100px; height: 600px; background-color: gray; z-index: 10; } .son{ position: absolute; top: 0; left: 0; width: 50px; height: 50px; background-color: red; z-index: 100; } </style> <body> <div class="father"></div> <div class="son"></div> </body>
opacity 透明度:
透明度示例
<style> img { opacity: 0.5; #调整d4对应的整个标签的透明度是50% } </style> <body> <div class="d4"> 大长腿 <br/> <img src="111.jpg" alt=""> </div> </body>
JavaScript:
javascript介绍:
可以处理逻辑
可以和浏览器交互,不够严谨
javascript包含:
ECM Ascript js的一种标准化规范 标出了一些基础的js语法
DOM document object model 文本对象模型 主要操作文档中的标签
BOM browser object model 浏览器对象模型 主要用来操作浏览器
js引入和script标签
方式一:在html页写js代码 <body> <script> alert("hello,world") </script> </body> 方式二: 引入js文件(项目中常用) <script src="first.js"></script>
结束符和注释
结束符 ; 是js代码中的结束符 单行注释 // alert('hello,world'); 多行注释 /*多行注释*/
变量
创建变量名
变量名 : 数字\字母\下划线\$ 创建变量的关键字var :var a = 1; 创建变量的时候可以不指定数据类型 创建变量但不赋值 :var a; a创建出来就是一个undefined未定义
输入输出:
示例:
弹出框alert alert('hello') 弹出框中的内容是"hello" 弹出输入框 var inp = prompt('问句') 弹出输入框,输入的内容会被返回给inp 控制台输出 console.log(变量或值)
基础的数据类型
查看类型
两种方式: typeof 变量; typeof(变量);
boolean 布尔值:
true : [] {} false : undefined null NaN 0 ''
null 空和undefined未定义:
null 表示空 boolean值为false undefined 没有定义 创建变量但是不赋值 boolean值为false
number-数字:
数字:
整数 var a = 1 小数 var b = 1.237 保留两位小数 b.toFixed(2) //1.24
str-字符串:
字符串:
var s1 = '单引号' var s2 = '双引号都是字符串的表达方式'
字符串常用方法:
属性 : .length 方法: trim() #去空白; ww = ee.trim() concat #拼接: var str1 = "胡"; var str2 = "海洋"; console.log(str1.concat(str2)); 结果:胡海洋 charAt(索引) #给索引求字符 var str1 = "胡海洋"; console.log(str1.charAt(0)); indexOf(字符) #给字符求索引 var str1 = "胡海洋"; console.log(str1.indexOf("洋")); slice(start,end) #切片,顾头不顾尾, var str1 = "胡海洋"; console.log(str1.slice(0,2)); .toLowerCase() #全部变小写 .toUpperCase() #全部变大写 console.log(str.toLowerCase()); console.log(str.toUpperCase()); .split(',',2) #根据(第一个参数)分隔符切割,切前多少个结果,切割完变成列表 var str = '哈哈哈|哒哒哒|嘟嘟嘟'; console.log(str.split('|'));
内置对象类型
数组 Array
数组就是python中的列表:
创建: var arr = ['a','b','c']; var arr2 = new Array(); #创建一个空的列表 索引操作: arr[0] 查看
Array常用的属性和方法
属性:length 方法: var li = ["胡"] index #根据索引进行赋值 li[1]="海" .push() #尾部追加元素 li.push("洋"); .pop() #删除最后一个元素,并获取 li.pop(2) .unshift() #头部插入元素 .shift() #头部移除元素 li.unshift("宝宝") li.shift("宝宝") .slice(start, end) #切片 li.slice(0,1) .reverse() #在原数组上进行反转,有问题可以在翻转回来 li.reverse(); .join(seq) #a1.join('|'), 将数组元素连接成字符串 console.log(li.join("|")); .concat(val, ...) #多个数组合并,得到一个新数组,原数组不变 var li = ["胡", "海", "洋"] var l2 = ["徐","俊","丽"] var l3 = li.concat(l2); .sort() #排序 function sortNumber(a,b){ return a - b} var arr1 = [11, 100, 22, 55, 33, 44] arr1.sort(sortNumber) .splice() li.splice(0,2); #参数:1.从哪删(索引), 2.删几个 3.删除位置替换的新元素(可多个元素) 删除元素,并向数组添加新元素。
自定义类型
示例
var obj = {"name":"海洋"}
JSON:
示例:
#字典key json之后都会变成字符串 var str1 = '{"name": "chao", "age": 18}'; var obj1 = {"name": "chao", "age": 18}; # JSON字符串转换成对象 var obj = JSON.parse(str1); # 对象转换成JSON字符串 var str = JSON.stringify(obj1);
数据类型之间的转换
转换示例
string --> int #字符串转数字 parseInt('123') //123 parseInt('123abc') //123 parseInt('abc') //NaN not a number string --> float parseFloat('1.233') float/int --> String var num = 123 String(123) #小数转字符串 推荐 var str = num.toString() #数字转 任意类型 --> Boolean Boolean(数据) #字符串和数字相加 --> 字符串 #字符串和数字相减 --> 数字
运算符
赋值运算符
= += -= *= /= %=
比较运算符
> < >= <= == != 不比较类型 (常用) === !== 比较类型和值(常用)
算数运算符
+ - * / % ** ++ -- var a = 1 undefined var b = a++ // a=2 b=1 var c = ++a // a=3 c=3
逻辑运算符
&& 逻辑与 ||逻辑或 !逻辑非 true && true //true true || false //true !true //false
流程控制
特点
所有的代码块都是用{}标识的 所有的条件都是用()标识的
if 判断语句:
#if 单分支 var ji = 20; if(ji >= 20){ console.log('恭喜你,吃鸡成功,大吉大利') } #if else var ji = 20; if (ji > 2){console.log("大于")} else{console.log("小于")}; #多层if判断 if (true) { //执行操作 }else if(true){ //满足条件执行 }else if(true){ //满足条件执行 }else{ //满足条件执行 }
case语句
# 和if语句也可以实现,case多了一个默认输入(了解就行) var err_type = 'info' switch(err_type) { case 'warining': console.log('警告'); break; case 'error': console.log('错误'); break; default: console.log('没错') }
while-循环
var i = 1; #初始化循环变量 while(i<=9){ #判断循环条件 console.log(i); i = i+1; #更新循环条件 }
for-循环
# 方式一: for(var i = 1;i<=10;i++){ console.log(i) } # 方式二: for 相当于python中的range(len(arr)) var arr = [1,2,3,4,5] for (i in arr){ console.log([i]) }
三元运算符
# var 结果 = boolean表达式 ? 为true返回的值:为false返回的值 var a = 1 var b =2 var c = a>b ? a:b //如果a>b成立返回a,否则返回b console.log(c)
函数:
函数结构:
function 函数名(参数){ 函数体 return 返回值 } 函数名(参数) #注意 : 传递的参数可以和定义的个数不一样,但是不要这么写 # 返回值只能有一个
伪数组
#arguments伪数组 function add(){ console.log(arguments); } add(1,2,3,4) function add(a,b){ console.log(arguments); } add(1,2,3,4)
匿名函数
var add = function(){ console.log('hello,world'); } add() #调用
自调用函数
(function(a,b){ console.log(a,b) })(1,2)
正则:
示例:
创建一个正则: var reg = RegExp('正则表达式') //注意,写在字符串中所有带\的元字符都会被转义,应该写作\\ var reg2 = /正则表达式/ //内部的元字符就不会转义了 reg.test('待检测的字符串') //如果字符串中含有符合表达式规则的内容就返回true,否则返回false 在字符串中应用正则 var exp = 'alex3714' exp.match(/\d/) //只匹配从左到右的第一个 exp.match(/\d/g) //匹配所有符合规则的 返回一个数组 var exp2 = 'Alex is a big sb' exp2.match(/a/) //只匹配小写a exp2.match(/a/i) //i表示不区分大小写 A也会被匹配出来 exp2.match(/a/ig) //不区分大小写并匹配所有 exp.search(/正则表达式/i) //不区分大小写,从exp字符串中找出符合条件的子串的第一个索引位置 exp.split(/正则表达式/i,n) //不区分大小写,根据正则切割,返回前n个结果 exp.replace(/正则/gi,'新的值') //i表示不区分大小写,g表示替换所有,将符合正则条件的内容替换成新的值 小问题1 var reg2 = /\d/g //正则表示要匹配多个值 reg2.test('a1b2c3') //多次test会的到true true true false 继续test会循环之前的结果 小问题2 var reg3 = /\w{5,10}/ reg3.test() //如果什么都不写,那么默认test中传递undefined参数,刚好可以符合9位字符串的规则
Date对象
创建时间对象:
#创建对象: var dt = new Date() //获取到当前时间 #时间转换 dt.toLocalString() //转换成'2019/8/13 10:18:12' dt.getFullYear() //年 dt.getMonth() //月 1月是0 dt.getday() //周中天 周日是0 dt.getDate() //月中天 1号是1 dt.getHours() //时 从0开始 dt.getMinutes() //分 从0开始 dt.getSeconds() //秒 从0开始 自定义时间: var dt2 = new Date('2018/1/1 12:12:12') 1月1日 var dt2 = new Date(2018,1,1); 2月1日
Math对象:
Math.abs(x) 返回数的绝对值。 pow(x,y) 返回 x 的 y 次幂。 round(x) 把数四舍五入为最接近的整数。 sqrt(x) 返回数的平方根。 exp(x) 返回 e 的指数。 log(x) 返回数的自然对数(底为e)。 sin(x) 返回数的正弦。 tan(x) 返回角的正切。
面向对象(了解):
面向对象:
function Student(name,age){ this.stu_name = name this.stu_age = age } Student.prototype.show = function(){ console.log(this.stu_name,this.stu_age) } var stu = Student('alex',84) // 实例化 stu.stu_name // 查看属性 stu.stu_age stu.show() // 调用方法 object.prototype.show = function(){ console.log(this.stu_name,this.stu_age) }
DOM
什么是dom:
document object modle 文档对象模型 整个文档就是一颗树 树当中的每一个节点都是一个对象 : 这个对象中维系着 属性信息 文本信息 关系信息 在页面上还有一些动作效果: 根据人的行为改变的 点击 鼠标悬浮 自动在改变的
js是怎么给前端的web加上动作的:
1.找到对应的标签 2.给标签绑定对应的事件 3.操作对应的标签
查找标签
直接查找:(元素就是样式)
var a = document.getElementById('baidu') //直接返回一个元素对象 console.log(a) var sons = document.getElementsByClassName('son') //返回元素组成的数组 console.log(sons) sons[0] //获取到一个标签对象 var divs = document.getElementsByTagName('div') //返回元素组成的数组 console.log(divs) #示例: <body> <div id = 'foo'> <div id = 'son1' class="son"> <img src="" alt=""> </div> <div id = 'son2' class="son"> <a href="" id="baidu"></a> </div> </div> </body> <script> var a = document.getElementById('baidu') #返回id一个元素 console.log(a) var foo = document.getElementById('foo') #返回foo下的所有元素 console.log(foo) var sons = document.getElementsBClassName('son') #通过类名将元素转成列表返回 console.log(sons) sons[0] #获取到一个标签对象 var divs = document.getElementsByTagName('div') console.log(divs) </script>
间接查找:
#找父亲 var a = document.getElementById('baidu') console.log(a) var foodiv = a.parentNode //获取到父节点的对象 console.log(foodiv) #找儿子 var foo= document.getElementById('foo') foo.children #获取所有的子节点,返回一个数组 foo.firstElementChild #获取第一个子节点 foo.lastElementChild #获取最后一个子节点 console.log(a) #找兄弟 var son1 = document.getElementById('son1') console.log(son1) var son2 = document.getElementById('son2') console.log(son2) var a = son1.nextElementSibling #找下一个兄弟 返回一个对象 son1.previousElementSibling #找上一个兄弟 返回一个对象,如果没有兄弟返回null console.log(a)
操作本身的标签
标签的创建
var obj = document.createElement('标签名') // a div ul li span obj就是一个新创建出来的标签对象
标签的添加
父节点.appendChild(要添加的节点) //添加在父节点的儿子们之后 父节点.insertBefore(要添加的节点,参考儿子节点) //添加在父节点的某个儿子之前 #添加节点,前要先创建好一个标签 <script> var obj = document.createElement('span') var obj1 = document.createElement('a') console.log(obj) obj.appendChild(obj1) #添加节点,前要先创建好一个标签 console.log(obj) </script> #insertBefore <script> var obj = document.createElement('span') var obj1 = document.createElement('a') var obj2 = document.createElement('span') obj.appendChild(obj1) obj.insertBefore(obj2,obj1) #在节点中,插入一个节点 console.log(obj) </script>
标签的删除
父节点.removeChild(要删除的子节点 # obj.removeChild(obj2) 子节点1.parentNode.removeChile(子节点2)
标签的替换
父节点.replaceChild(新标签,旧儿子) <script> var obj = document.createElement('span') var obj1 = document.createElement('a') var obj2 = document.createElement('span') var obj3 = document.createElement('a') obj.appendChild(obj1) obj.insertBefore(obj2,obj1) console.log(obj) obj.replaceChild(obj3,obj2) console.log(obj) </script>
标签的复制
节点.cloneNode() //只克隆一层 节点.cloneNode(true) //克隆自己和所有的子子孙孙 注意 :如果克隆出来的标签的id是重复的,那么修改之后才能应用到页面上
节点的属性
操作方法:
节点对象.getAttribute('属性名') #获取节点属性 节点对象.setAttribute('属性名','属性值') #设置节点属性 节点对象.removeAttribute('属性名') #删除节点属性 <style> .odiv{ width: 100px; height: 100px; background-color: red;} </style> <body> <div id="outer"></div> <button id="b1">显示</button> <button id ="b2">隐藏</button> </body> <script> var b1 = document.getElementById('b1') #通过document找到b1节点 b1.onclick = function () { #b1.onclick 当点击触发函数 var div_obj = document.getElementById('outer') #获取id-outer属性 div_obj.setAttribute('class','odiv') #将其设置为红色 } var b2 = document.getElementById('b2') b2.onclick = function () { var div_obj = document.getElementById('outer') div_obj.removeAttribute('class') #删除红色后,按钮向上浮动 } </script>
节点的文本:
操作方法:
节点对象.innerText = '只能写文字' 节点对象.innerHTML = '可以放标签' #示例: <body> <div id = 'box'>haiyang <div>xujunli</div> </div> </body> <script> var box = document.getElementById('box') #获取节点 console.log(box.innerText) #innerText 获取内容 console.log(box.innerText="dada") #修改节点中的值 console.log(box.innerHTML) #innerHTML 标签下的内容和包括文本 </script>
获取节点值:
操作方法:
#输入框 <textarea name="" id="content" cols="30" rows="10"> </textarea> #获取value var content = document.getElementById('content'); content.value content["value"]
节点的类-Class
操作方法:
<style> .odiv1{ width: 100px; height: 100px; background-color: red; } .odiv2{ background-color: yellow; } </style> <body> <div id='box' class = 'odiv1'></div> </body> <script> var box = document.getElementById('box') box.onclick = function () { if(this.classList.contains('odiv2')){ this.classList.remove('odiv2') }else{ this.classList.add('odiv2') } } </script>
BOM
browser object model 浏览器对象模型
事件
onclick:鼠标单击
ondbclick:鼠标双击
onscroll:滚动轴移动
onunload:关闭网页时
onsubmit:表单提交事件
onreset:重置表单时
onmouseover:鼠标悬停,就是鼠标停留在图片上
onmouseout:鼠标移出,鼠标离开图片所在区域
绑定方式
<button id="btn">点击一下</button> 方式一: var btn = document.getElementById('btn') btn.onclick = function () { #onclick 鼠标点击触发 alert('点我干嘛') } 方式二: btn.onclick = clik function clik() { alert('不要点') } 方式三:(了解) <button id="btn" onclick="clik()">点击一下</button> function clik() { alert('不要点') }
常见对象:
示例:
alert(); #不同浏览器中的外观是不一样的 confirm(); #兼容不好 prompt(); #不推荐使用 #打开窗口: window.open(url,target) <button onclick="window.open('https://www.baidu.com/')">百度首页</button> //url:要打开的地址。 //target:新窗口的位置。可以是:_blank 、_self、 _parent 父框架。 #关闭窗口: window.close() 只能关闭用js的window.open()打开的页面 window.innerHeight - 浏览器窗口的内部高度 window.innerWidth - 浏览器窗口的内部宽度
定时器
setInterval
每隔一段时间就完成某个操作 var ret = setInterval(fn,n) 每隔n毫秒就调用一次fn函数 var ret = setInterval("fn()",n) clearInterval(ret) 清除定时器 #示例: <style> .box{ width: 200px; height: 200px; background-color: red; } </style> var ret = setInterval(fn,500) function fn(){ var box = document.getElementById('box') box.classList.toggle('box') }
setTimeOut
在设定时间之后执行一次来完成某个操作 var tid = setTimeout(fn,n) n毫秒之后只调用一次fn函数 var tid = setTimeout("fn()",n) clearTimeout(tid) 清除定时器 #示例: var tid = window.setTimeout("fn()",2000) function fn() { alert('wahaha') }
location对象
window的子对象 window.location 属性: window.location.href #查看当前网页的url window.location.href = 'http://www.baidu.com' #修改当前网页的url,修改之后会跳转 方法: window.location.reload(); #刷新页面
navigator
#获取客户端的信息: console.log(navigator.userAgent); #获取浏览器信息 console.log(navigator.platform); #获取系统版本
练习:
设置字体颜色
<div> <span id = 'content'>热烈庆祝23期学生全体就业</span> </div> <script> setInterval(f,200) function f() { var content = document.getElementById('content'); var color = parseInt(Math.ceil(Math.random()*16777215),16) content.style.color = '#'+color } </script>
广告页关闭
<style> body{ margin: 0; } .ad{ background-color: green; position: fixed; padding: 5px; width: 100%; height: 50px; color: yellow; text-align: center; line-height: 50px; } button{ float: right; } </style> <body> <div class="ad"> python23期皇家赌场开业了,性感荷官在线发牌 <button id="close">x</button> </div> <div class='content'> 我是正文内容 <img src="111.jpg" alt=""> <img src="222.jpg" alt=""> </div> </body> <script> var btn = document.getElementById('close') #获取close节点 btn.onclick = function () { this.parentNode.style.display = 'none' #获取父的节点,将父节点样式清空 } </script>
红绿灯:
<style> .outer{ border: solid 5px darkgray; border-radius: 10px; float: left; } .light{ width: 100px; height: 100px; border-radius: 50%; background-color: lightgray; float: left; } .red{ background-color: red; } .yellow{ background-color: yellow; } .green{ background-color: green; } </style> <body> <div class="outer"> <div class="light red"></div> <div class="light"></div> <div class="light"></div> </div> <script> setInterval(change,1000) #一秒调用一次函数 function change(){ var outer = document.getElementsByClassName('outer')[0] #获取outer节点 if(outer.children[0].classList.contains('red')){ #判断是否是红色 outer.children[0].classList.remove('red') #是的话删除变成黄色 outer.children[1].classList.add('yellow') }else if(outer.children[1].classList.contains('yellow')){ #判断是不是黄色 outer.children[1].classList.remove('yellow') #是的话删除,添加绿色 outer.children[2].classList.add('green') }else{ outer.children[2].classList.remove('green') outer.children[0].classList.add('red') } } </script> </body>
浏览器滚动栏判断-onscroll事件
window.onscoll 在页面的滚动条滚动的时候触发的事件 document.documentElement.scrollTop 针对获取浏览器的垂直滚动条的位置 #示例: <style> div{ height: 2000px; } a{ display: none; position: fixed; bottom: 20px; right:20px; } </style> <body> <div></div> <a href="#" id="back">回到顶部</a> </body> <script> //针对获取浏览器的垂直滚动条的位置 window.onscroll = function () { #滚动时触发 var a = document.getElementById('back') #获取a标签节点 console.log(document.documentElement.scrollTop) if(document.documentElement.scrollTop>500){ #判断当前滚动条位置是否发于500 a.style.display = 'block' #大于则添加样式 }else{ a.style.display = 'none' #小于则去掉样式 } } </script>
select选择框联动-onchange事件
select对象.options.selectedindex 被选中的选项在options中的索引位置 #示例: <body> <select name="province" id="province"> <option selected>请选择省份</option> </select> <select name="city" id="city"> <option selected>请选择城市</option> </select> </body> <script> data = {"河北": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]} var pro = document.getElementById('province') #获取省份节点 for(k in data){ var opt = document.createElement('option') #创建option标签 opt.innerText = k #给每个标签循环添加内容 pro.appendChild(opt) #往省份节点中添加配置好的标签 } pro.onchange = function () { var city = document.getElementById('city') #获取城市节点 city.innerText = null #将之前内容全部清空 var ind = this.options.selectedIndex #将每次选择的值赋予给ind var key = this.children[ind].innerText #通过省份获取到城市内容 console.log(key) for(var i in data[key]){ #循环选择省份的城市内容 console.log(i,typeof i) var val = data[key][i] #将每个值赋值给val var opt = document.createElement('option') #创建城市标签 opt.innerText = val #将每个城市内容添加到城市标签 city.appendChild(opt) #将标签添加到城市标签下 } } </script>
模态框:
<style type="text/css"> *{ padding: 0; margin: 0; } html,body{ height: 100%; } #box{ width: 100%; height: 100%; background: rgba(0,0,0,.3); } #content{ position: relative; top: 150px; width: 400px; height: 200px; line-height: 200px; text-align: center; color: red; background-color: #fff; margin: auto; } #span1{ position: absolute; background-color: red; top: 0; right: 0; width: 30px; height: 30px; line-height: 30px; text-align: center; color: #fff; } </style> <body> <button id="btn">弹出</button> </body> <script type="text/javascript"> var oBtn = document.getElementById('btn'); #获取dom元素 1.获取事件源 var oDiv = document.createElement('div'); #创建弹出模态框的相关DOM对象 var oP = document.createElement('p'); var oSpan = document.createElement('span'); #设置属性 oDiv.id = 'box'; oP.id = 'content' oP.innerHTML = '模态框成功弹出' oSpan.innerHTML = 'X'; oSpan.id = 'span1' #追加元素 oDiv.appendChild(oP); oP.appendChild(oSpan); oBtn.onclick = function(){ # 点击弹出按钮 弹出模态框 this.parentNode.insertBefore(oDiv,oBtn) # 动态的添加到body中一个div } oSpan.onclick = function(){ # 点击X 关闭模态框 oDiv.parentNode.removeChild(oDiv) # 移除oDiv元素 } </script>
jQuery
jquery概念
jquery是一个快速简洁的js框架,极大的简化了js的编程
jquery的优势
1.js代码对浏览器的兼容性做的更好了 2.隐式循环 3.链式操作
jquery是什么?
高度封装了js代码的模块 封装了dom节点 封装了操作dom节点的简便方法
jquery的导入
https://code.jquery.com/jquery-3.4.1.js 未压缩版 https://code.jquery.com/jquery-3.4.1.min.js 压缩版 下载:保存在本地文件里 引入:<script src="jquery3.4.1.min.js"></script>
$和jQuery的关系
$就是jQuery名字的简写,实际上是一回事儿
for循环注意事项:
#不要用for(i in li_list){}的方式循环一个jq对象 for(let i=0;i<li_list.length;i++){ #let 声明的变量的作用域只在for循环中 console.log(i) }
jquery对象和dom对象的关系和转换
jquery封装了dom dom转成jquery : jQuery(dom对象) $(dom对象) jquery转成dom : jq对象[index] #示例: <div></div> <div id="app"></div> <div class="box"></div> <div class="box"></div> <div></div> #通过js获取这些元素节点: var myBox = document.getElementById("app"); //通过 id 获取单个元素 var boxArr = document.getElementsByClassName("box"); //通过 class 获取的是伪数组 var divArr = document.getElementsByTagName("div"); //通过标签获取的是伪数组 #通过jQuery获取这些元素节点: //获取的是数组,里面包含着原生 JS 中的DOM对象。 console.log($('#app')); console.log($('.box')); console.log($('div'));
jquery选择器
三种选择器
基本选择器: 一般都是通过ID或者class类来进行选择 层级选择器: 可以通过层次进行选择,如后代子代选择器 属性选择器: 可以通过属性进行选择
基础选择器(重要):
id选择器 .类选择器 标签选择器 *通用选择器 #示例: <body> <div class="box" title="baidu"> <ul id="city"> <li>北京</li> <a href="https://www.baidu.com" class="baidu" title="baidu">wahaha</a> <li id="sh"><a href="haha" title="luffy">上海</a></li> <li><a href="dada" title="luffy">山东</a></li> <li>河北</li> <span></span> </ul> <p>p标签</p> </div> </body> <script src="jquery3.4.1.min.js"></script> #id选择器,ID设置不可重复,只选择一个 $('#city') k.fn.init [ul#city] #类选择器,class设置可以重复 $('.box') k.fn.init [div.box] #标签选择器,获取所有li标签 $('li') k.fn.init(4) [li, li, li, li] $('a') k.fn.init(2) [a, a] #通用选择器,选择所有 $('*') k.fn.init(16) [html, head, meta, title, body, div.box, ul#city, li, li, a, li, a, li, p, script, script] #div.c1交集选择器 $('div.box') k.fn.init [div.box] #div,p并集选择器,多选几个 $('div,p,a') k.fn.init(4) [div.box, a, a, p]
层级选择器:
空格 后代选择器,选择div下的所有li标签 $('div li') >子代选择器,表示div下面一层所有的p标签 $('div>ul>li') +毗邻选择器,找兄弟标签中的下一个li标签 $('.baidu+li') k.fn.init [prevObject: k.fn.init(1)] ~弟弟选择器,找兄弟标签中所有弟弟li标签 $('.baidu~li') k.fn.init(3) [li, li, li, prevObject: k.fn.init(1)]
属性选择器:
$("[href]") 必须是含有某属性的标签 $('a[href]') 有某属性的符合前面选择器的标签, #a=选择器 href=属性 $('a[title="luffy"]') 属性名="luffy"的符合选择器要求标签 $('a[title!="luffy"]') 属性名="luffy"不符合选择器要求标签 $('a[href$="com"]') 属性值以xxx结尾的 $('a[href^="http"]') 属性值以xxx开头的 $('a[href*="baidu"]') 属性值包含xxx $('a[href][class="baidu"]') 拥有属性1,且属性二的值='xxx',符合前面选择器要求的
jquery筛选器
基础筛选器(重要):
$('选择器:筛选器') $('选择器:first') 作用于选择器选择出来的结果 $('a:first') 找第一个 $('a:last') 最后一个 $('a:eq(1)') 通过索引找 $('a:even') 找偶数索引 $('a:odd') 找奇数索引 $('a:gt(1)') 大于某索引的 $('a:lt(1)') 小于某索引的 $('*:not("li")') # not(选择器) 不含 符合选择器 要求的 $('*:has("a[href]")') # has(选择器) 后代中含有该选择器要求的(找的不是后代,找的是本身)
表单筛选器
type筛选器:
#form 表单选择 $(':text') $(':password') $(':radio') $(':checkbox') $(':file') $(':submit') $(':reset') $(':button') 注意 : date type的input是找不到的
状态筛选器:
enabled disabled checked selected $(':disabled') jQuery.fn.init [input] $(':enabled') jQuery.fn.init(15) [input, input, input, input, input, input, input, input, input, input, input, select, option, option, option] $(':checked') jQuery.fn.init(4) [input, input, input, option] $(':selected') $(':checkbox:checked') jQuery.fn.init(2) [input, input] $('input:checkbox:checked') jQuery.fn.init(2) [input, input] #示例: <body> <input type="text" name="" disabled> <input type="password" name="" > <input type="radio" name="sex" checked> <input type="radio" name="sex" > <input type="checkbox" name="hobby" checked> <input type="checkbox" name="hobby" checked> <input type="checkbox" name="hobby"> <input type="file" name="" > <input type="date" name="" > <input type="submit" name="" > <input type="reset" name="" > <input type="button" name="" > <select name="" id=""> <option value="" selected>北京</option> <option value="">上海</option> <option value="">天津</option> </select> </body> <script src="jquery.3.4.1.js"></script>
筛选器方法
筛选示例:
找兄弟 :$('ul p').siblings() 找哥哥 $('ul p').prev() 找上一个哥哥 $('ul p').prevAll() 找所有哥哥 $('ul p').prevUntil('选择器') 找哥哥到某一个地方就停了 找弟弟 : next() nextAll() nextUntil('选择器') 找祖宗 : parent() parents() parentsUntil('选择器') 找儿子 : children()
筛选方法:
first() last() eq(index) not('选择器') 去掉满足选择器条件的 filter('选择器') 交集选择器,在所有的结果中继续找满足选择器要求的 find('选择器') 后代选择器 找所有结果中符合选择器要求的后代 has('选择器') 通过后代关系找当代 后代中有符合选择器要求的就把当代的留下
事件的绑定
绑定示例
<body> <button>点击1</button> <button>点击2</button> </body> <script src="jquery.3.4.1.js"></script> <script> $('button').click( function () { alert('你点了我一下!') } ) </script>
标签的文本操作(重要)
文本操作示例
text() $('li:first').text() // 获取值 $('li:first').text('wahaha') // 设置值 $('li:last').html() // 获取值 $('li:last').html('qqxing') // 设置值 $('li:first').html('<a href="http://www.mi.com">爽歪歪</a>') //a标签 var a = document.createElement('a') a.innerText = '我是AD钙' $('li:last').html(a) //a 是dom对象,js方式添加 var a2 = document.createElement('a') var jqobj = $(a2) jqobj.text('乳娃娃') $('li:last').html(jqobj) //jqobj是jquery对象,jquery方式 #代码示例: <body> <ul> <li>list1</li> <li>list2</li> </ul> </body> <script src="jquery.3.4.1.js"></script> <script> $('li:first').html('<a href="http://www.mi.com">爽歪歪</a>') //a标签 var a = document.createElement('a') a.innerText = '我是AD钙' $('li:last').html(a) //a 是dom对象 var a2 = document.createElement('a') var jqobj = $(a2) jqobj.text('乳娃娃') $('li:last').html(jqobj) //jqobj是jquery对象 </script>
标签的操作
增加标签
父子关系: 追加儿子 :(父).append(子) (子).appendTo(父) 头部添加 :(父).prepend(子) (子).prependTo(父) 兄弟关系: 添加哥哥 :参考点.before(要插入的) 要插入的.insertbefore(参考点) 添加弟弟 :参考点.after(要插入的) 要插入的.insertAfter(参考点) 如果被添加的标签原本就在文档树中,就相当于移动
#代码示例: <body> <ul> <li>唱</li> <li id="l2">跳</li> <li>rap</li> </ul> </body> <script src="jquery.3.4.1.js"></script> 例子append var li = document.createElement('li') var jq = $(li).text('张艺兴') $('ul').append(jq) var li = document.createElement('li') var jq = $(li).text('张艺兴') $('ul').append(jq[0]) var li = document.createElement('li') var jq = $(li).text('张艺兴') $('ul').append('<li>鹿晗</li>') 例子appendTo var li = document.createElement('li') var jq = $(li).text('张艺兴') jq.appendTo('ul') var dom_ul = document.getElementsByTagName('ul')[0] var li = document.createElement('li') var jq = $(li).text('张艺兴') jq.appendTo(dom_ul) var li = document.createElement('li') var jq = $(li).text('张艺兴') jq.appendTo($('ul')) 对已经存在的内容进行添加 -- 移动 $('li:first').appendTo('ul')
头部添加:
$('li:last').prependTo('ul') $('ul').prepend('<li>李东宇</li>') $('<li>邓帅</li>').prependTo('ul')
位置插入:
$('#l2').before('<li>李东宇</li>') $('<li>李东宇222</li>').insertBefore('#l2') #在l2上方位置插入 $('#l2').after('<li>邓帅</li>') $('<li>邓帅222</li>').insertAfter('#l2') #在l2下方位置插入
删除 修改 克隆
#删除 : remove detach empty remove : 删除标签和事件,被删掉的对象做返回值 $("li").remove() var obj = $('button').remove() obj是button标签,但是事件已经被删除了 detach : 删除标签,保留事件,被删掉的对象做返回值 $("li").detach() empty : 清空内容标签,自己被保留 $("li").empty() #修改 : replaceWith replaceAll,注意标签之前元素 $(".dada").replaceWith('<li>海洋</li>') 用b替换a $('<li>俊丽</li>').replaceAll(".dada") 用a替换b #复制 : clone var btn = $(this).clone() //克隆标签但不能克隆事件 var btn = $(this).clone(true) //克隆标签和事件
标签的属性操作
通用属性
#示例 <body> <a href="" title="baidu">百度一下</a> <input type="checkbox" name="hobby"> <input type="checkbox" name="hobby" checked> <input type="checkbox" name="hobby"> <input type="checkbox" name="hobby"> </body> attr获取属性的值 $('a').attr('href') 设置/修改属性的值 $('a').attr('href','http://www.baidu.com') 设置多个属性值 $('a').attr({'href':'http://www.baidu.com','title':'baidu'}) removeAttr $('a').removeAttr('title') //删除title属性
如果一个标签只有true和false两种情况,适合用prop处理 如果设置/获取的结果是true表示选中,false表示取消选中 $(':checkbox').prop('checked') # 获取当前选择状态 $(':checkbox:checked').prop('checked',true) # 表示选中 $(':checkbox:checked').prop('checked',false) # 表示取消选中
```
类的操作
类操作示例:
```js
添加类 addClass
$('div').addClass('red') //添加一个类,所有的div标签全部都会添加
$('div').addClass('red bigger') //添加多个类删除类 removeClass
$('div').removeClass('bigger') //删除一个类
$('div').removeClass('red bigger')转换类 toggleClass //有即删 无即加
$('div').toggleClass('red')
$('div').toggleClass('red bigger')
```
value值
值得操作:
$('input').val() #获取输入框的值 $(':text').val('值') #向输入框内输入值 $(':password').val('值') #没有 对于选择框 : 单选 多选 下拉选择 设置选中的值需要放在数组中 : $(':radio').val([1]) $(':radio').val([1,2,3]) #默认选择哪个
css样式
样式示例:
css('样式名称','值') css({'样式名1':'值1','样式名2':'值2'}) #示例: $('div').css('background-color','red') # 设置一个样式 $('div').css({'height':'100px','width':'100px'}) # 设置多个样式 <script src="jquery.3.4.1.js"></script> <style> div{ height: 20000px; width : 20000px; overflow: scroll;} </style> <body> <div> 皇家赌场开业,性感荷官在线发牌 皇家赌场开业,性感荷官在线发牌 皇家赌场开业,性感荷官在线发牌 </div> </body>
滚动条
滚动条示例:
scrollLeft() scrollTop() $(window).scrollLeft() #页面水平滚动 $(window).scrollTop() #页面上下滚动
盒子模型
盒子示例:
内容宽高 : width和height $('div').width(100) $('div').height(100) 内容+padding : innerWidth和innerHeight $('div').innerWidth(200) $('div').innerHeight(200) #内边距的距离:$('div').css('padding','30') 内容+padding+border : outerWidth和outerHeight $('div').outerWidth(350) $('div').outerHeight(350) #外边距的距离:$('div').css('border','blue solid 10px') 内容+padding+border+margin : outerWidth(true)和outerHeight(true) 设置值:变得永远是content的值 #代码示例:
胡海洋
```
表单操作
表单示例:
```js
如果返回false不提交
如果返回true不提交
```
作业练习
表格全选和反选示例:
<body> <table border="1"> <thead> <tr> <th>#</th> <th>姓名</th> <th>爱好</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"></td> <td>胡海洋</td> <td>抽烟、喝酒、烫头</td> </tr> <tr> <td><input type="checkbox"></td> <td>俊丽</td> <td>吃</td> </tr> <tr> <td><input type="checkbox"></td> <td>俊丹丹</td> <td>吃</td> </tr> </tbody> </table> <script> $(".quanxuan").click(function () { $(':checkbox').prop('checked',true) }) $(".quxiao").click(function () { $(':checkbox').prop('checked',false) #将所有选择的状态取消 }) $(".fanxuan").click(function () { var input_count = $("input:checkbox") #获取当前勾选框的列表 for(i=0; i<input_count.length ;i++){ #进行for循环 var status = $(input_count[i]).prop('checked') #或许每个i选择框的状态 $(input_count[i]).prop('checked',!status) #修改反向状态 } }) </script> </body>
动画
动画方法:
show系列 显示动画:show 隐藏动画:hide 开关显示动画:toggle slide滑动系列 滑入动画:slideDown 滑出动画:slideUp 滑入滑出动画:slideToggle(时间,回调函数) fade淡入淡出系列 淡入动画:fadeIn 淡出动画:fadeOut 淡入淡出动画:fadeToggle 动画的停止 stop 永远在动画开始之前,停止动画 #示例: <style> .container{ position: relative; float: right; height: 40px; width: 120px; background-color: lightgray; } .car{ position: absolute; line-height: 40px; width: 120px; text-align: center; top: 0; right: 0; } .box{ position: absolute; top: 40px; right: 0; height: 100px; width: 300px; background-color: #00F7DE; display: none; } </style> <body> <div class="container"> <div class="car">购物车(<span>0</span>)</div> <div class="box"></div> </div> </body> <script> $('.container').mouseenter( function () { $('.box').stop() $('.box').slideDown(400) }) $('.container').mouseleave( function () { $('.box').stop() #停止动画 $('.box').slideUp(400) }) // $('.container').hover( #鼠标悬停 // function () { // $('.box').stop() // $('.box').slideToggle(400) #滑入滑出 // }) </script>
动画特效示例:
<style> div{ height: 200px; width: 200px; background-color: red; display: none;} </style> <script src="jquery-3.4.1.js"></script> </head> <body> <button>显示</button> <div></div> </body> <script> // fadeIn fadeOut $('button').click( function () { $('div').stop() if($('button').text()==='显示'){ $('button').text('隐藏') }else{ $('button').text('显示') } $('div').fadeToggle(2000) }) // show hide toggle // $('button').click( // function () { // $('div').stop() // if($('button').text()==='显示'){ // $('button').text('隐藏') // }else{ // $('button').text('显示') // } // $('div').toggle(2000) // // $('div').toggle(2000,fn) // }) </script>
事件
事件绑定
# bind 参数都是选传的,接收参数e.data $('button').bind('click',{'a':'b'},fn) #{'a':'b'} 发送参数 function fn(e) { #e 接受参数 console.log(e.data) console.log(e.data.a) } $('button').bind('click',fn) function fn(e) { console.log('wahaha') } # 简写的事件名称当做方法名 $('button').click({'a':'b'},fn) function fn(e) { console.log(e.data) console.log(e.data.a) } $('button').click(fn) function fn(e) { console.log('wahaha') } $('button').unbind('click') #解锁
解除绑定
$('button').unbind('click')
各种事件
click(function(){...}) // 单机事件 blur(function(){...}) // 失去焦点 focus(function(){...}) // 获得焦点 change(function(){...}) // input框鼠标离开时内容改变触发 keyup(function(){...}) // 按下的键盘触发事件 27对应的是esc键 获取键盘编号 e.keyCode mouseover/mouseout // 如果给父元素绑定了over事件,那么这个父元素如果有子元素,每一次进入子元素也 触发父元素的over事件 mouseenter/mouseleave = hover(function(){...}) //鼠标的悬浮
blur focus change示例:**
<body> <input type="text"> <select name="" id=""> <option value="">北京</option> <option value="">上海</option> </select> </body> <script> $('input').focus( function () { console.log('获得焦点了') }) $('input').blur( function () { console.log('失去焦点了') }) $('select').change( function () { console.log('内容改变了') }) </script>
keyup-键盘控制:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .mask{ position: absolute; background-color:rgba(0,0,0,0.5) ; width: 100%; height: 100%; top: 0; left: 0;} .t{ position: absolute; background-color: white; width: 400px; height: 300px; top: 50%; left: 50%; margin-left: -200px; margin-top: -150px;} </style> <script src="jquery-3.4.1.js"></script> </head> <body> <h1>皇家赌场</h1> <div class="mask"> <div class="t"></div> </div> </body> <script> $(window).keyup(function (e) { // console.log(arguments) //帮助你查看想不起来的函数参数都有哪些 if(e.keyCode===27){ $('.mask').css('display','none') } }) </script> </html>
out_over
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer{ width: 300px; height: 300px; background-color: red; } .inner{ width: 100px; height: 100px; background-color: forestgreen; } </style> <script src="jquery-3.4.1.js"></script> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> <script> $('.outer').mouseout( function () { console.log('out')}) </script> </html>
事件冒泡
#冒泡就是点击子节点,会向上触发父节点,可以使用一下两种方法进行处理 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .outer{ width: 300px; height: 300px; background-color: red;} .inner{ width: 100px; height: 100px; background-color: forestgreen;} </style> <script src="jquery-3.4.1.js"></script> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> <script> $('.outer').click( function () { alert('outer') }) $('.inner').click( function (e) { alert('inner') // e.stopPropagation() //阻止事件冒泡方法1 return false //阻止事件冒泡方法2 }) </script> </html>
事件委托
$('div').on('click','button',{'a':'b'},function (event) { console.log(event.data) alert('不许点') }) 相当于把button元素的点击事件委托给了父元素div 后添加进来的button也能拥有click事件 #示例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script> $(window).ready( function () { alert('123') }) </script> <script src="jquery-3.4.1.js"></script> </head> <body> <div> <button>按键1</button> </div> </body> <script> $('div').on('click','button',{'a':'b'},function (event) { console.log(event.data) alert('不许点') }) var btn = document.createElement('button') #添加新的标签自带button事件 $(btn).text('按键2').appendTo('div') </script> </html>
页面的加载
示例:
document.onload = function(){ //js 代码 } window.onload = function () { $('button').click(function () { alert('不许点') })} onload要等到所有的文档 音视频都加在完毕才触发 onload只能绑定一次 //jquery的方式,只等待文档加载完毕之后就可以执行,在同一个html页面上可以多次使用 $(document).ready( function () { //文档加在完毕之后能做的事情 }) //jquery的方式(简写)***** $(function () { //文档加在完毕之后能做的事情 }) //示例 $(function () { $('button').click(function () { alert('不许点') }) }) //jquery中等待所有的资源包括视频 音频都加载完才执行function中的代码,可以使用多次 $(window).ready( function () { alert('123') })
each
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.4.1.js"></script>
</head>
<body>
<ul>
<li>选项一</li>
<li>选项二</li>
<li>选项三</li>
</ul>
</body>
<script>
$('li').each(
function (ind,dom) { //主动传ind是每项的索引,dom是每一项的标签对象
console.log(ind,dom)
})
</script>
</html>
练习
1.form表单的验证提示信息用focus和blur事件完成
2.表格操作 使用事件委托
3.小米购物车
4.模态对话框
bootstrap
bootstrap框架:
bootstrap框架提供样式和组件,可以快速搭建网站页面的开源项目,而且支持自适应
bootstrap组件样式地址:
https://v3.bootcss.com/components/
矢量图地址:
http://www.fontawesome.com.cn/examples/
https://www.iconfont.cn/search/index
js的代码 :
选项卡 轮播图
bootstrap框架示例:
导入bootstrap:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="jquery-3.4.1.js"></script> <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script> <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"> </head>
全局CSS样式:
栅格系统:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.4.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<style>
.col-md-1,.col-md-8,.col-md-4,.col-md-6{
border: solid 1px;}
</style>
</head>
<body>
<div class="row">
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
<div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
<div class="col-md-8">.col-md-8</div>
<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
<!--<div class="col-md-4">.col-md-4</div>-->
<div class="col-md-4 col-md-offset-4">.col-md-4</div> #列偏移
<!--<div class="col-md-4">.col-md-4</div>-->
</div>
<div class="row">
<div class="col-md-6">.col-md-6</div>
<div class="col-md-6">.col-md-6</div>
</div>
</body>
</html>
嵌套列:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.4.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<style>
.col-sm-9,.col-sm-6{
border: solid 1px;}
</style>
</head>
<body>
<div class="row">
<div class="col-sm-9">
Level 1: .col-sm-9
<div class="row">
<div class="col-xs-8 col-sm-6">
Level 2: .col-xs-8 .col-sm-6
</div>
<div class="col-xs-4 col-sm-6">
Level 2: .col-xs-4 .col-sm-6
</div>
</div>
</div>
</div>
</body>
</html>
表格:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.4.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<style>
.col-md-9,.col-md-3{
border: solid 1px;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<table class="table table-bordered table-hover">
<tr class="success">
<td>第一列</td>
<td>第二列</td>
<td>第三列</td>
</tr>
<tr>
<td>第二.一列</td>
<td>第二.二列</td>
<td>第二.三列</td>
</tr>
<tr class="danger">
<td>第三.一列</td>
<td>第三.二列</td>
<td>第三.三列</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
表单:
#表单这里还有单选框多选框和禁用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.4.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<style>
.col-md-9,.col-md-3{
border: solid 1px;}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<form>
<div class="form-group has-success has-feedback">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
<span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
</div>
</div>
</body>
</html>
按钮框删除:
选项卡:
# 每点击一个按钮就是一个页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.4.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
<div>
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">111</div>
<div role="tabpanel" class="tab-pane" id="profile">222</div>
<div role="tabpanel" class="tab-pane" id="messages">333</div>
<div role="tabpanel" class="tab-pane" id="settings">444</div>
</div>
</div>
<script>
$('#myTabs a').click(function (e) {
e.preventDefault()
$(this).tab('show')
})
</script>
</body>
</html>
可消失的弹出提示框:
#鼠标悬浮在框上,弹出提示框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.4.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
<div style="padding:100px">
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="hover" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">可消失的弹出框</a>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left" data-trigger="click">Tooltip on left</button>
<button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
</div>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
$(function () {
$('[data-toggle="popover"]').popover()
})
</script>
</body>
</html>
轮播图:
# 轮播图,轮流播放图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.4.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner" role="listbox">
<div class="item active">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/447da720833aa8f7c5ea7980464cac3d.jpg?thumb=1&w=1226&h=460&f=webp&q=90" alt="...">
<div class="carousel-caption">
....
</div>
</div>
<div class="item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0bf2f06a3b16b37c83a5991838e3e4c7.jpg?thumb=1&w=1226&h=460&f=webp&q=90" alt="...">
<div class="carousel-caption">
...
</div>
</div>
<div class="item">
<img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/64070c0d2b1e6b69316c7b9fc9d3ec50.jpg?thumb=1&w=1226&h=460&f=webp&q=90" alt="...">
<div class="carousel-caption">
...
</div>
</div>
...
</div>
<!-- Controls -->
<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
<span class="sr-only">Previous</span>
</a>
<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
<span class="sr-only">Next</span>
</a>
</div>
</body>
</html>
组件
bootstrap矢量图示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.4.1.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<style>
span{
font-size: 50px;} #设置矢量图大小,矢量图也是数字不会失真
</style>
</head>
<body>
<span class="glyphicon glyphicon-flash" aria-hidden="true"></span> #选择矢量图样式
</body>
</html>
下拉菜单:
#给按钮添加多个扩展功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.4.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
<div class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<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>
</div>
</body>
</html>
按钮/分裂时按钮下拉菜单:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.4.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<style>
</style>
</head>
<body>
<div class="btn-group btn-group-sm" role="group" aria-label="...">
<button type="button" class="btn btn-default">Left</button>
<button type="button" class="btn btn-default">Middle</button>
<button type="button" class="btn btn-default">Right</button>
</div>
<script>
</script>
</body>
</html>
输入框组:
# 输入框可以用在网页登录输入账号密码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.4.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
<style>
.dada{
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<div class="dada">
<div class="input-group">
<input type="text" class="form-control" placeholder="输入账号" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon2">输入账号</span>
</div>
<div class="input-group">
<input type="text" class="form-control" placeholder="输入密码" aria-describedby="basic-addon2">
<span class="input-group-addon" id="basic-addon3">输入密码</span>
</div>
</div>
</body>
</html>
标签:
#可变的字体
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>
徽章:
#隐藏显示未读的消息
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.4.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
<ul class="nav nav-pills" role="tablist">
<li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
<li role="presentation"><a href="#">Profile</a></li>
<li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
</body>
</html>
巨幕:
# 将数字放大展示在页面上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.4.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
<div class="jumbotron">
<h1>俊丽</h1>
<p>...</p>
<p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
</div>
</body>
</html>
页头:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.4.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
<div class="page-header">
<h1> 俊丽 <small>海洋</small></h1>
</div>
</body>
</html>
缩略图:
# 缩略图加图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.4.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
<div class="row">
<div class="col-sm-6 col-md-4">
<div class="thumbnail">
<img src="111.jpg" alt="图">
<div class="caption">
<h3>Thumbnail label</h3>
<p>嘟嘟嘟</p>
<p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
</div>
</div>
</div>
</div>
</body>
</html>
警告框:
# 可关闭的警告框,警告框内还可以添加链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.4.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>
</body>
</html>
带动画的进度条
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="jquery-3.4.1.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
</head>
<body>
<div class="progress">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
<span class="sr-only">45% Complete</span>
</div>
</div>
</body>
</html>