Web基础

于 2021-07-24 13:50:10 发布
阅读量956 收藏 1
点赞数 3
分类专栏： 前端基础 文章标签： html css js jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Roy_Allen/article/details/115620730
版权

文章目录

简介

  • 后端开发、爬虫、软件测试，很多时候都逃不开前端基础，因为业务是为用户服务的，用户不会在意后台怎么运作，为了做出更实用的东西，我们只能委屈自己学一下前端基础芝士！
  • 这里包括的内容有
    • HTML
    • CSS
    • H5新特性
    • JavaScript
    • jQuery
  • 都是基础介绍，目的是能看懂代码get到点，提高工作效率，如果你想做大神，出门左转
  • 技术迭代是很快的，也许有些功能点在新版本中更新了，但如果你秉持理论与实践相结合的原则，不但不会错过干货，还能到快乐星球！

HTML

  • 编辑器：Sublime

  • 之前学过也做过，这里就相当于复习，记录主要内容

  • 基本结构：

    <!--html5文档类型-->
<!--在Sublime中用 “!+tab”-->
<!DOCTYPE html>
<html lang="en">
    <head>            
        <meta charset="UTF-8">
        <title>网页标题</title>
    </head>
    <body>
          网页显示内容
    </body>
</html>

  • 标签：

    <!--标题标签-->
<h1></h1>
<h2>、<h3>、<h4>、<h5>、<h6>
    
<!--段落标签-->
<p></p>
    
<!--换行标签-->
<br />
    
<!--空格实体；代码中空多个空格，在渲染成网页时只会显示一个空格（被浏览器处理）-->
&nbsp;
<!--左右尖括号-->
&lt;
&gt;
    
<!--块元素-->
<div></div>
<!--行内元素-->
<span></span>
    
<!--图片标签；	alt属性定义图片加载失败时显示的文字-->
<img src="images/pic.jpg" alt="产品图片" />
    
<!--链接标签-->
<!--target="_self" 新页面替换原来的页面-->
<!--target="_blank" 新页面在新开浏览器窗口打开-->
<a href="index.html" target="_blank">测试页面</a>

<!--列表标签-->
<!--有序列表-->
<ol>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ol>
<!--无序列表-->
<ul>
    <li><a href="#">新闻标题一</a></li>
    <li><a href="#">新闻标题二</a></li>
    <li><a href="#">新闻标题三</a></li>
</ul>
<!--定义列表：常用于术语的定义-->
<dl>
    <dt>html</dt>
    <dd>负责页面的结构</dd>

    <dt>css</dt>
    <dd>负责页面的表现</dd>

    <dt>javascript</dt>
    <dd>负责页面的行为</dd>
</dl>

    <!--表单-->
<!--action属性 定义表单数据提交地址
	method属性 定义表单提交的方式，一般有“get”方式和“post”方式
	表单一般都是post-->
<!--<label>标签 为表单元素定义文字标注-->
<!--<input>
	type属性：
		type="text" 定义单行文本输入框
        type="password" 定义密码输入框
        type="radio" 定义单选框
        type="checkbox" 定义复选框
        type="file" 定义上传文件
        type="submit" 定义提交按钮
        type="reset" 定义重置按钮
        type="button" 定义一个普通按钮
        type="image" 定义图片作为提交按钮，用src属性定义图片地址
        type="hidden" 定义一个隐藏的表单域，用来存储值
	value属性 输入内容，或者是按钮内容
	name属性 定义表单元素的名称，此名称是提交数据时的键名 很重要-->
<!--<select>标签 定义下拉表单元素-->
<!--<option>标签 与<select>标签配合，定义下拉表单元素中的选项-->

<form action="http://www..." method="get">
<p>
<label>姓名：</label><input type="text" name="username" />
</p>
<p>
<label>密码：</label><input type="password" name="password" />
</p>
<p>
<label>性别：</label>
<input type="radio" name="gender" value="0" /> 男
<input type="radio" name="gender" value="1" /> 女
</p>
<p>
<label>爱好：</label>
<input type="checkbox" name="like" value="sing" /> 唱歌
<input type="checkbox" name="like" value="run" /> 跑步
<input type="checkbox" name="like" value="swiming" /> 游泳
</p>
<p>
<label>照片：</label>
<input type="file" name="person_pic" placeholder="jpg">
</p>
<p>
<label>个人描述：</label>
<textarea name="about"></textarea>
</p>
<p>
<label>籍贯：</label>
<select name="site">
    <option value="0">北京</option>
    <option value="1">上海</option>
    <option value="2">广州</option>
    <option value="3">深圳</option>
</select>
</p>
<p>
<input type="submit" name="" value="提交">
<input type="reset" name="" value="重置">
</p>
</form>

    <!--<table>标签：声明一个表格-->
<!--<tr>表示一行，<td>表示普通格 <th>表头单元格-->
<!--align属性 设置整体表格相对于浏览器窗口的水平对齐方式,设置值有：left | center | right-->
<!--单元格中，还有valign 设置单元格中内容的垂直对齐方式 top | middle | bottom-->
<!DOCTYPE html>
<html lang="en">
    <head>            
        <meta charset="UTF-8">
        <title>表格</title>
    </head>
    <body>
        <table border="1" width="100" height="50" align="center">
            <tr>
            	<th></th>
                <th></th>
                <th></th>
            </tr>
            <tr>
                <td align="center">aa</td>
                <td valign = "middle">bb</td>
                <td>cc</td>
            </tr>
            <tr>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </body>
</html>
<!--Sublime快捷键
	table>(tr>td*5)*6 + tab
	即可生成5列6行的单元格；几个就紧跟着乘几-->

<!--Demo-->
<!--colspan 设置单元格水平合并，设置值是数值，决定了合并多宽-->
<!--rowspan 设置单元格垂直合并，设置值是数值，会将其他同列顶出去，删掉即可-->
<!--精确宽高可以用PS量-->
	<table border="1" width="600" height="300" align="center">
		<tr >
			<td colspan="5"></td>
		</tr>
		<tr>
			<td width="20%"></td>
			<td width="20%"></td>
			<td width="20%"></td>
            <td width="20%"></td>
			<td rowspan="5" width="20%"><img src="imgs/meinv.png" alt="美女"></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<tr>
			<td></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>
<!--有点问题-->

  • 页面布局：

    • table布局
    • HTML+CSS布局（DIV+CSS）
    <!--table布局，现在基本不用-->

  • 注：存成.html文件就可以在浏览器查看

CSS

  • 层叠样式表，规定网页样式

  • 让网页的内容和样式分开，方便爬取

    <!--引入css方法-->
<!--外联式-->
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--内联式 推荐首页使用-->
<style type="text/css">
    div{ width:100px; height:100px; color:red }
    ......
</style>
<!--嵌入式-->
<div style="width:100px; height:100px; color:red ">......</div>

  • 文本设置：

    /*注释形式*/
color:red;		/*文字颜色*/
font-size:12px;	/*字体大小*/
font-family:'微软雅黑';	 /*字体*/
font-style:'normal'; 	/*设置不倾斜 	italic 倾斜*/
font-weight:bold; 		/*设置加粗 normal正常*/ 
line-height:24px;	/*设置文字的行高，设置行高相当于在每行文字的上下同时加间距*/
font:normal 12px/36px '微软雅黑';	/*同时设置文字的几个属性，写的顺序有兼容问题，建议按照以上顺序写*/
text-decoration:none; 	/*将文字下划线去掉  underline 加线*/
text-indent:24px; 	/*设置文字首行缩进24px*/
text-align:center 	/*设置文字水平居中*/

  • 颜色表示法

    1. 颜色名表示，比如：red 红色，gold 金色
    2. rgb表示，比如：rgb(255,0,0)表示红色
    3. 16进制数值表示，比如：#ff0000 表示红色，这种可以简写成 #f00

选择器

  1. 标签选择器：直接针对标签名添加样式；影响范围大，建议尽量应用在层级选择器中

    div{
    color:red;
}
*{margin:0;padding:0}	/*选择所有标签*/

  2. id选择器：在HTML中的元素加上id属性；id不能重复，一般给程序使用，不推荐

    #box{color:red} 	/* <div id="box">....</div> */

  3. 类选择器：HTML中的元素加上==类属性==

    .red{color:red}
.big{font-size:20px}
.mt10{margin-top:10px} 
/*
<div class="red">....</div>
<h1 class="red big mt10">....</h1>
<p class="red mt10">....</p>
*/

  4. 层级选择器：结合类选择器、标签选择器使用；一般不要超过四层

    /*主要应用在选择父元素下的子元素，或者子元素下面的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突*/
.box{
    line-height:30px;
    font-weight:bold;
}
.box span{
    color:pink;
}
.box em{
    font-style:normal;
    text-decoration:underline;
}
.box .span01{
    color:red;
}

/*
<div class="box">这是一段测试文字，看看<span>层级选择器</span>效果如何！从效果来看<em>很棒</em>啊；方式很多，<span class="span01">任您选择</span>呢；</div>
*/

  5. 组选择器：提取公共部分

    .box1,.box2,.box3{	/*注意是逗号，不是空格*/
    font-size:20px;
    text-indent:40px;
}

.box1{
    color:red;
}
.box1{
    color:blue;
}
.box1{
    color:pink;
}

  6. 伪类选择器

    /*hover，表示鼠标悬浮在元素上时的状态*/
.box1:hover{
    color:red
}
/*伪元素选择器有before和after；塞入的内容无法选中*/
.box2:before{
    content:'行首文字';	/*一般用来加点符号*/
}
.box3:after{
    content:'行尾文字';
}

/*
<div class="box1">hover测试</div>
<div class="box2">....</div>
<div class="box3">....</div>
*/

  • 注：下面的样式可以覆盖上面的

  • 权重

    • CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式

    • 可以分为几个等级：

      1. !important，加在样式属性值后，权重值为 10000
      2. 内联样式，如：style=””，权重值为1000
      3. ID选择器，如：#content，权重值为100
      4. 类，伪类和属性选择器，如： content、:hover 权重值为10
      5. 标签选择器和伪元素选择器，如：div、p、:before 权重值为1
      6. 通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>权重</title>
    <style type="text/css">
        #box .cont h2{  /*权重 101*/
            color: blue;
        }

        #box div.cont h2{   /*权重 102*/
            color: red;
        }
    </style>
</head>
<body>
    <div id="box">
        <div class="cont">
            <h2>这会是什么颜色</h2>
        </div>
    </div>
</body>
</html>

盒子模型

  • 将页面布局想象成一个盒子（实际是盒子的俯视图）

  • 打开浏览器——检查，可以看到下图样式；想象成一个刚拆开的快递盒，content是你定的娃娃，为了防止娃娃摩擦坏，垫上的泡沫就是padding，纸盒就是border，这个快递放在车厢哪个位置即margin
    在这里插入图片描述

  • 布局这里有时和设想的并不一样，需要经验避免踩雷

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box{
			/*content*/
			width: 200px;
			height: 200px;
			background-color: gold;
			text-align: center;
			line-height: 30px;


			/*border-top-color: #000;
			border-top-style: dashed;
			border-top-width: 5px;	*/

			/*border-top:5px solid #000; 
			border-left: 5px dashed #f00;
			border-bottom: 5px dotted blue;
			border-right: 5px solid red;*/

			border: 5px solid #000;

			/*padding-top: 20px;
			padding-right: 50px;
			padding-bottom: 80px;
			padding-left: 110px;*/

			padding: 20px 50px 80px 110px; 	/*顺时针*/
			/*padding: 20px 50px 80px;	上 左右 下*/
			/*padding: 20px 50px;  上下 左右*/
			/*padding: 20px;  上下左右*/
			/*你的盒子大小已经变了......*/


			/*margin-top: 100px;
			margin-left: 100px;*/
			margin: 100px 0 0 100px;
			/*一般只设置两个值，上下、左右位置是相对的*/
		}
	</style>
</head>
<body>
	<div class="box">盒子模型测试盒子模型测试盒子模型测试盒子模型测试盒子模型测试</div>
</body>
</html>

  • 别太相信自己的眼睛，打开浏览器检查
    在这里插入图片描述

  • 盒子的真实尺寸

    • 加边框（border）：会增加周围的宽度，如果想保证大小，要在content中减去
    • 加泡沫（padding）：同理，content宽高需要减去两倍的padding
    • 总结：盒子宽度=width+左右padding+左右border；高度同理
    • 可以用QQ截图之类的查看具体大小
    • 写样式时冒号后面空一格，也是Sublime默认格式（代码洁癖而已）

  • 又是可以用样式属性代替计算这些边边角角：

    .box{
    width: 400px;
    height: 50px;
    line-height: 50px;	/*字体垂直居中怎么办？等于height即可；避免用padding挤*/
    text-indent: 20px;	/*首行缩进，避免用padding*/
}
/*
<div class="box">盒子测试</div>
*/

    /*margin的坑比较多；以下是说明，测试要分开测*/
body{
    margin: 0;	/*body默认有8px margin，不能贴边*/
}
.box{
    /*必须规定class所在的块大小！*/
    margin: 50px auto 100px;   /*宽度自动设定（左右宽度取平均）居中；只能用在宽*/
    margin-left: -25px;	/*往左进入*/
    margin-top: -1px;	/*经常用在边框的合并*/
}

/*
<body>
	<div class="box"></div>
</body>
*/

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box{
			width: 200px;
			height: 200px;
			margin: 50px auto 0;
		}

		.box div{
			width: 200px;
			height: 50px;
			background-color: gold;
			border: 1px solid green;
			margin-top: -1px;
		}
	</style>
</head>

<body>
	<div class="box">
		<div></div>
		<div></div>
		<div></div>
		<div></div>
	</div>
</body>
</html>
    • 如果没有设置宽度，默认使用父级；（顶级是100%）
      在这里插入图片描述

  • 小结：选择合适的标签，定义样式，先用选择器选准目标，从外向内逐层定义；有些需要精确定义大小，有些需要浮动定位，积累经验，视具体情况而定

常用属性

  • 主要是常用属性中的一些坑

  • 垂直外边距合并：

    /*外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者*/
.box1{
    margin-bottom: 30px;
}
.box2{
    margin-top: 20px;
}
/*
<div class="box1"></div>
<div class="box2"></div>
此时上下两个相距30px
*/
    1. 使用这种特性：上下大小定义相等
    2. 只设置一边的外边距，一般设置margin-top
    3. 将元素浮动或者定位（浮动布局）

  • margin-top塌陷：

    /*在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败；解决方式如下：*/
.contain{
    width: 300px;
    height: 300px;
    background-color: gold;
    /*方式一：加边框*/
    border: 1px solid red;
    /*方式二：overflow*/
    overflow: hidden;  
}
/*方式三：使用伪类选择器*/
.clearfix:before{
    content: '';
    display:table;
}
.box{
    width: 200px;
    height: 100px;
    margin-top: 50px;
}
/*
<div class="contain clearfix">
	<div class="box"></div>
</div>
此时上下两个相距30px
*/

  • 元素溢出：

    /*
visible 默认值。内容不会被修剪，会呈现在元素框之外
hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
auto 如果内容被修剪，浏览器才会显示滚动条以便查看其余的内容
inherit 规定应该从父元素继承 overflow 属性的值，一般不用
*/

在这里插入图片描述

三类元素（标签）

  • 元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。
块元素

块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素，它在布局中的行为：

  • 支持全部的样式
  • 如果没有设置宽度，默认的宽度为父级宽度100%
  • 盒子占据一行、即使设置了宽度
内联元素

内联元素，也可以称为行内元素，布局中常用的标签如：a、span、em、b、strong、i等等都是内联元素，它们在布局中的行为：

  • 支持部分样式（不支持宽、高、margin上下、padding上下）
  • 宽高由内容决定
  • 各元素并在一行（默认不换行）
  • 代码换行，盒子之间会产生间距
  • 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式

解决内联元素间隙的方法：

  • 去掉内联元素之间的换行（代码写在一行；不推荐）

  • 将内联元素的父级设置font-size为0，内联元素自身再设置font-size

内联块元素

内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为：

  • 支持全部样式
  • 如果没有设置宽高，宽高由内容决定
  • 各元素并在一行
  • 代码换行，盒子会产生间距
  • 子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式。
  • 这三种元素，可以通过display属性来相互转化，不过实际开发中，块元素用得比较多，所以我们经常把内联元素转化为块元素，少量转化为内联块，而要使用内联元素时，直接使用内联元素，而不用块元素转化了
  • 出现问题时，要考虑父子元素之间的继承性和相互影响；
display属性

  1. none 元素隐藏且不占位置

  2. block 元素以块元素显示

  3. inline 元素以内联元素显示

  4. inline-block 元素以内联块元素显示

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box{
			width: 694px;
			height: 50px;
			margin: 50px auto 0;
			font-size: 0;
		}

		.box a{
			width: 98px;
			height: 48px;
			display: inline-block;	/*支持全部样式且能在一行*/
			background-color: #fff;
			border: 1px solid pink;
			font-size: 16px;
			font-family: '微软雅黑';
			margin-left: -1px;
			text-align: center;
			text-decoration: none;
			line-height: 48px;
		}
		.box a:hover{
			color:red;
		}
	</style>
</head>

<body>
	<div class="box">
		<a href="#">首页</a>
		<a href="#">个人中心</a>
		<a href="#">公司简介</a>
		<a href="#">解决方案</a>
		<a href="#">公司新闻</a>
		<a href="#">行业动态</a>
		<a href="#">联系我们</a>
	</div>
</body>
</html>

    /*none属性*/
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box{
			width: 500px;
			height: 500px;
			margin: 50px auto 0;
		}
		.inblock{
			font-size: 16px;
			display: none;
		}
		.box:hover .inblock{	/*不能设置 h3:hover div不属于h3*/
			display: block;
		}
	</style>
</head>

<body>
	<div class="box">
		<h3>鼠标放在这</h3>
		<div class="inblock">啪！突然出现</div>
	</div>
</body>
</html>

    在这里插入图片描述

background属性

  • 负责给盒子设置背景图片和背景颜色的，background是一个复合属性，它可以分解成如下几个设置项

    • background-color 设置背景颜色
    • background-image 设置背景图片地址
    • background-repeat 设置背景图片如何重复平铺
    • background-position 设置背景图片的位置
    • background-attachment 设置背景图片是固定还是随着页面滚动条滚动
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.box{
			width: 500px;
			height: 400px;
			border: 3px solid #000;
			margin: 200px auto;
            
			background-color: black;
			background-image: url("imgs/dingwei.png");
			/*no-repeat repeat-x repeat-y*/
			background-repeat: no-repeat;	/*平铺*/
			/*left right center   top bottom center  可以用具体数值/负值*/
			background-position: right center;	/*9种组合，任你选择*/
            
			/*写在一起*/
			background: black url("imgs/dingwei.png") top right no-repeat;
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>

  • 技巧：设置背景图片可以通过浏览器的检查功能：
    1

  • Demo：雪碧图

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.list{
			width: 300px;
			height: 300px;
			margin: 200px auto;
			list-style: none;
		}
		.list li{
			width: 300px;
			height: 59px;
			line-height: 59px;
			text-indent: 50px;
			border-bottom: 1px dotted #000;
			background: url("imgs/bg01.png") 2px 10px no-repeat;	/*检查*/
		}
		.list .cont01{	/*注意这里，我直接用.cont01不起作用，必须是层级选择器*/
			background-position: 2px -72px;
		}
		.list .cont02{
			background-position: 2px -153px;
		}
		.list .cont03{
			background-position: 2px -236px;
		}
		.list .cont04{
			background-position: 2px -316px;
		}
	</style>
</head>
<body>
	<ul class="list">
		<!-- 气泡咱就直接用背景图片显示了，不设置div卡住了 -->
		<li>唐人街探案3</li>
		<li class="cont01">温暖的抱抱</li>
		<li class="cont02">送你一朵小红花</li>
		<li class="cont03">鬼灭之刃</li>
		<li class="cont04">斗罗大陆</li>
	</ul>
</body>
	
</html>
    • 先构思布局选择标签：用到列表
    • 选择样式：点线、首行缩进、背景图
      在这里插入图片描述

浮动布局

  • 浮动元素有左浮动（float:left）和右浮动（float:right）两种

  • 浮动元素碰到父元素边界、其他元素才停下来

  • 相邻浮动的块元素可以并在一行，超出父级宽度就换行

  • 浮动让内联元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题)

  • 没有浮动的元素内的文字会避开浮动的元素（未浮动占据浮动位置），形成文字饶图的效果

  • 上面的菜单案例使用内联块配合<div+a>完成，规范做法：

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.menu{
			width: 694px;
			height: 50px;
			list-style: none;	/*去掉圆点*/
			margin: 50px auto 0;
			padding: 0;	/*默认有margin和padding*/	 
		}

		.menu li{
			/*首页误差在3px之内；其他页面在5px之内*/
			width: 98px;
			height: 48px;
			border: 1px solid gold;
			/*display: inline-block;*/
			float: left;
			margin-left: -1px;	/*最后一个移过来*/
		}

		.menu li a{
			width: 98px;
			height: 48px;
			display: inline-block;		/*支持宽高样式，增大响应区域*/
            /*cursor:pointer;  鼠标放上去变成手*/
			text-align: center;
			line-height: 48px;
			text-decoration: none;
			color: pink;
		}

		.menu li a:hover{
			background-color: gold;
			color: #fff;
		}
	</style>
</head>

<body>
	<ul class="menu">
		<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>
		<li><a href="">联系我们</a></li>
	</ul>
</body>
</html>
    • 注意上面使用ul要设置的三个属性

  • 父元素如果没有设置尺寸(一般是高度不设置)，父元素内整体浮动的元素无法撑开父元素，父元素需要清除浮动；如下所示，li浮动，撑不开ul；需要清除浮动有三招：

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.list{
			width: 320px;
			/*height: 300px;	如果不设置高度，浮动撑不开父元素*/
			border: 1px solid #000;
			margin: 50px auto;
			padding: 0;
			list-style: none;
			/*overflow: hidden;	/*清除浮动第一招*/*/
		}

		.list li{
			width: 50px;
			height: 50px;
			background-color: blue;
			margin: 15px;	/*不会垂直外边距合并！！！*/
            color: pink;
			float: left;
		}

		.clearfix:after{
			content: "";
			display: table;
			clear: both;
		}
	</style>
</head>

<body>
	<!-- ul.list>li{$}*8 -->
	<ul class="list clearfix">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<!-- 清除浮动第二招 -->
		<!-- <div style="clear: both;"></div> -->
	</ul>
</body>
</html>

  • 将解决margin-top塌陷和清除浮动结合：

    .clearfix:before, .clearfix:after{
    content: "";
	display: table;
}
.clearfix:after{
    clear: both;
}
.clearfix{
    zoom: 1;	/*兼容IE非标准浏览器*/	
}

定位布局

  • 文档流：
    指盒子按照html标签编写的顺序依次从上到下，从左到右排列，块元素占一行，行内元素在一行之内从左到右排列，先写的先排列，后写的排在后面，每个盒子都占据自己的位置

  • position属性：

    • relative 生成相对定位元素，元素所占据的文档流的位置保留，元素本身相对自身原位置进行偏移。
    • absolute 生成绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于上一个设置了定位的父级元素（参照物）来进行定位，如果找不到，则相对于body元素进行定位。
    • fixed生成固定定位元素，元素脱离文档流，不占据文档流的位置，可以理解为漂浮在文档流的上方，相对于浏览器窗口进行定位。
    • static 默认值，没有定位，元素出现在正常的文档流中，相当于取消定位属性或者不设置定位属性。
    • inherit 从父元素继承 position 属性的值

  • 配合left/right/top/bottom属性设置偏移值：

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.con{
			width: 500px;
			height: 500px;
			border: 2px solid #000;
			margin: 50px auto;
			position: relative;	/*给absolute一个参照*/
		}
		.box1, .box2{
			width: 300px;
			height: 150px;
			margin: 10px;
		}
		.box1{
			background-color: blue;

		}
		.box2{
			background-color: yellow;
			/*position: absolute;	如果父级设置定位，参照父级；否则参照body*/
			left: 100px;
			top: 100px;
			/*position: fixed;	相对浏览器定位*/
		}
	</style>
</head>

<body>
	<div class="con">
		<div class="box1"></div>
		<div class="box2"></div>
	</div>
</body>
</html>

  • z-index属性来设置元素的层级，数值越大越靠前

    .box01{
    position:absolute;
    left:200px;
    top:100px;
    z-index:10;      /* 将元素层级设置为10 */
}

  • 绝对定位和固定定位的块元素和行内（内联）元素会自动转化为行内块元素（有啥意义？）
    2

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.con{
			width: 100px;
			height: 100px;
			margin: 50px auto;
			position: relative;	
			background-color: orange;
			border-radius: 14px;
		}
		.box1{
			width: 28px;
			height: 28px;
			background-color: red;
			position: absolute;
			left: 86px;
			top: -14px;
			border-radius: 14px;	/*变成圆，值就设为一半长度*/
			font-size: 9px;
			text-align: center;
			line-height: 28px;
			color: white;
		}
	</style>
</head>

<body>
	<div class="con">
		<div class="box1">99+</div>
	</div>
</body>
</html>

  • 总结：标签+样式（属性）+布局（定位）构成基础页面

  • Demo：固定在顶部的水平居中的菜单：有个居中的技巧

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.con{
			width: 800px;
			height: 200px;	
			background-color: black;
			color: white;
			font-size: 50px;
            /*这三个属性设置是一个技巧*/
			position: fixed;
			left: 50%;		/*让左端始终保持在浏览器中间位置*/
			margin-left: -400px;	/*拉回一半，就保证块元素在中间了*/
		}
		p{
			text-align: center;	/*块级元素，默认占据整行*/
		}
	</style>
</head>

<body>
	<div class="con">这是一个菜单...</div>
	<p>相关文字</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>相关文字</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>相关文字</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>相关文字</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
</body>
</html>

  • Demo：相对于浏览器窗口水平垂直居中的弹框

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.con{
			width: 400px;
			height: 400px;	
			border: 2px solid #000;
			color: blue;
			font-size: 20px;
			position: fixed;
			left: 50%;
			margin-left: -200px;
			top: 50%;
			margin-top: -200px;	/*同理*/
			z-index: 9999;
		}
		h2{
			margin: 10px;
			height: 40px;
		}
		.mask{
			width: 100%;
			height: 100%;
			background-color: black;
			position: fixed;
			opacity: 50%;	/*透明度*/
			z-index: 9998;
		}
		.pack{
			display: block;	/*包起来，方便后面控制*/
		}
	</style>
</head>

<body>
	<div class="pack">
		<div class="mask"></div>
		<div class="con">
			<h2>这是一个弹框你知道吗？</h2>
		</div>
	</div>
	<div style="font-size: 50px;">后面的还能看到</div>
</body>
</html>
布局练习
  • 第七章13节，值得一练

PS作图

  • 网易云有专业PS课程，这里只是用一下；还有视频制作课程没学完

  • 图片格式

    • psd
    • jpg：网页制作最常用
    • png
    • svg：矢量图格式，放大不失真
    • webp：将要取代jpg的图像格式
    • gif：制作小动画，透明图像边缘有锯齿

  • 格式选择：在网页制作中，要求尽可能小快速加载

    1、使用大幅面图片时，如果要使用不透明背景的图片，就使用jpg图片；如果要使用透明或者半透明背景的图片，就使用png图片；
2、使用小幅面图片或者图标图片时，如果图片含多种颜色，可以使用gif或png图片；如果图片是单色，而且要求有很好的显示效果，可以使用svg；如果是图片时动画的，可以使用gif

  • PS基础看笔记，这里主要学一下做对应尺寸的登录页效果图片，前端第一步

前端页面开发流程

  • 感觉UI的效果图就是提供切图…和大致样式，尺寸和兼容都是前端

    1. 创建页面项目目录

    2. 使用Photoshop对效果图切图（UI.psd），切出网页制作中需要的小图片

    3. 将装饰类图像合并，制作成雪碧图

    4. 结合Photoshop和代码编辑器，参照效果图，进行html和css代码书写，制作页面

登录页效果图

  • 切图：就是从效果图中把网页制作需要的小图片裁剪出来

    1、使用psd格式并且带有图层的图像切图

    2、在图像上用切片工具切出需要的小图

    3、双击切片，给切片命名

    4、将需要制作透明背景图像的切片的背景隐藏（关闭眼睛）

    5、执行菜单命令存储为web所用格式

    6、点选切片，设置切片的图片格式（jpg不支持背景透明）

    7、存储切片，选择“所有用户切片”，点存储(多个切片会自动存到所选文件夹中的images文件夹中)
    在这里插入图片描述

  • 练习制作效果图（没啥卵用就是练手）

    根据UI提供的效果图，严格按照尺寸大小建图，用到的技巧在ps文件夹

    1. 新建参考线（拖动）、选取选区测量大小（窗口-信息）

      先拖一个选区或者选中图层，再拉参考线可以直接贴上去

    2. 添加背景

    3. 添加切图或者新建选区

雪碧图
  • 一些PS技巧而已

前端布局

  • 根据效果图和准备好的切图，编写HTML和CSS文件（PC端）

  • 标签+样式（属性）+布局（定位）

    • 选择标签要考虑页面功能，是否超链接，是否为列表（循环赋值）等
    • 定义样式要设置合适的类名（层级关系）
    • reset.css将用到标签的默认样式按需重置，包括清除浮动、塌陷问题；注意引入顺序
    /* 将标签默认的间距设为0   */
body,p,h1,h2,h3,h4,h5,h6,ul,dl,dt,form,input{
	margin:0;
	padding:0;
}
/*  去掉默认的小圆点   */
ul{
	list-style:none;
}

/* 去掉默认的下划线   */
a{
	text-decoration:none;
}

/* 设置不倾斜   */
em{
	font-style:normal;
}

/*  去掉在IE下图片做链接时生成的边框  */
img{
	border:0px;
}

/* 让h标签继承body中的字体大小的设置   */
h1,h2,h3,h4,h5,h6{
	font-size:100%;
}
/* 清除浮动、解决margin-top塌陷   */
.clearfix:before,.clearfix:after{
	content:"";
	display:table;
}
.clearfix:after{
	clear:both;
}
.clearfix{
	zoom:1;
}


.fl{
	float:left;
}
.fr{
	float:right;
}

  • index文件夹是成品，可以学习参考（经验）

    • 熟练使用切片测量尺寸提取颜色

H5

  • HTML5和CSS3新功能
  • 针对兼容移动端（干掉Android和iOS，实现JS+H5自由）

CSS3新功能

  • 新增选择器

    1. E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素（即E是啥标签就找啥孩子）
    2. E:first-child：匹配元素类型为E且是父元素的第一个子元素
    3. E:last-child：匹配元素类型为E且是父元素的最后一个子元素
    <style type="text/css">            
    .list div:nth-child(2){	/*第二个子div*/
        background-color:red;
    }
</style>
......
<div class="list">
    <h2>1</h2>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
</div>
    1. E > F：E元素下面第一层子集
    2. E ~ F：E元素后面的兄弟元素
    3. E + F：紧挨着的后面的兄弟元素
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>权重</title>
    <style type="text/css">
        #box > h2{
            color: red;
        }
        #box ~ h2{
            color: orange;
            font-size: 30px;
        }
        #box + span{    /*h2就不行*/
            color: blue;
            font-size: 30px;
        }
    </style>
</head>
<body>
    <div id="box">
        <h2>这是第一层</h2>
        <div class="cont">
            <h2>这会是什么颜色</h2>
        </div>
    </div>
    <span>紧挨的兄弟元素</span>
    <p>兄弟元素1</p>
    <h2>兄弟元素2</h2>
</body>
</html>
    1. E[attr]：含有attr属性的元素
    <style type="text/css">
    div[data-attr='ok']{
        color:red;
    }
</style>
......
<div data-attr="ok">这是一个div元素</div>

E[attr='ok'] 含有attr属性的元素且它的值为“ok”
E[attr^='ok'] 含有attr属性的元素且它的值的开头含有“ok”
E[attr$='ok'] 含有attr属性的元素且它的值的结尾含有“ok”
E[attr*='ok'] 含有attr属性的元素且它的值中含有“ok”

  • 圆角

    border-top-left-radius:30px 60px;	/*设置左上角的圆角*/

  • 透明度

    .box{
    opacity:0.1;	/*整个盒子透明*/
    /* 兼容IE */
    filter:alpha(opacity=10); 
}
.box01{
    background-color: rgba(0,0,0,0.3);	/*只改变盒子背景透明度，不变文字*/
}
动画
  • 一般应用在专题网站上面，比较炫酷的效果，其他较少
过渡

  • transition：只要是属性**变化**的，都能设置上变化（过渡）

    1. transition-property 设置过渡的属性，比如：width height background-color
    2. transition-duration 设置过渡的时间，比如：1s 500ms
    3. transition-timing-function 设置过渡的运动方式，常用有 linear(匀速)|ease(缓冲运动)
    4. transition-delay 设置动画的延迟
    5. transition: property duration timing-function delay 同时设置四个属性（逗号间隔）
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.list{
			width: 300px;
			height: 300px;
			margin: 200px auto;
			background-color: orange;
			transition: width 1s ease, height 1s ease, background-color 2s ease;
		}
		.list:hover{
			width: 600px;
			height: 600px;
			background-color: blue;
		}
	</style>
</head>
<body>
	<div class="list"></div>
</body>
</html>
    • 一般都是配合伪类选择器hover使用，针对同一个类选择器
    • 也可用JS实现，但是动画的性能更好

  • Demo：弹出介绍文字

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.list{
			width: 317px;
			height: 448px;
			margin: 200px auto;
			position: relative;
			overflow: hidden;	/*溢出隐藏*/
		}
		.con{
			width: 317px;
			height: 100px;
			position: absolute;
			top: 448px;			/*挤下去、藏起来*/
			color: white;
			font-size: 25px;
			padding: 5px;	
			background-color: rgba(0,0,0,0.4);
			transition: all 500ms ease;		/*只要变化的都加动画属性*/
		}
		.list .con h3{
			font-size: 30px;
		}
		.list:hover .con{
			top: 240px;		/*拉上来*/
		}
	</style>
</head>
<body>
	<div class="list">
		<img src="imgs/guimie.png" alt="">
		<div class="con">
			<h3>鬼灭之刃</h3>
			<p>	日本大正时期，那是一个吃人的恶鬼横行的世界，一名家人被鬼杀死...</p>
		</div>
	</div>
</body>
</html>

在这里插入图片描述

变换

  • transform

    1. translate(x,y) 设置盒子位移
    2. scale(x,y) 设置盒子缩放
    3. rotate(deg) 设置盒子旋转
    4. skew(x-angle,y-angle) 设置盒子斜切
    5. perspective 设置透视距离（例如三维旋转时，近大远小）
    6. transform-style flat | preserve-3d 设置盒子是否按3d空间显示
    7. translateX、translateY、translateZ 设置三维移动
    8. rotateX、rotateY、rotateZ 设置三维旋转
    9. scaleX、scaleY、scaleZ 设置三维缩放
    10. tranform-origin 设置变形的中心点
    11. backface-visibility 设置盒子背面是否可见
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.list{
			width: 317px;
			height: 448px;
			margin: 50px auto;
			background-color: orange;
			transition: all 500ms ease;
		}
		.list:hover{
			transform: translate(100px,50px);	/*比定位布局的性能好*/
			transform: scale(2,2);	/*宽高比例*/
			transform: rotate(45deg);	/*默认顺时针*/
		}

		.box1, .box2, .box3{
			width: 317px;
			height: 448px;
			margin-left: 200px;
			display: inline-block;
			background-color: orange;
			transition: all 500ms ease;
		}
		.box1:hover{
			transform: rotate(45deg);
			transform-origin: left center;	/*以左侧中部为旋转中心*/
		}
		.box2:hover{
			transform: rotate(45deg);
			transform-origin: right center;	/*以左侧中部为旋转中心*/
		}
		/*都是相当于新建图层，不会影响其他div*/
	</style>
</head>
<body>
	<div class="list"></div>
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
</body>
</html>

  • Demo：三维旋转，注意要设置初始值

    • X轴：从左往右
    • Y轴：从上往下
    • Z轴：从内向外
    • 旋转方向：让轴正方向对自己，顺时针旋转
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		.list{
			width: 317px;
			height: 448px;
			margin: 50px auto;
			background-color: orange;
			transition: all 500ms ease;
			/*一定要先设置这个初始值，不然会闪*/
			transform: perspective(800px) rotateY(0deg);	/*透视值越小旋转的越明显  经验值*/	
		}
		.list:hover{
			transform: perspective(800px) rotateY(45deg);	/*默认顺时针*/
		}
	</style>
</head>
<body>
	<div class="list"></div>
	<div class="box1"></div>
	<div class="box2"></div>
	<div class="box3"></div>
</body>
</html>

  • Demo：翻转图片；
    一正一反贴合，同时翻转并隐藏背面即可

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻面</title>
    <style type="text/css">
        .box{
            width:300px;
            height:272px;
            margin:50px auto 0;
            transform-style:preserve-3d;	/*标准写法，在三维空间*/
            position:relative;            
        }
        .box .pic{
            width:317px;
            height:448px;
            position:absolute;
            background-color:cyan;/*基础样式*/
            left:0;
            top:0;  /*正反贴合*/
            transform:perspective(800px) rotateY(0deg);/*同时翻转*/
            backface-visibility:hidden;		/*翻转过来之后隐藏背面*/
            transition:all 500ms ease;  /*过度属性*/
        }
        .box .back_info{
            width: 317px;
            height: 448px;
            text-align: center;
            font-size: 28px;
            background-color: gold;
            position: absolute;
            left: 0;
            top: 0;
            transform: perspective(800px) rotateY(180deg);
            backface-visibility: hidden;	/*之前已经翻过去了，转过来需要再隐藏背面*/
            transition: all 500ms ease;            
        }
        .box:hover .pic{
            transform:perspective(800px) rotateY(-180deg);
        }
        .box:hover .back_info{
            transform:perspective(800px) rotateY(0deg);/*旋转是相对于初始值180的*/
        }
    </style>
</head>
<body>
    <div class="box">        
        <div class="pic"><img src="imgs/guimie.png"></div>
        <div class="back_info">日本大正时期，那是一个吃人的恶鬼横行的世界，一名家人被鬼杀死，妹妹也变成了鬼的主人公炭治郎，在猎鬼人的指引下，成为了鬼猎人组织“鬼杀队”的一员，为了让妹妹祢豆子变回人类，为了讨伐杀害家人的恶鬼，为了斩断悲伤的连锁而展开了战斗</div>
    </div>
</body>
</html>
关键帧

  • animation：前面的动画都需要hover触发，这里会类似于类选择器加入动画

    1. @keyframes 定义关键帧动画
    2. animation-name 动画名称
    3. animation-duration 动画时间
    4. animation-timing-function 动画曲线 linear(匀速) | ease(缓冲) | steps(步数)
    5. animation-delay 动画延迟
    6. animation-iteration-count 动画播放次数 n | infinite（无限次）
    7. animation-direction 动画结束后是否反向还原 normal | alternate
    8. animation-play-state 动画状态 paused(停止) | running(运动)
    9. animation-fill-mode 动画前后的状态 none(缺省)|forwards(结束时停留在最后一帧)|backwards(开始时停留在定义的开始帧)|both(前后都应用)
    10. animation:name duration timing-function delay iteration-count direction; 同时设置多个属性
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻面</title>
    <style type="text/css">
        @keyframes moving{
            from{
                width: 200px;
                height: 200px;
            }
            to{
                width: 300px;
                height: 300px;
            } 
        }
        .box{
            width:300px;
            height:272px;
            margin:50px auto 0;
            background-color: pink;
            animation: moving 1s ease 6 alternate;    /*name 动画时间 缓冲 5次 还原*/ 
            /*alternate 来回算两次，一般设置偶数次*/      
        }
        .box:hover{
            animation-play-state: paused;   /*暂停 鼠标拿走继续播放*/
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

  • Demo：风车旋转

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻面</title>
    <style type="text/css">
        @keyframes moving{
            from{
                transform: rotate(0deg);
            }
            to{
                transform: rotate(360deg);
            } 
        }
        .box{
            margin:50px auto;
            animation: moving 2s linear infinite;  
        }
        .box:hover{
            animation-play-state: paused;   /*暂停 鼠标拿走继续播放*/
        }
    </style>
</head>
<body>
    <div>
        <img src="imgs/fengche.png" alt="" class="box">
    </div>
</body>
</html>
    image-20210121003525428

  • Demo：加载动画

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>翻面</title>
    <style type="text/css">
        @keyframes loading{
            from{
                transform: scale(1,1); 
            }
            to{
                transform: scale(1,0.5);
            } 
        }

        .loading{
            width: 360px;
            height: 170px;
            border: 2px solid #000;
            margin: 100px auto;
            text-align: center;
            font-size: 20px;
            font-weight: bold;
        }
        .loading div{
            width: 30px;
            height: 100px;
            float: left;    /*inline-block*/
            border-radius: 12px;
            margin: 20px;
            animation: loading 500ms ease infinite alternate;
        }
        .loading div:nth-child(1){
            background-color: orange;
            animation-delay: 100ms;
        }
        .loading div:nth-child(2){
            background-color: blue;
            animation-delay: 250ms;
        }
        .loading div:nth-child(3){
            background-color: pink;
            animation-delay: 100ms;
        }
        .loading div:nth-child(4){
            background-color: yellow;
            animation-delay: 200ms;
        }
        .loading div:nth-child(5){
            background-color: green;
            animation-delay: 130ms;
        }
    </style>
</head>
<body>
    <div class="loading">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <p>loading...</p>
    </div>
</body>
</html>

在这里插入图片描述

  • Demo：走路动画；需要UI做出对应的状态切图并合并，使用关键帧steps属性实现

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>走路</title>
    <style type="text/css">
        @keyframes walking{
            from{
                left: 0;
            }
            to{
                left: -960px;    /*图片末尾*/
            } 
        }
        .loading{
            width: 120px;
            height: 180px;
            border: 2px solid #000;
            margin: 100px auto;
            overflow: hidden;
            position: relative;
        }
        .loading img{
            position: absolute;
            left: 0;
            top: 0;
            animation: walking 1s steps(8) infinite;    /*关键在steps属性，分成8帧，0到960分8次移动就形成了走路的状态*/
        }
        
    </style>
</head>
<body>
    <div class="loading">
        <img src="imgs/walks.png" alt="">
    </div>
</body>
</html>

移动端

视口

  • 视口是移动设备上用来显示网页的区域，一般会比移动设备可视区域大，宽度可能是980px或者1024px，目的是为了显示下整个为PC端设计的网页，这样带来的后果是移动端会出现横向滚动条，为了避免这种情况，移动端会将视口缩放到移动端窗口的大小。这样会让网页不容易观看
    在这里插入图片描述

  • 解决方案：改变视口大小为手机大小

    <!--快捷方式：meta:vp + tab-->
<!--不影响PC端-->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--谷歌浏览器可查看手机模式-->
视网膜屏幕

  • 视网膜屏幕指的是屏幕的物理像素密度更高的屏幕，比一般屏幕的物理像素点更小，常见有2倍的视网膜屏幕和3倍的视网膜屏幕，2倍的视网膜屏幕，它的物理像素点大小是一般屏幕的1/4,3倍的视网膜屏幕，它的物理像素点大小是一般屏幕的1/9
    在这里插入图片描述

  • retina屏幕会让一般图像看起来模糊，需要适配：
    使用比原来大一倍的图像，然后用css样式强制把图像的尺寸设为原来图像尺寸的大小

    <style>
.imgs{
    width: 400;		/*原图800px*/
    height: 200px; 
}
</style>
<img src="imgs/pic1x.jpg" alt="" class="imgs">

  • 了解即可，一般需要考虑视口和retina适配移动端

background新属性

  • background-size

    • length：用长度值指定背景图像大小。不允许负值。
    • percentage：用百分比指定背景图像大小。不允许负值。
    • auto：背景图像的真实大小。
    • cover：将背景图像等比缩放到完全覆盖容器，背景图像有可能超出容器。
    • contain：将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内（注意是“或”，即不一定宽高适配）
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background</title>
    <style type="text/css">
        #box{
            width: 200px;
            height: 300px;
            border: 2px solid #000;
            margin: 100px auto;
            background: url("imgs/guimie.png") no-repeat;
            /*background-size: 200px 200px;   /*length*/
            background-size: contain; 
        }
    </style>
</head>
<body>
    <div id="box"></div>
</body>
</html>
适配布局
  • 全适配：响应式布局+流体布局（一套页面）；根据业务需求，在用户多的一端布局（多数人喜欢即可，其他的就交给响应布局）
  • 移动端适配：（两套页面）
    • 流体布局+少量响应式（PC端）
    • 基于rem的布局（移动端）
流体布局

  • 流体布局，就是使用百分比来设置元素的宽度，元素的高度按实际高度写固定值

  • 流体布局中，元素的边线无法用百分比

    • 使用样式中的计算函数 calc() 来设置宽度
    • 使用 box-sizing 属性将盒子设置为从边线计算盒子尺寸（常用）
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background</title>
    <style type="text/css">
        body{
            margin: 0;
        }
        .box a{
            display: block;
            float: left;
            /*width: calc(25% - 4px);  注意这个减号，要空格*/
            width: 25%;
            box-sizing: border-box;
            height: 80px;
            border: 2px solid #000;
            background-color: yellow; 
            font-size: 16px;
            text-decoration: none;
            text-align: center;
            line-height: 80px; 
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="">首页</a>
        <a href="">个人中心</a>
        <a href="">解决方案</a>
        <a href="">企业微信</a>
    </div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述

响应式布局

  • 上面发现，手机端会将盒子压窄，可以用响应式布局换配合流式布局行显示

  • 响应式布局使用媒体查询的方式，通过查询浏览器宽度，不同的宽度应用不同的样式块，每个样式块对应的是该宽度下的布局方式，从而实现响应式布局

  • 响应式布局的页面可以适配多种终端屏幕（pc、平板、手机）

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background</title>
    <style type="text/css">
        body{
            margin: 0;
        }
        .box a{
            display: block;
            float: left;
            width: 23%;
            box-sizing: border-box;
            margin: 1%; /*左右两个 2%*/
            height: 80px;
            border: 2px solid #000;
            background-color: yellow;
            font-size: 16px;
            text-decoration: none;
            text-align: center;
            line-height: 80px; 
        }
        @media (max-width: 800px){  /*少于800归这管*/
            .box a{
                width: 46%;
                margin: 2%;
            }
        }
        /*少于400归这管 不冲突？不，但顺序得对不能写在上面*/
        @media (max-width: 400px){  
            .box a{
                width: 94%;
                margin: 3%;     /*一行一个*/
            }
        }
    </style>
</head>
<body>
    <div class="box">
        <a href="">首页</a>
        <a href="">个人中心</a>
        <a href="">解决方案</a>
        <a href="">企业微信</a>
    </div>
</body>
</html>
rem布局

  • em 和rem单位
    em单位是参照元素自身的文字大小来设置尺寸，rem指的是参照根节点的文字大小，根节点指的是html标签，设置html标签的文字大小，其他的元素相关尺寸设置用rem，这样，所有元素都有了统一的参照标准；

  • 借助JS改变html标签内文字大小，实现等比缩放；

  • 本质就是参照标准可以自定义并灵活改变

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background</title>
    <style type="text/css">
        .box1{
            font-size: 15px;    /*浏览器最小12px，不要小于12，不然有坑*/
            width: 2em;
            height: 1em;
            background-color: brown;
            margin-bottom: 10px;
        }

        .box2{
            font-size: 25px;
            width: 2em;
            height: 1em;
            background-color: purple;
        }

    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en" style="font-size: 30px;">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background</title>
    <style type="text/css">
        .box1{
            font-size: 15px;
            width: 2rem;
            height: 1rem;
            background-color: brown;
            margin-bottom: 10px;
        }

        .box2{
            font-size: 25px;
            width: 2rem;
            height: 1rem;
            background-color: purple;
        }

    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
</html>

在这里插入图片描述

// set_root.js
(function(){
	var calc = function(){
		var docElement = document.documentElement;
		var clientWidthValue = docElement.clientWidth > 750 ? 750 : docElement.clientWidth;
		docElement.style.fontSize = 20*(clientWidthValue/375) + 'px';
	}
	calc();
	window.addEventListener('resize',calc);
})();

  • px转rem每次都要算，有一个CSS的px值转rem值的Sublime Text 3自动完成插件

    • 下载地址及使用说明
    • JS中设置以20px为默认大小（iPhone6），适配retina-UI，需要将UI切图尺寸除以2，再除以20px，综上px_to_rem为40
    • 即只需要严格按照UI效果图尺寸制作，使用px单位（无论是切图还是标签，会提示自动转rem单位）
    px_to_rem: 40
max_rem_fraction_length: 6
available_file_types: [".css", ".less", ".sass", ".html"]
布局实例

  • 切图、雪碧图、前端页面

    • UI效果图要大一倍，制作时减半

  • 成品放在文件夹index_phone

    • 使用一个div将整个屏幕包住，使用绝对定位做下面的菜单栏，用fixed在为微信会有bug：
    .main_wrap{
	position:absolute;
	background-color:gold;
	left:0px;
	right:0px;
	top:0px;
	bottom:0px;		/*技巧，将所有边拉到屏幕边界*/
}

前缀

  • 为了让CSS3样式兼容，需要将某些样式加上浏览器前缀；有些不需要加，有些只需要加一部分

    • -ms- 兼容IE浏览器
    • -moz- 兼容firefox
    • -o- 兼容opera
    • -webkit- 兼容chrome 和 safari
    div{    
    -ms-transform: rotate(30deg);        
    -webkit-transform: rotate(30deg);    
    -o-transform: rotate(30deg);        
    -moz-transform: rotate(30deg);    
    transform: rotate(30deg);
}

  • 自动添加浏览器前缀

    可以在Sublime text中通过package control 安装 autoprefixer

Autoprefixer在Sublime text中的设置：
1、preferences/key Bindings-User (快捷键)
{ "keys": ["ctrl+alt+x"], "command": "autoprefixer" }

2、Preferences>package setting>AutoPrefixer>Setting-User
{
    "browsers": ["last 7 versions"],
    "cascade": true,
    "remove": true
}
last 7 versions：最新的浏览器的7个版本
cascade：缩进美化属性值
remove：是否去掉不必要的前缀

标签

  • H5新增标签

    • <header> 页面头部、页眉
    • <nav>页面导航
    • <article> 一篇文章
    • <section> 文章中的章节
    • <aside> 侧边栏
    • <footer> 页面底部、页脚

  • 音频视频

    • <audio>
    • <video>
    • 但这个不支持flv，一般用第三方插件

  • 低版本浏览器兼容新标签

    <script type="text/javascript" src="//cdn.bootcss.com/html5shiv/r29/html5.js"></script>

  • 新增表单控件

    <label>网址:</label><input type="url" name="" required><br><br> 
<label>邮箱:</label><input type="email" name="" required><br><br> 
<label>日期:</label><input type="date" name=""><br><br> 
<label>时间:</label><input type="time" name=""><br><br> 
<label>星期:</label><input type="week" name=""><br><br> 
<label>数量:</label><input type="number" name=""> <br><br>
<label>范围:</label><input type="range" name=""><br><br> 
<label>电话:</label><input type="tel" name=""><br><br> 
<label>颜色:</label><input type="color" name=""><br><br> 
<label>搜索:</label><input type="search" name=""><br><br>
    • 由于在不同浏览器效果不同，实际开发中不用

JS

  • JavaScript是运行在浏览器端的脚步语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互
  • Node Package包管理（后续）

嵌入页面

  • 行间事件

    <input type="button" name="" onclick="alert('ok！');">

  • 页面script标签

    <script type="text/javascript">        
    alert('ok！');
</script>

  • 外部引入

    <script type="text/javascript" src="js/index.js"></script>

变量

  • JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定。 定义变量需要用关键字 var
  • 5种基本类型
    • number 数字类型
    • string 字符串类型
    • boolean 布尔类型 true 或 false
    • undefined 变量声明未初始化，它的值就是undefined
    • null 表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null
    • object 复合类型
  • 分号结尾，//注释
  • 匈牙利命名风格：配合驼峰命名法
    • 对象o Object 比如：oDiv
    • 数组a Array 比如：aItems
    • 字符串s String 比如：sUserName
    • 整数i Integer 比如：iItemCount
    • 布尔值b Boolean 比如：bIsComplete
    • 浮点数f Float 比如：fPrice
    • 函数fn Function 比如：fnHandler
    • 正则表达式re RegExp 比如：reEmailCheck

获取元素

  • 可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到html对象，然后将它赋值给一个变量

    <script type="text/javascript">
    var oDiv = document.getElementById('div1');
</script>
....
<div id="div1">这是一个div元素</div>

  • 上面的语句，如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载，解决方案：

    • 将javascript放到页面最下边
    • 将javascript语句放到window.onload函数里，获取元素的语句会在页面加载完后才执行
    <script type="text/javascript">
    window.onload = function(){	// 页面加载完后执行后面的函数
        // 直接设置属性
        document.getElementById('div1').style.color='red';
        var oDiv = document.getElementById('div1');
        oDiv.style.fontSize='30px';	// 属性赋值，注意属性名不能用 -
        oDiv.id = "div";
        var sId = oDiv.id;	// 获取id属性名称
        
        var oDiv2 = document.getElementById('div2');
        // 这个特殊，不能通过class获取类名（内部关键字）
        oDiv2.className = "div";
    }
</script>
....
<div id="div1">这是一个div元素</div>
<div class="div2" id="div2">这是二个div元素</div>
    • 除了上面的 . 操作属性，还可以使用 []
    <script type="text/javascript">

    window.onload = function(){
        var oInput1 = document.getElementById('input1');
        var oInput2 = document.getElementById('input2');
        var oA = document.getElementById('link1');
        // 读取属性
        var sVal1 = oInput1.value;
        var sVal2 = oInput2.value;
        var sColor = "color";
        // 写(设置)属性
        // oA.style.sVal1 = sVal2; 没反应，而且不报错哦！牛逼吧
        oA.style[sVal1] = sVal2;   
        oA.style[sColor] = "red";
    }
</script>
......
<input type="text" name="setattr" id="input1" value="fontSize">
<input type="text" name="setnum" id="input2" value="30px">
<a href="http://www.itcast.cn" id="link1">传智播客</a>
    • 写JS千万别想当然，它都不给你报错！

  • innerHTML：读取或者写入标签包裹的内容

    <script type="text/javascript">
    window.onload = function(){
        var oDiv = document.getElementById('div1');
        //读取
        var sTxt = oDiv.innerHTML;
        alert(sTxt);
        //写入，还可以塞入标签哦！
        oDiv.innerHTML = '<a href="http://www.itcast.cn">传智播客<a/>';
    }
</script>
......
<div id="div1">这是一个div元素的内容</div>

  • 通过标签获取元素：需要分别赋值，可以在已获取对象基础上获取标签

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>通过标签获取元素</title>
	<script type="text/javascript">
		window.onload = function(){

			// 通过标签名称获取li元素，生成一个选择集（数组），赋值给aLi
			var aLi = document.getElementsByTagName('li');
			// 读取选择集内元素的个数
			//alert(aLi.length);  // 弹出13
			var iLen = aLi.length;
            
            // 不能给选择集设置样式属性
			//aLi.style.backgroundColor = 'gold';
			//给一个li设置背景色
			aLi[0].style.backgroundColor = 'gold';
			//同时给所有的li加背景色
			for(var i=0;i<iLen;i++)
			{
				aLi[i].style.backgroundColor = 'gold';
			}


			var oUl = document.getElementById('list1');
            // 在已获取对象基础上选择标签（层级选择器）
			var aLi2 = oUl.getElementsByTagName('li');
			var iLen2 = aLi2.length;
			for(var i=0;i<iLen2;i++)
			{
				if(i%2==0)
				{
					aLi2[i].style.backgroundColor = 'gold';
				}
			}

		}

	</script>
</head>
<body>
	<ul id="list1">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
	</ul>

	<ul id="list2">
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
	</ul>
</body>
</html>

函数

  • 函数定义与执行

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>function</title>
    <script type="text/javascript">
        function fuMyFunc(){
            // alert("Hello World!");
            var oDiv = document.getElementById('box1');
            oDiv.style.color = "red";
            oDiv.style.fontSize = "30px";
        }
    </script>
</head>
<body>
    <div id="box1">这是一个DIV元素</div>
    <input type="button" value="DIV" name="" onclick="fuMyFunc()">
</body>
</html>

  • 提取行间事件：
    在html行间调用的事件可以提取到JS中调用，从而做到结构与行为分离（把HTML里面的onclick属性拿掉，在window.onload里面加上）

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>function</title>
    <script type="text/javascript">
        window.onload = function(){
            var oInp = document.getElementById('inp');
            oInp.onclick = fuMyFunc;    // 不能加括号
        }

        function fuMyFunc(){
            // alert("Hello World!");
            var oDiv = document.getElementById('box1');
            oDiv.style.color = "red";
            oDiv.style.fontSize = "30px";
        }
    </script>
</head>
<body>
    <div id="box1">这是一个DIV元素</div>
    <input type="button" value="DIV" name="" id="inp">
</body>
</html>

  • 匿名函数：
    将匿名函数直接赋值给元素的事件属性来完成匿名函数的调用

    <script>
oInp.onclick = function(){	// 不写名称
            var oDiv = document.getElementById('box1');
            oDiv.style.color = "red";
            oDiv.style.fontSize = "30px";
        }
</script>

  • Demo：网页换肤
    操作函数完成link标签的href属性的切换

    /*skin01.css*/
body{
	background-color:green;
}

input{
	width:200px;
	height:50px;
	background-color:gold;
	border:0;
}
/*skin02.css*/
body{
	background-color:#ddd;
}

input{
	width:200px;
	height:50px;
	border-radius:25px;
	background-color:pink;
	border:0;
}

/*换肤*/
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/skin01.css" id="link01">
	<script type="text/javascript">
		window.onload = function(){

			var oBtn01 = document.getElementById('btn01');
			var oBtn02 = document.getElementById('btn02');
			var oLink = document.getElementById('link01');

			oBtn01.onclick = function(){
				oLink.href = "css/skin01.css";
			}
			oBtn02.onclick = function(){
				oLink.href = "css/skin02.css";
			}
		}
	</script>
</head>
<body>
	<input type="button" name="" value="皮肤一" id="btn01">
	<input type="button" name="" value="皮肤二" id="btn02">
</body>
</html>

  • 函数和变量预解析

    <script type="text/javascript">
		// 预解析会让变量声明提前，但未定义，是一种错误
		alert(iNum);	// 弹出undefined

		var iNum = 12;

		// 预解析会让函数的声明和定义一起提前
		myFunc();	// 从而可以把大段函数定义写在后面，在前面声明

		function myFunc(){
			alert("一个函数");
		}
</script>

  • 函数传参

    <script type="text/javascript">
    function fnAlert(a){
        alert(a);
    }
    fnAlert(12345);
</script>

  • 函数返回值

    <script type="text/javascript">
    function fnAdd(iNum01,iNum02){
        var iRs = iNum01 + iNum02;
        return iRs;
        alert('here!');
    }

    var iCount = fnAdd(3,4);
    alert(iCount);  //弹出7
</script>

分支计算

  • 加法运算：注意input得到的和Python一样，是字符串，需要变成数字

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		window.onload =function(){

			var oInput01 = document.getElementById('input01');
			var oInput02 = document.getElementById('input02');
			var oBtn = document.getElementById('btn');

			oBtn.onclick = function(){
				var iVal01 = parseInt(oInput01.value);	//input得到的是字符串
				var iVal02 = parseInt(oInput02.value);

				alert(iVal01+iVal02);
                
                var iNum03 = 0;
				var iNum04 = 10;
				alert(iNum03%iNum04);  // 0模一个数，弹出0
                
                var iNum01 = 2;
				var sNum01 = '2';
                /*
                // 用 == 弹出相等
                // 两边类型相同用==
                if(iNum01==sNum01){
                    alert('相等');
                }
                else{
                    alert('不相等');
                }
                */
                // 两边类型不同用===
                if(iNum01===sNum01){	// 先判断类型
					alert('相等');
                }
                else{
                    alert('不相等');
                }
                
                if(!4>3){	// 否定的运算优先级较低
                    alert('大于')
                }
                else if(iNum04>10){		// elif
                    alert("else if")
                }
                else{
                    alert('不大于')
                }
		}
	</script>
</head>
<body>
	<input type="text" name="" id="input01"> ＋
	<input type="text" name="" id="input02">
	<input type="button" name="" value="相加" id="btn">
</body>
</html>
    • 算术运算符： +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)
    • 赋值运算符：=、 +=、 -=、 *=、 /=、 %=
    • 条件运算符：==、===、>、>=、<、<=、!=、&& (且)、|| (或)、! (否)

  • switch：相比if else性能更高

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		window.onload = function(){
			var iWeek = 3;
			var oBody = document.getElementById('body01');
			// 随着星期切换北京
			switch (iWeek){
				case 1:
					oBody.style.backgroundColor = 'gold';
					break;
				case 2:
					oBody.style.backgroundColor = 'green';
					break;
				case 3:
					oBody.style.backgroundColor = 'pink';
					break;
				case 4:
					oBody.style.backgroundColor = 'yellowgreen';
					break;
				case 5:
					oBody.style.backgroundColor = 'lightblue';
					break;
				default:
					oBody.style.backgroundColor = 'lightgreen';
			}
		}
	</script>
</head>
<body id="body01">
</body>
</html>

数组

  • 定义

    //对象的实例创建
var aList = new Array(1,2,3);	// python中有__new__()方法，在init之前

//直接量创建
var aList2 = [1,2,3,'asd'];		// 数组类型可以不同

  • 操作方法

    var aList = [1,2,3,4];
alert(aList.length); // 弹出4
alert(aList[0]); 	 // 弹出1

alert(aList.join('-')); // 弹出 1-2-3-4	和python中相同

aList.push(5);		// 压入5
aList.unshift(5);	// 从前面增加5	不应该是shift增加吗？
aList.pop();		// 弹出最后元素
aList.shift();		// 从前面删除

aList.reverse();	// 翻转数组

alert(aList.indexOf(2));	// 返回数组中元素第一次出现的索引值

aList.splice(2,1,7,8,9); //从第2个元素开始，删除下1个元素，然后在此位置增加'7,8,9'三个元素

  • 多维数组

    var aList = [[1,2,3],['a','b','c']];	// 二维数组用的最多
alert(aList[0][1]); //弹出2;
alert(aList[0].length);

循环语句

  • for循环

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		window.onload = function(){
			var oUl = document.getElementById('list');
			var aList = ['美人鱼','疯狂动物城','魔兽','美国队长3','湄公河行动'];
			var iLen = aList.length;
			var sTr = '';

			for(var i=0;i<iLen;i++)
			{
                // 块元素，各占一行
				sTr += '<li>'+ aList[i]+ '</li>';	// 字符串拼接用加号
			}
			oUl.innerHTML = sTr;
		}
	</script>

	<style type="text/css">
		
		.list{
			list-style:none;
			margin:50px auto 0;
			padding:0;
			width:300px;
			height:305px;
			
		}
		.list li{
			height:60px;
			border-bottom:1px dotted #000;
			line-height:60px;
			font-size:16px;
		}
	</style>
</head>
<body>
	<ul class="list" id="list">
		<!-- <li>美人鱼</li>
		<li>美人鱼</li>
		<li>美人鱼</li>
		<li>美人鱼</li>
		<li>美人鱼</li> -->
	</ul>
</body>
</html>

  • 数组去重

    var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1];
var aList2 = [];

for(var i=0;i<aList.length;i++)
{	
    // 第一次遇到，肯定相等
    if(aList.indexOf(aList[i])==i)	// 使用indexOf()特性：返回第一个匹配值索引
    {
        aList2.push(aList[i]);
    }
}
alert(aList2);

组成

  • JS由三部分组成：
    • ECMAscript，javascript的语法（变量、函数、循环语句等语法）
    • DOM 文档对象模型，操作html和css的方法（例如：获取标签）
    • BOM 浏览器对象模型，操作浏览器的一些方法（例如：弹窗）

字符串

  • 合并操作：“ + ”

    var iNum01 = 12;
var iNum02 = 24;
var sNum03 = '12';
var sTr = 'abc';
alert(iNum01+iNum02);  //弹出36
alert(iNum01+sNum03);  //弹出1212 数字和字符串相加等同于字符串相加
alert(sNum03+sTr);     // 弹出12abc

  • parseInt()：将数字字符串转化为整数

    var sNum01 = '12';
var sNum02 = '24';
var sNum03 = '12.32';
alert(sNum01+sNum02);  //弹出1224
alert(parseInt(sNum01)+parseInt(sNum02))  //弹出36
alert(parseInt(sNum03))   //弹出数字12 将字符串小数转化为数字整数

alert( parseInt('123abc') );  // 弹出123
alert( parseInt('abc123') );  // 弹出NaN

  • parseFloat() ：将数字字符串转化为小数

    var sNum03 = '12.32'
alert(parseFloat(sNum03));  //弹出 12.32 将字符串小数转化为数字小数

  • split()：把一个字符串分隔成字符串组成的数组

    var sTr = '2017-4-22';
var aRr = sTr.split("-");	// 与join()相反
var aRr2= sTr.split("");	// 全劈开

alert(aRr);  //弹出['2017','4','2']
alert(aRr2);  //弹出['2','0','1','7','-','4','-','2','2']

  • charAt()：获取字符串中的某一个字符；indexOf()返回第一次出现的索引

    var sId = "#div1";
var sTr = sId.charAt(0);
alert(sTr); //弹出 #

  • substring()： 截取字符串 用法： substring(start,end)（不包括end）

    var sTr = "abcdefghijkl";
var sTr2 = sTr.substring(3,5);	// 索引从0开始
var sTr3 = sTr.substring(1);	// 1到所有

alert(sTr2); //弹出 de
alert(sTr3); //弹出 bcdefghijkl

  • toUpperCase()：字符串转大写；toLowerCase() 字符串转小写

    var sTr = "abcdef";
var sTr2 = sTr.toUpperCase();
alert(sTr2); //弹出ABCDEF

  • 反转

    var str = 'asdfj12jlsdkf098';
var str2 = str.split('').reverse().join('');

alert(str2);

定时器

  • 属于BOM

    /*
    定时器：
    setTimeout  只执行一次的定时器 
    clearTimeout 关闭只执行一次的定时器
    setInterval  反复执行的定时器
    clearInterval 关闭反复执行的定时器

*/

var time1 = setTimeout(myalert,2000);
var time2 = setInterval(myalert,2000);	// 用变量接收一般是为了清除

clearTimeout(time1);	// 清除定时器
clearInterval(time2);

function myalert(){
    alert('ok!');
}

var time = setInterval(function(){	// 匿名函数
    alert('ok!');
}, 1000);

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		window.onload = function(){
            // 盒子移动
			var oDiv = document.getElementById('div1');
			var iLeft = 0;
			var timer = setInterval(function(){

				iLeft += 3;
				oDiv.style.left = iLeft + 'px';

				if(iLeft>700)
				{
					clearInterval(timer);
				}

			},30);	// 经验值 30ms
		}
	</script>
	<style type="text/css">		
		.box{
			width:200px;
			height:200px;
			background-color:gold;
			position:absolute;
			left:0;
			top:100px;
		}
	</style>
</head>
<body>
	<div id="div1" class="box"></div>
</body>
</html>

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>function</title>
    <style>
        /*无缝滚动Demo*/
        *{
            margin:0;
            padding:0;
        }
        .box1{
            width:1700px;
            height:480px;
            border:1px solid #000;
            background-color:#f0f0f0;
            margin:50px auto 0;
            overflow:hidden;
            position: relative;
        }
        .con1{
            list-style: none;
            width:3400px;   /*两倍box1，容纳两组li*/
            height:480px;
            position:absolute;
            left:0;
            top:0;
        }
        .con1 li{
            float: left;
            width: 317px;
            height: 449px;
            margin: 11px;
        }

        .btn{
            position: relative;
            margin: 50px auto 0;
            width: 1700px;
            height: 50px;   /*两个div不能在同一行，用相对定位将左右箭头顶到下面*/
            /*只要不重合，都可以用相对布局“见缝插针”*/
        }
        .left, .right{
            width: 50px;
            height: 50px;
            background-color: gold;
            position: absolute;
            left: -120px;
            top: 320px;
            font-size: 30px;
            line-height: 50px;
            color: #000;
            font-family: 'Arial';
            text-align: center;
            cursor: pointer;
            border-radius: 15px;
            opacity: 0.7;
        }
        .right{
            left: 1800px;            
            top: 320px;          
        }
    </style>
</head>
<body>
    <div class="btn">
        <div class="left" id="btn01">&lt;</div>
        <div class="right" id="btn02">&gt;</div>
    </div>
    <div id="box1" class="box1">
        <ul id="con1" class="con1">
            <li><img src="imgs/guimie.png" alt=""></li>
            <li><img src="imgs/yiren.png" alt=""></li>
            <li><img src="imgs/zhoushu.png" alt=""></li>
            <li><img src="imgs/tunshi.png" alt=""></li>
            <li><img src="imgs/jinji.png" alt=""></li>
        </ul>
    </div>
    <script type="text/javascript">
        window.onload = function(){
            var oDiv = document.getElementById('box1');
            var oBtn01 = document.getElementById('btn01');
            var oBtn02 = document.getElementById('btn02');
            var oUl = oDiv.getElementsByTagName('ul')[0];  // Elements 得到的永远是集合，需要获取里面的第一个元素，即ul

            // 关键思想：将获得的li标签复制两份，一份展示一份滚动
            oUl.innerHTML = oUl.innerHTML + oUl.innerHTML
            var iLeft = 0;
            var iSpeed = -5;
            var iNowspeed = 0;

            oBtn01.onclick = function(){
                iSpeed = -5;
            }

            oBtn02.onclick = function(){
                iSpeed = 5;
            }
            // 当鼠标移入的时候
            oDiv.onmouseover = function(){
                iNowspeed = iSpeed; // +-2
                iSpeed = 0;
            }
            // 当鼠标移出的时候
            oDiv.onmouseout = function(){
                iSpeed = iNowspeed;
            }
            // 使用定时器滚动
            function moving(){
                iLeft += iSpeed;    // 位移
                if(iLeft < -1700){  // 向左滚完了
                    iLeft = 0;  // 拉回来
                }
                if(iLeft > 0){  // 初值为负，向右滚完了，拉回来
                    iLeft = -1700;
                }
                oUl.style.left = iLeft + 'px'; 
            }
            var time = setInterval(moving, 30);
        }
        
    </script>
</body>
</html>

在这里插入图片描述

  • 如果觉得挺酷就找自己喜欢的图片动手实践鸭；
  • 样式不对可以通过浏览器初步检查
时钟

  • 有一些不常见函数

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		window.onload = function(){
			var oDiv = document.getElementById('div1');

			function fnTimego(){

				var sNow = new Date();
				// 获取年份
				var iYear = sNow.getFullYear();

				// 获取月份，月份是从0到11，0表示一月，11表示十二月
				var iMonth = sNow.getMonth()+1;

				var iDate = sNow.getDate();

				// 星期是从0到6,0表示星期天
				var iWeek = sNow.getDay();

				var iHour = sNow.getHours();

				var iMinute = sNow.getMinutes();

				var iSecond = sNow.getSeconds();

				var sTr = '当前时间是：'+ iYear + '年'+ iMonth + '月'+ iDate+'日 ' + fnToweek(iWeek) + ' ' +fnTodou(iHour) + ':' + fnTodou(iMinute) + ':' + fnTodou(iSecond);

				oDiv.innerHTML = sTr;

			}


			// 刚开始调用一次，解决刚开始1秒钟空白的问题
			fnTimego();

			setInterval(fnTimego,1000);


			function fnToweek(n){

				if(n==0)
				{
					return '星期日';
				}
				else if(n==1){
					return '星期一';
				}
				else if(n==2){
					return '星期二';
				}
				else if(n==3){
					return '星期三';
				}
				else if(n==4){
					return '星期四';
				}
				else if(n==5){
					return '星期五';
				}
				else{
					return '星期六';
				}
			}


			function fnTodou(n){
				if(n<10)
				{
					return '0'+n;
				}
				else
				{
					return n;
				}
			}
		}
	</script>
	<style type="text/css">
		
		div{
			text-align:center;
			font-size:30px;
			color:pink;
		}

	</style>
</head>
<body>
	<div id="div1"></div>
</body>
</html>
倒计时

  • 就是算

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		window.onload = function(){
			var oDiv = document.getElementById('div1');
			function fnTimeleft(){
				//实际开发中需要读取后台的时间，可以通过ajax来读取
				var sNow = new Date();
				// 未来时间：4月30日晚24点
				var sFuture = new Date(2021,1,1,24,0,0);
				//计算还有多少秒
				var sLeft = parseInt((sFuture-sNow)/1000);
				//计算还剩多少天
				var iDays = parseInt(sLeft/86400);
				// 计算还剩多少小时
				var iHours  = parseInt((sLeft%86400)/3600);
				// 计算还剩多少分
				var iMinutes = parseInt(((sLeft%86400)%3600)/60);
				// 计算还剩多少秒
				var iSeconds = sLeft%60;
				var sTr = '距离2月1日还剩：'+ iDays + '天' + fnTodou(iHours) + '时' + fnTodou(iMinutes) + '分'+ fnTodou(iSeconds) + '秒';
				oDiv.innerHTML = sTr;
			}

			fnTimeleft();
			setInterval(fnTimeleft,1000);

			function fnTodou(n){

				if(n<10)
				{
					return '0'+n;
				}
				else{
					return n;
				}
			}
		}
	</script>
</head>
<style type="text/css">
	div{
		text-align:center;
		font-size:30px;
		color:pink;
	}
</style>
<body>
	<div id="div1"></div>
</body>
</html>

  • 倒计时弹框

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">		
		.menu{
			height:80px;
			background-color:gold;
			position:fixed;
			width:960px;
			top:0px;
			left:50%;
			margin-left:-480px;	/*居中技巧*/
		}
		p{
			text-align:center;
		}
		.popup{
			width:500px;
			height:300px;
			border:1px solid #000;
			background-color:#fff;
			position:fixed;
			left:50%;
			margin-left:-251px;
			top:50%;
			margin-top:-151px;
			z-index:9999;
		}
		.popup h2{
			background-color:gold;
			margin:10px;
			height:40px;
		}

		.mask{
			position:fixed;
			width:100%;
			height:100%;
			background-color:#000;
			left:0;
			top:0;
			opacity:0.5;
			z-index:9998;
		}
		.pop_con{
			display:none;
		}
	</style>

	<script>
		window.onload = function(){
			var oP = document.getElementById('time');
			var oWindow = document.getElementById('pop_con');
			var oBtn = document.getElementById('btn');

			var timer = 5;
			
			oBtn.onclick = function(){
				oWindow.style.display = 'block';	// 必须是字符串

				var time = setInterval(function(){
					timer--;
					oP.innerHTML = '还有'+timer+'秒钟关闭弹窗';
					if(timer==0){
						timer = 5;
						oWindow.style.display = 'none';
						clearInterval(time);
						oP.innerHTML = '还有'+timer+'秒钟关闭弹窗';// 复原
					}
				}, 1000)
			}
		}
	</script>
</head>
<body>
	<div class="menu">菜单文字</div>	
	<div class="pop_con" id="pop_con">
		<div class="popup">
			<h2>弹框的标题</h2>	
			<br>
			<br>
			<br>
			<p id="time">还有5秒钟关闭弹框</p>
		</div>
		<div class="mask"></div>
	</div>

	<input type="button" name="" value="弹出弹框" id="btn">

	<p>网页文字</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>网页文字</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>网页文字</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>网页文字</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>网页文字</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>网页文字</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>网页文字</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>网页文字</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>网页文字</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>网页文字</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>网页文字</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
</body>
</html>
    • 有一些细节需要体会积累

变量作用域

  • 全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问。
  • 局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问

封闭函数

  • 封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数

    (function(){
    alert('hello!');
})();	// 小括号代表执行

!function(){	// 第二种写法
    alert('hello!');
}();

  • 封闭函数可以==创造一个独立的空间==，在封闭函数内定义的变量和函数不会影响外部同名的函数和变量，可以避免命名冲突

  • 在页面上引入多个js文件时，用这种方式添加js文件比较安全

  • 因此也不能使用外部其他的变量，否则破坏其封闭性

常用内置对象(库)

document
  • document.getElementById 通过id获取元素
  • document.getElementsByTagName 通过标签名获取元素
  • document.referrer 获取上一个跳转页面的地址(需要服务器环境)
location

  • window.location.href 获取或者重定页面url地址

  • window.location.search 获取地址参数部分（即地址栏中问号后面的而部分：?a=123）

  • window.location.hash 获取页面锚点或者叫哈希值（即地址栏#后面的部分：#666）

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		var sUrl = document.referrer;	// 上一页地址；需要在服务器环境才能获取
		var oBtn = document.getElementById("btn");

		oBtn.onclick = function(){
			window.location.href = sUrl;	// 重定url
		}
	</script>
</head>
<body>
	<input type="button" name="" value="上一页" id="btn">
</body>
</html>

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		window.onload = function(){
			var oBody = document.getElementById('body01');
			var sData = window.location.search;
			alert(sData);

			var sHash = window.location.hash;
			alert(sHash);

			if(sData!='')
			{
				var aRr = sData.split("=");
				var iNum = aRr[1];
				
				if(iNum==1)
				{
					oBody.style.backgroundColor = 'gold';
				}
				else if(iNum==2)
				{
					oBody.style.backgroundColor = 'green';
				}
				else
				{
					oBody.style.backgroundColor = 'pink';
				}
			}
		}

	</script>
</head>
<body id="body01">
	<h1>页面</h1>
</body>
</html>
Math

  • Math.random 获取0-1的随机数

  • Math.floor 向下取整

  • Math.ceil 向上取整

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		
		var iPi = Math.PI;		

		var arr = [];

		for (var i=0;i<100;i++)
		{	
			// Math.random 只能返回从0到1之间的随机数，不包括0，也不包括1
			var iNum = Math.random();
			arr.push(iNum);
		}
		//alert(arr);	// 程序调试的第一种方法

		console.log(arr);	// 程序调试的第二种方法

		//向下取整，去掉小数部分
		alert(Math.floor(5.6)); // 弹出5

		//向上取整，去掉小数部分，整体加1
		alert(Math.ceil(5.2))

		// 10 - 20 之间的随机数
		var iN01 = 10;
		var iN02 = 20;
		var arr2 = [];

		for(var i=0;i<40;i++)
		{
			// 生成从10到20的随机数；下面是公式
			var iNum02 = Math.floor((iN02-iN01+1)*Math.random()) + iN01;
			arr2.push(iNum02);
		}
		console.log(arr2);	// alert会阻止程序的运行，log不会
        // 还可以用document.title
        document.title = iPi;	// 打印在title，好恶心
	</script>
</head>
<body>
	
</body>
</html>

jQuery

  • 是目前使用的最多的JS库；即对JS封装后的函数库

  • 原生JS如果不是要求很深入，可以学习jQuery为主，官方网站

  • 加载方式：下载，min.js是压缩版本

    <script type="text/javascript" src="js/jquery-1.12.2.js"></script>
<!--注意要单独引入，不能在中间插入代码-->

  • 比window.onload执行更快

    <script type="text/javascript">
    $(document).ready(function(){
         ......
    });
    
	// 简写
	$(function(){
     ......
	});
</script>

选择器

  • 选择规则和css样式相同

  • 使用length属性判断是否选择成功

  • 选择器变量命名一般以 $ 开头

  • 设置数字不用引号，带px 要用引号避免出错

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            var $div1 = $('.box');
            var $div2 = $('#box1');
            var $ul = $('.list');
            var $li = $('.list li');    // 完美支持css选择器

            var sTs = $div1.css({'fontSize'});	// 不赋值就是读取，原生JS不行
            alert(sTs);
            
            // 可以批量操作
            $div1.css({     
                'color': 'red'
            });

            // 样式可以写成驼峰式
            $ul.css({
                'listStyle':'none'
            });

            // 属性都要用引号
            $li.css({
                'font-size':'30px'
            });
        });

    </script>
</head>
<body>
    <div class="box">DIV1</div>
    <div class="box">DIV1</div>
    <div id="box1">DIV2</div>
    <ul class="list" style="">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>

  • 选择器过滤

    结合标签选择器过滤

    $('div').has('p'); // 选择包含p元素的div元素
$('div').not('.myClass'); //选择class不包含myClass的div元素
$('div').filter('.myClass'); //选择class等于myClass的div元素
$('div').eq(5); //选择第6个div元素

  • 选择集转移

    $('div').prev(); //选择div元素前面紧挨的同辈元素
$('div').prevAll(); //选择div元素之前所有的同辈元素
$('div').next(); //选择div元素后面紧挨的同辈元素
$('div').nextAll(); //选择div元素后面所有的同辈元素
$('div').parent(); //选择div的父元素
$('div').children(); //选择div的所有子元素
$('div').siblings(); //选择div的同级元素；这个很常用
$('div').find('.myClass'); //选择div内的class等于myClass的元素

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
    <script>
        $(function(){
            
            var $div_p = $("div:has('p')"); // 注意引号的使用，一般用下面的方式
            // var $div_p = $('div').has('p');
            alert($div_p.length);
            $div_p.css({
                'color':'green',
                'font-size':'30px'
            });
        });

    </script>
</head>
<body>
    <div>
        <p>Hello</p>
    </div>
</body>
</html>
    • 其他选择器可以查手册
    • 注：没选中也不会报错（容错）

  • 操作样式类名：

    $("#div1").addClass("divClass2") //为id为div1的对象追加样式divClass2
$("#div1").removeClass("divClass")  //移除id为div1的对象的class名为divClass的样式
$("#div1").removeClass("divClass divClass2") //移除多个样式
$("#div1").toggleClass("anotherClass") //重复切换anotherClass样式	 见后续

  • 绑定click事件

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			// 绑定click事件
			$('#btn').click(function(){
				/*
				if($('.box').hasClass('col01'))
				{
					$('.box').removeClass('col01');
				}
				else
				{
					$('.box').addClass('col01');
				}
				// 简化成下面的写法：
				*/
				$('.box').toggleClass('col01');	// 有就移除，没有就加上
			})
		})
	</script>
</head>
<style type="text/css">
	.box{
		width:200px;
		height:200px;
		background-color:gold;
	}
	.col01{
		background-color:green;
	}

</style>
<body>
	<input type="button" name="" value="切换样式" id="btn">
	<div class="box">div元素</div>
</body>
</html>

  • Demo：选项卡；使用jQuery动态改变样式

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.btns input{
			width:100px;
			height:40px;
			background-color:#ddd;
			border:0;
		}

		.btns .current{
			background-color:gold;
		}


		.cons div{	/*层级*/
			width:500px;
			height:300px;
			background-color:gold;
			display:none;
			text-align:center;
			line-height:300px;
			font-size:30px;
		}

		.cons .active{
			display: block;
		}

	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			var $btn = $('.btns input');
			var $div = $('.cons div');

			$btn.click(function(){
				// this 指的是原生的this，它表示当前点击的对象，使用jquery的对象需要用$(this)

				// 当前点击的按钮加上current样式后，除了当前，其他的按钮去掉current样式
				$(this).addClass('current').siblings().removeClass('current');

				//alert( $(this).index() ; // 弹出当前按钮的索引值
				// 当前点击的按钮对应索引值的div加上active样式，其他的去掉active样式
				$div.eq( $(this).index() ).addClass('active').siblings().removeClass('active');	// 索引从0开始哦！
			})
		})

	</script>
</head>
<body>
	<div class="btns">
		<input type="button" name="" value="01" class="current">
		<input type="button" name="" value="02">
		<input type="button" name="" value="03">
	</div>	
	<div class="cons">
		<div class="active">选项卡一的内容</div>
		<div>选项卡二的内容</div>
		<div>选项卡三的内容</div>
	</div>
</body>
</html>

特殊效果

  • fadeOut() 淡出

  • fadeToggle() 切换淡入淡出

  • hide() 隐藏元素

  • show() 显示元素

  • toggle() 切换元素的可见状态

  • slideDown() 向下展开

  • slideUp() 向上卷起

  • slideToggle() 依次展开或卷起某个元素；发现规律了吗？

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.cons{
			width:500px;
			height:300px;
			background-color:gold;
			text-align:center;
			line-height:300px;
			font-size:30px;
			display:none;		/*注意，要先设置不显示*/
		}

	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			var $div = $('.cons');
			var $btn = $('#btn');

			$btn.click(function(){
				// $div.fadeIn(1000, 'swing', function(){
				// 	alert("动画结束");
				// });

				$div.fadeToggle(1000, 'swing', function(){	// 点击隐藏，点击显示
					alert("动画结束");
				});
			})
		})

	</script>
</head>
<body>
	<div class="cons">BOX</div>
	<input type="button" name="" value="特效" id="btn">
</body>
</html>

  • 链式操作：

    // 一下为一句代码：
$('#div1') 		// id为div1的元素
.children('ul') //该元素下面的ul子元素
.slideDown('fast') //高度从零变到实际高度来显示ul元素
.parent()  		//跳到ul的父元素，也就是id为div1的元素
.siblings()  	//跳到div1元素平级的所有兄弟元素
.children('ul') //这些兄弟元素中的ul子元素
.slideUp('fast');  //从实际高度变换到零来隐藏ul元素

  • Demo：层级菜单

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>层级菜单</title>
	<style type="text/css">
		body{
			font-family:'Microsoft Yahei';
		}
		body,ul{
			margin:0px;
			padding:0px;
		}
		
		ul{list-style:none;}


		.menu{
			width:200px;
			margin:20px auto 0;
		}

		.menu .level1,.menu li ul a{
			display:block;
			width:200px;
			height:30px;
			line-height:30px;
			text-decoration:none;
			background-color:#3366cc;
			color:#fff;
			font-size:16px;
			text-indent:10px;			
		}

		.menu .level1{
			border-bottom:1px solid #afc6f6;
			
		}

		.menu li ul a{
			font-size:14px;
			text-indent:20px;
			background-color:#7aa1ef;
					
		}

		.menu li ul li{
			border-bottom:1px solid #afc6f6;
		}

		.menu li ul{
			display:none;
		}

		.menu li ul.current{
			display:block;
		}

		.menu li ul li a:hover{
			background-color:#f6b544;
		}


	</style>
	
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('.level1').click(function(){
				//当前点击的元素紧挨的同辈元素向下展开，再跳到此元素的父级(li),再跳到此父级的其他的同辈元素(li),选择其他同辈元素(li)的子元素ul，然后将它向上收起。

				// 通过stop() 可以修正疯狂点击导致的持续动画的问题
				$(this).next().stop().slideToggle().parent().siblings().children('ul').slideUp();
			})

		})

	</script>
</head>
<body>
	<ul class="menu">
		<li>
			<a href="#" class="level1">水果</a>
			<ul class="current">
				<li><a href="#">苹果</a></li>
				<li><a href="#">梨子</a></li>
				<li><a href="#">葡萄</a></li>
				<li><a href="#">火龙果</a></li>
			</ul>
		</li>
		<li>
			<a href="#" class="level1">海鲜</a>
			<ul>
				<li><a href="#">蛏子</a></li>
				<li><a href="#">扇贝</a></li>
				<li><a href="#">龙虾</a></li>
				<li><a href="#">象拔蚌</a></li>
			</ul>
		</li>
		<li>
			<a href="#" class="level1">肉类</a>
			<ul>
				<li><a href="#">内蒙古羊肉</a></li>
				<li><a href="#">进口牛肉</a></li>
				<li><a href="#">野猪肉</a></li>				
			</ul>
		</li>
		<li>
			<a href="#" class="level1">蔬菜</a>
			<ul>
				<li><a href="#">娃娃菜</a></li>
				<li><a href="#">西红柿</a></li>
				<li><a href="#">西芹</a></li>
				<li><a href="#">胡萝卜</a></li>
			</ul>
		</li>
		<li>
			<a href="#" class="level1">速冻</a>
			<ul>
				<li><a href="#">冰淇淋</a></li>
				<li><a href="#">湾仔码头</a></li>
				<li><a href="#">海参</a></li>
				<li><a href="#">牛肉丸</a></li>
			</ul>
		</li>
	</ul>
</body>
</html>
<!--先构思标签如何设计，可以用PS或者草稿设计出大致的动态效果-->
<!--然后结合jQuery提供的选择器和特殊效果实现；尽量用特效，都封装好了-->

  • 动画：通过animate方法可以设置元素某样式属性值上的动画；类似CSS3中的transition

    • 都叫属性，id属性，类属性，样式属性…

  • 可以设置一个或多个属性值

  • 以选项卡为例，这里样式设计需要一些技巧简化JS代码 ：

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.btns input{
			width:100px;
			height:40px;
			background-color:#ddd;
			border:0;
			outline: none;	/*去掉按钮边线*/
		}
		.btns .current{
			background-color: pink;
		}

		.cons{
			width:500px;
			height:300px;
			overflow: hidden;
			position: relative;
		}

		.slide{	/*层级*/
			width:1500px;
			height:300px;
			position: absolute;
			left: 0;
		}
		.slide div{
			width:500px;
			height:300px;
			float: left;
			background-color:gold;
			text-align:center;
			line-height:300px;
			font-size:30px;
		}
	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			var $btn = $('.btns input');
			var $div = $('.cons .slide');

			$btn.click(function(){
				$(this).addClass('current').siblings().removeClass('current');
				// 将当前按钮对应的div移动到“窗口”，也等价于将整个窗口内部的div移动；（移窗口肯定不行...）
				$div.animate({
					'left':-500*$(this).index()
				});
			})
		})

	</script>
</head>
<body>
	<div class="btns">
		<input type="button" name="" value="01" class="current">
		<input type="button" name="" value="02">
		<input type="button" name="" value="03">
	</div>	
	<div class="cons">
		<div class="slide">
			<div>选项卡一的内容</div>
			<div>选项卡二的内容</div>
			<div>选项卡三的内容</div>
		</div>
	</div>
</body>
</html>
    • 还可以设置时间、添加函数
    $('#div1').animate({
    width:300,
    height:300
	},1000,'swing',function(){
   		alert('done!');
	}
);

// 参数可以写成数字表达式子
$('#div1').animate({
    width:'+=100',
    height:300
},1000,'swing',function(){
    alert('done!');
});

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){

			$('#btn').click(function(){

				$('.box').animate({'width':600},1000,function(){

					$('.box').animate({'height':400},1000,function(){

						$('.box').animate({'width':0, 'height':0});	// 不能用display：none  用show()

					});
				});
			})
			$('#btn2').click(function(){
				$('.box2').stop().animate({'width':'+=100'});
			})
		})
	</script>
	<style type="text/css">
		.box,.box2{
			width:100px;
			height:100px;
			background-color:gold;	
		}
	</style>
</head>
<body>
	<input type="button" name="" value="动画" id="btn">
	<div class="box"></div>
	<br />
	<br />
	<input type="button" name="" value="动画" id="btn2">
	<div class="box2"></div>
</body>
</html>

滚动

  • 元素尺寸：之前通过设置样式属性不赋值可以直接获取；还有直接可调用的函数

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){

			var $div = $('.box');

			// 盒子内容的尺寸
			console.log($div.width());
			console.log($div.height());

			// 盒子内容加上padding的尺寸
			console.log($div.innerWidth());
			console.log($div.innerHeight());

			//盒子的真实尺寸，内容尺寸+padding+border；最常用
			console.log($div.outerWidth());
			console.log($div.outerHeight());

			// 盒子的真实尺寸再加上margin
			console.log($div.outerWidth(true));
			console.log($div.outerHeight(true));
		})
	</script>
	<style type="text/css">
		
		.box{
			width:300px;
			height:200px;
			padding:20px;
			border:10px solid #000;
			margin:20px;
			background-color:gold;
		}
	</style>
</head>
<body>
	<div class="box"></div>
</body>
</html>
    • offset()：获取元素相对浏览器位置
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		
		$(function(){

			var $div = $('.box');

			$div.click(function(){		
				var oPos = $div.offset();
				document.title = oPos.left + "|" + oPos.top;

			})
			//console.log(oPos);
		})
	</script>
</head>
<style type="text/css">
	.box{
		width:200px;
		height:200px;
		background-color:gold;
		margin:50px auto 0;
	}
</style>
<body>
	<div class="box">
	</div>
</body>
</html>

  • Demo：加入购物车动画

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		
		.chart{		/*购物车*/
			width:150px;
			height:50px;
			border:2px solid #000;
			text-align:center;
			line-height:50px;
			float:right;
			margin-right:100px;
			margin-top:50px;
		}

		.chart em{
			font-style: normal;
			color:red;
			font-weight:bold;
		}

		.add{		/*商品添加按钮*/
			width:100px;
			height:50px;
			background-color:green;
			border:0;
			color:#fff;
			float:left;
			margin-top:300px;
			margin-left:1200px;
		}

		.point{		/*动画点*/
			width:16px;
			height:16px;
			background-color:red;
			position:fixed;
			left:0;
			top:0;
			display:none;
			z-index:9999;
			border-radius:50%;
		}

	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			var $chart = $('.chart');
			var $count = $('.chart em');
			var $btn = $('.add');
			var $point = $('.point');

			var $w01 = $btn.outerWidth();
			var $h01 = $btn.outerHeight();	// 获取元素大小用于计算定位

			var $w02 = $chart.outerWidth();
			var $h02 = $chart.outerHeight();

			$btn.click(function(){
				var oPos01 = $btn.offset();
				var oPos02 = $chart.offset();
				$point.css({'left':oPos01.left+parseInt($w01/2)-8,'top':oPos01.top+parseInt($h01/2)-8});
				$point.show();
				$point.stop().animate({'left':oPos02.left+parseInt($w02/2)-8,'top':oPos02.top+parseInt($h02/2)-8},800,function(){
					$point.hide();
					var iNum = $count.html();
					$count.html(parseInt(iNum)+1);	// 购物车数量+1
				});
			})
		});
	</script>
</head>
<body>
	<div class="chart">购物车<em>0</em></div>
	<input type="button" name="" value="加入购物车" class="add">
	<div class="point"></div>
</body>
</html>

在这里插入图片描述

  • 可视区：还是用到jQuery的函数，获取浏览器可视区和整个页面文档的宽高

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){

			console.log('可视区的宽度：'+$(window).width() );

			console.log('可视区的高度：'+$(window).height() );

			console.log('文档的宽度'+$(document).width() );

			console.log('文档的高度：'+$(document).height() );

		})
	</script>
</head>
<body>
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
</body>
</html>

  • 页面滚动距离

    $(document).scrollTop();  
$(document).scrollLeft();

    在这里插入图片描述

  • 滚动事件

    $(window).scroll(function(){  
    ......  
})
// 目前已经有了
// $  $(document)  $(window)
    • Demo：悬停菜单
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		
		body{
			margin:0;
		}

		.banner{
			width:960px;
			height:200px;
			background-color:cyan;
			margin:0 auto;
		}

		.menu{
			width:960px;
			height:80px;
			background-color:gold;
			margin:0 auto;
			text-align:center;
			line-height:80px;
		}

		.menu_back{
			width:960px;
			height:80px;
			margin:0 auto;
			display:none;
		}

		p{
			text-align:center;
			color:red;
		}

		.totop{
			width:60px;
			height:60px;
			background-color:#000;
			color:#fff;
			position:fixed;
			right:20px;
			bottom:50px;
			line-height:60px;
			text-align:center;
			font-size:40px;
			border-radius:50%;
			cursor:pointer;
			display:none;
		}

	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$menu = $('.menu');
			$menu_back = $('.menu_back');
			$totop = $('.totop');

			$(window).scroll(function(){
				//console.log('abc');

				var iNum = $(document).scrollTop(); // 滚出去的那部分
				//document.title = iNum; 调试

				if(iNum>200)
				{
					$menu.css({
						'position':'fixed',
						'left':'50%',
						'top':0,
						'marginLeft':-480
					});

					$menu_back.show();	// display:block
					// 用新的菜单div填充原菜单，解决脱离文档流后div不占位置，导致文档内容跳变
				}
				else
				{
					$menu.css({
						'position':'static',						
						'marginLeft':'auto'
					});

					$menu_back.hide();
				}

				if(iNum>400){
					$totop.fadeIn(); // 测试发现需要添加此效果
				}
				else
				{
					$totop.fadeOut();
				}

			})
			$totop.click(function(){
				$('html,body').animate({'scrollTop':0}); // 回顶部
			})
		})
	</script>
</head>
<body>
	<div class="banner"></div>
	<div class="menu">菜单</div>
	<div class="menu_back"></div>

	<div class="totop">↑</div>

	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<p>文档内容</p>
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
	<br />
</body>
</html>

  • 目前学完第五部分；

  • 有各种属性、函数、事件，感觉有些混乱，初学只需知道了解各种操作的效果，积累经验勤加练习，尝试自己构思各种效果从样式布局到动态交互的实现；

  • 整理出自己对jQuery操作理解的一套文档，精益求精；目前告一段落

  • 后续项目涉及到ajax的使用和接口的开发，会再次学习

继续学习…

操作属性

  • 属性就是配合选择器操作标签的一些方法

    // 获取/设置标签
// 取出html内容，就是把标签包裹的内容取出来，即innerHTML
var $htm = $('#div1').html();	// 包裹内容
<a href="#" class="link">包裹内容</a>

// 设置html内容，会将原来包裹的内容替换掉
$('#div1').html('<span>添加文字</span>');

    // 获取/设置标签属性
// 取出图片的地址
var $src = $('#img1').prop('src');

// 设置图片的地址和alt属性
$('#img1').prop({src: "test.jpg", alt: "Test Image" });

循环

  • each()方法

    <script>
    $(function(){
        $('.list li').each(function(i){
            // 这个this指循环中
            $(this).html(i);
        })
    })
</script>
......
<ul class="list">
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
</ul>

  • 手风琴效果：用到$(this).index()，选择集选择器$('div').prevAll()，nextAll()

    <!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<style>
*{margin:0;padding:0;}
body{font-size:12px;}
#accordion{width:727px; height:350px; margin:100px auto 0 auto; position:relative; overflow:hidden; border:1px solid #CCC;}
#accordion ul{list-style:none;}
#accordion ul li{width:643px;height:350px; position:absolute; background:#FFF;}
#accordion ul li span{display:block;width:20px; height:350px; float:left; text-align:center; color:#FFF; padding-top:5px; cursor:pointer;}
#accordion ul li img{display:block; float:right;}
.bar01{left:0px;}
.bar02{left:643px;}
.bar03{left:664px;}
.bar04{left:685px;}
.bar05{left:706px;}
.bar01 span{background:#09E0B5;}
.bar02 span{background:#3D7FBB;}
.bar03 span{background:#5CA716;}
.bar04 span{background:#F28B24;}
.bar05 span{background:#7C0070;}
</style>

<script type="text/javascript">
		$(function(){

			var $li = $('#accordion li');

			$li.click(function(){
                // 点哪个就往左移（绝对定位）
				//alert($(this).html());
				$(this).animate({'left':21*$(this).index()});

				// 点击某一个其左侧全部要移位（绝对定位）
				$(this).prevAll().each(function(){
					//这里的$(this)指的是循环选择的每个li
					$(this).animate({'left':21*$(this).index()});
				})
                
				// 点击某一个其右侧所有元素要归位（绝对定位），公式推导
				//   第5个li在右边的left值   727-21*1 等同于 727-21*(5-$(this).index())
				//   第4个li在右边的left值   727-21*2 等同于 727-21*(5-$(this).index())
				//   第3个li在右边的left值   727-21*3 等同于 727-21*(5-$(this).index())
				$(this).nextAll().each(function(){
					// 点击某个，让右边其他元素归位
					$(this).animate({'left':727-21*(5-$(this).index())});
				})
			})
		})
</script>

<title>手风琴效果</title>
</head>

<body>
<div id="accordion">
	<ul>
	<li class="bar01"><span>非洲景色01</span><img src="images/001.jpg" /></li>
    <li class="bar02"><span>非洲景色02</span><img src="images/002.jpg" /></li>
    <li class="bar03"><span>非洲景色03</span><img src="images/003.jpg" /></li>
    <li class="bar04"><span>非洲景色04</span><img src="images/004.jpg" /></li>
    <li class="bar05"><span>非洲景色05</span><img src="images/005.jpg" /></li>
	</ul>
</div>
</body>
</html>

事件

  • 常用事件：

    blur() 	# 元素失去焦点
focus() # 元素获得焦点
click() # 鼠标单击
mouseover() # 鼠标进入（进入子元素也触发）
mouseout()  # 鼠标离开（离开子元素也触发）
mouseenter() # 鼠标进入（进入子元素不触发）
mouseleave() # 鼠标离开（离开子元素不触发）
hover() 	 # 同时为mouseenter和mouseleave事件指定处理函数
ready() 	 # DOM加载完成，常简写成$()
resize() 	 # 浏览器窗口的大小发生改变
scroll() 	 # 滚动条的位置发生变化
submit() 	 # 用户递交表单

  • 获取焦点

    $(function(){
    // 一般是一进入输入框就获取焦点
    $('#inp01').focus();	
    
    // 失去焦点，更常用
    $('#inp01').blur(function(){
        var sVal = $(this).val()
        alert(sVal)
    })
});

  • 移入移出

    $(function(){
    $('.box').mouseover(function(){
    	// 进入.con也触发
        alert('over')
    })
    $('.box').mouseout(function(){
        // 离开.con也触发
        alert('out')
    })
    // 合并mouseenter和mouseleave
    $('.box').hover(function(){
        alert('over')
    },function(){
        alert('out')
    })
});

// 元素嵌套，移入子元素
<div class="box">
	<div class="con"></div>
</div>

  • 绑定事件

    // 绑定mouseover()和click()事件，和. 操作同理
$(function(){
    $('#div1').bind('mouseover click', function(event) {
        alert($(this).html());
    });
});

// 取消绑定
$(function(){
    $('#div1').bind('mouseover click', function(event) {
        alert($(this).html());

        // $(this).unbind();
        $(this).unbind('mouseover');

    });
});

  • 窗口变化：

    $(window).resize(function(){
    $w = $(window).width()
    document.title = $w
})
事件冒泡

  • 在一个对象上触发某类事件（比如单击onclick事件），如果此对象定义了此事件的处理程序，那么此事件就会调用这个处理程序

  • 如果没有定义此事件处理程序或者事件返回true，那么这个事件会向这个对象的父级对象传播，从里到外，直至它被处理（父级对象所有同类事件都将被激活）

  • 或者它到达了对象层次的最顶层，即document对象（有些浏览器是window）

  • 事件冒泡允许多个操作被集中处理（把事件处理器添加到一个父级元素上，避免把事件处理器添加到多个子级元素上），它还可以让你在对象层的不同级别捕获事件

  • 事件冒泡机制有时候是不需要的，需要阻止掉，通过 event.stopPropagation() 来阻止

    <script>
    $(function(){
        var $box1 = $('.father');
        var $box2 = $('.son');
        var $box3 = $('.grandson');
        $box1.click(function() {
            alert('father');
        });
        $box2.click(function() {
            alert('son');
        });
        $box3.click(function(event) {
            alert('grandson');
            // 阻止冒泡事件
            event.stopPropagation();

        });
        $(document).click(function(event) {
            alert('grandfather');
        });
    })
</script>
......

<div class="father">
    <div class="son">
        <div class="grandson"></div>
    </div>
</div>

  • 阻止默认行为

    $('#form1').submit(function(event){
    event.preventDefault();
})

// 阻止冒泡和默认行为的合并写法：在事件内
return false;
事件委托

  • 事件委托就是利用冒泡的原理，把事件加到父级上（绑在父级），通过判断事件来源的子集，执行相应的操作

  • 事件委托首先可以极大减少事件绑定次数，提高性能；其次可以让新加入子元素也可以拥有相同的操作

  • 对比一般写法和事件委托：

    $(function(){
    $ali = $('#list li');
    $ali.click(function() {
        $(this).css({background:'red'});
    });
})

// 事件委托
$(function(){
    $list = $('#list');
    // 绑在父级，相当于告诉ul，以后来的li都这么干，属于向下冒泡吧
    $list.delegate('li', 'click', function() {
        $(this).css({background:'red'});
    });
})
...
<ul id="list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>

节点操作

  • 节点，就是标签（标签节点…）

  • 创建节点

    • 可以用属性html()实现，但是麻烦
    // 创建一个新的空节点<div></div>
var $div = $('<div>');
// 创建带内容的，就得写全
var $div2 = $('<div>这是一个div元素</div>');

  • 插入节点

    • append()和appendTo()：在==现存元素==的内部，从后面插入元素
    • prepend()和prependTo()：在现存元素的内部，从前面插入元素
    • after()和insertAfter()：在现存元素的外部，从后面插入元素
    • before()和insertBefore()：在现存元素的外部，从前面插入元素
    var $span = $('<span>这是一个span元素</span>');
$('#div1').append($span);
$span.appendTo($('#div1'))	// 区别就是主语不同，其他同理
......
<div id="div1"></div>

  • 删除节点：

    $('#div1').remove();

  • 综合案例：todolist，用到节点操作和事件委托

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>todolist</title>
	<style type="text/css">
		.list_con{
			width:600px;
			margin:50px auto 0;
		}
		.inputtxt{
			width:550px;
			height:30px;
			border:1px solid #ccc;
			padding:0px;
			text-indent:10px;			
		}
		.inputbtn{
			width:40px;
			height:32px;
			padding:0px;
			border:1px solid #ccc;
		}
		.list{
			margin:0;
			padding:0;
			list-style:none;
			margin-top:20px;
		}
		.list li{
			height:40px;
			line-height:40px;
			border-bottom:1px solid #ccc;
		}

		.list li span{
			float:left;
		}

		.list li a{
			float:right;
			text-decoration:none;
			margin:0 10px;
		}
	</style>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript">
		$(function(){

			var $inputtxt = $('#txt1');
			var $btn = $('#btn1');
			var $ul = $('#list');

			$inputtxt.focus();	// 一进入就获取焦点

			$btn.click(function(){

				// 获取input输入框的内容
				var $val = $inputtxt.val();

				if($val=="")
				{
					alert('请输入内容');
					return;
				}
				var $li = $('<li><span>'+ $val +'</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>');

				/*	
				// 使用下面这种方式，给新增加的节点绑定删除点击事件
				// 必须写在函数内部，且在append之前；很明显，这样比较浪费性能
				var $a = $li.find('.del');
				$a.click(function(){
					$(this).parent().remove();
				})*/

				// 增加节点
				$ul.append($li);
				// 清空输入框
				$inputtxt.val("");

			})

			/*
			// 这里绑定的是页面刚加载时的三个li节点，所以如下操作会让新增加的节点无法删除
			// 用上面的给新增结点变量绑定事件的办法
			$('.del').click(function(){
				$(this).parent().remove();
			})*/

			// 事件委托实现删除和移动
			// 只绑定在父级ul上
			$ul.delegate('a','click',function(){

				var $handler = $(this).prop('class');

				if($handler=='del')
				{
					$(this).parent().remove();
				}

				if($handler=='up')
				{
					if($(this).parent().prev().length==0)
					{
						alert('到顶了！');
						return;
					}
					$(this).parent().insertBefore( $(this).parent().prev() );
				}

				if($handler=='down')
				{
					if($(this).parent().next().length==0)
					{
						alert('到底了！');
						return;
					}
					$(this).parent().insertAfter( $(this).parent().next() );
				}

			})
		})

	</script>	
</head>
<body>

	<div class="list_con">
	<h2>To do list</h2>
		<input type="text" name="" id="txt1" class="inputtxt">
		<input type="button" name="" value="增加" id="btn1" class="inputbtn">
		
		<ul id="list" class="list">

			<li><span>学习html</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
			<li><span>学习css</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>
			<li><span>学习javascript</span><a href="javascript:;" class="up"> ↑ </a><a href="javascript:;" class="down"> ↓ </a><a href="javascript:;" class="del">删除</a></li>

		</ul>
	</div>
</body>
</html>

在这里插入图片描述

  • 使用javascript:;而不是 # 是因为这样可以保留样式而不用跳转到页面首部

滚轮事件

  • 鼠标的滚轮滚动会触发事件，需要引入单独的js

    <script type="text/javascript" src="js/jquery-1.12.4.js"></script>
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript">
    var i = 0
	// 滚一次，进来一次
    $(window).mousewheel(function(event,dat){
        i++
        console.log(i)	// 1 2 3 4 5...
        // dat显示：向上滚是1，向下滚是-1，没有其他值
    })
</script>

  • 整屏滚动：

    • 将每一页铺满整个屏幕，主要是样式
    • 用滑轮事件的变量决定滚动的偏移量
      <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>整页滚动</title>
	<link rel="stylesheet" type="text/css" href="css/test.css">
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
	<script type="text/javascript">
		$(function(){
			var $screen = $('.pages_con');
			var $pages = $('.pages');	// 获取每一页
			var $len = $pages.length;	// 总共5屏
			var $h = $(window).height();// 满屏高度
			var $points = $('.points li');
			var timer = null;

			var $nowscreen = 0;
			$pages.css({'height':$h});
			// 刚进入第一页添加动画
			$pages.eq(0).addClass('moving');

			// 点击导航点动画
			$points.click(function(){
				$nowscreen = $(this).index();
				$points.eq($nowscreen).addClass('active').siblings().removeClass('active');
				// 缓慢切换
				$screen.animate({'top':-$h*$nowscreen},300);
				// 添加动画
				$pages.eq($nowscreen).addClass('moving').siblings().removeClass('moving');
			})


			// 鼠标滚动事件动画
			$(window).mousewheel(function(event,dat){
                //关键一步，清除前面的定时器，只保留最后一次定时
				clearTimeout(timer);
                // dat只有正负1，但会根据滚轮的幅度会触发多次，滚的太猛会多次进入此事件导致多次翻页，所以配合定时器，定时器启动才会执行相关操作，只保留最后一次事件
				timer = setTimeout(function(){
					if(dat==-1)
					{
						$nowscreen++;
					}
					else
					{
						$nowscreen--;
					}
					if($nowscreen<0)
					{
						$nowscreen=0;
					}

					if($nowscreen>$len-1)
					{
						$nowscreen=$len-1;
					}

					$screen.animate({'top':-$h*$nowscreen},300);
					$points.eq($nowscreen).addClass('active').siblings().removeClass('active');
					$pages.eq($nowscreen).addClass('moving').siblings().removeClass('moving');
					},200)		

			})
		})

	</script>	
</head>
<body>
	<div class="pages_con">

		<div class="pages page1">
			<div class="main_con">
				<div class="left_img"><img src="images/001.png"></div>
				<div class="right_info">
				Web前端开发是从网页制作演变而来的，名称上有很明显的时代特征。在互联网的演化进程中，网页制作是Web1.0时代的产物，那时网站的主要内容都是静态的，用户使用网站的行为也以浏览为主。
					
				</div>
			</div>
		</div>

		<div class="pages page2">
			<div class="main_con">
				<div class="right_img"><img src="images/002.png"></div>
				<div class="left_info">
				2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
				</div>
			</div>
			
		</div>

		<div class="pages page3">
			<div class="main_con">
				<div class="left_img"><img src="images/004.png"></div>
				<div class="right_info">
				以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。

					
				</div>
			</div>			
		</div>

		<div class="pages page4">
			<div class="main_con">
				<div class="left_img"><img src="images/003.png"></div>
				<div class="right_info">
					Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
				</div>
			</div>			
		</div>

		<div class="pages page5">
			<div class="main_con">
				<div class="center_img"><img src="images/005.png"></div>		
			</div>
			
		</div>
	</div>
	<ul class="points">
		<li class="active"></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</body>
</html>
    • css样式用到权重的原理
      body,ul{
  	margin:0;
  	padding:0;
  }
  
  ul{list-style:none;}
  
  .pages_con{
  	position:fixed;
  	left:0;
  	top:0;
  	width:100%;
  	overflow:hidden;
  }
  
  .pages{
  	height:600px;
  	position:relative;
  }
  .page1{	background-color:orange;}
  .page2{	background-color:lightgreen;}
  .page3{	background-color:cyan;}
  .page4{	background-color:pink;}
  .page5{	background-color:lightblue;}
  
  
  .points{
  	width:16px;
  	height:176px;
  	position:fixed;
  	right:20px;
  	top:50%;
  	margin-top:-88px;
  }
  
  .points li{
  	width:13px;
  	height:13px;
  	margin:16px 0;
  	border-radius:50%;
  	border:1px solid #666;
  	cursor:pointer;
  }
  
  .points li.active{
  	background-color:#666;
  }
  
  .main_con{
  	width:900px;
  	height:400px;
  	position:absolute;
  	left:50%;
  	top:50%;
  	margin-left:-450px;
  	margin-top:-200px;
  }
  
  .main_con .left_img{
  	width:363px;
  	height:400px;
  	float:left;
  	position:relative;
  	left:-50px;
  	opacity:0;
  	filter:alpha(opacity=0);
  	transition:all 1000ms ease 300ms;
  }
  
  .main_con .right_info{
  	width:500px;
  	height:300px;
  	margin-top:50px;
  	float:right;
  	font-family:'Microsoft Yahei';
  	font-size:20px;
  	line-height:50px;
  	color:#666;
  	text-indent:2em;
  	text-align:justify;
  	position:relative;
  	right:-50px;
  	opacity:0;
  	filter:alpha(opacity=0);
  	transition:all 1000ms ease 300ms;
  }
  
  /*多个moving，权重更大，从而覆盖样式（不是替换）*/
  .moving .main_con .left_img{
  	left:0;
  	opacity:1;
  	filter:alpha(opacity=100);
  }
  
  .moving .main_con .right_info{
  	right:0;
  	opacity:1;
  	filter:alpha(opacity=100);
  }
  
  .main_con .right_img{
  	width:522px;
  	height:400px;
  	float:right;
  	position:relative;
  	top:-50px;
  	opacity:0;
  	filter:alpha(opacity=0);
  	transition:all 1000ms ease 300ms;
  }
  
  .main_con .left_info{
  	width:350px;
  	height:300px;
  	margin-top:50px;
  	float:left;
  	font-family:'Microsoft Yahei';
  	font-size:20px;
  	line-height:50px;
  	color:#666;
  	text-indent:2em;
  	text-align:justify;
  	position:relative;
  	bottom:-50px;
  	opacity:0;
  	filter:alpha(opacity=0);
  	transition:all 1000ms ease 300ms;
  }
  
  .moving .main_con .right_img{
  	top:0;
  	opacity:1;
  	filter:alpha(opacity=100);
  }
  
  .moving .main_con .left_info{
  	bottom:0;
  	opacity:1;
  	filter:alpha(opacity=100);
  }
  
  
  .main_con .center_img{
  	width:611px;
  	height:337px;
  	position:absolute;
  	left:50%;
  	margin-left:-305px;
  	bottom:-50px;
  	opacity:0;
  	filter:alpha(opacity=0);
  	transition:all 1000ms ease 300ms;
  
  }
  
  .moving .main_con .center_img
  {
  	bottom:0;
  	opacity:1;
	filter:alpha(opacity=100);
  }
幻灯片

  • 再来一个综合案例：前端轮播图，也叫幻灯片

    • 动态添加圆点（导航按钮）
    • 使用nowli和prevli两个变量，实现圆点切换和左右箭头切换
    • 操作上主要使用添加css属性和animate动画
    • hidden部分采用叠加形式，逻辑上先将nowli和prevli放置好位置，实现一次到位的效果，而不需经过其他幻灯片
    $(function(){

	var $slide = $('.slide');

	//选取所有的幻灯片
	var $li = $('.slide_list li');

	//获取幻灯片的个数
	var $len = $li.length;

	// 选择小圆点的容器
	var $points_con = $('.points');

	// 要运动过来的幻灯片的索引值，这两个变量的值是关键，小圆点操作时等于点击的索引值，箭头切换时++/--即可
	var nowli = 0;

	// 要离开的幻灯片的索引值
	var prevli = 0;

	// 左右箭头
	var $prev = $('.prev');
	var $next = $('.next');

	var timer = null;

	var ismove = false;

	// 根据幻灯片的个数，动态创建小圆点
	for(var i=0;i<$len;i++)
	{
		var $newli = $('<li>');

		//第一个小圆点含有'active'的样式
		if(i==0)
		{
			$newli.addClass('active');
		}
		$newli.appendTo($points_con);
	}

	// 第一个幻灯片不动，将其他的幻灯片放到右边去，叠加
	$li.not(':first').css({'left':760});	// :first 语法
	// 获取小圆点
	var $points = $('.points li');

	// 小圆点点击切换幻灯片
	$points.click(function(){
		nowli = $(this).index();
		// 重复点击
		if(nowli==prevli)
		{
			return;
		}
		$(this).addClass('active').siblings().removeClass('active');
		move();
	})

	// 向前箭头点击切换幻灯片
	$prev.click(function(){
		if(ismove)
		{
			return;
		}

		ismove = true;

		nowli--;
		move();
		$points.eq(nowli).addClass('active').siblings().removeClass('active');
	})

	// 向后箭头点击切换幻灯片
	$next.click(function(){
		if(ismove)	// 防止暴力操作疯狂点击，如果在移动，就不再执行
		{
			return;
		}

		ismove = true;	// 移动ing

		nowli++;
		move();
		$points.eq(nowli).addClass('active').siblings().removeClass('active');

	})
	
    // 鼠标进入停止轮播
    // 注意层级，别放到下面了
	$slide.mouseenter(function(){
		clearInterval(timer);
	});

	$slide.mouseleave(function(){
		timer = setInterval(autoplay,3000);
	});

    // 自动播放
	timer = setInterval(autoplay,5000);	
	function autoplay(){		
		nowli++;
		move();
		$points.eq(nowli).addClass('active').siblings().removeClass('active');
	}



	// 幻灯片运动函数，通过判断nowli和prevli的值来移动对应的幻灯片
	function move(){
		// 箭头切换：第一张幻灯片再往前的时候（往右跑ing）；nowli变量是自动控制++的，不是获取索引
		if(nowli<0)
		{
			nowli = $len-1;
			prevli = 0;
			$li.eq(nowli).css({'left':-760});
			// 把最后一张拉过来，return
			$li.eq(nowli).animate({'left':0});
			$li.eq(prevli).animate({'left':760},function(){
				ismove = false;	// 打开开关，可以移动
			});
			prevli = nowli;
			return;
		}

		// 箭头切换：最后一张幻灯片再往后的时候，（往左跑）
		if(nowli>$len-1)
		{
			nowli = 0;
			prevli = $len-1;
			$li.eq(nowli).css({'left':760});
			$li.eq(nowli).animate({'left':0});
			$li.eq(prevli).animate({'left':-760},function(){
				ismove = false;
			});
			prevli = nowli;
			return;
		}

		// 上面是特殊情况
		// 幻灯片从右边过来，遵循大小顺序放置，方便后面的逻辑操作
		if(nowli>prevli)
		{	
			// 把要过来的幻灯片先放到右边去（往左拉）
			$li.eq(nowli).css({'left':760});	
			// 之前的幻灯片放左边		
			$li.eq(prevli).animate({'left':-760});			
		}
		else // 幻灯片从左边过来
		{
			// 把要过来的幻灯片先放到左边去（往右拉）
			$li.eq(nowli).css({'left':-760});	
			// 放到右边	
			$li.eq(prevli).animate({'left':760});			
		}

		$li.eq(nowli).animate({'left':0},function(){
			ismove = false;
		});
		prevli = nowli;
	}
})

json

  • json是 JavaScript Object Notation 的首字母缩写，意思是javascript对象表示法

    var oMan = {
    name:'tom',
    age:16,
    talk:function(s){
        alert('我会说'+s);
    }
}

  • 这里说的 json 指的是类似于javascript对象的一种==数据格式==，传统xml格式太冗余，网页传输数据常采用json字符串格式

    {
    "name":"roy",	// 必须是双引号
    "age":18,
    "info":["bingo", 19]	// 数组
}

ajax

  • ajax是前端的东西

  • 学习ajax我们需要用Node.js配一个小的服务器

    • Node.js 就是运行在服务端的JavaScript环境，类似python、java…
    • server.js是服务器文件，安装node运行起来即可作为服务器

  • ajax技术的目的是让javascript发送http请求，与后台通信，获取数据和信息

  • ajax技术的原理是实例化xmlhttp对象，使用此对象与后台通信

  • ajax通信的过程不会影响后续javascript的执行，从而实现异步

参数

url： 请求地址

type： 请求方式，默认是’GET’，常用的还有’POST’

dataType： 设置返回的数据格式，常用的是’json’格式，也可以设置为’html’

data： 发送给服务器的数据

success：设置请求成功后的回调函数

error： 设置请求失败后的回调函数

async： 设置是否异步，默认值是’true’，表示异步

$.ajax({
    url: 'js/data.json',
    type: 'GET',
    dataType: 'json',
    data:{'aa':1},
    success:function(data){
        alert(data.name);
    },
    error:function(){
        alert('服务器超时，请重试！');
    }
});
  • 推荐使用下面的写法
$.ajax({
    url: 'js/data.json',
    type: 'GET',
    dataType: 'json',
    data:{'aa':1}
})
.done(function(data) {	// 执行成功的回调函数 dat是返回数据
    alert(data.name);
})
.fail(function() {
    alert('服务器超时，请重试！');
});
  • 切换到对应文件夹运行node server.js跑起来有问题…
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            $.ajax({
                url:'data.json',
                type:'get',
                dataType:'json'
            })
            .done(function(dat){
                $('#box1').html(dat.name);
                $('#box2').html(dat.age);
            })
            .fail(function(){
                alert('服务器超时...')
            })
        })
    </script>
</head>
<body>
    姓名：<div id="box1"></div>
    年龄：<div id="box2"></div>
</body>
</html>

jsonp

  • ajax请求的页面或资源只能是同一个域（访问哪个服务器就是哪个域，总不能跨域请求百度的数据吧）下面的资源，不能是其他域的资源，这是在设计ajax时基于安全的考虑

  • 但，有时候需要==跨域请求数据==，就需要用到jsonp技术，它的原理主要是利用了<script>标签可以跨域链接资源的特性

  • jsonp和ajax原理完全不一样，不过jQuery将它们封装成同一个函数$ajax

    $.ajax({
    url:'js/data.js',
    type:'get',
    dataType:'jsonp',
    jsonpCallback:'fnBack'	// 函数名称
})
.done(function(data){
    alert(data.name);
})
.fail(function() {
    alert('服务器超时，请重试！');
});

    // data.js
fnBack({"name":"tom","age":18});
联想数据

  • 获取360搜索关键词联想数据（输一个字出来一大堆）

  • 需要用到360search的一个接口

    https://sug.so.360.cn/suggest?callback=suggest_so&encodein=utf-8&encodeout=utf-8&format=json&src=so_home&fields=word&word=%E7%A7%A6%E6%97%B6&mid=0caf2d2204ed78def3e5797707eef13c&huid=11JATM90Y7rRTScvnAGP0ETIZDWnKmME4kfa8d1T4KR7A%3D&llbq=A5%2CB5%2CC5%2CD5&cache=&id=

  • 用到：https://sug.so.360.cn/suggest?和其中的&word=

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>360</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script>
        $(function(){
            // 键盘谈起时
            $('#txt01').blur(function(){
                var sVal = $(this).val();
                $.ajax({
                    url:'https://sug.so.360.cn/suggest?',
                    type:'get',
                    dataType:'jsonp',
                    data: {word: sVal}  // 传递请求参数
                })
                .done(function(data){
                    var aData = data.s; // result
                    $('.list').empty(); // 清空
                    // 循环展示
                    for(var i=0; i<aData.length; i++)
                    {
                        // 新增标签
                        var $li = $('<li>'+ aData[i] +'</li>');
                        $li.appendTo($('.list'));
                    }
                })        
            })
        })
    </script>
</head>
<body>
    <input type="text" name="" id="txt01">
    <ul class="list"></ul>
</body>
</html>

UI

  • jQuery UI是以 jQuery 为基础的代码库。包含底层用户交互、动画、特效和可更换主题的可视控件。我们可以直接用它来构建具有很好交互性的web应用程序
  • 网站：http://jqueryui.com/
  • 拖拽和滚动条，导入jquery-ui.min.js
拖拽

  • 给节点添加draggable属性

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui.min.js"></script>
	<script type="text/javascript">
		$(function(){

			$('.box').draggable({

				// 限制在x轴向拖动
				//axis:'x',

				// 限定在父级的范围内拖动
				containment:'parent',

				drag:function(ev,ui){	// 回调函数，ui里面包含所需参数
					// position是相对父级，offset是相对浏览器
					// 转换成比例显示
					$('#shownumber').val(parseInt(100*(ui.position.left/600)))	// 800-200
				}
			});
		})
	</script>

	<style type="text/css">
		.con{
			width:800px;
			height:200px;
			border:1px solid #000;
			margin:50px auto 0;
		}

		.box{
			width:200px;
			height:200px;
			background-color: gold;
		}

		#shownumber{
			margin-left: 528px;
			margin-top: 30px;
		}
	</style>
</head>
<body>
	<div class="con">
		<div class="box"></div>
	</div>
	<input type="text" name="" id="shownumber">
</body>
</html>

在这里插入图片描述

  • 滚动条

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>自定义滚动条</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="js/jquery-ui.min.js"></script>
	<script type="text/javascript">
		$(function(){

			var h = $('.paragraph').outerHeight();	// 此div的真实高度

			// 整体文本的高度（很高）减去外面容器的高度，即超出的部分
			var hide = h-500;

			$('.scroll_bar').draggable({
				// axis:'y',
				containment:'parent',
				opacity:0.6,
				drag:function(ev,ui){	// 先拖，产生位置参数，再定义逻辑...
					var nowtop = ui.position.top;
					var nowscroll = parseInt(nowtop/290*hide);	// 490-200=290  nowtop/290即拖出来的部分所占比例，乘以hide，得到需要拖出来多少，top即可
					$('.paragraph').css({top:-nowscroll});
				}
			});
		})

	</script>
	<style type="text/css">
		.scroll_con{
			width:400px;
			height:500px;
			border:1px solid #ccc;
			margin:50px auto 0;
			position:relative;
			overflow:hidden;
		}

		.paragraph{
			width:360px;
			position:absolute;
			left:0;
			top:0;
			padding:10px 20px;
			font-size:14px;
			font-family:'Microsoft Yahei';
			line-height:32px;
			text-indent:2em;
		}

		.scroll_bar_con{
			width:10px;
			height:490px;
			position:absolute;
			right:5px;
			top:5px;
		}

		.scroll_bar{
			width:10px;
			height:200px;
			background-color:#ccc;
			position:absolute;
			left:0;
			top:0;
			cursor:pointer;
			border-radius:5px;

		}
	</style>
</head>
<body>
	<div class="scroll_con">
		<div class="paragraph">
			2005年以后，互联网进入Web2.0时代，各种类似桌面软件的Web应用大量涌现，网站的前端由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片，各种富媒体让网页的内容更加生动，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。以前会Photoshop和Dreamweaver就可以制作网页，现在只掌握这些已经远远不够了。无论是开发难度上，还是开发方式上，现在的网页制作都更接近传统的网站后台开发，所以现在不再叫网页制作，而是叫Web前端开发。Web前端开发在产品开发环节中的作用变得越来越重要，而且需要专业的前端工程师才能做好，这方面的专业人才近几年来备受青睐。Web前端开发是一项很特殊的工作，涵盖的知识面非常广，既有具体的技术，又有抽象的理念。简单地说，它的主要职能就是把网站的界面更好地呈现给用户。
			掌握HTML是网页的核心，是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。因此，它是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言，学好HTML是成为Web开发人员的基本条件。
学好CSS是网页外观的重要一点，CSS可以帮助把网页外观做得更加美观。
学习JavaScript的基本语法，以及如何使用JavaScript编程将会提高开发人员的个人技能。
了解Unix和Linux的基本知识虽然这两点很基础，但是开发人员了解Unix和Linux的基本知识是有益无害的。
了解Web服务器当你对Apache的基本配置，htaccess配置技巧有一些掌握的话，将来必定受益，而且这方面的知识学起来也相对容易。
		</div>
		<div class="scroll_bar_con">
			<div class="scroll_bar"></div>
		</div>
	</div>
</body>
</html>

在这里插入图片描述

本地存储

  • JavaScript被设计成不能操作文件，为了信息安全

  • 本地存储分为cookie，以及新增的localStorage和sessionStorage（session在服务端）

  • cookie 存储在本地，容量最大4k，在同源的http请求时携带传递，损耗带宽

    • 可设置访问路径，只有此路径及此路径的子路径才能访问此cookie
    • 在设置的过期时间之前有效

  • jQuery设置cookie，引入文件

    // 键值对，字典里是过期时间和访问路径（访问此路径才携带此cookie）
$.cookie('mycookie', '123', {expires:7, path:'/'});
// jquery 获取cookie
$.cookie('mycookie');
WebStorage

  • localStorage和sessionStorage也存储在本地，统称webStorage，容量为5M或者更大

  • localStorage数据一直有效，除非人为删除，可作为长期数据

    //设置：
localStorage.setItem("dat", "456");
localStorage.dat = '456';

//获取：
localStorage.getItem("dat");
localStorage.dat

//删除
localStorage.removeItem("dat");

  • sessionStorage窗口关闭即失效，安全性更高，不会在请求时携带传递？

移动端事件

  • 移动端没有鼠标，需要手指操作，主要有以下事件：

    touchstart: 	//手指放到屏幕上时触发
touchmove: //手指在屏幕上滑动式触发
touchend:    //手指离开屏幕时触发
touchcancel: //系统取消touch事件的时候触发，比较少用

  • 一般需要将上面的事件封装在一起使用

  • 类似jQuery，Zepto是一个轻量级的针对现代高级浏览器的JavaScript库

  • Zepto的一些可选功能是专门针对移动端浏览器的；它的最初目标是在移动端提供一个精简的类似jquery的js库

    • zepto官网：http://zeptojs.com/
    • zepto中文api：http://www.css88.com/doc/zeptojs_api/
swiper

  • swiper.js是一款成熟稳定的应用于PC端和移动端的滑动效果插件，一般用来触屏焦点图、触屏整屏滚动等效果。

  • swiper分为2.x版本和3.x版本，2.x版本支持低版本浏览器(IE7)，3.x放弃支持低版本浏览器，适合应用在移动端

  • 官网：https://www.swiper.com.cn/usage/index.html，下载zip包

  • 由demo可以看出，需要使用package下面的swiper-bundle.min.css和swiper-bundle.min.js

    • 将下面的Slide 1换成图片即可…
    // 参照官网制作幻灯片
<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="../js/swiper-master/package/swiper-bundle.min.css">
    <style>
        .swiper-container {
            width: 600px;
            height: 300px;
        } 
    </style>
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">Slide 1</div>
            <div class="swiper-slide">Slide 2</div>
            <div class="swiper-slide">Slide 3</div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        
        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
    </div>
    <!-- 必须放到下面引入？ -->
    <script src="../js/swiper-master/package/swiper-bundle.min.js"></script>
    <script>     
        var mySwiper = new Swiper ('.swiper-container', {
            direction: 'vertical', // 垂直切换选项
            loop: true, // 循环模式选项

            // 如果需要分页器
            pagination: {
              el: '.swiper-pagination',
              clickable:true,   // 这样才行，什么鬼？
            },

            // 如果需要前进后退按钮
            navigation: {
              nextEl: '.swiper-button-next',
              prevEl: '.swiper-button-prev',
            },

            // 如果需要滚动条
            scrollbar: {
              el: '.swiper-scrollbar',
            },
        })        
    </script>
</body>
</html>

  • 更多使用参考官方API文档：https://3.swiper.com.cn/api/index.html，就是在实例化的Swiper类中添加功能属性

  • 有些样式不合适需要自定义，新建自己的css样式文件，不要直接修改源文件

    • 注意在下方引入，才能覆盖掉
    • 在浏览器中审查元素找到源文件定义copy出来
    • 以更改左右箭头为例
    .swiper-button-next,.swiper-button-prev {
    position: absolute;
    top: 50%;
    width: calc(var(--swiper-navigation-size)/ 44 * 27);
    height: var(--swiper-navigation-size);
    margin-top: calc(-1 * var(--swiper-navigation-size)/ 2);
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color,var(--swiper-theme-color))
}
    • 类名不变，修改即可，main.css
    .swiper-button-next,.swiper-button-prev {
    position: absolute;
    top: 50%;
    width: calc(var(--swiper-navigation-size)/ 44 * 10);
    height: var(--swiper-navigation-size)/4;
    margin-top: calc(-1 * var(--swiper-navigation-size)/ 2);
    z-index: 10;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--swiper-navigation-color,var(--swiper-theme-color))
}
/*感觉改不动啊。。。*/
    • 但思想就是这样的，懂了没有？

bootstrap

  • Bootrstrap是基于HTML、CSS、JavaScript的，让书写代码更容易。 移动优先，响应式布局开发
  • 看手册https://v3.bootcss.com/getting-started/
  • 下载zip文件，需要同时引入jQuery
容器
  • 给节点添加容器样式
     <div class="container-fluid">流体容器</div>
 <div class="container">响应式固定容器</div>
  • 流体容器默认宽度100%
  • 响应式容器视浏览器宽度而定：
    • 大于等于768
    • 大于等于992
    • 大于等于1200
  • 即一般所有的节点都==包在container中==实现响应式，一般也在在一行，再用row类包住
    <div class="container">
	<div class="row">
		......
	</div>
</div>
栅格系统

  • bootstrap将页面横向分为12等分，按照12等分定义了适应不同宽度（每种宽度都12等分）等分的样式类

  • 这些样式类组成了一套响应式、移动设备优先的流式栅格系统

  • 总体分成四类系统：

    col-lg-N 大于1200排成一行，小于1200分别占一行(大)
col-md-N 大于992排成一行，小于992分别占一行（中）
col-sm-N 大于768排成一行，小于768分别占一行（小）
col-xs-N 始终排列成一行
// 一行几个？用12/N即可得

      <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
      <title>bootstrap文档</title>
      <script type="text/javascript" src="../js/jquery-1.12.4.min.js"></script>
      <script type="text/javascript" src="../js/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
      <link rel="stylesheet" type="text/css" href="../js/bootstrap-3.3.7-dist/css/bootstrap.min.css">
      <style type="text/css">
          
          div[class*='col-']{
              height:50px;
              background-color:gold;
              border:1px solid #000;
          }
      
      </style>
  </head>
  <body>
      <div class="container">
          <div class="row">
          <h2>栅格系统</h2>
          </div>
      </div>
  
      <div class="container">     
          <div class="row">
              <div class="col-lg-3">col-lg-3</div>
              <div class="col-lg-4">col-lg-4</div>
              <div class="col-lg-2">col-lg-2</div>
              <div class="col-lg-3">col-lg-3</div>
          </div>
          <br>    
          <br>
          <div class="row">
              <div class="col-md-4">col-md-4</div>
              <div class="col-md-4">col-md-4</div>
              <div class="col-md-4">col-md-4</div>
          </div>
          <br>
          <br>
          <div class="row">
              <div class="col-sm-3">col-sm-3</div>
              <div class="col-sm-3">col-sm-3</div>
              <div class="col-sm-3">col-sm-3</div>
              <div class="col-sm-3">col-sm-3</div>
          </div>
          <br>
          <br>
          <div class="row">
              <div class="col-xs-5">col-xs-5</div>
              <div class="col-xs-3">col-xs-3</div>
              <div class="col-xs-2">col-xs-2</div>
              <div class="col-xs-2">col-xs-2</div>
          </div>
      </div>
  </body>
  </html>

  • 在同级节点中，始终满足12等分即可

    • 每个栅格内有15px的margin
    • 一般在自定义div才考虑这些，能用bootstrap定义好的样式就用，例如图片、导航条、表单、模态弹框…已经设计成响应式
      在这里插入图片描述

  • 栅格式响应布局：添加多个类属性实现响应式；

      <!DOCTYPE html>
  <html lang="en">
  <head>
  	<meta charset="UTF-8">
  	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  	<title>bootstrap文档</title>
  	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
  	<script type="text/javascript" src="js/bootstrap.min.js"></script>
  	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
  	<style type="text/css">		
  		/* div[class*='col-']{
  			background-color:gold;
  			border:1px solid #000;
  		} */
  		.box{
  			height:200px;
  			max-width:240px;
  			background-color:cyan;
  			border:1px solid #000;
  			margin:20px auto;
  		}	
  	</style>
  </head>
  <body>
  	<div class="container">
  		<div class="row">
  		<h2>栅格系统响应式</h2>
  		</div>
  	</div>
  
  	<div class="container">		
  		<div class="row">
  			<!-- 小于1200时被col-md-3覆盖，仍在一行 -->
  			<!-- 小于992时被col-sm-6覆盖，两个一行，12/6 -->
              <!-- 常见写法 -->
  			<div class="col-lg-3 col-md-3 col-sm-6"><div class="box"></div></div>
  			<div class="col-lg-3 col-md-3 col-sm-6"><div class="box"></div></div>
  			<div class="col-lg-3 col-md-3 col-sm-6"><div class="box"></div></div>
  			<div class="col-lg-3 col-md-3 col-sm-6"><div class="box"></div></div>
  		</div>		
  	</div>	
  </body>
  </html>
  ```

  • 栅格偏移：offset-1是距离左侧一份

     <div class="row">
 			<div class="col-lg-4 col-lg-offset-1 col-md-4 col-md-offset-1">col-lg-4</div>
 			<div class="col-lg-4 col-lg-offset-2  col-md-4 col-md-offset-2">col-lg-4</div>
 		</div>
 <!-- 最边上那个就不用写了，只能是剩下一份 -->
    • 12等分是在相同类属性之间计算划分的，在定义样式时，首先要考虑处于哪一类响应区间
    • 在总div下的同级div中，如何划分、是否添加某属性等

  • 栅格隐藏：例如在md范围上，啪，要变成每个占一行了（或者跳到其他作用域sm），诶，可以把最后一个隐藏（前提是这部分本来就不想让他显示），这样既能藏还不分行（再重新划分/N），嘿！
    在这里插入图片描述

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>bootstrap文档</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<style type="text/css">		
		div[class*='col-']{
			background-color:gold;
			border:1px solid #000;
			height:50px;
		}
	</style>
	<script>
		$(function(){
			// 监测哪个能动态变化呢？
			document.title = $('.container').outerWidth();
		})
	</script>
</head>
<body>
	<div class="container">
		<div class="row">
		<h2>栅格隐藏</h2>
		</div>
	</div>
	<div class="container">		
		<div class="row">
			<div class="col-lg-3 col-md-4 col-sm-6">1</div>
			<div class="col-lg-3 col-md-4 col-sm-6">2</div>
			<div class="col-lg-3 col-md-4 col-sm-6">3</div>
			<!-- hidden-xs 即最小的时候在xs作用域，隐藏最后一个，了解作用域很关键 -->
			<div class="col-lg-3 col-md-4 hidden-md col-sm-6 hidden-xs">4</div>
		</div>	
	</div>
</body>
</html>
表格

  • 查看官方文档：https://v3.bootcss.com/css/#tables

  • 如果官方代码没给全，直接审查copy元素

    <div class="container">
    <div class="row">
        <table class="table">
            <caption>Optional table caption.</caption>
            <thead>
                <tr>
                    <th>#</th>
                    <th>First Name</th>
                    <th>Last Name</th>
                    <th>Username</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th scope="row">1</th>
                    <td>Mark</td>
                    <td>Otto</td>
                    <td>@mdo</td>
                </tr>
                <tr>
                    <th scope="row">2</th>
                    <td>Jacob</td>
                    <td>Thornton</td>
                    <td>@fat</td>
                </tr>
                <tr>
                    <th scope="row">3</th>
                    <td>Larry</td>
                    <td>the Bird</td>
                    <td>@twitter</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>
按钮

  • 主要是添加样式属性btn

    btn 声明按钮
btn-default 默认按钮样式
btn-primay
btn-success
btn-info
btn-warning
btn-danger
btn-link
btn-lg	大按钮
btn-md
btn-xs
btn-block 宽度是父级宽100%的按钮
active
disabled
btn-group 定义按钮组

  • 按钮样式可以叠加

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>bootstrap文档</title>
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
	<div class="container">
		<div class="row">
		<h2>按钮</h2>
		</div>
	</div>

	<div class="container">
		<div class="row">
			<input type="button" name="" value="按钮" class="btn btn-primary">

			<a href="#" class="btn btn-success">a标签按钮</a>
			<a href="#" class="btn btn-info">a标签按钮</a>
			<a href="#" class="btn btn-warning">a标签按钮</a>
			<a href="#" class="btn btn-danger">a标签按钮</a>
			<a href="#" class="btn btn-link">a标签按钮</a>

			<a href="#" class="btn btn-danger active">a标签按钮</a>

			<a href="#" class="btn btn-danger disabled">a标签按钮</a>

		</div>
		<br>
		<br>
		<div class="row">
			<a href="#" class="btn btn-success btn-lg">大按钮</a>
			<a href="#" class="btn btn-info btn-md">中等按钮</a>
			<a href="#" class="btn btn-warning btn-xs">小按钮</a>
			<a href="#" class="btn btn-danger">一般的按钮</a>
		</div>

		<br>
		<br>
		<div class="row">
			<a href="#" class="btn btn-primary btn-block">宽度是100%的按钮</a>
		</div>

		<br>
		<br>
		<div class="row">
			<div class="btn-group">
				<a href="#" class="btn btn-primary">步骤一</a>
				<a href="#" class="btn btn-primary">步骤二</a>
				<a href="#" class="btn btn-default">步骤三</a>
			</div>
		</div>
		<br>
		<br>
		<div class="row">
			<div class="btn-group btn-group-justified">
				<a href="#" class="btn btn-primary">步骤一</a>
				<a href="#" class="btn btn-primary">步骤二</a>
				<a href="#" class="btn btn-default">步骤三</a>
			</div>
		</div>

		<br>
		<br>
		<div class="row">
			<div class="btn-group btn-group-justified">
				<div class="btn-group">
					<input type="button" name="" value="步骤一" class="btn btn-primary">
				</div>
				<div class="btn-group">
				<input type="button" name="" value="步骤二" class="btn btn-primary">
				</div>
				<div class="btn-group">
				<input type="button" name="" value="步骤三" class="btn btn-default">
				</div>
			</div>
		</div>
	</div>
</body>
</html>

  • 字体图标

    • 通过字体代替图标，font文件夹需要和css文件夹在同一目录

  • 图片

    • img-responsive 声明响应式图片
导航条

  • 不太一样，这里导航条包住container

  • 主要还是类属性添加样式

    navbar 声明导航条
navbar-default 声明默认的导航条样式 浅灰色
navbar-inverse 声明反白的导航条样式
navbar-static-top 去掉导航条的圆角
navbar-fixed-top 固定到顶部的导航条
navbar-fixed-bottom 固定到底部的导航条
navbar-header 申明logo的容器
navbar-brand 针对logo等固定内容的样式
nav navbar-nav 定义导航条中的菜单
navbar-form 定义导航条中的表单
navbar-btn 定义导航条中的按钮
navbar-text 定义导航条中的文本
navbar-left 菜单靠左
navbar-right 菜单靠右

  • 响应式导航：

    • data-toggle和data-target一般就是要做效果的，需要关联节点
    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>

</head>
<body>
	<div class="navbar navbar-inverse navbar-static-top">		
		<div class="container">
			<!-- 定义logo和切换小图标   -->
			<div class="navbar-header">
				<!--id名一定要写#-->
				<button class="navbar-toggle" data-toggle="collapse" data-target="#mymenu">
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
				</button>

				<a href="#" class="navbar-brand">LOGO</a>
			</div>
			<!-- 屏幕缩小时菜单变为按钮 -->
			<div class="collapse navbar-collapse" id="mymenu">

				<!-- 定义菜单   -->
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">首页</a></li>
					<li><a href="#">公司简介</a></li>
					<li><a href="#">解决方案</a></li>
				</ul>

				<!-- 定义菜单里面的表单   -->
				<form class="navbar-form navbar-right">
					<div class="form-group">
						<div class="input-group">
							<input type="text" name="" class="form-control">
							<span class="input-group-btn">
								<button class="btn btn-default"><span class="glyphicon glyphicon-search"></span></button>
							</span>
						</div>
					</div>
				</form>

			</div>


		</div>
	</div>
</body>
</html>
模态弹框

  • 即类似 alert

  • bootstrap的弹框点击其他地方会消失，可以自定义JS弹框

    <!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
	<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
	<script type="text/javascript" src="js/bootstrap.min.js"></script>
	<script type="text/javascript">
		$(function(){

			$('#btn01').click(function(){
				
				//$('#modal04').modal('show');
				$('#modal04').modal({	// 字典传参
					show:true,
					backdrop:'static'
				});

			})
			// 点击“取消”时关掉
			$('#shutoff').click(function(){
				$('#modal04').modal('hide');
			})

		})
	</script>
</head>
<body>
	<div class="container">
		<div class="row">
			<!-- 关联节点 -->
			<button class="btn btn-primary" data-toggle="modal" data-target="#modal01">弹出大模态框</button>
			<button class="btn btn-primary" data-toggle="modal" data-target="#modal02">弹出中等模态框</button>
			<button class="btn btn-primary" data-toggle="modal" data-target="#modal03">弹出小的模态框</button>
			<button class="btn btn-primary" id="btn01">js控制的弹框</button>
		</div>
	</div>
	
	<!-- .modal>.modal-dialog>.modal-content>.modal-header+.modal-body+.modal-footer -->

	<div class="modal fade" id="modal01">
		<div class="modal-dialog modal-lg">
			<div class="modal-content">

				<div class="modal-header">
					提示弹框
				</div>

				<div class="modal-body">
					<p>文字内容</p>
				</div>

				<div class="modal-footer">
					<button class="btn btn-primary">确定</button>
					<button class="btn btn-default" data-dismiss = "modal">取消</button>
				</div>

			</div>
		</div>
	</div>

	<div class="modal fade" id="modal02">
		<div class="modal-dialog">
			<div class="modal-content">

				<div class="modal-header">
					提示弹框
				</div>

				<div class="modal-body">
					<p>文字内容</p>
				</div>

				<div class="modal-footer">
					<button class="btn btn-primary">确定</button>
					<button class="btn btn-default" data-dismiss = "modal">取消</button>
				</div>

			</div>
		</div>
	</div>

	<div class="modal fade" id="modal03">
		<div class="modal-dialog modal-sm">
			<div class="modal-content">

				<div class="modal-header">
					提示弹框
				</div>

				<div class="modal-body">
					<p>文字内容</p>
				</div>

				<div class="modal-footer">
					<button class="btn btn-primary">确定</button>
					<button class="btn btn-default" data-dismiss = "modal">取消</button>
				</div>

			</div>
		</div>
	</div>


	<div class="modal fade" id="modal04">
		<div class="modal-dialog">
			<div class="modal-content">

				<div class="modal-header">
					提示弹框
				</div>

				<div class="modal-body">
					<p>js控制的弹框</p>
				</div>

				<div class="modal-footer">
					<button class="btn btn-primary">确定</button>
					<button class="btn btn-default" id="shutoff">取消</button>
				</div>

			</div>
		</div>
	</div>
</body>
</html>
Roy_Allen
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
web基础
slh20030904的博客
12-17 153
本章目标 1 HTTP协议(重点必须理解！！) 2 Java Web应用程序的规范目录结构 3 Web应用程序开发过程 4 设置 Tomcat 环境 5 应用程序分类 桌面应用程序: -桌面应用程序一般指采用客户/服务器结构（简称CS结构） 的应用程序（制作软件大多用cs结构的），服务器端程序主要等待响应客户 程序发来的请求。客户端需要安装专用的客户端程序。 应用：QQ，微信，等等。 优点：发信息...
Please check that values for params "default.fs.name" and "hive.metastore.warehouse.dir" do not conf
www.hohode.com
03-12 3002
http://blog.sina.com.cn/s/blog_8026da3a0101dimq.html
web前段-Html学习总结
JHSHUN的博客
09-05 273
1.网站信息页面 分割线 <hr /> 2.网站图片信息 2.1 图片标签img img标签常用属性 src：图片地址 width：宽度 height：高度 alt：提示。图片加载失败时的提示 2.2 路径问题 使用src写入图片路径时，我们会遇到图片在上级目录的情况，这是需要用 …/ 来写入地址 ./ 代表当前路径 ../ 代表上一级路径 ../../ 代表上上一级目录 例如： <img src="./picture/2027302.jpg" width="550" /&gt
maven把依赖包拷贝到lib下
weixin_34393428的博客
06-07 122
标准web工程在eclipse中利用m2eclipse插件添加依赖管理后，在部署过程中没有将依赖的jar包自动拷贝到/WEB-INF/lib中。参考了一些朋友的做法手动执行 [java] view plaincopy mvn dependency:copy-dependencies -DoutputDirectory=src/main/webapp/WEB-INF/lib ...
mongodb+express+vue代码实现掘金最热文章收藏评论分析
weixin_34060741的博客
11-22 272
关于本篇文章的思路介绍在：juejin.im/post/5a1293…，看代码之前可以先看一下实现的效果；刚把掘金最热文章收藏评论分析的思路发出去后，就收到很多掘金好友的喜欢和阅读，这也让我更有信心把整个实现过程一步一步记录下来，让有兴趣的前端童鞋也可以熟悉前后端。虽然整个功能简单，但也算实现了整个过程，希望能帮助前端的童鞋梳理一下自己的思路；以前也曾有过很多疑惑，数据库怎么和后端连接？后端怎么去...
godaddy免费空间完美安装部署dedecms
weixin_30551963的博客
09-07 174
godaddy免费空间完美安装部署dedecms 很多朋友在购买godaddy.com 的域名时都会附送一个10G大小的免费空间，这个空间比起国内大部分的收费主机来说速度不算慢，而且相当的稳定，但美中不足的是，空间的顶部会有大大的两个广告。呵呵，这些都是可以解决的,请细细品味本文，你会觉得受益良多的。 http://www.godaddy.com/ htt...
python web基础
最新发布
06-12
python web基础
0100_java_web_class2.rar_JAVA WEB基础
09-14
JAVA WEB基础是编程领域中的一个重要话题，主要涵盖了如何使用Java语言进行Web应用程序的开发。这个压缩包文件"0100_java_web_class2.rar_JAVA WEB基础"显然是一个教学资源，旨在通过实例来教授初学者关于Java Web的...
web基础源码
10-22
【web基础源码】是一个适合初学者学习的资源包，主要涵盖了Web开发的基本元素和jQuery 1.7的使用。Web开发是构建互联网应用程序和网站的关键技能，它涉及HTML、CSS、JavaScript等核心技术。在这个压缩包中，你将找到...
web基础教程
04-30
web基础教程之Javascript.基本特点： 脚本编写语言 基于对象的语言 简单性 简化的java语言；变量类型采用弱类型 安全性 只能通过浏览器实现信息浏览或动态交互 动态性 JavaScript是动态的，采用以事件驱动的方式...
web基础（一）使用于小白或者需要web基础复习的人
02-15
【标题】"Web基础（一）：为初学者或复习者准备" 在Web开发的世界里，基础知识至关重要，无论你是新手还是需要重温基础知识的开发者。"Web基础（一）"这个主题旨在提供一个全面的入门指南，帮助你理解Web开发的核心...
java与web基础概念
08-20
java与web基础概念
WEB基础知识
04-13
从本质上讲，Web是基于客户机/服务器的一种体系结构，一般用户的计算机称为客户机，用于提供服务的机器称为服务器。 在Web方式下客户端常用浏览器访问服务器。客户机向服务器发送请求，要求执行某项任务，而服务器...
怎么解决Sublime text 3 中文文件名显示方框问题？
QIANG123___的博客
04-09 5729
首先，我们使用sublime时，有时候会发现，我们使用中文命名文件夹名的时候，出现了乱码（类似方块等）不要怕，一键帮你搞定哦
Web基础Web基础
11-18
【Web基础概述】 Web基础是理解互联网及其服务的关键，它涵盖了Internet、万维网（WWW）、Web技术以及相关的网络协议。让我们深入探讨这些概念。 **1. Internet与万维网** Internet，即互联网，是一个全球性的...
web前段入门基础
12-04
以前上课自己总结的一点web基础，对于小白入门有点作用，想免费来着，没办法
web基础config
07-28
Web基础的配置可以包括以下几个方面： 1. 网络配置：配置网络相关的参数，例如IP地址、子网掩码、网关等。这些参数可以在操作系统或网络设备上进行配置。 2. Web服务器配置：配置Web服务器软件（如Apache、Nginx）...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Roy_Allen

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值