HTML部分
<!DOCTYPE html>
<html lang="en">
<head>
<!--head标签的主要作用：文档的头部主要描述了文档的各种属性和信息，
包括文档的标题、编码方式以及URL等信息，
这些信息大部分是用于提供索引的，辨认和识别其他方面的应用(移动端)-->
<meta charset="UTF-8" http-equiv="refresh" content="5;URL =https://www.baidu.com">
<title>路飞学城</title>
<link rel="stylesheet" type="text/css" href="head标签内容.html">
</head>
<body> </body>
</html>
head标签内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用的标签1</title>
</head>
<body>
<!--body相关标签--> <!--heading标签 h1~h6-->
<div class="heading">
<h1>路飞学城</h1>
<h2>路飞学城</h2>
<h3>路飞学城</h3>
<h4>路飞学城</h4>
<h5>路飞学城</h5>
<h6>路飞学城</h6>
</div>
<div class="anchor">
<a href="https://www.baidu.com" target="_blank">百度一下</a>
<a href="mailto:zhaoxu@tedu.cn">联系我们</a>
<a href="javascript:alert()">内容</a>
</div>
<div class="list">
<ul type="square">
<li>我的账户 ></li>
<li>我的订单 ></li>
<li>我的收藏 ></li>
<li>退出 ></li>
</ul>
<ol type="I">
<li>我的账户 ></li>
<li>我的订单 ></li>
<li>我的收藏 ></li>
<li>退出 ></li>
</ol>
</div>
<div class="image">
<img src="bd_logo1.png" alt = '加载失败显示的内容' style="width: 200px;height: 200px"/>
</div>
</body>
</html>
常用标签1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--展示两张图片，独占一行，在鼠标移动上去的时候显示小手的状态-->
<div class="img">
<ul type="none">
<li>
<a class="img1" href="bd_logo1.png">
<img src="bd_logo1.png"/>
</a>
</li>
<li>
<a class="img1" href="mind3.png">
<img src="mind3.png"/>
</a>
</li>
</ul>
</div>
</body>
</html>
小练习1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>table标签</title>
</head>
<body>
<table border="1" cellspacing="0">
<thead>
<tr>
<th>时间</th>
<th>星期一</th>
<th>星期二</th>
<th>星期三</th>
<th>星期四</th>
<th>星期五</th>
<th>星期六</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2">上午</td> <td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
</tr>
<tr>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
</tr>
<tr>
<td rowspan="3">下午</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
</tr>
<tr>
<td>化学</td>
<td>化学</td>
<td>化学</td>
<td>化学</td>
<td>化学</td>
<td>化学</td>
</tr>
<tr>
<td>历史</td>
<td>历史</td>
<td>历史</td>
<td>历史</td>
<td>历史</td>
<td>历史</td>
</tr> </tbody>
<tfoot>
<tr>
<td colspan="7">
课程表
</td>
</tr>
</tfoot>
</table> </body>
</html>
table标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>form表单</title>
</head>
<body>
<div>
<form action="https://www.baidu.com" method="get">
<p>
<label for = 'user'>
用户名：
</label>
<input type="text" name="username" id = 'user' value="pandaboy"/>
</p>
<p>
<label for = 'pwd'>
密   码：
</label>
<input type="password" name = 'password' id="pwd" placeholder="请输入密码"/>
</p>
<p>
<input type="submit" name="btn" value="一个按钮"/>
</p>
<p>
用户性别（单选框）
<input type="radio" name="xxx" value="男" checked = ''/>男
<input type="radio" name="xxx" value="女"/>女
</p>
<p>
复选框
<input type="checkbox" name="xxx" value="ball"/>足球
<input type="checkbox" name="xxx" value="poker"/>扑克
<input type="checkbox" name="xxx" value="walk"/>步行
</p>
<p>
<input type="file" name="xx1"/>上传文件
</p>
<p>重置
<input type="reset" name="xx2"/>重置按钮
</p>
<p>
文本域
<textarea col = "20" rows="5" name="txt">文本域内实现的文本编辑</textarea>
</p>
<p>
下拉列表
<select name="sel" multiple >
<option value="上海">上海</option>
<option value="深圳" selected>深圳</option>
<option value="江苏">江苏</option>
</select>
</p>
</form>
</div>
</body>
</html>
form表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签分类</title>
</head>
<body>
<div class = 'wrapper'>
<!--块级元素： div p h1~h6 ol ul table form li-->
<div class="left">
div是没有任何样式的，浏览器会设置好
<p>
段落是区分开的
</p>
</div>
</div>
<div class="right">
<!--行内元素 a span hr br i em strong label-->
<a href="#">百度</a>
<a href="#">路飞</a>
<span>一些文本</span>
<hr> <span>一些文本</span> </div>
<div>
<img src = "mind3.png" alt = "一张图片"/>
</div>
</body>
</html>
标签分类
CSS部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS的引入方式</title>
<!--内接样式-->
<!--<style type="text/css">-->
<!--span{-->
<!--color: aqua;-->
<!--}-->
<!--</style>-->
<!--外接样式-->
<link rel = "stylesheet" href = "./index.css">
</head>
<body>
<!--1.行内样式
2.内接样式
3.外接样式
3.1链接式
3.2导入式-->
<div>
<p style="color: green">
这是一个段落
</p>
</div>
<div>
<span>另一个段落</span>
<span>另一个段落</span>
<span>另一个段落</span>
</div> </body>
</html>
CSS的引入方式
span{
color: green;
}
index
..
选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<style type="text/css">
p{
color: green;
font-size: 15px;
}
span{
color: aqua;
font-size: 25px;
}
#123{
color: red;
font-size: 20px;
}
.cls{
color: red;
font-size: 28px;
}
</style>
</head>
<body>
<!--
CSS的选择器
1.基本选择器
1.1标签选择器
标签选择器可以选择所有的标签
不管标签有多深，都可以选中
选中的是所有的共性的元素，而不是特有的标签(唯一的)
1.2id选择器
id必须是唯一的，不能重复
同一个页面中，id不能重复，所有的标签都能加id
id的命名一定要规范，要以字母开头，可以有数字，下划线，杠等都可以，大小写是严格区分的
1.3类选择器
类是可以重复的，同一个类中可以携带多个类，但是类之间是会被覆盖的，类就是归类的意思
任何类的标签都可以加类
2.高级选择器
-->
<div>
<p>
这是一个段落
</p>
<ul>
<li>
<span>
这是一个span标签
</span>
</li>
</ul>
</div>
<div>
<div>
<div>
<div>
<p>
123456
</p>
</div>
</div>
</div>
</div>
<span id="123">
就用id选择器找到改的
</span>
<div class="cls">
<h3>这是一个三级标题</h3>
<h3>这是一个三级标题</h3>
<h3>这是一个三级标题</h3>
<h3>这是一个三级标题</h3>
<h3>这是一个三级标题</h3>
</div>
</body>
</html>
选择器
.p2{
color: green;
}
.p3{
text-decoration: underline;
}
.p1{
font-size: 28px;
}
类的小练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>高级选择器</title>
<style type="text/css">
/*后代选择器 后代选择器在CSS中使用非常频繁的*/
/*div p{*/
/*color: aqua;*/
/*}*/
/*div div p{*/
/*color: blue;*/
/*}*/
/*子代选择器*/
/*.container>p{*/
/*color: yellow;*/ /*}*/
/*交集选择器*/
/*h3{*/
/*width: 280px;*/
/*color: red;*/
/*}*/
/*.active{*/
/*font-size: 30px;*/
/*}*/
/*h3.active{*/
/*color: blue;*/
/*}*/
h4,a{
color: grey;
font-size: 20px;
text-decoration: none;
}
</style>
</head>
<body>
<div class="container">
<p>
这是第一个段落
<p>
这是第二个段落
</p>
</p>
<div>
<p>
我是一个段落标签
</p>
</div>
<ul>
<li class="item">
<h3 class="active">这是一个H3标签</h3> </li>
</ul>
<h4>我是一个h4比标题</h4>
<a href="高级选择器.html">here</a>
</div>
</body>
</html>
高级选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
<style>
/*对单个属性修改*/
/*label[for]{*/
/*color: red;*/
/*}*/
/*对属性的值修改*/
/*label[for = 'user']{*/
/*color: aqua;*/
/*}*/
p[class ^='name' ]{
color: green;
}
</style>
</head>
<body>
<div class="box">
<form action="">
<label for="user">用户名：</label>
<input type="text" name="" id="user"/>
<label for="pwd">密码：</label>
<input type="password" id="pwd"/>
<p class="name1">123</p>
<p class="name2">456</p>
</form> </div>
</body>
</html>
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style>
/*没有被访问的a标签的样式*/
/*div ul li[class='item1'] a:link{*/
/*color: green;*/
/*}*/
/*访问过后的链接样式*/
/*div ul li[class='item2'] a:visited{*/
/*color: green;*/
/*}*/
/*鼠标悬浮的时候改变*/
/*div ul li[class='item3'] a:hover{*/
/*color: green;*/
/*}*/
/*鼠标选中后的样式*/
/*div ul li[class='item4'] a:active{*/
/*color: green;*/
/*}*/
/*选择标签内的子类*/
/*div ul li:nth-child(1){*/
/*color: green;*/
/*}*/
div ul li:nth-child(2n-1){
color: green;
font-size: 30px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li class="item1">
1
<a href="https://www.baidu.com">百度</a>
</li>
<li class="item2">
2
<a href="https://www.processon.com">processon</a>
</li>
<li class="item3">
3
<a href="https://www.luffycity.com">路飞学城</a>
</li>
<li class="item4">
4
<a href="#">路飞学城2</a>
</li>
</ul>
</div>
</body>
</html>
伪类选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>伪元素选择器</title>
<style type="text/css">
/*选中当前的第一个首字母,设置样式*/
/*p:first-letter{*/
/*color: red;*/
/*}*/
/*通常和content联合使用，使用不是很频繁*/
/*p:before{*/
/*content: 'panda';*/
/*color: red;*/
/*}*/
/*和content联合使用，使用很频繁*/
/*p:after{*/
/*content: '伪类选择器，在标签后加内容';*/
/*font-size: 28px;*/
/*}*/
</style>
</head>
<body>
<p>
这是一个段落
</p>
</body>
</html>
伪元素选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS继承性</title>
<style type="text/css">
/*继承的属性有一些是可以继承的*/
div[class='father']{
color: red;
background-color: green;
} </style>
</head>
<body>
<!--继承：给父级设置一些属性，子级继承了父级的该属性，这是CSS中的继承
有一些属性可以继承下来 color font text line 文本的元素
像一些盒子元素，定位的元素(浮动，绝对定位，固定定位)不能继承-->
<div class="father" id="egon">
<p>alex</p>
</div> </body>
</html>
CSS继承性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS层叠性</title>
<style type="text/css">
#box{
color: green;
}
.container{
color: red;
}
p{
color: yellow;
}
</style>
</head>
<body>
<!--CSS是具有权重性的，谁的权重大就选择谁
如何判断谁的权重大？
id的数量，class的数量，标签的数量
-->
<p id="box" class="container">颜色的显示(层叠性)</p>
</body>
</html>
CSS层叠性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层叠性权重处理</title>
<style type="text/css">
/*权重111*/
#box1 .wrap2 p{
color: red;
}
/*权重111*/
#box2 .wrap3 p{
color: yellow;
} </style>
</head>
<body>
<!--权重相同的时候，以后来者居上为主-->
<!--继承来的属性权重为0-->
<div id="box1" class="wrap1">
<div id="box2" class="wrap2">
<div id="box3" class="wrap3">
<p>颜色展示层叠性</p>
</div>
</div>
</div>
</body>
</html>
层叠性权重处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>权重深入</title>
<style type="text/css">
p{
color: red;
font-size: 30px;
}
.spe1{
color: yellow!important;
font-size: 40px;
}
.spe2{
color: green;
font-size: 50px;
}
</style>
</head>
<body>
<!--!important表示的是最高的权限，强制执行，但是不能影响继承的权重的，只能影响选中的元素-->
<div>
<p class="spe1 spe2">1.多个类的选择顺序</p>
<p class="spe2 spe1">2.多个类的选择顺序</p>
</div>
</body>
</html>
权重深入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>盒模型</title>
<style type="text/css">
#space{
width: 200px;
height: 200px;
padding: 20px;
margin: 1px;
border: 5px solid red;
}
#box{
width: 400px;
height: 400px;
padding: 0;
border: 1px solid red;
}
</style>
</head>
<body>
<div id="space"> </div>
<div id="box"> </div>
</body>
</html>
盒模型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>padding</title>
<style type="text/css">
.box{
width: 300px;
height: 300px;
/*小属性限制*/
/*padding-left: 20px;*/
/*padding-right:10px ;*/
/*padding-top: 15px;*/
/*padding-bottom: 12px;*/
/*综合属性，用空格隔开，顺序是上右下左的顺时针方向*/
/*padding: 10px 20px 30px 40px;*/
/*综合属性，用空格隔开，顺序是上->左右->下*/
/*padding: 10px 20px 30px;*/
/*综合属性，用空格隔开，顺序是上下->左右*/
/*padding: 10px 40px;*/
border: 5px red solid;
}
</style>
</head>
<body>
<div class="box">
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>
</body>
</html>
padding认识
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除默认padding标签</title>
<style type="text/css">
/*使用*清除所有的默认边距是有问题的，*的效率很低，底层是在遍历标签*/
/**{*/
/*padding: 0;*/
/*margin: 0;*/
/*}*/
/*最好的使用方法就是使用并集选择器的清除默认的样式表*/
/*百度搜索reset.css*/
/*引入reset.css文件去清除所有的默认标签*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
</style>
</head>
<body>
<!--ul标签是有默认的padding的边距的-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
</html>
清除默认padding标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>border认识</title>
<style type="text/css">
/*如果边框的颜色不写，默认颜色就是黑色的*/
/*如果不写粗细，只有solid，就默认边框是3px，黑色*/
.box{
width: 200px;
height: 200px;
border: green 5px solid;
/*按照三要素拆分*/
/*border-width: 5px;*/
/*border-color: yellow;*/
/*border-style: dashed;*/
/*按照方向分*/
/*border-top-width: 10px;*/
/*border-left-width: 20px;*/
/*border-right-width: 30px;*/
/*border-left-style: dashed;*/
}
</style>
</head>
<body>
<!--border就是边框-->
<!--边框有3个要素-->
<!--1.粗细-->
<!--2.线型样式-->
<!--3.颜色-->
<div class="box"> </div>
</body>
</html>
border认识
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三角形</title>
<style type="text/css">
.box{
width: 0;
height: 0;
border-top: 20px solid red ;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
}
</style>
</head>
<body>
<div class="box"> </div>
</body>
</html>
使用border制作三角形
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 300px;
height: 300px;
border:1px solid red;
background-color: green;
margin: 20px;
}
</style>
</head>
<body>
<!--margin指的是距离，外边距-->
<div class="box"> </div>
</body>
</html>
margin认识
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标准文档流</title>
<style type="text/css">
span{
font-size: 50px;
color: #666;
}
</style>
</head>
<body>
<!--宏观上：web页面和PS设计软件是有本质的区别的-->
<!--web页面的制作是个"流"的概念，从上往下制作-->
<!--设计软件就是随意变更地方-->
<!--标准文档流下的微观现象-->
<!--1.空白折叠现象-->
<!--所有的换行只有一个空格显示，如果想要加多余的空格的情况需要加特殊符号-->
<!--<div>-->
<!--文字 文字-->
<!--</div>-->
<!--2.高矮不齐，底边对齐-->
<!--<div>-->
<!--文字文字文字文字<span>123</span>文字文字文字文字文字文字-->
<!--</div>-->
<!--3.一行铺不满，换行铺-->
</body>
</html>
标准文档流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块级元素和行内元素</title>
<style type="text/css">
/*display:inline 就是块级元素转换为行内元素*/
/*display:block 就是行内元素转换为块级元素*/
/*display:inline-block:就是将块级元素转换为行内块元素*/
/*display:none 隐藏当前的标签，不再占页面空间*/
/*visibility: hidden 隐藏当前的标签，仍然占页面空间*/
.box1{
display: inline;
width: 200px;
height: 50px;
border: 1px red solid; }
.box2{
margin-top: 20px;
width: 200px;
height: 50px;
border: 1px green solid;
}
</style>
</head>
<body>
<div class="box1">div标签1</div>
<div class="box2">div标签2</div>
</body>
</html>
块级元素和行内元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
width: 300px;
height: 300px;
background-color: #666666;
float: left;
}
.box2{
width: 400px;
height: 400px;
background-color: #123456; }
</style>
</head>
<body>
<!--浮动是CSS里布局最多的属性-->
<!--浮动显示让两个元素并排显示，并且两个元素都能设置宽度和高度-->
<!--浮动的四个特性-->
<!--1.浮动的元素脱标-->
<!--2.浮动的元素互相贴靠-->
<!--3.浮动的元素"字围"效果-->
<!--4.紧凑的效果-->
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动元素脱标</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box1{
width: 200px;
height: 200px;
background-color: #666666;
float: left;
}
.box2{
width: 400px;
height: 400px;
background-color: #123456;
}
span{
background-color: forestgreen;
float: left;
width: 200px;
height: 100px;
}
</style>
</head>
<body>
<!--脱标：脱离了标准文档流-->
<!--浮动的盒子就是脱离了标准文档流
不浮动的盒子就会渲染到原来不设置浮动盒子的位置
-->
<div class="box1">小红</div>
<div class="box2">小黄</div>
<!--设置浮动以后，span不需要转换为块级元素也可以设置宽高，-->
<!--所有的标签，一旦设置了浮动，都不区分行内元素和块状元素-->
<span>span标签</span>
<span>span标签</span>
</body>
</html>
浮动的元素脱标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动元素互相贴靠</title>
<style type="text/css">
/*span{*/
/*background-color: red;*/
/*float: left;*/
/*}*/
.box1{
width: 150px;
height: 400px;
background-color: red;
float: left;
}
.box2{
width: 100px;
height: 200px;
background-color: green;
float: left;
}
.box3{
width: 300px;
height: 300px;
background-color: yellow; }
</style>
</head>
<body>
<!--<span>文字</span>-->
<!--<span>文字</span>-->
<!--如果父元素有足够的空间，那么元素之间是互相贴靠的，
如果父元素没有足够的空间，就会一直贴着最靠近的边去变化-->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
浮动元素互相贴靠
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字围效果</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
float: left;
}
</style>
</head>
<body>
<div>
<img src="bd_logo1.png">
</div>
<!--所谓字围效果，当div浮动的时候，p不浮动，div挡住了p，说明div的层级比p的层级高，p中的文字不会被遮盖-->
<!--浮动的时候，永远不是一个盒子在单独浮动，要浮动就要一起浮动-->
<p>
123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字
文字123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字
文字123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字
文字123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字
文字123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字
文字123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字
文字123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
文字文字文字文字文字文字文字文字文字文字文字文字
文字
</p>
</body>
</html>
浮动元素字围效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动元素紧凑效果</title>
<style type="text/css">
.box{
float: left;
background-color: yellow;
}
</style>
</head>
<body>
<!--所谓收缩，就是一个浮动元素没有设置宽度，就自动以文字的宽度紧凑收缩，和行内元素一致-->
<div class="box">
panda
</div>
</body>
</html>
浮动元素紧凑效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.father{
width: 1226px;
}
.box1{
width: 300px;
height: 500px;
background-color: red;
float: left;
}
.box2{
width: 300px;
height: 200px;
background-color: yellow;
float: left;
}
.box3{
width: 400px;
height: 100px;
background-color: black;
float: left;
}
.father2{
height: 500px;
width: 1220px;
background-color: grey;
}
</style>
</head>
<body>
<div class="father">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</div>
<div class="father2"></div>
</body>
</html>
清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动1：设置盒子高度</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
}
ul{
list-style-type: none;
}
div ul li{
float: left;
width: 100px;
height: 40px;
background-color: red;
}
.box{
width: 200px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div>
<ul>
<li>
Python
</li>
<li>
web
</li>
<li>
linux
</li>
</ul>
</div>
<div class="box"> </div>
</body>
</html>
清除浮动1：设置盒子高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动2：clear</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
}
ul{
list-style-type: none;
}
div ul li{
float: left;
width: 100px;
height: 40px;
background-color: red;
}
.box{
width: 200px;
height: 100px;
background-color: yellow;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div>
<ul>
<li>
Python
</li>
<li>
web
</li>
<li>
linux
</li>
<div class="clear"></div>
</ul>
</div>
<div class="box"> </div>
</body>
</html>
清除浮动2：clear
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动3：伪元素after</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
}
ul{
list-style-type: none;
}
div ul li{
float: left;
width: 100px;
height: 40px;
background-color: red;
}
.box{
width: 200px;
height: 100px;
background-color: yellow;
}
.clearfix:after{
content: '';
clear: both;
display: block;
} </style>
</head>
<body>
<div class="clearfix">
<ul>
<li>
Python
</li>
<li>
web
</li>
<li>
linux
</li> </ul>
</div>
<div class="box"> </div>
</body>
</html>
清除浮动3：伪元素after
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动4：overflow</title>
</head>
<body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动3：伪元素after</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
div{
width: 400px;
overflow: hidden;
}
ul{
list-style-type: none;
}
div ul li{
float: left;
width: 100px;
height: 40px;
background-color: red;
}
.box{
width: 200px;
height: 100px;
background-color: yellow; } </style>
</head>
<body>
<div>
<ul>
<li>
Python
</li>
<li>
web
</li>
<li>
linux
</li> </ul>
</div>
<div class="box"> </div>
</body>
</html> </body>
</html>
清除浮动4：overflow
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box1{
width: 300px;
height: 200px;
background-color: red;
margin-bottom: 20px ;
}
.box2{
width: 400px;
height: 300px;
background-color: green;
margin-top: 50px;
}
span{
background-color: red;
}
span.a{
margin-right: 20px;
}
span.b{
margin-left: 20px;
}
</style>
</head>
<body>
<div class="father">
<div class="box1"></div>
<div class="box2"></div>
<span class="a"> 内容</span>
<span class="b"> 内容</span>
</div>
</body>
</html>
margin的塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>善于使用padding而不是margin</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.father{
width: 150px;
height: 150px;
background-color: grey;
padding-left: 50px;
padding-top: 50px ;
}
.children{
width: 50px;
height: 50px;
background-color: green; }
</style>
</head>
<body>
<div class="father">
<div class="children"></div>
</div>
</body>
</html>
善于使用padding而不是margin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本属性和字体属性</title>
<style type="text/css">
div{
width: 300px;
height: 100px;
border: 1px solid red;
/*设置字体的大小,px是像素的意思*/
/*字体的单位还有rem em %*/
/*em主要是用于移动端的字体样式大小的调节*/
/*rem也是移动端的布局使用*/
font-size: 20px;
}
</style>
</head>
<body>
<div>
内容
</div> </body>
</html>
文本属性和字体属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>font_family</title>
<style type="text/css">
p{
width: 300px;
height: 60px;
/*font:14px/30px"宋体";*/
/*等价于*/
/*font-size: 14px;*/
/*line-height: 30px;*/
/*font-family: "宋体";*/
font-family: "Arial" ,"Microsoft Sans Serif","微软雅黑";
}
</style>
</head>
<body>
<p>asdasdniasdghasdahsdl</p>
</body>
</html>
font_family
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接美化</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.nav{
width: 960px;
/*height: 40px;*/
margin: 100px auto 0;
background-color: #666666;
overflow: hidden;
}
.nav ul li{
float: left;
width: 160px;
height: 40px;
color: white;
}
ul{
list-style-type: none;
}
a{
text-decoration: none;
color: white;
width: 160px;
height: 40px;
display: block;
text-align: center;
font-size: 16px;
}
a:hover{
color: forestgreen;
width: 160px;
height: 40px;
display: block;
padding-top: 10px;
background-color: #123456;
} </style>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="#">网站导航</a>
</li>
<li>
<a href="#">网站导航</a>
</li>
<li>
<a href="#">网站导航</a>
</li>
<li>
<a href="#">网站导航</a>
</li>
<li>
<a href="#">网站导航</a>
</li>
<li>
<a href="#">网站导航</a>
</li>
</ul>
</div>
</body>
</html>
超链接美化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>color</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
/*background-color: red;*/
/*第一种：使用中文名*/
/*background-color: rgb(255,0,0);*/
/*第二种：使用rgb()或者rgba()*/
/*选取颜色可以采用pycharm自带的颜色选择器*/
}
</style>
</head>
<body>
<div> </div>
</body>
</html>
color
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>background-img</title>
<style type="text/css">
div{
width: 1200px;
height: 800px;
background-image: url("mind3.png");
/*background-repeat:no-repeat ;*/
background-repeat:repeat-y ;
}
</style>
</head>
<body>
<div> </div>
</body>
</html>
背景图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>repeat案例</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.nav{
width: 960px;
/*height: 40px;*/
margin: 100px auto 0;
background-color: #666666;
overflow: hidden;
}
.nav ul li{
float: left;
width: 160px;
height: 40px;
color: white;
}
ul{
list-style-type: none;
}
a{
text-decoration: none;
color: white;
width: 160px;
height: 40px;
display: block;
text-align: center;
font-size: 16px;
}
a:hover{
color: forestgreen;
width: 160px;
height: 40px;
display: block;
padding-top: 10px;
background-color: #123456;
}
body{
background-image: url("timg.jpg");
background-position: 100px 100px;
/*第一个值是往右偏移，第二个值是往下偏移*/
}
</style>
</head>
<body>
<div class="nav">
<ul>
<li>
<a href="#">网站导航</a>
</li>
<li>
<a href="#">网站导航</a>
</li>
<li>
<a href="#">网站导航</a>
</li>
<li>
<a href="#">网站导航</a>
</li>
<li>
<a href="#">网站导航</a>
</li>
<li>
<a href="#">网站导航</a>
</li>
</ul>
</div>
</body>
</html>
repeat案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>postition</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
width: 1226px;
height: 900px;
border: 1px solid red;
background-image: url("timg.jpg");
background-repeat: no-repeat;
/*水平方向 left center right*/
/*垂直方向 top center bottom*/
background-position: center center;
/*!*水平居中*!*/
/*background-position: center top;*/
/*固定背景图片*/
background-attachment: fixed;
}
</style>
</head>
<body>
<div> </div> </body>
</html>
postition
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定位</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
/*如果对当前元素仅仅设置相对定位，那与标准流下的盒子没有什么区别*/
position: relative;
/*设置相对定位之后就可以使用四个方向的属性*/
/*相对定位，相对于自己原来的本身定位，盒子相对于原来的位置移动*/
top:30px;
left: 30px; }
</style>
</head>
<body>
<!--定位有3种方式
1.相对定位
2.绝对定位
3.固定定位
这三种定位都是各有方式的
相对定位：position:relative
绝对定位：position:absolute
固定定位：position:fixed
-->
<div class="box1"> </div>
</body>
</html>
相对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位特性</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
width: 200px;
height: 200px;
}
.box1{
background-color: #123456;
}
.box2{
background-color: red;
position: relative;
top: 50px;
left: 100px;
}
.box3{
background-color: yellow;
}
</style>
</head>
<body>
<!--三大特性
1.不脱标 不脱离标准流
2.形影分离 和盒子分不开
3.老家留坑 保留当前位置
相对定位没有特别大的作用，完全会影响布局的美观-->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
相对定位特性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
width: 200px;
height: 200px;
}
.box1{
background-color: #123456;
position: absolute;
}
.box2{
background-color: red; }
.box3{
background-color: yellow;
}
span{
width: 100px;
height: 100px;
background-color: forestgreen;
position: absolute;
}
</style>
</head>
<body>
<!--绝对定位的盒子会脱离标准流，可以做遮盖效果，提升层级
设置绝对定位之后，不再区分行内元素和块级元素，都能设置宽高-->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<span>文字</span>
</body>
</html>
绝对定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位的用途</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.user{
font-size: 30px;
}
.btn{
position: relative;
top: 0;
left: 0;
font-size: 30px;
}
</style>
</head>
<body>
<!--相对定位的用途-->
<!--1.微调元素-->
<!--2.做绝对定位的参照（父相子绝）-->
<div>
<input type="text" name="username" value="输入" class="user"/>
<input type="button" name="" value="please hold on" class="btn"/> </div>
</body>
</html>
相对定位的用途
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位参考点</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
body{
border: 5px solid red;
height: 1000px;
width: 1226px;
}
.box{
width: 200px;
height: 200px;
background-color: yellow;
position: absolute;
/*top: 100px;*/
left: 100px;
bottom: 100px;
}
</style>
</head>
<body>
<!--绝对定位参考点是以页面的左上角（和浏览器的左上角做对比）为参考点来调整位置-->
<!--当使用bottom属性描述的时候，是以首屏为参考点-->
<div class="box"> </div>
</body>
</html>
绝对定位参考点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位以盒子作为参考点</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
/*父辈元素设置相对定位，子元素设置绝对定位，那么会以父辈元素左上角作为参考点*/
/*父辈元素不一定是直接的父标签，只要是父标签的相对定位去找位置*/ .box{
/*父辈元素设置相对定位*/
position: relative;
width: 200px;
height: 200px;
border: 5px solid yellow;
margin: 100px;
padding: 50px;
}
.box p{
/*子元素设置了绝对定位*/
width: 100px;
height: 100px;
background-color: #666666;
position: absolute;
top: 100px;
left: 100px;
}
.box2{
width: 200px;
height: 200px;
background-color: forestgreen; }
</style>
</head>
<body>
<div class="box">
<p></p>
<div class="box2"></div>
</div>
</body>
</html>
绝对定位以盒子作为参考点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位盒子居中</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 100%;
height: 69px;
background-color: red;
}
.box .c{
width: 960px;
height: 69px;
background-color: aqua;
position: absolute;
left:50%;
margin-left: -480px;
}
</style>
</head>
<body>
<div class="box">
<div class="c"></div>
</div>
</body>
</html>
绝对定位盒子居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style type="text/css">
/*固定定位会在整个页面上，不会随页面滚动而滚动*/
/*特性：1.脱标 2.提升层次 3.固定不变 不会随页面的滚动而滚动*/
/*参考点：设置固定定位，用top描述 那么是以浏览器的左上角为参考点*/
/*如果用bottom描述，那么是以浏览器的左下角作为参考点*/
/*用途：1.返回顶部栏 2.固定导航条 3.小广告*/
*{
padding: 0;
margin: 0;
}
p{
width: 100px;
height: 100px;
background-color: red;
position: fixed;
}
</style>
</head>
<body>
<div><p></p>
<img src="timg.jpg">
<img src="timg.jpg">
<img src="timg.jpg">
<img src="timg.jpg">
<img src="timg.jpg">
</div>
</body>
</html>
固定定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>返回顶部</title>
<style type="text/css"> *{
padding: 0;
margin: 0;
}
p{
bottom: 20px;
right: 20px;
background-color: red;
position: fixed;
color: white;
}
</style>
</head>
<body>
<div>
<p>
返回顶部
</p>
<img src="timg.jpg">
<img src="timg.jpg">
<img src="timg.jpg">
<img src="timg.jpg">
<img src="timg.jpg">
</div>
<!--要用jQuery不会，可以尝试用a标签-->
</body>
</html>
固定定位之返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Z-index</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box1{
width: 200px;
height: 200px;
background-color: #123456;
position: relative;
top: 10px;
left: 10px;
/*z-index: 21;*/
}
.box2{
width: 200px;
height: 200px;
background-color: aqua;
position: relative;
top:0;
left: 0; }
</style>
</head>
<body>
<!--表示一个属性，表示谁压着谁，数值大的遮盖数值小的，只有定位了的元素才有z-index-->
<!--不管是相对定位还是绝对定位，都可以使用z-index，而浮动元素不能使用-->
<!--z-index没有单位，就是一个正整数，默认的z-index为0-->
<!--如果都没有z-index值，或者z-index一样，那么谁写在html后面，在上方的元素优先显示，定位的元素优先显示-->
<!--从父现象，子标签会跟随父标签的原本设置-->
<div class="box1"></div>
<div class="box2"></div> </body>
</html>
Z-index
JavaScript
JS基础
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的引入和输出</title>
<style type="text/css"> </style> </head>
<body>
<p id="p1" onclick="clickhandler()">1111</p>
</body>
<script type="text/javascript">
console.log('对控制台打印日志');
function clickhandler() {
alert('11111')
}
document.write('JS可以直接在网页上写数字');
console.error('Error')
</script>
</html>
JS的引入和输出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>运算符</title>
</head>
<body>
<script type="text/javascript">
// 赋值运算符
var money = prompt('请输入金额');
var saveMoney = money * (1+0.02);
console.log(saveMoney);
document.write(saveMoney);
// 算数运算
var a = 10;
var b = 4;
var sum = a + b;
document.write(sum);
var min = a - b;
document.write(min);
// 组合运算符
var c = 7 , d = 8;
// d = c + d;
// d +=c;
// console.log(d);
// 自增和自减
//x++就是先赋值后自增
var c1 = d++;
console.log(c1);
console.log(d);
// ++x就是先自增再赋值
var c2 = ++d;
console.log(c2);
// 比较运算符: > < = <= >= == ===
console.log(a > b);
// 浏览器解析的时候，存在隐式转换，比较的是值的大小，===是类型和值都进行比较
// 逻辑运算符
// && 和 || 或
// and就是都真为真，只要有一个为假就是假，两个都是假就都是假
</script>
</body>
</html>
运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>字符串处理</title>
</head>
<body>
<script type="text/javascript">
// 字符串的运算
// 字符串的运算就是通过 '+' 来进行拼接
// 字符串只能是拼接，不能是加减运算
var firstName = 'panda';
var lastName = 'boy';
console.log(firstName+ ' ' + lastName);
var str = '2003啊'+firstName+'实打实大框架爱不是的gas打瞌睡的男篮的尴尬';
console.log(str);
var a1 = '1';
var a2 = 'panda';
var a3 = '4';
var a4 = '6';
// 不能对字符串进行加减运算，会报NaN -> Not a Number ->实际上NaN就是number类型
console.log(parseInt(a1) + parseInt(a2));
console.log(a3 * a4);
</script>
</body>
</html>
字符串处理
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数据类型转换</title>
</head>
<body>
<script type="text/javascript">
// 在JS中所有的数据类型，都被归为boolean
// 1.将数字类型转换为字符串类型
var n1 = 123;
var n2 = '';
var n3 = n1 + n2;
console.log(n3);
console.log(typeof (n3));
// 隐式转换 -> 数字和字符串相加会变成字符串优先变化，转换为字符串类型
// 强制类型转换 ->String(n1) -> num.toString()
var str1 = String(n1);
console.log(str1);
console.log(typeof (str1));
var num = 234;
console.log(num.toString());
console.log(typeof (num));
// 字符串转换为数字类型 -> Number(stringNum) -> parseInt(num3) ->parseFloat浮点数
// parseInt()可以解析一个字符串，并且返回一个整数
var stringNum = '789';
var num2 = Number(stringNum);
console.log(num2);
console.log(typeof (num2));
var num3 = '456';
console.log(parseInt(num3));
console.log(typeof (num3));
console.log(parseFloat(stringNum));
console.log(typeof (stringNum));
// -------------------------------------------------
// 布尔值 NaN 0 null undefined都是false 所有的数据类型都可以转换为数字类型
var b1 = '123';
console.log(Boolean(b1));
</script> </body>
</html>
数据类型转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>流程控制语句</title>
</head>
<body>
<script type="text/javascript">
// if 语句就是如果...然后...
/*
* var ji = 10;
if (ji >= 20){
console.log('恭喜你')
}else {
console.log('失败')
}*/ // 浏览器解析代码的顺序，是从上往下执行
// 考试系统录入
var math = 99;
var english = 85;
var sum = 485;
// 1. 模拟 总分大于400 并且数学成绩大于89分，被清华大学录取
// if (sum > 400 && math > 89) {
// console.log('恭喜你被录取了')
// }else {
// console.log('没有完成条件，不能被录取')
// }
// 2.模拟 如果总分大于400或者数学成绩大于85 就被复旦大学录入
// if (sum > 400 || math >=85){
// alert('你的成绩已经达标')
// }else{
// alert('成绩未达标')
// } </script>
</body>
</html>
流程控制语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>switch</title>
</head>
<body>
<script type="text/javascript">
// switch 开关
var gameScore = 'better';
// switch 和 case做比较 ，遇到break就跳出，后面的代码会继续执行，
// 运行方式类型于if else,只不过用法比较单一
switch (gameScore){
case 'good':
alert('case用来做比较');
break;
case 'better':
alert('case就是比较对不对');
break;
}
</script>
</body>
</html>
switch语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>while</title>
</head>
<body>
<!--循环的时候一定有三个步骤-->
<!--1.要初始化循环变量-->
<!--2.判断循环条件-->
<!--3.更新循环变量-->
<script type="text/javascript">
// var i = 1;
// while (i < 10){
// i++;
// console.log(i);
// }
// 练习：将1到100之间所有的是3的倍数输出出来
var i = 100;
while (i >= 1){
if (i % 3 === 0){
console.log(i);
}
// console.log(i);
i--;
}
</script>
</body>
</html>
while语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>for循环</title>
</head>
<body>
<script type="text/javascript">
// for 循环
// for(var i = 1;i <= 10;i++){
// console.log(i);
// }
// 打印1-100之间所有的偶数
// for (var i = 1; i<=100;i++ ){
// if(i % 2 ===0){
// console.log(i);
// }
// }
// 计算1-100之间的数字的和
// var sum = 0;
// for (var i = 1;i <= 100;i++ ){
// sum += i;
// }
// console.log(sum)
// 打印在页面上3行6个*
// for (var i = 0;i<=2;i++){
// document.write('******'+'<br>');
// }
// 在浏览器中输出直角三角形
// *
// **
// ***
// ****
// *****
// ******
String.prototype.times = function(n) {
return Array.prototype.join.call({length:n+1}, this);
};
for(var i = 1;i<=6;i++){
document.write('*'.times(i)+'<br>');
}
</script>
</body>
</html>
for循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript"></script>
<title>打印机效果</title>
</head>
<body>
<pre class="aa"></pre>
<div style="display:none" class="w">Hello World </div>
<script>
var index=0;
var word=document.getElementsByClassName("w")[0].innerHTML;
function type(){
document.getElementsByClassName("aa")[0].innerText = word.substring(0,index++);
}
setInterval(type, 100);
</script>
<!--记得引入jquery文件哦-->
<script type="text/javascript" ></script>
打印机效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组</title>
</head>
<body>
<!--数组的含义就是存储数据用的一个容器，用来装载东西-->
<!--创建数组-->
<!--1.字面量方式-->
<script type="text/javascript">
// <!--推荐使用字面量方式创建数组-->
var colors = ['red','color','yellow'];
console.log(colors);
console.log(typeof (colors));
// 空数组
var emptyAray = [];
// 使用构造函数去创建，使用new关键词，对构造函数进行创建
var colors2 = new Array();
var col = new Array('red','123','yelow');
console.log(col);
// 数组的赋值
var arr = [];
arr[0] = 123;
arr[1] = '456';
console.log(arr);
</script>
</body>
</html>
数组
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>数组的常用方法</title>
</head>
<body>
<script type="text/javascript">
// 1.数组的合并
var north = ['beijing','shandong','tianjin1'];
var sorth = ['dong','xi','shanghai1','nanfang1'];
var newArray = north.concat(sorth);
console.log(newArray);
// 2.数组转换为字符串
var numArray = [100,101,102,103];
// toString直接转换为字符串,每个元素使用逗号隔开
var str = numArray.toString();
console.log(str);
// join方法 将数组中的方法是用指定的字符串连接，形成一个新的字符串
var str2 = numArray.join('|');
console.log(str2);
// 查找下标,如果查找的值不再数组内，则返回-1,正向查找
var index = numArray.indexOf(100);
console.log(index);
// 反向查找
var lastIndex = numArray.lastIndexOf(102);
console.log(lastIndex);
// 数组的排序
var names = ['panda', 'boy', 'zombie', 'engo'];
// 反向排序
var newName = names.reverse();
console.log(newName);
// 正向排序 sort按照26个字母顺序排序
var newName1 = names.sort();
console.log(newName1);
// 移除元素和添加元素,返回的结果是移除的第一个元素，原来数组中的第一个元素，被移除了
var firstName = names.shift();
console.log(firstName);
console.log(names);
// unshift()向数组添加一个元素,返回的新数组长度
var lastname = names.unshift(names);
console.log(lastname);
console.log(names);
// push()添加元素,往数组的最后一个位置添加元素
var newN = names.push('123');
console.log(newN);
console.log(names);
// pop()移除元素,从数组的最后去删除元素
var newN1 = names.pop();
console.log(newN1);
console.log(names); </script>
</body>
</html>
数组的常用方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>函数</title>
</head>
<body>
<script type="text/javascript">
// 函数的创建
// 有函数的声明就一定有调用
function add(){
alert('函数被调用')
}
add();
// 声明函数的时候带参数
function add2(a, b) {
alert(a + b)
}
add2(3, 4);
function add3(x,y) {
return x+y
}
n = add3(4,5);
alert(n)
</script>
</body>
</html>
函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>对象函数</title>
</head>
<body>
<!--一切皆对象，没有对象就new-->
<!--JS是使用构造函数使用对象-->
<script type="text/javascript">
// 对象的创建 //字面量方式的创建，推荐使用
// 存储的方式就是key value
// var stu = {
// 'name':'panda',
// 'age':22,
// 'fav':'soup'
// };
// console.log(stu);
// 点语法,相当于get和set语法
// alert(stu.name);
// 使用Object创建对象
// function add() {
//
// }
// add()
// Object构造函数的特点
// 1.首字母大写
// 碰见构造函数，要想创建对象就是用new
// var obj = new Object();
// obj.name = 'xiaoming';
// obj.age = 45;
// console.log(obj);
// ----------------------------------构造函数--------------------------------------
// 1.函数名首字母要大写
// 2.构造函数不需要return
// 3.为对象添加成员变量 this.name = 'panda'
// var Stu = function () {
// this.name = 'panda';
// this.age = 18;
// this.fav = function(){
// console.log('boy')
// }
// };
// // 以上的方式每次new一个对象，各种属性都是相同的，不推荐这样去使用
// // 创建这个对象
// var s = new Stu();
// console.log(s);
// var s1 = new Stu();
// console.log(s1);
// ---------------------推荐使用的构造函数方式-------------------------
function Animal() {
this.name = 'hua';
this.age = 18;
this.fav = function () {
console.log(this.age)
}
}
var a = new Animal();
a.fav();
</script>
</body>
</html>
对象函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>String_Number</title>
</head>
<body>
<script type="text/javascript">
// 内置对象
// String 字符串对象
var str = 'hello panda';
console.log(str.length);
// 大写转换
var bigstr = str.toUpperCase();
console.log(bigstr);
// 小写转换
console.log(bigstr.toLowerCase());
// 两个参数，一个是分割的符号依据，一个是限制的长度
console.log(str.split(' ',2));
// 提取哪个字符到哪个字符之间的长度显示为字符串
console.log(str.substring(1,7));
// number
// 1.将bumber类型转换为字符串类型
var num = 123.23;
var numStr = num.toString();
console.log(numStr);
console.log(typeof (numStr));
// 2.保留一位小数，可以设置保留几位小数
var newNum = num.toFixed(1);
console.log(newNum);
</script>
</body>
</html>
String_Number
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Date</title>
</head>
<body>
<script type="text/javascript">
// 创建日期对象
var myDate = new Date();
// 获取一个月中的某一天
myDate.getDate();
console.log(myDate);
// 获取当天的日期和时间
console.log(Date());
// 获取月份
console.log(myDate.getMonth()+1);
console.log(myDate.getDay());
console.log(myDate.getFullYear());
console.log(myDate.getTime());
</script>
</body>
</html>
Date
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Math对象</title>
</head>
<body>
<script type="text/javascript">
// math对象用来执行数学的一些简单运算
// ceil向上取整数
var x = 1.234;
y = Math.ceil(x);
console.log(y);
// floor向下取整数
var a = Math.floor(x);
console.log(a);
// 求这两个输入的最大值和最小值
console.log(Math.max(1,5,6));
console.log(Math.min(1,56,8));
// 经常使用 随机数 包含0 不包含1
var ran = Math.random();
console.log(Math.floor(ran*100)+100);
// min~max之间的随机数 min+Math.random()*(max-min) </script>
</body>
</html>
Math对象的使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器</title>
</head>
<body>
<script type="text/javascript">
// setInterval()方法可以根据指定的周期来调用函数或计算表达式
// setInterval()会不停的调用函数，直到直到clearInterval被调用或窗口被关闭
// 由setInterval()返回的ID值可用作直到clearInterval()方法的参数
// setTimeout()在指定了毫秒数之后调用函数或计算表达式
// setTimeout()本身只执行一次，如果想多次调用请执行setInterval()或者在code中进行多次调用
var n = 0;
var ti = window.setInterval(function () {
n++;
console.log(n);
},1000);
// var a = 0;
setTimeout(function () {
// a ++;
console.log(ti);
clearInterval(ti);
},5000);
</script>
</body>
</html>
定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正则表达式</title>
</head>
<body>
<!--正则表达式的规则都是一样的，只是写法不同-->
<script type="text/javascript">
var str = 'panda boy';
var reg = new RegExp('panda', 'g');
console.log(reg.test(str));
var reg1 = /ccc/g;
console.log(reg1.test(str));
console.log(str.match(reg));
// 正则表达式内有 replace test match search spilt
</script>
</body>
</html>
正则表达式
JS_DOM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>命名规范和变量的声明定义</title>
</head>
<body> </body>
<script type="text/javascript">
var a = prompt( '请输入你的名字');
console.log(a)
</script>
</html>
命名规范和变量的声明定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量的声明和定义</title>
</head>
<body>
<script type="text/javascript">
// 变量的声明
// 先声明在定义
// JS中的代码是自上往下的顺序执行
var dog;
dog = '小白';
// 也可以在声明的时候直接定义
var cat = '小黄';
alert(cat)
</script>
</body>
</html>
变量的声明和定义
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5种基本数据类型</title>
</head>
<body>
<script type="text/javascript">
// JS中有两种数据类型，1.基本数据类型 2.引用数据类型
// 基本数据类型 number string boolean null undefined
var a = 123;
console.log(a);
console.log(typeof (a));
// 数值的时候显示的是蓝色的信息
var b = '123';
console.log(b);
console.log(typeof (b));
// 字符串的时候显示的是黑色
var c = true;
console.log(c);
console.log(typeof (c));
// null是空对象
var c1 = null;
console.log(c1);
console.log(typeof (c1));
// 只声明了没有定义的时候
var c2;
console.log(typeof (c2)); </script>
</body>
</html>
5种基本数据类型
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模态框</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
html,body{
height: 100%;
width: 100%;
}
button{
margin: 0 auto;
display: block;
color: #333333;
font-size: 28px;
}
#box{
width: 100%;
height: 100%;
background-color: #999999;
}
#content{
position: relative;
top: 150px;
width: 400px;
height: 200px;
line-height: 200px;
text-align: center;
color: black;
background-color: #E6E6FA;
margin: 0 auto;
}
#span1{
position: absolute;
color: red;
top: 0;
right: 0;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
background-color: #FFFFFF;
}
</style>
</head>
<body>
<button id="btn">弹出</button>
</body>
<script type="text/javascript">
// console.log(document);
// 获取dom元素
var btn = document.getElementById('btn');
// console.log(btn);
// 创建div dom元素
var oDiv = document.createElement('div');
var oP = document.createElement('p');
var oSpan = document.createElement('span');
oDiv.id = 'box';
oP.id = 'content';
oSpan.id = 'span1';
oP.innerHTML = '模态框启动！';
oSpan.innerHTML = 'X';
oDiv.appendChild(oP);
oP.appendChild(oSpan);
btn.onclick = function () {
// 动态的添加标签到body中
this.parentNode.insertBefore(oDiv,btn);
};
oSpan.onclick = function () {
oDiv.parentNode.removeChild(oDiv)
};
</script>
</html>
模态框弹出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>点击有惊喜</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 200px;
height: 200px;
background: red;
text-align: center;
color: whitesmoke;
line-height: 200px;
font-size: 23px;
font-weight: bold;
margin: 20px auto;
}
</style>
</head>
<body>
<div class="box">
点击有惊喜！
</div>
<!--<div class="box">-->
<!--点击有惊喜！-->
<!--</div>-->
</body>
<script type="text/javascript">
var oBox = document.getElementsByClassName('box')[0];
var a = 0;
console.log(oBox);
oBox.onclick = function () {
a++;
if(a%4===1){
this.style.background = 'green';
this.innerText = '继续点击';
}else if(a%4===2){
this.style.background = 'yellow';
this.innerText = '再来一次';
}else if (a%4===3){
this.style.background = 'blue';
this.innerText = '最后一次';
}else{
this.style.background = 'red';
this.innerText = '点击有惊喜！'
} }
</script>
</html>
点击有惊喜
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>简易留言板</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body>
<h1>简易留言板</h1>
<div id="box"></div>
<textarea id="msg"></textarea>
<input type="button" id="btn" value="留言" />
<button onclick="sum()">统计</button>
</body>
<script type="text/javascript">
var ul = document.createElement('ul');
var box = document.getElementById('box');
var count = 0;
box.appendChild(ul);
var btn = document.getElementById('btn');
var msg = document.getElementById('msg');
btn.onclick = function () {
console.log(msg.value);
var li = document.createElement('li');
var lis = document.getElementsByTagName('li');
li.innerHTML = msg.value + "<span> X</span>";
if (lis.length ===0){
ul.appendChild(li);
count++;
}else{
ul.insertBefore(li,lis[0]);
count++;
}
msg.value = '';
// ul.appendChild(li);
var spans = document.getElementsByTagName('span');
for (var i = 0;i<spans.length;i++){
spans[i].onclick = function () {
ul.removeChild(this.parentNode);
count --;
}
}
};
function sum() {
alert('一个发布了'+count+'条！');
}
</script>
</html>
留言板
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{
list-style-type: none;
}
ul li{
float: left;
width: 160px;
height: 60px;
line-height: 60px;
text-align: center;
background-color: #999999;
}
#tab{
width: 480px;
margin: 20px auto;
border: 1px solid red;
}
li.active{
background-color: #FFFFFF;
}
ul li a{
text-decoration: none;
color: #333333;
}
p.active{
display: block;
}
p{
display: none;
height: 200px;
text-align: center;
line-height: 200px;
background: #FFFFFF;
}
</style>
</head>
<body>
<div id="tab">
<ul>
<li class="active"><a href="#">首页</a></li>
<li><a href="#">新闻</a></li>
<li><a href="#">图片</a></li>
</ul>
<p class="active">首页内容</p>
<p class>新闻内容</p>
<p class>图片内容</p>
</div>
</body>
<script type="text/javascript">
var tabi = document.getElementsByTagName('li');
var tabContent = document.getElementsByTagName('p');
for (var i = 0;i < tabi.length; i++){
//保存变量 i
tabi[i].index = i;
tabi[i].onclick = function () {
for (var j = 0;j < tabi.length;j++){
tabi[j].className = '';
tabContent[j].className = '';
}
this.className = 'active';
tabContent[this.index].className = 'active';
}
}
</script>
</html>
选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝搜索框</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#search{
position: relative;
}
label{
position: absolute;
font-size: 20px;
top: 8px;
left: 80px;
color: #999999;
}
input{
outline: none;
display: block;
width: 400px;
height: 40px;
font-size: 20px;
border: 2px solid yellowgreen;
margin-left: 20px;
margin-top: 20px;
border-radius: 5px;
}
</style>
</head>
<body>
<div id="search">
<input type="text" id="text" />
<label for="text" id="msg">pandaboy</label>
</div>
</body>
<script type="text/javascript">
var text = document.getElementById('text');
var msg = document.getElementById('msg');
// 检测用户输入的表单控件
text.oninput = function () {
if (this.value == ''){
msg.style.display = 'block';
}else {
msg.style.display = 'none';
}
}
</script>
</html>
淘宝搜索框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取当前时间</title>
<style type="text/css">
/**{*/
/*padding: 0;*/
/*margin: 0;*/
/*}*/
</style>
</head>
<body>
<div></div>
</body>
<script type="text/javascript">
// document.body.innerHTML = '123';
setInterval(function () {
var date = new Date();
var y = date.getFullYear();
var m = date.getMonth();
var d = date.getDate();
var h = date.getHours();
var min = date.getMinutes();
var s = date.getSeconds();
// 现在是xxxxn年xx月xx日 xx:xx:xx
document.body.innerHTML = "现在是"+y+'年'+(m+1)+'月'+d+'日' +" "+num(h)+':'+num(min)+':'+num(s);
},1000);
function num(n) {
if (n<10){
return '0'+n;
}
return n;
}
</script>
</html>
获取当前时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>匀速运动事件</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 50px;
left: 0;
}
</style>
</head>
<body>
<div id="wrap">
<button id="btn">运动</button>
<div class="box" id="box1"></div>
</div>
</body>
<script type="text/javascript">
var btn = document.getElementById('btn');
var box1 = document.getElementById('box1');
var count = 0;
var time = null;
btn.onclick = function () {
// box1.style.left = '20px';
setInterval(function () {
count += 0.2;
if (count > 1000){
clearInterval(time);
box1.style.display = 'none';
}
box1.style.left = count+'1px';
},10)
}
</script>
</html>
匀速运动事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>5秒后关闭</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
img{
position: fixed;
cursor: move;
}
#left{
left: 0;
}
#right{
right: 0;
}
ul{
list-style-type: none;
}
ul li{
font-size: 25px;
}
</style>
</head>
<body>
<img src="bd_logo1.png" id="left"/>
<img src="bd_logo1.png" id="right"/>
<ul>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
<li>123123</li>
</ul>
</body>
<script type="text/javascript">
window.onload = function () {
var left = document.getElementById('left');
var right = document.getElementById('right');
setTimeout(function () {
left.style.display = 'none';
right.style.display = 'none';
},3000)
}
</script>
</html>
5秒后广告关闭
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚动图</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.warp{
position: relative;
width: 512px;
height: 400px;
border: 3px solid coral;
overflow: hidden;
margin: 100px auto;
}
img{
position: absolute;
top: 0;
left: 0;
}
.up{
position: absolute;
width: 512px;
height: 200px;
}
.down{
position: absolute;
width: 512px;
height: 200px;
top:200px;
}
</style>
</head>
<body>
<div id="box" class="warp">
<img src="mi.png" id="xiaomi"/>
<span class="up" id="picUp"></span>
<span class="down" id="picDown"></span>
</div>
</body>
<script type="text/javascript">
var up = document.getElementById('picUp');
var down = document.getElementById('picDown');
var img = document.getElementById('xiaomi');
var count = 0;
var time = null;
up.onmouseover = function () {
//不管怎样，先清除定时器
clearInterval(time);
time = setInterval(function () {
count -= 3;
count >= -2100 ? img.style.top = count + 'px':clearInterval(time) ;
},30)
};
down.onmouseover = function () {
clearInterval(time);
time = setInterval(function () {
count += 3;
count <= 0 ? img.style.top = count + 'px':clearInterval(time) ;
},30)
}
</script>
</html>
滚动图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝轮播</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
width: 300px;
height: 150px;
margin: 50px auto;
overflow: hidden;
position: relative;
}
ul{
list-style-type: none;
}
ul li{
float: left;
}
.box ul{
width: 400%;
position: absolute;
top: 0;
left: 0;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><img src="../img/safe-1.jpg" /></li>
<li><img src="../img/safe-2.jpg" /></li>
<li><img src="../img/safe-3.jpg" /></li>
<li><img src="../img/safe-4.jpg" /></li> </ul>
</div>
</body>
<script type="text/javascript">
var box = document.getElementsByClassName('box')[0];
var ul = box.children[0];
var num = 0;
var time = null;
time = setInterval(autoPlay,30);
function autoPlay() {
num--;
num <= -600 ? num = 0:num;
ul.style.left = num + 'px'; }
box.onmouseover = function () {
clearInterval(time)
};
box.onmouseout = function () {
time = setInterval(autoPlay,30);
}
</script>
</html>
无缝轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM输出</title>
</head>
<body> </body>
<script type="text/javascript">
// 1.JS的核心就是ECMA DOM BOM
// 2.BOM就是 Browser Object Model 浏览器
// 输出 屏幕的宽高等 滚动的宽高 setInterval... window.open() close() location
// 1.alert()
// 浏览器的调试
// 2.console.log()
// 获取用户的输入框内容
// 3.prompt()
// 4. confirm 多一个取消键
// 如果点击确定，返回true 如果点击取消，返回的是false
</script>
</html>
BOM输出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>open_close</title>
</head>
<body>
<!--行间的js中的open，window不能省略-->
<button onclick="window.open('https://www.baidu.com/')">按钮</button>
<button>百度</button>
<button onclick="window.close()">关闭网页</button>
<button>关闭</button>
</body>
<script type="text/javascript">
var oBtn = document.getElementsByTagName('button')[1];
var cBtn = document.getElementsByTagName('button')[3];
oBtn.onclick = function () {
// open('https://www.baidu.com');
// 打开空白页面
open('about:blank','_self'); };
cBtn.onclick = function () {
if(confirm('是否关闭')){
close();
}
};
</script>
</html>
open_close
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>其他对象</title>
</head>
<body> </body>
<script type="text/javascript">
// 返回浏览器的用户设备信息
console.log(window.navigator.userAgent);
console.log(window.location);
// 经常使用的方法
// window.location.href = 'https://www.baidu.com';
// 全局刷新，尽量少用
window.location.reload();
</script>
</html>
其他的对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Client</title>
<style type="text/css">
.box{
width: 200px;
height: 200px;
position: absolute;
border: 1px yellowgreen solid;
margin: 10px 0 0 0;
padding: 10px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
<script type="text/javascript">
var oBox = document.getElementsByClassName('box')[0];
console.log(oBox.clientTop); //边框顶部的宽度
console.log(oBox.clientLeft); //边框左部的距离
console.log(oBox.clientHeight); //内容区域+ 上下padding值
console.log(oBox.clientWidth); //内容区域 + 左右padding值
</script>
</html>
client系列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>屏幕区域</title>
</head>
<body> </body>
<script type="text/javascript">
window.onload = function () {
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
};
window.onresize = function () {
console.log(document.documentElement.clientWidth);
console.log(document.documentElement.clientHeight);
}
</script>
</html>
屏幕的可视区域
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>offset</title>
</head>
<body>
<div id="box" style="width: 200px;height: 200px ;border:1px solid red;padding: 10px"> </div>
</body>
<script type="text/javascript">
window.onload = function () {
// 占位宽高
// offsetTop: 如果盒子没有设置定位，就是到浏览器的顶部的距离
var box = document.getElementById('box');
console.log(box.offsetTop);
console.log(box.offsetLeft);
console.log(box.offsetWidth);
console.log(box.offsetHeight);
}
</script>
</html>
offset
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scroll</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
</style>
</head>
<body style="width: 2000px;height: 2000px">
<!--滚动系列-->
<div style="height: 200px;background: green"></div>
<div style="height: 200px;background: red"></div>
<div style="height: 200px;background: beige"></div>
<div style="height: 200px;background: gray"></div>
<div style="height: 200px;background: tan"></div>
<div style="height: 200px;background: aqua"></div>
<div style="width: 200px;height: 200px;border: 1px solid red; overflow: auto" id="scroll">
<p>12312312312312312312</p>
<p>12312312312312312312</p><p>12312312312312312312</p>
<p>12312312312312312312</p>
<p>12312312312312312312</p>
<p>12312312312312312312</p>
<p>12312312312312312312</p>
<p>12312312312312312312</p>
<p>12312312312312312312</p>
<p>12312312312312312312</p>
<p>12312312312312312312</p>
<p>12312312312312312312</p>
<p>12312312312312312312</p>
<p>12312312312312312312</p>
<p>12312312312312312312</p>
</div> </body>
<script type="text/javascript">
window.onload = function () {
//实时监听滚动事件
window.onscroll = function () {
// console.log(1);
// console.log('上'+document.documentElement.scrollTop);
// console.log('左'+document.documentElement.scrollLeft);
// console.log('宽'+document.documentElement.scrollWidth);
// console.log('高'+document.documentElement.scrollHeight);
};
var s = document.getElementById('scroll');
s.onscroll = function () {
console.log('上'+s.scrollTop);
console.log('左'+s.scrollLeft);
console.log('宽'+s.offsetWidth);
console.log('高'+s.scrollHeight); //内容的高度(包含padding但是不包含margin)
};
}
</script>
</html>
scroll系列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小广告</title>
</head>
<body>
<div id="box" style="width: 330px;height: 480px;position: absolute;right: 10px;bottom: 0;display: none">
<img src="../img/safe-1.jpg" style="width: 100%;height: 100%"/>
</div>
</body>
<script src = 'jquery-3.3.1.min.js'></script>
<script type="text/javascript">
$(function () {
//队列式的调用，排队做事
$('#box').slideDown('normal').slideUp('fast').fadeIn(1000).click(function () {
$(this).fadeOut(1000);
});
})
</script>
</html>
右下角弹出小广告
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性操作</title>
<style type="text/css">
span.active{
font-size: 30px;
}
</style>
</head>
<body>
<div id="box">
<p>路飞学城</p>
</div>
<button>获取</button>
<ul>
<li class = 'luffy'>路飞</li>
<li class = 'luffy'>路飞</li>
<li class = 'luffy'>路飞</li>
<li class = 'luffy'>路飞</li>
<li class = 'luffy'>路飞</li>
<li class = 'luffy'>路飞</li>
<li class = 'luffy'>路飞</li>
</ul>
<span class = 'span1'>飞吧！！！！</span>
</body>
<script src = 'jquery-3.3.1.min.js'></script>
<script type="text/javascript">
// attr()方法操作HTML属性
// attr()如果有有一个参数，表示获取值
$(function () {
$('button').click(function () {
$('#box p').text($('#box').attr('id'));
})
});
// attr设置两个值，那么久表示设置两个属性，设置多个值的话就设置成key value的形式
$('#box').attr('class', 'foo');
$('#box').removeAttr('class');
//获取的是第一个元素的class值
var i = $('li').prop('class');
// 设置值
$('li').first().prop('name','pop');
console.log( $('li').first());
// addClass() removeClss()
$('span').addClass('span2 span 3');
$('span').removeClass('span1');
var isBig = true;
$('span').click(function () {
if (isBig){
$(this).addClass('active');
isBig = false;
}else{
$(this).removeClass('active');
isBig = true;
}
//值属性的操作 })
</script>
</html>
jQuery的属性操作
jQuery
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS痛处</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
width: 100%;
height: 100px;
margin: 10px 0 0 0;
display: none;
background-color: red;
} </style>
</head>
<body>
<!--书写繁琐，代码量大，代码复杂，不容易读更不易维护-->
<!--动画需要开启定时器，还要清除定时器，各种操作和处理事件，不好实现-->
<!--jQuery能解决上面的问题-->
<button id="btn">按钮</button>
<div></div>
<div></div>
<div></div>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
$('#btn').click(function () {
$('div').css('display','block');
$('div').html('div展示');
})
})
</script>
</html>
使用JS的痛楚
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuary</title>
<script type="text/javascript">
// 如果不写window.onload(),代码的执行顺序是从上到下
window.onload = function () {
var oDiv = document.getElementById('box');
console.log(oDiv);
};
</script>
</head>
<body>
<!--jQuay的版本有压缩版本和非压缩版本的-->
<!--非压缩版本的一般用于开发过程，非压缩版本的是有各种方法和函数的说明供程序员调用-->
<!--压缩版本的是文件名带min的，实际就是压缩所有的文件的代码，-->
<!--这些function的变量都是变成了字母，这样的方式叫重构化，用在生产环境中-->
<div id="box"></div>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
// jQuary是js的一个库，既然是库文件，那么就会抛出来一个构造函数或者对象
// 全局引用了jQuery
// 引用jQuery的时候一定要把文件先引入，再写JS代码
// 书写jQuery的方式 入口函数
// $(document).ready(function () {
// // 等待文档加载完成之后就执行函数
// alert(11);
// });
$(function () {
alert('等价于加载DOM后就直接执行')
}) </script>
</html>
jQuery文件的引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery基础选择器</title>
</head>
<body>
<ul>
<li id="1">pandaboy0</li>
<li id="2">pandaboy1</li>
<li><a href="https://www.baidu.com">pandaboy2</a></li>
<li class="li4">pandaboy3</li>
<li>pandaboy4</li>
<li>pandaboy5</li>
<li>pandaboy6</li>
</ul>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
// 回调函数
$(document).ready(function () {
//基本选择器
// 1.id选择器
// console.log($('#1'));
$('#1').css('color','red');
// 2.标签选择器
// $('a').css('color','yellow');
// 设置多个值->字典形式，设置多个值的时候使用key value的形式
$('a').css({'color':'yellow','font-size':'24px'});
// 3.类选择器
$('.li4').css('background','yellow');
// 4.通配符选择器 用的很少，使用不是很频繁
// $('*').css('background','black');
});
</script>
</html>
jQuery基础选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>层级选择器</title>
</head>
<body>
<ul>
<li id="1">pandaboy0</li>
<li id="2">pandaboy1</li>
<li><a href="https://www.baidu.com">pandaboy2</a></li>
<li class="li4">pandaboy3</li>
<li>pandaboy4</li>
<li>pandaboy5</li>
<li>pandaboy6</li>
</ul>
<div id="box">
<p>123123123</p>
<p>123123123</p>
<p>123123123</p>
<p>123123123</p>
<div>
<p>456456</p>
</div>
</div>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document.ready(function () {
// 1.后代选择器 div p
$('div p').css('color')
}))
</script>
</html>
层级选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>过滤选择器</title>
<style type="text/css"> </style>
</head>
<body>
<ul>
<li>123</li>
<li>456</li>
<li>789</li>
<li>110</li>
</ul>
</body>
<script src=" jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
//获取第一个 ：first
//获取最后一个元素：last
//获取奇数的
$('li:odd').css('color','red');
//获取偶数
$('li:even').css('color','yellow');
$('li').css('list-style-type','none');
//选中索引值为0的元素
$('li:eq(0)').css('font-size','25px');
//选中索引值大于1的元素
$('li:gt(1)').css('font-size','30px');
//选中索引值小于1的元素
$('li:lt(1)').css({'display':'block','border':'1px solid red'})
})
</script>
</html>
基本过滤选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>属性选择器</title>
</head>
<body>
<div id="box">
<h2 class="title">属性元素器</h2>
<p class="p1">我是一个段落</p>
<ul>
<li id="li1">分手应该体面</li>
<li class="what" id="li2">分手应该体面</li>
<li class="what">分手应该体面</li>
<li class="heihei">分手应该体面</li> </ul> <form action="" method="post"> <input name="username" type='text' value="1" checked="checked" />
<input name="username1111" type='text' value="1" />
<input name="username2222" type='text' value="1" />
<input name="username3333" type='text' value="1" />
<button class="btn-default">按钮1</button>
<button class="btn-info">按钮1</button>
<button class="btn-success">按钮1</button>
<button class="btn-danger">按钮1</button> </form>
</div> </body>
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function(){
//标签[属性名]，查找所有含有id的该标签的元素
$('li[id]').css('color','red');
//标签[class = className]
$('li[class = what]').css({'display':'block','border':'1px red solid'});
$('li[class != what]').css('font-size','26px');
//按标签的名称开头
$('input[name ^= u]').css('background','grey');
$('input[name $= 22]').css('background','red');
$('button[class ^= btn]').css('background','red');
})
</script>
</html>
属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>筛选</title>
</head>
<body>
<div id="box">
<p class="p1">
<span>我是第一个span标签</span>
<span>我是第二个span标签</span>
<span>我是第三个span标签</span>
</p>
<button>按钮</button>
</div>
<ul>
<li class="list">2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
<script src = 'jquery-3.3.1.min.js'></script>
<script type="text/javascript">
//获取第n个元素，数值从0开始
$('span').eq(1).css('color','red');
//获取第一个元素：first last
//.语法就是get方法和set方法
$('span').first().css('color','yellow');
$('span').last().css('color','grey');
$('span').parent('.p1').css({'width':'300px','height':'150px'});
//查找后代元素
$('div').find('button').css('background','red');
</script>
</html>
筛选选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery和DOM对象的转换</title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background-color: #333333;
color: #FFFFFF;
text-align: center;
}
</style>
</head>
<body>
<!--以后的工作中一定会用jQuery框架，对于前端，很容易用JS去操作-->
<!--所以要考虑如何更好的兼容我们的DOM元素和jQuery-->
<div id="box">123</div>
<button>隐藏</button> </body>
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
// DOM对象转换为jQuery对象
var box = document.getElementById('box');
console.log($(box));
// jQuery对象转换为DOM对象
// 第一种方式
console.log($('button')[0]);
// 第二种方式
// $('button').get(0)
var isShow = true;
$('button').get(0).onclick = function () {
if(isShow){
$('#box').hide();
$(this).text('显示');
isShow = false;
}else{
$('#box').show();
$(this).text('隐藏');
isShow = true;
}
}
</script> </html>
jQuary和DOM对象的转换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示和隐藏</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
#box{
width: 600px;
height: 600px;
background-color: #999999;
margin: 0 auto;
font-size: 60px;
text-align: center;
}
#btn{
display: block;
width: 60px;
height: 60px;
background-color: #123456;
margin: 0 auto;
color: #FFFFFF;
/*margin-left: 300px;*/ }
</style>
</head>
<body>
<div id="box">一个div</div>
<button id="btn">点我</button>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$('#btn').get(0).onclick = function(){
$('#box').toggle(1000);
}
</script>
</html>
显示和隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>slide</title>
<style type="text/css">
#box{
width: 300px;
height: 300px;
background-color: moccasin;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div id="box">life is short</div>
</body>
<script src = 'jquery-3.3.1.min.js'></script>
<script type="text/javascript">
$('#box').get(0).onclick = function () {
// $('#box').slideUp(3000);
$('#box').fadeOut(1000);
}
</script>
</html>
slide
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Fade</title>
<style type="text/css">
#box{
width: 300px;
height: 300px;
background-color: moccasin;
margin: 0 auto;
text-align: center;
}
</style>
</head>
<body>
<div id="box">life is short</div>
</body>
<script src = 'jquery-3.3.1.min.js'></script>
<script type="text/javascript">
$('#box').get(0).onclick = function () {
// $('#box').slideUp(3000);
$('#box').fadeOut(1000);
}
</script>
</html>
fade
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>value</title>
</head>
<body>
<form action="">
<input type="radio" name="sex" value="112" />男
<input type="radio" name="sex" value="113" checked="" />女
<input type="radio" name="sex" value="11" />gay <input type="checkbox" value="a" checked=""/>吃饭
<input type="checkbox" value="b" checked=""/>睡觉
<input type="checkbox" value="c" checked=""/>打豆豆 <select name="timespan" id="timespan" class="Wdate" >
<option value="1">8:00-8:30</option>
<option value="2">8:30-9:00</option>
<option value="3">9:00-9:30</option>
</select>
<input type="text" name="" id="" value="111" />
</form>
</body>
<script src = 'jquery-3.3.1.min.js'></script>
<script type="text/javascript">
$(function () {
//找到类型的标签
// console.log($(':radio'));
// console.log($(':checkbox'));
// 1.获取单选框中的value值
console.log($('input[type = radio]:checked').val());
// 2.获取复选框的value值 只能获取第一个值
console.log($('input[type = checkbox]:checked').val());
// 3.下拉列表被选中的值
var obj = $('#timespan option:selected');
console.log(obj.val());
// 设置单选值
$('input[type = radio]').val(['11']);
// 设置复选值
$('input[type = checkbox]').val(['b','c']);
// 设置下拉列表，这里必须要用selected,设置多个就会以最后一个为准，实现覆盖
$('select').val(['2']);
// 文本框 包括设置值和value值 })
</script>
</html>
操作中的input_value值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文档操作</title>
</head>
<body>
<!--对数据来说要进行增删改查，对于前端的文档也需要进行增删改查，不再是静态的页面-->
<!--如果数据量大，再用静态去堆积代码是不合理的，要根据数据的返回多少，来动态设置页面的格式-->
<span>123</span>
<ul> </ul>
<button id="btn">按钮</button>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
// 插入字符串
var oLi = document.createElement('li');
oLi.innerHTML = '路飞';
$('ul').append(oLi);
// 追加元素
$('ul').append('<li>luffy</li>');
//如果内容是原本的页面中的元素，那么这些元素也将从原位置上消失
$('ul').append($('span'));
// appendTo()
$("<a href='#'>panda</a>").appendTo($('ul'));
$('ul').prepend('<li>在最前面插入一个字标签</li>');
$('<li>我是第0个元素</li>').prependTo($('ul'));
$('ul').before('<h2>我是一个二级标签</h2>');
$('ul').after('<h2>二级标签置后</h2>');
$('ul').after('<h3>三级标签！</h3>');
// -------------------------复制--------------------------------
// 1.clone()：克隆匹配的DOM元素并且选中这些克隆的副本。
// 2.clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本(简言之，副本具有与真身一样的事件处理能力)
$('button').click(function () {
// clone有两个参数
$(this).clone(true).insertAfter($(this));
});
// -------------------------替换--------------------------------
// $('h3').replaceWith('<button>替换的按钮</button>');
// $('<a href="#">连接地址</a>').replaceAll('button');
// -------------------------删除--------------------------------
// empty:清空只是清空了被选元素的内容
// $('ul').empty();
// remove:整个标签都被删除，事件也没有了
// $('ul').remove();
// detach 能返回一个对象 移除匹配节点的元素 ，事件会保留
var $btn = $('button').detach();
console.log($btn[0]);
})
</script>
</html>
文档操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>位置属性</title>
<style type="text/css">
*{padding: 0;margin: 0}
#box{
position: relative;
width: 200px;
height: 200px;
border: 1px solid red;
padding: 10px;
}
p{
position:absolute;
left:30px;
top: 30px;
}
</style>
</head>
<body style="height: 2000px;width: 2000px;">
<div id="box">
<p>我是一个段落标签</p>
</div>
<button id="btn">动画</button>
<div style="width: 200px;height: 200px;margin: 100px auto;border: 1px solid deeppink"></div>
</body>
<script src = 'jquery-3.3.1.min.js'></script>
<script type="text/javascript">
$(function () {
// 获取匹配元素的相对父元素的偏移
// console.log($('p').position().left);
var offsetTop = $('p').position().top +50+'px';
$('#btn').click(function () {
$('p').animate({top:offsetTop},1000);
});
// 获取匹配元素相对滚动条的卷起的位置信息 scrollTop scrollLeft
$(document).scroll(function(){
// console.log($(document).scrollLeft());
// console.log($(document).scrollTop());
});
// offset 获取匹配元素在当前视口的当前偏移，相对于浏览器
// console.log($('#box').offset());
// console.log($('p').offset().top);
// 获取元素的宽高 只是内容的宽高，不包含padding
console.log('宽'+$('#box').width());
console.log('高'+$('#box').height());
})
</script>
</html>
位置属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>筛选</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
li.active{
font-size: 30px;
}
</style>
</head>
<body>
<ul>
<li class="danger">1</li>
<li>2</li>
<li class="danger">3</li>
<li>4</li>
<li class="danger">5</li>
<li>6</li>
</ul>
</body>
<script src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(function () {
// console.log($('li'));
// jQuery中的遍历方法
// $('li').each(function () {
// var isDanger = $(this).hasClass('danger');
// if(isDanger){
// $(this).css('color','red');
// }else{
// $(this).css({'color':'green','font-size':'25px'});
// }
// })
$('li').hover(function(){
$(this).addClass('active').siblings('li').removeClass('active');
});
})
</script>
</html>
筛选方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选项卡嵌套</title>
<style type="text/css">
*{padding: 0;margin: 0;}
ul{
list-style: none;
}
/*清除浮动产生的问题*/
#box:after{
content: "";
display: block;
clear: both;
}
#box{width: 800px;border: 1px solid black;margin: 20px auto;background: blue;}
#leftBox{width: 200px;float: left;}
#leftBox li{width: 200px;height: 89px;background: red;margin-bottom: 2px;color: white;font: 50px/89px "黑体"; text-align: center;}
#rightBox div{display: none;float: left; width: 600px;}
#rightBox p{width:100%;height: 325px;font: 100px/325px "黑体";text-align: center;background: greenyellow } /*父元素设置display：table使它成为一个块级表格元素 * 子元素设置display：table-cell使子元素成为表格单元格，就好比是在表格中一样*/
#rightBox ul{width: 600px;display: table;} #rightBox li{display: table-cell;background: purple;height: 40px;border-right: 2px solid blue;font: 30px/40px "黑体";text-align: center;color: white;}
#leftBox .active{background: yellow;color: black;}
#rightBox .active{background: white;color: black;} </style>
</head>
<body>
<div id="box">
<ul id="leftBox">
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
<div id="rightBox">
<div style="display: block">
<p>a1</p>
<ul>
<li class="active">a1</li>
<li>a2</li>
<li>a3</li>
<li>a4</li>
</ul>
</div>
<div>
<p>b1</p>
<ul>
<li class="active">b1</li>
<li>b2</li>
<li>b3</li>
<li>b4</li>
</ul>
</div>
<div>
<p>c1</p>
<ul>
<li class="active">c1</li>
<li>c2</li>
<li>c3</li>
<li>c4</li>
<li>c5</li>
<li>c6</li>
</ul>
</div>
<div>
<p>d1</p>
<ul>
<li class="active">d1</li>
<li>d2</li>
<li>d3</li>
<li>d4</li>
</ul>
</div>
</div>
</div> </body>
<script src = 'jquery-3.3.1.min.js'></script>
<script type="text/javascript">
$(function () {
$('#leftBox li').mouseover(function(){
$(this).addClass('active').siblings('li').removeClass('active');
// console.log($('#rightBox div'));
// var i = $('#rightBox div').eq($(this).index());
console.log($(this).index());
$('#rightBox div').eq($(this).index()).show().siblings('div').hide()
});
$('#rightBox li').click(function(){
$(this).addClass('active').siblings('li').removeClass('active');
var liValue = $(this).html();
$(this).parent().prev().html(liValue);
})
}) </script>
</html>
选项卡嵌套
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul{list-style: none;}
.wrap{width: 980px;height: 612px;margin: 20px auto 0px;background: #f4f3f4;border: 1px solid gray;} ul li{float: left;margin-left: 10px;position: relative;overflow: hidden;width: 233px;height: 300px;} ul li p{
width: 233px;
height: 100px;
background: rgba(245,102,51,.7);
position: absolute;
bottom: -100px;
text-align: center;
color: white;
line-height: 100px; }
</style>
</head>
<body>
<div class="wrap">
<ul>
<li><a href="#"><img src="data:images/xiaomi_01.png"/></a><p>百度一下，你就知道</p></li>
<li><a href="#"><img src="data:images/xiaomi_02.png"/></a><p>百度一下，你就知道</p></li>
<li><a href="#"><img src="data:images/xiaomi_03.png"/></a><p>百度一下，你就知道</p></li>
<li><a href="#"><img src="data:images/xiaomi_04.png"/></a><p>百度一下，你就知道</p></li>
<li><a href="#"><img src="data:images/xiaomi_05.png"/></a><p>百度一下，你就知道</p></li>
<li><a href="#"><img src="data:images/xiaomi_07.png"/></a><p>百度一下，你就知道</p></li>
<li><a href="#"><img src="data:images/xiaomi_08.png"/></a><p>百度一下，你就知道</p></li>
<li><a href="#"><img src="data:images/xiaomi_09.png"/></a><p>百度一下，你就知道</p></span></li>
</ul>
</div>
</body>
<script src="./jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$('.wrap li').hover(function(){
$(this).children('p').stop(true).animate({'bottom':0},400);
},function(){
$(this).children('p').stop(true).animate({'bottom':-100},400);
}) </script>
</html>
20-小米官网案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件对象和事件冒泡</title>
</head>
<body>
<div id="box">
<button>点击</button>
</div>
</body>
<script src = 'jquery-3.3.1.min.js'></script>
<script type="text/javascript">
$('button').click(function () {
alert('button事件触发了');
});
// 点击了按钮去做，又给div做了事件，应该阻止冒泡事件
$('#box').click(function(){
alert('111')
}); </script>
</html>
事件对象和事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件对象</title>
<style type="text/css">
#box{
width: 200px;
height: 200px;
background-color: #999999;
}
p{
width: 100px;
height: 100px;
background: #629A9C;
}
</style>
</head>
<body>
<div id="box">
<p class="p1"><a href="https://baidu.com">百度一下</a></p>
</div>
</body>
<script src = 'jquery-3.3.1.min.js'></script>
<script type="text/javascript">
$(function(){
// 事件对象
$('.p1').click(function (ev) {
// 事件的属性 type target pageX pageY
console.log(ev.type);
console.log(ev.target);
console.log(ev.pageX);
console.log(ev.pageY);
alert('冒泡事件触发了');
ev.stopPropagation();
});
// 事件方法 1.阻止事件冒泡 2.阻止默认事件
$('#box').click(function(){
alert('box事件触发了');
});
// 2.阻止默认事件
$('a').click(function (ev1) {
ev1.preventDefault();
})
});
</script>
</html>
jQuery事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单事件</title>
</head>
<body>
<!--1.change()事件-->
<!--2.select()事件-->
<!--3.submit()事件-->
<form action="https://www.luffycity.com">
<select name="sweets" id="" multiple=''>
<option value="">巧克力</option>
<option value="" selected=''>糖果</option>
<option value="">焦糖</option>
<option value="" selected=''>曲奇饼</option>
<option value="">烧饼</option>
<option value="">麦香饼</option>
<option value="">曲奇饼2</option>
</select> <input type="text" value="hello" id='target'>
<input type="submit" value="Luffy"/>
<input type="button" name="" id=" " value="按钮" /> </form> <input id="other" type="text" value="Trigger the handler">
<!--<input id="other" type="text">Trigger the handler--> <div class="show"></div>
</body>
<script src = 'jquery-3.3.1.min.js'></script>
<script type="text/javascript">
$(function () {
// 很多情况下，form表单都是通过行为去做，这是一个冒泡事件
// 需要阻止默认事件，跟服务端有很大挂钩
// change()事件
// 此事件仅限于input元素 textarea select
$('select').change(function () {
console.log($('select option:selected').text());
$('.show').text($('select option:selected').text());
});
<!--2.select()事件-->
//select 仅限于用在input type = text textarea
$('#other').select(function () {
console.log($(this).val());
});
});
</script> </html>
表单事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
</head>
<body>
<!--ajax用于前端和后端的数据进行交互，目前的本地环境，不能演示，需要前后端，pycharm具有虚拟的本地环境-->
<!--AJAX = 异步的javascript和XML（Asynchronous Javascript and XML）-->
<!--简言之，在不重载整个网页的情况下，AJAX通过后台加载数据，并在网页上进行显示。-->
<!--通过 jQuery AJAX 方法，您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON
- 同时您能够把这些外部数据直接载入网页的被选元素中。-->
<!--1.jQuery的load()方法-->
<!--jQuery load()方法是简单但强大的AJAX方法。-->
<!--load()方法从服务器加载数据，并把返回的数据放入被选元素中。-->
<!--语法：-->
<!--$("selector").load(url,data,callback);-->
<!--必须的url参数规定记载的url地址-->
<!--可选的data参数规定与请求一同发送的查询字符串键/值对的集合-->
<!--可选的callback参数是load()方法完成后所执行的函数名称-->
<!--1、-->
<!--$('#btn').click(function(){-->
<!--//只传一个url，表示在id为#new-projects的元素里加载index.html-->
<!--$('#new-projects').load('./index.html');-->
<!--})-->
<!--2、-->
<!--$('#btn').click(function(){-->
<!--//只传一个url，导入的index.html文件含有多个传递参数，类似于：index/html?name='张三'-->
<!--$('#new-projects').load('./index.html',{"name":'张三',"age":12});-->
<!--})-->
<!--3、-->
<!--//加载文件之后，会有个回调函数，表示加载成功的函数-->
<!--$('#new-projects').load('./index.html',{"name":'张三',"age":12},function(){--> <!--});-->
<!--注意：load函数最好在服务器网页中应用，也就是说要在服务器上运行，本地调试需要搭建后端本地环境。-->
<!--2. jquery的getJSON方法-->
<!--jQuery的AJAX中使用getJSON()方法异步加载JSON格式数据。获取服务器中的数据，并对数据进行解析，显示到页面中-->
<!--语法: $.getJSON(url,[data],[callback])-->
<!--url参数为请求加载json格式文件的服务器地址，可选项data参数为请求时发送的数据，callback参数为数据请求成功后执行的函数-->
<!--$.getJSON("./data/getJSON.json", function (data) {-->
<!--var str = "";//初始化保存内容变量-->
<!--$.each(data, function(index,ele) {-->
<!--$('ul').append("<li>"+ele.name+"</li>")--> <!--});-->
<!--})-->
<!--3.jquery的$.get()方法-->
<!--$.get() 方法通过 HTTP GET 请求从服务器上请求数据-->
<!--语法:$.get(URL,callback);-->
<!--url参数规定你请求的路径，是必需参数，callback参数为数据请求成功后执行的函数-->
<!--$.get('./data/getJSON.json',function(data,status){-->
<!--console.log(status); //success 200状态码 ok的意思-->
<!--})-->
<!--4.jquery的post()方法-->
<!--与get()方法相比，post()方法多用于以POST方式向服务器发送数据，服务器接收到数据之后，进行处理，并将处理结果返回页面-->
<!--语法：$.post(URL,data,callback);-->
<!--url参数规定你请求的路径，是必需参数，可选的data参数是连同请求发送的数据。可选的callback参数为数据请求成功后执行的函数-->
<!--$.post('/index',{name:'张三'},function(data,status){-->
<!--console.log(status);-->
<!--})-->
<!--5. jquery的$.ajax()方法-->
<!--jquery的$.ajax()方法 是做ajax技术经常使用的一个方法。-->
<!--它的参数很多，总会有一些初学者记不住，在这里，演示几个经常使用的参数。后面讲django课程的时候老师会详细讲ajax技术的原理。大家先把每个参数做个笔记。-->
<!--参数如下： 1.url: 要求为String类型的参数，（默认为当前页地址）发送请求的地址。-->
<!--2.type: 要求为String类型的参数，请求方式（post或get）默认为get。注意其他http请求方法，例如put和delete也可以使用，但仅部分浏览器支持。-->
<!--3.timeout: 要求为Number类型的参数，设置请求超时时间（毫秒）。此设置将覆盖$.ajaxSetup()方法的全局设置。-->
<!--4.async: 要求为Boolean类型的参数，默认设置为true，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为false。注意，同步请求将锁住浏览器，用户其他操作必须等待请求完成才可以执行。-->
<!--5.cache: 要求为Boolean类型的参数，默认为true（当dataType为script时，默认为false），设置为false将不会从浏览器缓存中加载请求信息。-->
<!--6.data: 要求为Object或String类型的参数，发送到服务器的数据。如果已经不是字符串，将自动转换为字符串格式。get请求中将附加在url后。防止这种自动转换，可以查看 processData选项。对象必须为key/value格式，例如{foo1:"bar1",foo2:"bar2"}转换为&foo1=bar1&foo2=bar2。如果是数组，JQuery将自动为不同值对应同一个名称。例如{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2。-->
<!--7.dataType: 要求为String类型的参数，预期服务器返回的数据类型。如果不指定，JQuery将自动根据http包mime信息返回responseXML或responseText，并作为回调函数参数传递。可用的类型如下： xml：返回XML文档，可用JQuery处理。 html：返回纯文本HTML信息；包含的script标签会在插入DOM时执行。 script：返回纯文本JavaScript代码。不会自动缓存结果。除非设置了cache参数。注意在远程请求时（不在同一个域下），所有post请求都将转为get请求。 json：返回JSON数据。 jsonp：JSONP格式。使用SONP形式调用函数时，例如myurl?callback=?，JQuery将自动替换后一个“?”为正确的函数名，以执行回调函数。 text：返回纯文本字符串。-->
<!--8.beforeSend： 要求为Function类型的参数，发送请求前可以修改XMLHttpRequest对象的函数，例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次ajax请求。XMLHttpRequest对象是惟一的参数。 function(XMLHttpRequest){ this; //调用本次ajax请求时传递的options参数 } 9.complete：-->
<!--要求为Function类型的参数，请求完成后调用的回调函数（请求成功或失败时均调用）。参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。 function(XMLHttpRequest, textStatus){ this; //调用本次ajax请求时传递的options参数 }-->
<!--10.success：-->
<!--要求为Function类型的参数，请求成功后调用的回调函数，有两个参数。 (1)由服务器返回，并根据dataType参数进行处理后的数据。 (2)描述状态的字符串。 function(data, textStatus){ //data可能是xmlDoc、jsonObj、html、text等等 this; //调用本次ajax请求时传递的options参数 }-->
<!--11.error: 要求为Function类型的参数，请求失败时被调用的函数。该函数有3个参数，即XMLHttpRequest对象、错误信息、捕获的错误对象(可选)。ajax事件函数如下： function(XMLHttpRequest, textStatus, errorThrown){ //通常情况下textStatus和errorThrown只有其中一个包含信息 this; //调用本次ajax请求时传递的options参数 }-->
<!--12.contentType： 要求为String类型的参数，当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。该默认值适合大多数应用场合。-->
<!--13.dataFilter： 要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。 function(data, type){ //返回处理后的数据 return data; }-->
<!--14.dataFilter： 要求为Function类型的参数，给Ajax返回的原始数据进行预处理的函数。提供data和type两个参数。data是Ajax返回的原始数据，type是调用jQuery.ajax时提供的dataType参数。函数返回的值将由jQuery进一步处理。 function(data, type){ //返回处理后的数据 return data; }-->
<!--15.global： 要求为Boolean类型的参数，默认为true。表示是否触发全局ajax事件。设置为false将不会触发全局ajax事件，ajaxStart或ajaxStop可用于控制各种ajax事件。-->
<!--16.ifModified： 要求为Boolean类型的参数，默认为false。仅在服务器数据改变时获取新数据。服务器数据改变判断的依据是Last-Modified头信息。默认值是false，即忽略头信息。-->
<!--17.jsonp： 要求为String类型的参数，在一个jsonp请求中重写回调函数的名字。该值用来替代在"callback=?"这种GET或POST请求中URL参数里的"callback"部分，例如{jsonp:'onJsonPLoad'}会导致将"onJsonPLoad=?"传给服务器。-->
<!--18.username： 要求为String类型的参数，用于响应HTTP访问认证请求的用户名。-->
<!--19.password： 要求为String类型的参数，用于响应HTTP访问认证请求的密码。-->
<!--20.processData： 要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。-->
<!--21.scriptCharset： 要求为String类型的参数，只有当请求时dataType为"jsonp"或者"script"，并且type是GET时才会用于强制修改字符集(charset)。通常在本地和远程的内容编码不同时使用--> <!--//get()方式-->
<!--$.ajax({-->
<!--url:'./data/index.txt',-->
<!--type:'get',-->
<!--dataType:'text',-->
<!--success:function(data){-->
<!--$('p').html(data);--> <!--},-->
<!--error:function(error){-->
<!--console.log(error)-->
<!--}--> <!--//post()方式-->
<!--$.ajax({-->
<!--url:'/index',-->
<!--type:'post',-->
<!--data:{name:'张三',age:12},-->
<!--success:function(data){-->
<!--$('p').html(data);-->
<!--},-->
<!--error:function(error){-->
<!--console.log(error)-->
<!--}-->
<!--注意：以上所有操作,请在服务器上运行此代码，如果没有服务器，可以在本地搭建本地服务器。-->
<!--好吧！！咱们还没学，我们可以使用PCCharm,WebStrom,HBuilder上运行此代码。但是post请求的方法 我们暂时没法演示，-->
<!--后面在django部分讲到服务器的老师，会给大家详细演示get请求和post请求的处理。-->
</body>
</html>
ajax
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax技术</title>
</head>
<body>
<button id="btn">按钮</button>
<div id="box"></div>
</body>
<script src = 'jquery-3.3.1.min.js'></script>
<script type="text/javascript">
$(document).ready(function () {
$('#btn').click(function () {
$('#box').load('./index.html',{'name':'张三','age':12});
});
});
</script>
</html>
jQuery_Ajax