前端 (HTML、CSS、JavaScript、BOM和DOM、jQuery、Bootstrapt)

HTML

Web服务端的本质

import socket

sk = socket.socket()

sk.bind(("127.0.0.1", 8085))
sk.listen(5)

while True:
    conn, addr = sk.accept()
    data = conn.recv(8096)
    conn.send(b"HTTP/1.1 200 OK\r\n\r\n")
    conn.send(b"<h1>Hello world!</h1>")
    conn.close()

浏览器发请求 -> HTTP协议 -> 服务端接收请求 -> 服务端返回响应 -> 服务端把HTML文件内容发给浏览器 -> 浏览器渲染页面

HTML是什么?

超文本标记语言(Hypertext Markup Language, HTML)是一种用于创建网页的标记语言。它不是一种编程语言。使用标签来描述网页

本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页，对于不同的浏览器，对同一标签可能有不同的解释。

网页文件的扩展名: .html或者.htm

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>css样式优先级</title>
</head>
<body>

</body>
</html>

1. <!DOCTYPE html>声明为HTML5文档

2. <html>，</html>是文档的开始和结束的标记，是HTML页面的根元素，在他们之间的是(head)和主体(body)

3. <head>，</head> 定义了HTML文档的开头部分，他们之间的内容不会在浏览器的文档窗口显示，包含文档的元(meta)数据

4. <title>，</title>定义网页标题，在浏览器标题栏显示

扫描二维码关注公众号，回复： 9038449 查看本文章

5. <body>，</body>之间的文本是可见的网页主体内容

注意: 对于中文网页需要使用<meta charset='utf-8'>声明编码，否则会出现乱码。有些浏览器会设置GBK为默认编码，则你需设置<meta charset='gbk'>

head内常用的标签

标签	意义
<title></title>	定义网页标题
<style></style>	定义内部样式表
<script></script>	定义JS代码或者引入外部JS文件
<link/>	引入外部样式表文件
<meta/>	定义网页元信息

meta标签

meta标签有两个属性，分别是http-equiv属性和name属性，

1. http-equiv属性：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确显示网页的内容，与之对应的属性值为content

<!--2秒后跳转到对应的网址，注意引号-->
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
<!--指定文档的编码类型-->
<meta http-equiv="content-Type" charset=UTF8">
<!--告诉IE以最高级模式渲染文档-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

2. name属性：主要用于描述网页，与之对应的属性值为content，content中的内容主要便于搜索引擎机器人查找信息和分类信息用的。

<meta name="keywords" content="meta总结,html meta,meta属性,meta跳转">
<meta name="description" content="老男孩教育Python学院">

body内常用标签

基本标签(块级标签和内联标签)

<b>加粗</b>
<i>斜体</i>
<u>下划线</u>
<s>删除</s>

<p>段落标签</p>

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>

<!--换行-->
<br>

<!--水平线-->
<hr>

特殊字符

内容	对于代码
空格
>	>
<	<
&	&
￥	¥
版权	©
注册	®

div标签和span标签

div标签用来定义一个块级元素，并无实际的意义，主要是通过CSS样式为其赋予不同的表现。

span标签用来定义内联(行内标签)，并无实际意义。主要通过CSS样式为其赋予不同的表现。

块级标签和行内标签区别:

块元素是以另起一行开始渲染的元素，行内元素不需要另起一行，如果单独在网页中插入这两个元素，对页面没影响。这两个元素是专门为定义CSS样式而产生的。

块标签： h1 - h6， div， p，hr，ul，ol，li

内联标签：a，img，u，i，b，span

注：p标签不能包含块级标签，p标签也不能包含p标签。

img标签

<img src="图片的路径" alt="图片未加载成功时的提示" title="鼠标悬浮时提示信息" width="宽" height="高(宽高两个属性只用一个会自动等比缩放)">

a标签

超链接标签：是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件甚至一个应用程序等。

URL是统一资源定位器(Uniform Resource Locator)的缩写，也被称为网页地址，是因特网上标准的资源的地址。
URL举例
http://www.sohu.com/stu/intro.html
http://222.172.123.33/stu/intro.html

URL地址由4部分组成
第1部分：为协议：http://、ftp://等 
第2部分：为站点地址：可以是域名或IP地址
第3部分：为页面在站点中的目录：stu
第4部分：为页面名称，例如 index.html
各部分之间用“/”符号隔开。

URL

<a href = "http://www.cnblogs.com"target = _blank>文字说明</a>

注：href属性指定目标网页地址，该地址可以有以下几种类型：

1. 绝对URL - 指向另一个站点 (比如 href="http://www.cnblogs.com")

2. 相对URL - 指当前站点中确切的路径 (href = "index.htm")

3. 锚URL - 指向当前页面的锚 (href="#top")

target：

1. _black表示在新标签中打开目标网页

2. _self表示在当前标签页中打开目标网页

列表

1. 无序列表

<ul type="disc">
  <li>第一项</li>
  <li>第二项</li>
</ul>

type属性：

　　disc - 实心圆点，默认值

　　circle - 空心圆圈

　　square - 实心方块

　　none - 无样式

2. 有序列表

<ol type="1" start="2">
  <li>第一项</li>
  <li>第二项</li>
</ol>

type属性：

　　1 - 数字列表，默认值

　　A - 大写字母

　　a - 小写字母

　　I - 大写罗马

　　i - 小写罗马

3. 标题列表

<dl>
  <dt>标题1</dt>
  <dd>内容1</dd>
  <dt>标题2</dt>
  <dd>内容1</dd>
  <dd>内容2</dd>
</dl>

表格

基本结构：

<table border="1", cellpadding="10", cellspacing="15">

    <thead>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>爱好</th>
    </tr>
    </thead>

    <tbody>
    <tr>
        <td>小强</td>
        <td>22</td>
        <td>看书</td>
    </tr>
    <tr>
        <td>小强</td>
        <td>22</td>
        <td>看书</td>
    </tr>
    </tbody>

</table>

属性：

　　border - 表格边框

　　cellpadding - 内边距

　　cellspacing - 外边距

　　width - 像素百分比

　　rowspan - 单元格竖跨多少行

　　colspan - 单元格横跨多少列(即合并单元格)

form

功能：表单用于向服务器传输数据，从而实现用户与Web服务器的交互。

表单内部包含input系列标签，比如文本字段、复选框、单选框、提交按钮等。还包含textarea，select，fields和label标签。

表单属性

属性	描述
method	规定在提交表单时所用的HTTP方法，默认是GET
action	规定向何处提交表单的地址(URL)
target	规定action属性中目标的地址，默认是_self
name	规定识别表单的名称
novalidate	规定浏览器不验证表单
enctype	规定被提交数据的编码，默认url-encoded
autocomplete	规定浏览器应该自动完成表单，默认开启
accept-charset	规定在被提交表单中使用的字符集，默认页面字符集

input

<input>元素会根据不同的type属性，变化为多种形态。

type属性值	表现形式	对于代码
text	单行输入文本	<input type = "text"/>
password	密码输入框	<input type = "password"/>
date	日期输入框	<input type = "date"/>
checkbox	复选框	<input type = "checkbox" checked = "checked"/>
radio	单选框	<input type = "radio"/>
submit	提交按钮	<input type = "submit" value = "提交"/>
reset	重置按钮	<input type = "reset" value = "重置"/>
button	普通按钮	<input type = "button" value = "普通按钮"/>
hidden	隐藏输入框	<input type = "hidden"/>
file	文本选择框	<input type = "file"/>

属性说明：

value：表单提交时对应项的值

checked：radio和checkbox默认被选中的项

readonly：text和password设置只读

disabled：所以input均适应

select标签

<form action="" method="post">
  <select name="city" id="city">
           <option value="bj">北京</option>
           <option value="sh">上海</option>
           <option value="sichuan">四川</option>
  </select>
</form>

属性说明：

multiple：布尔属性，设置后为多选，否则默认单选

disabled：禁用

selected：默认选中该项

value：定义提交时的选项值

label标签

定义：<label>标签为input元素定义标注

说明：

　　1. label元素不会为用户呈现任何特殊效果

　　2. <label>标签的for属性值应当与相关元素的id属性值相同。

<form action="">
  <label for="username">用户名</label>
  <input type="text" id="username" name="username">
</form>

textarea多行文本

<textarea name="userinfo" id="info" cols="30" rows="10">
  默认内容
</textarea>

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>form_list</title>
 6 </head>
 7 <body>
 8 
 9 <!--注册示例-->
10 
11 <form action="http://127.0.0.1:8000/upload/" method="post" enctype="multipart/form-data">
12     <p>用户名:
13         <input name='username' type="text">
14         <input name='username' type="text" value="李四">
15         <input name='username' type="text" placeholder="张三">
16     </p>
17 
18     <p>密码
19         <input name='passward' type="password"></p>
20 
21     <p>邮箱
22         <input name='address' type="email"></p>
23     <p>性别:
24         <input name='gender' type="radio" value="1">男
25         <input name='gender' type="radio" value="0">女
26         <input checked name='gender' type="radio" value="2">保密
27     </p>
28     <p>爱好:
29         <input checked name='hobby' type="checkbox" value="basketball">篮球
30         <input name='hobby' type="checkbox" value="football">足球
31         <input name='hobby' type="checkbox" value="badminton">羽毛球
32     </p>
33 
34 
35     <select name="from" id="s1">
36         <option value="bj">北京</option>
37         <option value="sh">上海</option>
38         <option value="sichuan">四川</option>
39     </select>
40 
41 
42     <select name="from2" id="s2">
43         <optgroup label="北京">
44             <option value="cp">昌平</option>
45             <option value="cy">朝阳</option>
46             <option value="hd">海淀</option>
47             <option value="ft">丰台</option>
48         </optgroup>
49         <optgroup label="上海">
50             <option value="pdxq">浦东新区</option>
51             <option value="mxq">闵行区</option>
52             <option value="hpq">黄浦区</option>
53         </optgroup>
54         <optgroup label="四川">
55             <option value="ph">攀花枝</option>
56             <option value="zg">自贡</option>
57             <option value="my">绵阳</option>
58         </optgroup>
59     </select>
60 
61     <p>生日:
62         <input name="birthday" type="date"></p>
63 
64     <p><textarea name='info' id='t1' cols='30' rows='10'>
65        </textarea></p>
66 
67     <p>头像
68         <input name="file" type="file"></p>
69     <p>
70         <input type="submit" value="提交">
71         <input type="reset" value="重置">
72     </p>
73 </form>
74 </body>
75 </html>

用户表单

CSS

CSS介绍

CSS- 层叠样式表，定义如何显示HTML元素

当浏览器读到一个样式表时候，他就会按照这个样式表来对文档进行格式化(渲染)

CSS语法

每个CSS样式由两部分组成：选择器和声明。声明又包括属性和属性值，每个声明之后用分号结束。

CSS注释

/*这是注释*/

CSS几种引入方式

1. 行内样式：在标记的style属性中设定CSS样式，不推荐使用

<p style="color: red">Hello world.</p>

2. 内部样式：嵌入式是将CSSS样式集中写在网页的<head></head>标签对的<style></style>标签对中，格式如下：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

3. 外部样式：将css写在一个单独的文件中，然后在页面中引入即可，推荐

<link rel = 'stylesheet' href="test.css">

CSS选择器

基本选择器

1. 元素选择器

p {color: "red";}

2. ID选择器

#d1 {
  background-color: red;
}

3. 类选择器

.c1 .c2 .c3{
  font-size: 14px;
}
p.c1 {
  color: red;
}

标签中的class属性如果有多个，要用空格分隔

4. 通用选择器

* {
  color: white;
}

组合选择器

1. 后代选择器

/*li内部的a标签设置字体颜色*/
li a {
  color: green;
}

2. 儿子选择器

/*选择所有父级是 <div> 元素的 <p> 元素*/
div>p {
  font-family: "Arial Black", arial-black, cursive;
}

3. 毗邻选择器

/*选择所有紧接着<div>元素之后的<p>元素*/
div+p {
  margin: 5px;
}

4. 弟弟选择器

/*i1后面所有的兄弟p标签*/
#i1~p {
  border: 2px solid royalblue;
}

属性选择器

/*用于选取带有指定属性的元素。*/
p[title] {
  color: red;
}
/*用于选取带有指定属性和值的元素。*/
p[title="213"] {
  color: green;
}

分组和嵌套

分组：当多个元素样式相同的时候，可通过在多个选择器之间使用逗号分隔的分组选择器来统一设置元素样式

div,
p {
  color: red;
}

嵌套：多种选择器可以混合起来使用

/* .c1类内部的所有p标签字体设置为红色 */
.c1 p {
  color: red;
}

伪类选择器

/* 未访问的链接 */
a:link {
  color: #FF0000
}

/* 已访问的链接 */
a:visited {
  color: #00FF00
} 

/* 鼠标移动到链接上 */
a:hover {
  color: #FF00FF
} 

/* 选定的链接 */ 
a:active {
  color: #0000FF
}

/*input输入框获取焦点时样式*/
input:focus {
  outline: none;
  background-color: #eee;
}

伪元素选择器

/* first-letter 常用的给首字母设置特殊样式 */
p:first-letter {
  font-size: 48px;
  color: red;
}

/*在每个<p>元素之前插入内容*/
p:before {
  content:"*";
  color:red;
}

/*在每个<p>元素之后插入内容*/
p:after {
  content:"#";
  color:blue;
} 

# before和after多用于清除浮动

CSS属性相关

width属性为元素设置宽度

height属性为元素设置高度

块级标签才能设置宽度，内联标签的宽度由内容来决定

字体属性

文字字体：

/*
font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
*/

body {
  font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}

字体：

/* 字体大小 */
p {
  font-size: 14px;
}

/* 字体粗细 */
normal    默认值，标准粗细
bold            粗体
bolder    更粗
lighter    更细
100~900    设置具体粗细，400等同于normal，而700等同于bold
inherit    继承父元素字体的粗细值

文本颜色：

颜色是通过CSS最经常的指定：

十六进制值: color: ＃FF0000
一个RGB值如: color: RGB(255,0,0)
颜色的名称如:  color: red
rgba(255,0,0,0.3)，第四个值为alpha, 指定了色彩的透明度/不透明度，它的范围为0.0到1.0之间。

文字属性

/* 文字对齐 */
text-align 属性规定元素中的文本的水平对齐方式。

left      -   左边对齐 默认值
right    -   右对齐
center  -   居中对齐
justify  -   两端对齐


/* 文字装饰 */
text-decoration 属性用来给文字添加特殊效果

none          -     默认定义标准的文本。
underline    -     定义文本下的一条线。
overline      -     定义文本上的一条线。
line-through-   定义穿过文本下的一条线。
inherit        -  继承父元素的text-decoration属性的值。

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

/* 首行缩进 */

p {
  text-indent: 32px;
}

背景属性

/* 背景颜色 */
background-color: red;

/* 背景图片 */
background-image: url('1.jpg');

background-repeat:
 /*背景重复*/ 
 repeat(默认):背景图片平铺排满整个网页
 repeat-x：背景图片只在水平方向上平铺
 repeat-y：背景图片只在垂直方向上平铺
 no-repeat：背景图片不平铺
 background-repeat: no-repeat;  不重复

/*背景位置*/
background-position: right top;

/* 支持简写 */

background:#ffffff url('1.png') no-repeat right top;

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>背景浮动效果示例</title>
 6 
 7     <style>
 8         .c1{
 9             height:700px;
10             background:cornflowerblue;
11         }
12         .c2{
13             height: 500px;
14             background:url("1.png") repeat ;
15             background-attachment: fixed; /*把背景图固定*/
16         }
17         .c3{
18             height: 500px;
19             background-color: greenyellow;
20         }
21     </style>
22 
23 </head>
24 <body>
25 
26 <div class="c1"></div>
27 <div class="c2"></div>
28 <div class="c3"></div>
29 
30 </body>
31 </html>

背景浮动效果示例

边框

边框属性：

border-width
boder-style  边框样式
border-color

#i1{
        border-width: 2px;
        border-style: solid;
        border-color: red;
}
通常使用简写：
#i1 {
  border: 2px solid red;
}

边框样式：
none      无边框
dotted    点状虚线边框
dashed    矩形虚线边框
solid     实线边框

/* css中代码*/
.header-img {
    height: 128px;
    width: 128px;
    border: 4px solid white;
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto; /*图像居中*/
    margin-top: 20px;
}

.header-img > image {
    max-width: 100%;
}


/*HTML文件代码*/
<div class="header-img">
        <img src="f.jpg">
</div>

设置圆形图像

display属性

display:"none"    HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block"    默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:"inline"    按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block"    使元素同时具有行内元素和块级元素的特点。

CSS盒子模型

margin(外边距):   用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。   
Border(边框):     围绕在内边距和内容外的边框。
padding(内填充):  用于控制内容与边框之间的距离；
Content(内容):    盒子的内容，显示文本和图像。

/* margin外边距  顺序： 上右下左 */
margin-test {
  margin: 5px 10px 15px 20px;   
}

/* padding内填充  顺序： 上右下左 */
.padding-test {
  padding: 5px 10px 15px 20px;
}

float

在 CSS 中，任何元素都可以浮动。
浮动元素会生成一个块级框，而不论它本身是何种元素。
关于浮动的两个特点：
1.浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
2.由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

clear

clear属性规定元素在哪一侧不允许其他浮动元素

注：clear属性只会对自身起作用，而不影响其他元素

清除浮动：

　　1. 固定高度

　　2. 伪元素清除法

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

　　3. overflow: hidden

overflow溢出属性

visible    默认值。内容不会被修剪，会呈现在元素框之外。
hidden     内容会被修剪，并且其余内容是不可见的。
scroll     内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto       如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit    规定应该从父元素继承 overflow 属性的值。

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>overflow</title>
 6     <style>
 7         .c1{
 8             width: 120px;
 9             height: 120px;
10             border: 1px solid blue;
11             overflow: auto;
12         }
13         .header-img{
14             width:100px;
15             height: 100px;
16             border: 2px solid red;
17             border-radius: 100%;
18             overflow: hidden;
19         }
20         img{
21             max-height: 100%;
22         }
23     </style>
24 </head>
25 <body>
26 <div class="c1">
27     海燕啊！你可长点心吧
28     海燕啊！你可长点心吧
29     海燕啊！你可长点心吧海燕啊！你可长点心吧海燕啊！你可长点心吧
30 </div>
31 <div class="header-img">
32     <img src="1.png" alt="">
33 </div>
34 
35 </body>
36 </html>

overflow

定位position

static  默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。
relative（相对定位）
absolute（绝对定位）
fixed（固定）:注意 一个元素若设置了 position:absolute | fixed; 则该元素就不能设置float
在理论上，被设置为fixed的元素会被定位于浏览器窗口的一个指定坐标，不论窗口是否滚动，它都会固定在这个位置

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>定位示例</title>
 6     <style>
 7         *{
 8             margin: 0;
 9             padding: 0;
10         }
11 
12         .c1,.c2,.c3,.c4,.c5,.c6,.c7,.c8{
13             height: 150px;
14             width: 150px;
15     }
16         .c1{
17             background-color: red;
18         }
19         .c2{
20             background-color: darkorange;
21             position: relative;  /*相对路径*/
22             left:150px;
23         }
24         .c3{
25             background-color: yellow;
26         }
27 
28         .c4{
29             background-color: green;
30             position: absolute; /*绝对路径*/
31             top:0px;
32             left:300px
33         }
34         .c5{
35             background-color: blue;
36             position: absolute;
37             top:300px;
38             left:300px;
39         }
40         .c6{
41             background-color: aqua;
42             position: absolute;
43             top:450px;
44             left:450px;
45         }
46         .c7{
47             background-color: blueviolet;
48             position: absolute;
49             top:600px;
50             left:600px;
51         }
52         .c8{
53             background-color: brown;
54             position: absolute;
55             top:750px;
56             left: 750px;
57         }
58         .fixed-test{
59             position: fixed;
60             right: 20px;
61             bottom: 20px;
62             background-color: lightsteelblue;
63         }
64     </style>
65 
66 
67 </head>
68 <body>
69 
70 <div class="c1"></div>
71 <div class="c2"></div>
72 <div class="c3"></div>
73 <div class="c4"></div>
74 <div class="c5"></div>
75 <div class="c6"></div>
76 <div class="c7"></div>
77 <div class="c8"></div>
78 
79 <div class="fixed-test">返回顶部</div>
80 </body>
81 </html>

position示例

z-index

#i2 {
  z-index: 999;
}
设置对象的层叠顺序。
1. z-index 值表示谁压着谁，数值大的压盖住数值小的，
2. 只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
3. z-index值没有单位，就是一个正整数，默认的z-index值为0，定位了的元素，永远压住没有定位的元素

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta http-equiv="x-ua-compatible" content="IE=edge">
 6   <meta name="viewport" content="width=device-width, initial-scale=1">
 7   <title>自定义模态框</title>
 8   <style>
 9     .cover {
10       background-color: rgba(0,0,0,0.65);
11       position: fixed;
12       top: 0;
13       right: 0;
14       bottom: 0;
15       left: 0;
16       z-index: 998;
17     }
18 
19     .modal {
20       background-color: white;
21       position: fixed;
22       width: 600px;
23       height: 400px;
24       left: 50%;
25       top: 50%;
26       margin: -200px 0 0 -300px;
27       z-index: 1000;
28     }
29   </style>
30 </head>
31 <body>
32 
33 <div class="cover"></div>
34 <div class="modal"></div>
35 </body>
36 </html>

自定义模态框

opacity

用来定义透明效果，取值范围是0-1，0是完全透明，1是完全不透明。

示例：

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Blog页面示例</title>
 6     <link rel="stylesheet" href="blog.css">
 7 </head>
 8 <body>
 9 
10 <!--左边栏开始-->
11 <div class="left">
12     <!--图像开始-->
13     <div class="header-img">
14         <img src="f.jpg">
15     </div>
16     <!--图像结束-->
17     <div class="blog-name">小徐同学</div>
18     <div class="blog-info">他很懒，什么也没有留下</div>
19 <!--    链接区开始-->
20     <div class="blog-link">
21         <ul>
22             <li><a href="">关于我</a></li>
23             <li><a href="">关于你</a></li>
24             <li><a href="">关于他</a></li>
25         </ul>
26     </div>
27     <!--    链接区结束-->
28 
29     <!--    文章分类 开始-->
30     <div class="blog-tags">
31         <ul>
32             <li><a href="">JS</a></li>
33             <li><a href="">CSS</a></li>
34             <li><a href="">HTML</a></li>
35         </ul>
36     </div>
37     <!--    文章分类结束-->
38 </div>
39 <!--左边栏结束-->
40 
41 
42 
43 <!--右边栏开始-->
44 <div class="right">
45     <div class="article-list">
46         <div class="article">
47             <div class="article-title">
48                 <h1 class="article-name">海燕</h1>
49                 <span class="article-date">2019-12-5</span>
50             </div>
51             <div class="article-info">
52                 前世， 我为青莲，你为梵音， 一眸擦肩，惊艳了五百年的时光。 花绵绵而绽， 音靡靡而绕， 低眉含笑间，
53                 谁的深情绚烂了三生石上的一见倾心？ 今生，你为高山，我为流水，长风为歌，幽弦清音，水流脉脉，岭秀倾情。你一袭洒脱，
54                 温柔了我的眉弯，心舟过处，谁的呼唤柔婉了谁的一帘幽梦？ 从此， 晓露痴缠，星月为凭，
55 
56             </div>
57             <div class="article-tag">
58                 #做饭 #CSS
59             </div>
60         </div>
61         <div class="article">
62             <div class="article-title">
63                 <h1 class="article-name">海燕</h1>
64                 <span class="article-date">2019-12-5</span>
65             </div>
66             <div class="article-info">
67                 前世， 我为青莲，你为梵音， 一眸擦肩，惊艳了五百年的时光。 花绵绵而绽， 音靡靡而绕， 低眉含笑间，
68                 谁的深情绚烂了三生石上的一见倾心？ 今生，你为高山，我为流水，长风为歌，幽弦清音，水流脉脉，岭秀倾情。你一袭洒脱，
69                 温柔了我的眉弯，心舟过处，谁的呼唤柔婉了谁的一帘幽梦？ 从此， 晓露痴缠，星月为凭，
70 
71             </div>
72             <div class="article-tag">
73                 #做饭 #CSS
74             </div>
75         </div>
76         <div class="article">
77             <div class="article-title">
78                 <h1 class="article-name">海燕</h1>
79                 <span class="article-date">2019-12-5</span>
80             </div>
81             <div class="article-info">
82                 前世， 我为青莲，你为梵音， 一眸擦肩，惊艳了五百年的时光。 花绵绵而绽， 音靡靡而绕， 低眉含笑间，
83                 谁的深情绚烂了三生石上的一见倾心？ 今生，你为高山，我为流水，长风为歌，幽弦清音，水流脉脉，岭秀倾情。你一袭洒脱，
84                 温柔了我的眉弯，心舟过处，谁的呼唤柔婉了谁的一帘幽梦？ 从此， 晓露痴缠，星月为凭，
85 
86             </div>
87             <div class="article-tag">
88                 #做饭 #CSS
89             </div>
90         </div>
91 
92     </div>
93 
94 </div>
95 <!--右边栏结束-->
96 </body>
97 </html>

blog.html

  1 /*Blog页面相关样式*/
  2 
  3 /*通用样式*/
  4 * {
  5     font-family: ".PingFang SC", "Microsoft YaHei";
  6     font-size: 14px;
  7     margin: 0;
  8     padding: 0;
  9 }
 10 
 11 /*去掉a标签的下划线*/
 12 a {
 13     text-decoration: none;
 14 
 15 }
 16 
 17 /*左边栏 样式*/
 18 .left {
 19     width: 20%;
 20     background-color: rgb(76, 77, 76);
 21     height: 100%;
 22     position: fixed;
 23     top: 0;
 24     left: 0;
 25 }
 26 
 27 /*头像样式*/
 28 .header-img {
 29     height: 128px;
 30     width: 128px;
 31     border: 4px solid white;
 32     border-radius: 50%;
 33     overflow: hidden;
 34     margin: 0 auto; /*图像居中*/
 35     margin-top: 20px;
 36 }
 37 
 38 .header-img > image {
 39     max-width: 100%;
 40 }
 41 
 42 
 43 /*Blog名称*/
 44 .blog-name {
 45     color: white;
 46     font-size: 24px;
 47     font-weight: bold;
 48     text-align: center; /*文字居中*/
 49     margin-top: 15px;
 50 }
 51 
 52 /*Blog介绍*/
 53 .blog-info {
 54     color: white;
 55     text-align: center;
 56     border: 2px solid white;
 57     margin: 5px 15px;
 58 }
 59 
 60 /*链接组和分类组*/
 61 .blog-link,
 62 .blog-tags {
 63     text-align: center;
 64     margin-top: 20px;
 65 }
 66 
 67 .blog-tags a, .blog-link a {
 68     color: white;
 69 }
 70 
 71 .blog-tags a:before {
 72     content: "#";
 73 }
 74 
 75 /*右边栏 样式*/
 76 .right {
 77     width: 80%;
 78     background-color: rgb(238, 238, 237);
 79     height: 1000px;
 80     float: right;
 81 }
 82 
 83 .article-list {
 84     margin-left: 30px;
 85     margin-right: 10%;
 86     margin-top: 30px;
 87 }
 88 
 89 .article {
 90     margin-bottom: 15px;
 91     background-color: white;
 92 }
 93 
 94 .article-name {
 95     display: inline-block;
 96 }
 97 
 98 .article-title {
 99     padding: 15px;
100     border-left: 3px solid red;
101 }
102 
103 .article-info {
104     padding: 15px;
105 }
106 
107 .article-tag {
108     padding: 15px 0;
109     margin: 15px;
110     border-top: 1px solid black;
111 }
112 
113 .article-date {
114     float: right;
115 }

blog.css

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>小米商城导航示例</title>
 6     <style>
 7         * {
 8             margin: 0;
 9             padding: 0;
10         }
11         a{
12             text-decoration: none;
13             color:white;
14         }
15         ul {
16             list-style: none;
17         }
18 
19         .nav-left li {
20             float: left;
21             padding-right: 20px;
22         }
23 
24         .nav-right {
25             float: right;
26         }
27 
28         .nav {
29             background-color: rgba(0, 0, 0, 0.5);
30             padding: 8px 0;
31         }
32 
33         .clearfix:after,
34         .clearfix:before {
35             clear: both;
36             content: "";
37             display: block;
38         }
39         .s9{
40             width: 80%;
41             margin: auto;
42         }
43 
44     </style>
45 </head>
46 <body>
47 <div class="nav ">
48     <div class="s9 clearfix">
49         <div class="nav-left">
50             <ul>
51                 <li><a href="">小米商城</a></li>
52                 <li><a href="">MIUI</a></li>
53                 <li><a href="">loT</a></li>
54                 <li><a href="">云服务</a></li>
55                 <li><a href="">水滴</a></li>
56                 <li><a href="">金融</a></li>
57                 <li><a href="">有品</a></li>
58                 <li><a href="">Select Region</a></li>
59             </ul>
60         </div>
61         <div class="nav-right">
62             <a href="">登陆</a>
63             <a href="">注册</a>
64             <a href="">购物车</a>
65 
66 
67         </div>
68     </div>
69 </div>
70 </body>
71 </html>

小米商城导航示例

JavaScript

JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习

JavaScript引入方式

1. script标签内写代码

<script>
  // 在这里写你的JS代码
</script>

2. 引入额外的JS文件

<script src="myscript.js"></script>

注释：

// 这是单行注释

/*
这是多行注释
*/

结束符

JavaScript中的语句要以分号 (;) 为结束符

JavaScript语言基础

变量声明

1. JavaScript的变量名可以使用_, 数字, 字母, $组成，不能以数字开头。

2. 声明变量使用 var 变量名; 的格式进行声明

var name = "Dan";
var age = 28;

注意:
　　变量名是区分大小写的。
　　推荐使用驼峰式命名规则。
　　保留字不能做变量名。

JavaScript数据类型

JavaScript 拥有动态类型：

var x;  // 此时x是undefined
var x = 1;  // 此时x是数字
var x = "Alex"  // 此时x是字符串

数值

JavaScript 不区分整型和浮点型，就只有一种数字类型：

var a = 3.14;
var b = 20;
var c = 123e5;  // 12300000
var d = 123e-5;  // 0.00123

还有一种NaN,表示不是数字

常用方法：

parseInt("123")  // 返回123
parseInt("ABC")  // 返回NaN,NaN属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。
parseFloat("123.456")  // 返回123.456

字符串

var a = "Hello"
var b = "world;
var c = a + b; 
console.log(c);  // 得到Helloworld

常用方法：

.length    返回长度
.trim()    移除空白
.trimLeft()    移除左边的空白
.trimRight()    移除右边的空白
.charAt(n)    返回第n个字符
.concat(value, ...)    拼接
.indexOf(substring, start)    子序列位置
.substring(from, to)    根据索引获取子序列
.slice(start, end)    切片
.toLowerCase()    小写
.toUpperCase()    大写
.split(delimiter, limit)    分割

string.slice(start, stop)和string.substring(start, stop)：

两者的相同点：
如果start等于end，返回空字符串
如果stop参数省略，则取到字符串末
如果某个参数超过string的长度，这个参数会被替换为string的长度

substirng()的特点：
如果 start > stop ，start和stop将被交换
如果参数是负数或者不是数字，将会被0替换

silce()的特点：
如果 start > stop 不会交换两者
如果start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)
如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)

slice和substring区别

布尔值

true和false都是小写。空字符串、0、null、undefined、NaN都是false

null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=null;
undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。
null表示变量的值是空，undefined则表示只声明了变量，但还没有赋值。

类型查询

typeof "abc"  // "string"
typeof null  // "object"
typeof true  // "boolean"
typeof 123 // "number"

数组：

var a = [123, "ABC"];
console.log(a[1]);  // 输出"ABC"

关于遍历数组中的元素，可以使用下面的方式：

var a = [10, 20, 30, 40];
for (var i=0;i<a.length;i++) {
  console.log(a[i]);
}

foreach(function(currentValue, index, arr), thisValue)

splice(index,howmany,item1,.....,itemX)

map(function(currentValue,index,arr), thisValue)

流程控制

1. if-else

var a = 10;
if (a > 5){
  console.log("yes");
}else {
  console.log("no");
}

2. if-else if- else

var a = 10;
if (a > 5){
  console.log("a > 5");
}else if (a < 5) {
  console.log("a < 5");
}else {
  console.log("a = 5");
}

3. 三元运算符

var a = 1;
var b = 2;
var c = a > b ? a : b

函数：

// 函数的定义
function foo(a,b) {
    console.log("a:",a);
    console.log("b:",b);
    return a+b
}

//匿名函数
var func = function(a,b){
    console.log("a",a);
    console.log("b",b);
    return a+b;
};

var abc=function(a,b){

};

//立即执行函数
(function(a,b){
    console.log("立即执行函数");
    console.log(a+b)
})(25,25);
console.log("_______________")

// 函数的调用
var ret1 = foo(11,22);
console.log("a+b=",ret1);

var ret2 = func(10,20);
console.log(ret2);

自定义对象

JavaScript的对象本质上是键值对的集合(Hash结构)，但是只能用字符串作为键

var a = {"name": "Alex", "age": 18};
console.log(a.name);
console.log(a["age"]);

遍历对象中的内容：

var a = {"name": "Alex", "age": 18};
for (var i in a){
  console.log(i, a[i]);
}

创建对象：

var person=new Object();  // 创建一个person对象
person.name="Alex";  // person对象的name属性
person.age=18;  // person对象的age属性
console.log(person)  // {name: "Alex", age: 18}

Date对象

//方法1：不指定参数
var d1 = new Date();
console.log(d1.toLocaleString());
//方法2：参数为日期字符串
var d2 = new Date("2004/3/20 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
//方法3：参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());

//方法4：参数为年月日小时分钟秒毫秒
var d4 = new Date(2004,2,20,11,12,0,300);
console.log(d4.toLocaleString());  //毫秒并不直接显示

JSON对象

var str1 = '{"name": "Alex", "age": 18}';
var obj1 = {"name": "Alex", "age": 18};
// JSON字符串转换成对象
var obj = JSON.parse(str1); 
// 对象转换成JSON字符串
var str = JSON.stringify(obj1);

RegExp对象

RegExp
        1.定义正则表达式
            1. var reObj1 = new RegExp("^[a-zA-z][a-zA-z0-9]{5,11}$")
            2. var reObj2 = /^[a-zA-z][a-zA-z0-9]{5,11}$/
        2.常用方法
            reObj1.test("将要被校验的字符串")
        3.正则的匹配模式
            1. g  -> 全局
                "Alexasdaass".replace(/a/g, "h")
            2. i  -> 不区分大小写
                "Alexasdaass".replace(/a/i, "h")
        4.注意：
            1.正则表达式之间不能加空格
            2.全局匹配模式中：
                var reObj = /alex/g;
                reObj.test("alex")   ->True  lastIndex属性被设置成4
                reObj.test("1234alex")  将返回成功

Math对象

abs(x)       返回数的绝对值。
exp(x)       返回 e 的指数。
floor(x)     对数进行下舍入。
log(x)       返回数的自然对数（底为e）。
max(x,y)    返回 x 和 y 中的最高值。
min(x,y)    返回 x 和 y 中的最低值。
pow(x,y)    返回 x 的 y 次幂。
random()    返回 0 ~ 1 之间的随机数。
round(x)    把数四舍五入为最接近的整数。
sin(x)       返回数的正弦。
sqrt(x)      返回数的平方根。
tan(x)       返回角的正切。

Math对象

BOM和DOM

window的子对象

JavaScript分为ECMAScript，DOM，BOM。

BOM是指浏览器对象模型，它使JavaScript有能力与浏览器进行”对话“

DOM是指文档对象模型，通过它，可以访问HTML文档的所有元素。

Window对象是客户端JavaScript最高层对象之一，在调用window对象的方法和属性时候，可以省略window对象的引用。例如：window.document.write()可以简写成document.write()

location对象

location.href   // 获取URL
location.href="URL"  //跳转到指定页面
location.reload()  // 重新加载页面

弹出框

// 警告框
alert('小心哟');

// 确认框
confirm('你确定吗？');

// 提示框
prompt('请输入你的答案');
prompt("请在下方输入","你的答案");

计时相关

var t=setTimeout("JS语句",毫秒)

// 在指定时间之后执行一次相应函数
var timer = setTimeout(function(){alert(123);}, 3000);
// 取消setTimeout设置
clearTimeout(timer);

// 每隔一段时间就执行一次相应函数
var timer = setInterval(function(){console.log(123);}, 3000)
// 取消setInterval设置
clearInterval(timer);

DOM

DOM是一套对文档的内容进行抽象和概念化的方法。当网页被加载时候，浏览器会创建页面的文档对象模型，HTML DOM模型被构造为对象的树。

查找标签

1. 直接查找

document.getElementById                 根据ID获取一个标签
document.getElementsByClassName   根据class属性获取
document.getElementsByTagName     根据标签名获取标签合集

2. 间接查找

parentElement              父节点标签元素
children                   所有子标签
firstElementChild          第一个子标签元素
lastElementChild           后一个子标签元素
nextElementSibling         下一个兄弟标签元素
previousElementSibling     上一个兄弟标签元素

添加节点

// 示例
var imgEle=document.createElement("img");
imgEle.setAttribute("src", "1.jpg");
var d1Ele = document.getElementById("d1");
d1Ele.appendChild(imgEle);

属性节点

// 获取文本节点的值：

var divEle = document.getElementById("d1")
divEle.innerText
divEle.innerHTML

// 设置文本节点的值：

var divEle = document.getElementById("d1")
divEle.innerText="1"
divEle.innerHTML="<p>2</p>"

attribute操作

var divEle = document.getElementById("d1");
// 给id = d1的标签设置(添加)属性
divEle.setAttribute("age","18")
divEle.getAttribute("age")
// 删除属性
divEle.removeAttribute("age")

获取值操作

语法：

elementNode.value

适应于以下标签：

input，select，textarea

var iEle = document.getElementById("i1");
console.log(iEle.value);
var sEle = document.getElementById("s1");
console.log(sEle.value);
var tEle = document.getElementById("t1");
console.log(tEle.value);

class的操作

className  获取所有样式类名(字符串)

classList.remove(cls)  删除指定类
classList.add(cls)     添加类
classList.contains(cls)  存在返回true，否则返回false
classList.toggle(cls)  存在就删除，否则添加

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>class相关操作</title>
 6     <style>
 7         .c1{
 8             height: 200px;
 9             width: 200px;
10             border-radius: 200px;
11             background-color: red;
12         }
13         .c2{    
14             background-color: yellow;
15         }
16 
17     </style>
18 </head>
19 <body>
20 <div class = "c1 c2" onclick="change(this)"></div>
21 <div class = "c1 c2"></div>
22 <div class = "c1 c2 c3"></div>
23 
24 
25 <script>
26 // 绑定方式1
27     function change(ths){
28         ths.classList.toggle("c2")
29     }
30 // 绑定方式2
31     var divEles = document.getElementsByTagName("div");
32     for(var i = 1; i<divEles.length; i++){
33         divEles[i].onclick = function () {
34             this.classList.toggle("c2")
35         }
36     }
37 
38 </script>
39 </body>
40 </html>

示例

事件

使HTML事件触发浏览器中的动作，比如当用户点击某个HTML元素时启动一段JavaScript。

常用事件：

onclick         当用户点击某个对象时调用的事件句柄。
ondblclick      当用户双击某个对象时调用的事件句柄。

onfocus         元素获得焦点。               // 练习：输入框
onblur          元素失去焦点。               应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange        域的内容被改变。             应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）

onkeydown       某个键盘按键被按下。          应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress      某个键盘按键被按下并松开。
onkeyup         某个键盘按键被松开。
onload          一张页面或一幅图像完成加载。
onmousedown     鼠标按钮被按下。
onmousemove     鼠标被移动。
onmouseout      鼠标从某元素移开。
onmouseover     鼠标移到某元素之上。

onselect        在文本框中的文本被选中时发生。
onsubmit        确认按钮被点击，使用的对象是form。

绑定方式：

方式一：

<div id="d1" onclick="changeColor(this);">点我</div>
<script>
  function changeColor(ths) {
    ths.style.color="blue";
  }
</script>

方式二：

<div id="d2">点我</div>
<script>
  var divEle2 = document.getElementById("d2");
  divEle2.onclick=function () {
    this.innerText="呵呵";
  }
</script>

事件绑定示例：

 1 <!DOCTYPE html>
 2  2 <html lang="zh-CN">
 3  3 <head>
 4  4     <meta charset="UTF-8">
 5  5     <title>搜索框示例</title>
 6  6 </head>
 7  7 <body>
 8  8 
 9  9 <input type="text" id = "i1" value="去旅游">
10 10 <input type="button" value = "搜索">
11 11 
12 12 <script>
13 13     //找到input框
14 14     var i1Ele = document.getElementById("i1");
15 15     i1Ele.onfocus = function(){
16 16         //把value清空
17 17         this.value = "";
18 18     };
19 19     i1Ele.onblur = function () {
20 20         //失去焦点之后 如果值为空就把值填进去
21 21         if(!this.value.trim()){
22 22                 this.value="去旅游"
23 23         }
24 24 
25 25     }
26 26 </script>
27 27 
28 28 </body>
29 29 </html>

搜索框

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>select联动示例</title>
 6 </head>
 7 <body>
 8 
 9 <select id = "s1">
10     <option value="0">--请选择--</option>
11     <option value="1">北京</option>
12     <option value="2">上海</option>
13 </select>
14 
15 <select id="s2">
16     <option value=""></option>
17 </select>
18 
19 <script>
20     var data = {1:["昌平区", "朝阳区","海淀区"], 2:["静安区","闵行区","浦东区"]};
21     //给第一个select绑定事件，绑定的是onchange事件
22     var s1Ele = document.getElementById("s1");
23     s1Ele.onchange = function(){
24         //取到你选的是哪个市
25         console.log(this.value);
26         //把对应的区填到第二个select框里面
27         var areas = data[this.value];  //取到市对应的区
28         //找到s2
29         var s2Ele = document.getElementById("s2");
30         //清空之前的
31         s2Ele.innerHTML="";
32         for(var i = 0; i<areas.length; i++){
33             //生成option标签
34             var opEle = document.createElement("option");
35             opEle.innerText = areas[i];
36 
37              //添加到select内部
38             s2Ele.appendChild(opEle);
39         }
40 
41 
42     }
43 </script>
44 
45 </body>
46 </html>

select联动

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>定时器的练习</title>
 6 </head>
 7 
 8 <body>
 9 <input id = "i1" type="text">
10 <input id = "start" type="button" value="开始">
11 <input id = "stop" type="button" value = "结束">
12 <script>
13     //声明一个全局变量，保存定时器的ID
14     var t;
15     //在input框里面显示当前时间
16     //1.获取当前时间
17     function foo() {
18         var now = new Date();
19         var nowStr = now.toLocaleString();
20         //2.把时间字符串填到input框里
21         var i1Ele = document.getElementById("i1");
22         i1Ele.value = nowStr;
23     }
24     //点开始让时间动起来
25         //找到开始按钮，绑定事件
26     var startButton = document.getElementById("start");
27     startButton.onclick = function () {
28          foo();
29         //将每隔一秒钟执行foo
30         if(t===undefined){
31             t = setInterval(foo,1000);   //把定时器的ID赋值给之前声明的全局变量t
32         }
33     };
34     //点停止
35     //找到停止按钮，传递事件
36     var stopButton = document.getElementById("stop");
37     stopButton.onclick = function(){
38         //清除之前设置的定时器
39         clearInterval(t); //清除t对应的定时器，t的值还在
40         console.log(t);
41         t = undefined;
42     }
43 
44 
45 </script>
46 </body>
47 </html>

定时器

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>内容补充</title>
 6     <script>
 7         alert(123);
 8     </script>
 9 
10 </head>
11 <body>
12 <div id = "d1" onclick="showText(this)">d1</div>
13 <hr>
14 <div id = "d2" onclick="showText(this)">d2</div>
15 <script>
16         // var d1Ele = document.getElementById("d1");
17         // console.log(d1Ele.innerText)
18     function showText(ths){
19         console.log(ths.innerText);
20         ths.style.color= "green";
21     }
22         // 找要绑定事件的标签
23     var divEles = document.getElementsByTagName("div");
24     for(var i = 0; i<divEles.length; i++){
25         divEles[i].ondblclick=function() {
26             alert(this.innerText+"six six six");
27         }
28     }
29 
30     </script>
31 
32 </body>
33 </html>

两种绑定事件的练习

window.onload

当我们给页面上的元素绑定事件的时候，必须等到文档加载完毕。因为我们无法给一个不存在的元素绑定事件。

window.onload事件在文件加载过程结束的时候触发。此时，文档中的所有对象都位于DOM中，并且所有图像，脚本，链接和子框架都已完成加载。
注意：.onload()函数存在覆盖现象

jQuery

介绍

1. jQuery是一个轻量级的、兼容多浏览器的JavaScript库。

2. jQuery使用户能够更方便的处理HTML Document、 Events、实现动画效果、方便地进行Ajax交互，能够极大的简化JavaScript编程。

jQuery的优势：

1. 一款轻量级的JS框架。jQuery核心js文件才几十kb，不会影响页面加载速度。
2. 丰富的DOM选择器,jQuery的选择器用起来很方便，比如要找到某个DOM对象的相邻元素，JS可能要写好几行代码，而jQuery一行代码就搞定了，再比如要将一个表格的隔行变色，jQuery也是一行代码搞定。
3. 链式表达式。jQuery的链式操作可以把多个操作写在一行代码里，更加简洁。
4. 事件、样式、动画支持。jQuery还简化了js操作css的代码，并且代码的可读性也比js要强。
5. Ajax操作支持。jQuery简化了AJAX操作，后端只需返回一个JSON格式的字符串就能完成与前端的通信。
6. 跨浏览器兼容。jQuery基本兼容了现在主流的浏览器，不用再为浏览器的兼容问题而伤透脑筋。
7. 插件扩展开发。jQuery有着丰富的第三方的插件，例如：树形菜单、日期控件、图片切换插件、弹出窗口等等基本前端页面上的组件都有对应插件，并且用jQuery插件做出来的效果很炫，并且可以根据自己需要去改写和封装插件，简单实用。

jQuery API中文文档

jQuery对象

jQuery对象就是通过jQuery包装DOM对象后产生的对象。
jQuery对象是 jQuery独有的。如果一个对象是 jQuery对象，那么它就可以使用jQuery里的方法：例如$("#d1").html()。
$("#i1").html()的意思是：获取id值为 i1的元素的html代码。其中 html()是jQuery里的方法。
相当于： document.getElementById("i1").innerHTML;
虽然 jQuery对象是包装 DOM对象后产生的，但是 jQuery对象无法使用 DOM对象的任何方法，同理 DOM对象也没不能使用 jQuery里的方法

# 一个约定，在声明一个jQuery对象变量的时候在变量名前面加上$：
var $variable = jQuery对像
var variable = DOM对象
$variable[0]  //jQuery对象转成DOM对象
jQuery对象和DOM对象的使用：
$("#i1").html();  //jQuery对象可以使用jQuery的方法
$("#i1")[0].innerHTML;  // DOM对象使用DOM的方法

jQuery基础语法

查找标签

基本选择器

1. id选择器

$("#d1")

2. 标签选择器

$("tagName")

3. class选择器

$(".className")

4. 配合使用

$("div.c1")  // 找到有c1 class类的div标签

5. 组合选择器

$("#id, .className, tagName")

层级选择器

$("x y");   // x的所有后代y(子子孙孙)
$("x>y");  // x的所有儿子y
$("x+y");  // 找到所有紧挨在x后面的y
$("x~y");  //x之后所以的兄弟y

基本筛选器

:first            // 第一个
:last             // 最后一个
:eq(index)        // 索引等于index的那个元素
:even             // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd              // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)        // 匹配所有大于给定索引值的元素
:lt(index)        // 匹配所有小于给定索引值的元素
:not(元素选择器)    // 移除所有满足not条件的标签
:has(元素选择器)    // 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>自定义模态框</title>
 6     <style>
 7         .cover{
 8             position: absolute;
 9             top:0;
10             right:0;
11             bottom: 0;
12             left: 0;
13             background-color: rgba(0,0,0,0.4);
14             z-index: 999;
15         }
16         .model{
17             height: 400px;
18             width:600px;
19             background-color: white;
20             position: absolute;
21             top:50%;
22             left:50%;
23             margin-left: -300px;
24             margin-top: -200px;
25             z-index: 1000;
26         }
27         .hide{
28             display: none;
29         }
30     </style>
31 </head>
32 <body>
33 <button id = "b1">点击弹出模态框</button>
34 <div class="cover hide"></div>
35 <div class="model hide">
36     <form>
37         <p>
38             <label for="">用户：
39                 <input type="text">
40             </label>
41 
42         </p>
43         <p>
44             <label for="">密码：
45                 <input type="password">
46             </label>
47 
48         </p>
49         <p>
50             <input type="submit" value="登陆">
51             <input id="cancel" type="button" value="取消">
52         </p>
53     </form>
54 </div>
55 <script src="jquery-3.4.1.js"></script>
56 <script>
57     //找到点击弹出模态框的按钮
58     $("#b1").click(function () {
59         //把.cover和.modal显示出来(去除掉.hide)
60         $(".cover").removeClass("hide");  //显示背景
61         $(".model").removeClass("hide"); //显示模态框
62     });
63     //找到取消按钮，绑定事件
64     $("#cancel").click(function () {
65         //给背景和模态框加上.hide
66         $(".cover").addClass("hide");
67         $(".model").addClass("hide")
68     })
69 </script>
70 
71 </body>
72 </html>

自定义模态框

属性选择器

// 示例
<input type="text">
<input type="password">
<input type="checkbox">
$("input[type='checkbox']");// 取到checkbox类型的input标签
$("input[type!='text']");// 取到类型不是text的input标签

表单筛选器

:text
:password
:file
:radio
:checkbox

:submit
:reset
:button

例子：

$(":checkbox")  // 找到所有的checkbox

表单对象属性

:enabled
:disabled
:checked
:selected

例子：

<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

$("input:enabled")  // 找到可用的input标签

<select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">广州市</option>
  <option value="shenzhen">深圳市</option>
</select>

$(":selected")  // 找到所有被选中的option

筛选器方法

1. 下一个元素

$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")

2. 上一个元素

$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")

3. 父亲元素

$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。

4. 儿子和兄弟元素

$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

5. 查找

搜索所以与指定表达式匹配的元素

$("div").find("p")
等价于$("div p")

6. 筛选

筛选出与指定表达式匹配的元素集合

$("div").filter(".c1")  // 从结果集中过滤出有c1样式类的

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta http-equiv="x-ua-compatible" content="IE=edge">
 6   <meta name="viewport" content="width=device-width, initial-scale=1">
 7   <title>左侧菜单示例</title>
 8   <style>
 9     .left {
10       position: fixed;
11       left: 0;
12       top: 0;
13       width: 20%;
14       height: 100%;
15       background-color: rgb(47, 53, 61);
16     }
17 
18     .right {
19       width: 80%;
20       height: 100%;
21     }
22 
23     .menu {
24       color: white;
25     }
26 
27     .title {
28       text-align: center;
29       padding: 10px 15px;
30       border-bottom: 1px solid #23282e;
31     }
32 
33     .items {
34       background-color: #181c20;
35 
36     }
37     .item {
38       padding: 5px 10px;
39       border-bottom: 1px solid #23282e;
40     }
41 
42     .hide {
43       display: none;
44     }
45   </style>
46 </head>
47 <body>
48 
49 <div class="left">
50   <div class="menu">
51     <div class="title">菜单一</div>
52     <div class="items">
53       <div class="item">111</div>
54       <div class="item">222</div>
55       <div class="item">333</div>
56     </div>
57     <div class="title">菜单二</div>
58     <div class="items hide">
59       <div class="item">111</div>
60       <div class="item">222</div>
61       <div class="item">333</div>
62     </div>
63     <div class="title">菜单三</div>
64     <div class="items hide">
65       <div class="item">111</div>
66       <div class="item">222</div>
67       <div class="item">333</div>
68     </div>
69   </div>
70 </div>
71 <div class="right"></div>
72 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
73 
74 <script>
75     //方法一：
76     // $(".title").click(function (){
77     //   // 隐藏所有class里有.items的标签
78     //     var $cur = $(this).next();
79     //
80     //   $(".items").not($cur).addClass("hide");  //批量操作
81     //   $(this).next().toggleClass("hide");
82     // });
83 
84     $(".title").click(function () {
85         $(this).next().toggleClass("hide");
86         $(this).next().siblings(".item").addClass("hide")
87     })
88 </script>

左侧菜单

操作标签

1. 样式操作

addClass();// 添加指定的CSS类名。
removeClass();// 移除指定的CSS类名。
hasClass();// 判断样式存不存在
toggleClass();// 切换CSS类名，如果有就移除，如果没有就添加。

$("p").css("color", "red"); //将所有p标签的字体设置为红色

2. 位置操作

offset()// 获取匹配元素在当前窗口的相对偏移或设置元素位置
position()// 获取匹配元素相对父元素的偏移
scrollTop()// 获取匹配元素相对滚动条顶部的偏移
scrollLeft()// 获取匹配元素相对滚动条左侧的偏移

返回顶部示例

3. 文本操作

HTML代码：

html()// 取得第一个匹配元素的html内容
html(val)// 设置所有匹配元素的html内容

文本值：

text()// 取得所有匹配元素的内容
text(val)// 设置所有匹配元素的内容

值：

val()     // 取得第一个匹配元素的当前值
val(val) // 设置所有匹配元素的值
val([val1, val2])   // 设置多选的checkbox、多选select的值

获取被选中的checkbox或radio的值：

<label for="c1">女</label>
<input name="gender" id="c1" type="radio" value="0">
<label for="c2">男</label>
<input name="gender" id="c2" type="radio" value="1">

可以使用：

$("input[name='gender']:checked").val()

  1 <!DOCTYPE html>
  2 <html lang="zh-CN">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>登陆校验完整版</title>
  6     <style>
  7         .error{
  8             color:red;
  9         }
 10         .error:before{
 11             content("*")
 12         }
 13     </style>
 14 </head>
 15 <body>
 16 
 17 <form>
 18     <p>
 19         <label>用户名
 20             <input class="need" name="username" type="text">
 21             <span class="error"></span>
 22         </label>
 23     </p>
 24     <p>
 25         <label>密码
 26             <input class="need" name="password" type="password">
 27             <span class="error"></span>
 28         </label>
 29     </p>
 30     <p>爱好
 31         <label>篮球
 32             <input name="hobby" value="basketball" type="checkbox">
 33         </label>
 34         <label>足球
 35             <input name="hobby" value="football" type="checkbox">
 36         </label>
 37         <label>乒乓球
 38             <input name="hobby" value="pingpang" type="checkbox">
 39         </label>
 40     </p>
 41     <p>性别
 42         <label>男
 43             <input name="gender" value="1" type="radio">
 44         </label>
 45         <label>女
 46             <input name="gender" value="0" type="radio">
 47         </label>
 48         <label>保密
 49             <input name="gender" value="2" type="radio">
 50         </label>
 51     </p>
 52     <p>
 53         <label for="s1">出生地：</label>
 54         <select name="from" id="s1">
 55             <option value="010">北京</option>
 56             <option value="021">上海</option>
 57             <option value="020">广州</option>
 58         </select>
 59     </p>
 60     <p>
 61         <label for="s2">出生地：</label>
 62         <select name="from" id="s2" multiple="multiple">  <!--multiple支持多选 选择时得按住Ctrl-->
 63             <option value="010">北京</option>
 64             <option value="021">上海</option>
 65             <option value="020">广州</option>
 66             <option value="0755">深圳</option>
 67         </select>
 68     </p>
 69 
 70 
 71     <p>
 72         <label for="t1">个人简介</label>
 73         <textarea name="memo" id="t1" cols="30" rows="10"></textarea>
 74     </p>
 75 
 76     <p>
 77         <input id="b1" type="submit" value="提交">
 78         <input id="cancel" type="button" value="取消">
 79     </p>
 80 </form>
 81 <script src="jquery-3.4.1.js"></script>
 82 <script>
 83     //点击登陆按钮验证用户名和密码不为空
 84     //若为空就在对应的input标签下面显示一个错误信息
 85 
 86     //1.给登陆按钮绑定事件
 87     //2.点击事件要做的事情
 88     //2.1找到input标签取值，判断是否为空-->length不为空
 89     //2.2如果不为空，什么也不做
 90     //2.3如果为空，做以下几件事
 91     //2.3.1 在当前这个input标签下面添加一个新的标签。内容为xx不能为空
 92     $("#b1").click(function () {
 93         var $needEles = $(".need");
 94         //定义一个标志位
 95         var flag=true;
 96         for(var i=0; i<$needEles.length; i++){
 97             //如果有错误
 98             if($($needEles[i]).val().trim().length===0) {
 99                 var labelName=$($needEles[i]).parent().text().trim();
100                  $($needEles[i]).next().text(labelName+"不能为空!");
101                  //将标志位设置成false
102                  flag=false;
103                  break;
104             }
105         }
106         return flag;
107     })
108 
109 
110 </script>
111 </body>
112 </html>

登陆校验

4. 属性操作：

// 用于ID等或自定义属性
attr(attrName)// 返回第一个匹配元素的属性值
attr(attrName, attrValue)// 为所有匹配元素设置一个属性值
attr({k1: v1, k2:v2})// 为所有匹配元素设置多个属性值
removeAttr()// 从每一个匹配的元素中删除一个属性

// 用于checkbox和radio
prop() // 获取属性
removeProp() // 移除属性

<input type="checkbox" value="1">
<input type="radio" value="2">
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
  $(":checkbox[value='1']").prop("checked", true);
  $(":radio[value='2']").prop("checked", true);
</script>

prop和attr的区别：

虽然都是属性，但他们所指的属性并不相同，
attr所指的属性是HTML标签属性，
prop所指的是DOM对象属性，
可以认为attr是显式的，而prop是隐式的。
总结一下：
对于标签上有的能看到的属性和自定义属性都用attr
对于返回布尔值的比如checkbox、radio和option的是否被选中都用prop。

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>全选、反选、取消</title>
 6 </head>
 7 <body>
 8 
 9 <table border="1">
10     <thead>
11     <tr>
12         <th>#</th>
13         <th>姓名</th>
14         <th>职位</th>
15     </tr>
16     </thead>
17     <tbody>
18     <tr>
19         <td><input type="checkbox"></td>
20         <td>方华</td>
21         <td>老师</td>
22     </tr>
23     <tr>
24         <td><input type="checkbox"></td>
25         <td>艾草</td>
26         <td>摄影师</td>
27     </tr>
28     <tr>
29         <td><input type="checkbox"></td>
30         <td>肖邦</td>
31         <td>工程师</td>
32     </tr>
33     </tbody>
34 </table>
35 <input type="button" id="b1" value="全选">
36 <input type="button" id="b2" value="反选">
37 <input type="button" id="b3" value="取消">
38 
39 <script src="jquery-3.4.1.js"></script>
40 <script>
41     //点击全选 表格中所有的checkbox都选中
42     //1.找checkbox
43     //2.全部选中 --> prop("checked",true)
44     $("#b1").click(function () {
45          $(":checkbox").prop("checked",true)
46     });
47       $("#b3").click(function () {
48          $(":checkbox").prop("checked",false)
49     });
50 
51     $("#b2").click(function () {
52         //找到所有的checkbox，存到变量$checkboxEles中
53          var $checkboxEles = $(":checkbox");
54          //遍历所有的checkbox，根据每一个checkbox的状态做不同的操作
55          for(var i = 0; i<$checkboxEles.length;i++){
56              //把每一个checkbox包成jQ
57              var $tmp=$($checkboxEles[i]);
58              //如果是选中的
59              if ($tmp.prop("checked")){
60                  //取消选中
61                  $tmp.prop("checked",false)
62              }else{
63                  //否则就选中
64                  $tmp.prop("checked",true)
65              }
66              
67          }
68     })
69 
70 </script>
71 </body>
72 </html>

全选、反选、取消

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>属性操作</title>
 6 </head>
 7 <body>
 8 <img src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1578449411&di=333a0e6d5db1c753930381c373196fbf&src=http://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20180928/f4f9462f4eb84879b17a39e4cc8f0e68.jpeg" alt="">
 9 
10 <p>
11     <input type="button" id = "b1" value="next">
12 </p>
13 <script src="jquery-3.4.1.js"></script>
14 <script>
15 
16     var newURL = "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3916310748,3882771885&fm=26&gp=0.jpg";
17     $("#b1").click(function () {
18         //修改img标签的src属性
19         $("img").attr("src",newURL)
20     });
21 </script>
22 
23 </body>
24 </html>

attr用法

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>替换操作示例</title>
 6 </head>
 7 <body>
 8 <p><a href="http://www.baidu.com">百度</a></p>
 9 
10 <button id = "b1">点我！</button>
11 <script src="jquery-3.4.1.js"></script>
12 <script>
13     $("#b1").click(function () {
14         //创建一个img标签
15     var imgEle = document.createElement("img");
16     $(imgEle).attr("src","http://c.hiphotos.baidu.com/zhidao/pic/item/d009b3de9c82d1587e249850820a19d8bd3e42a9.jpg");
17     $("a").replaceWith(imgEle);
18     });
19 
20 </script>
21 </body>
22 </html>

替换标签

文档处理

1. 添加到指定元素内部的后面

$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B

2. 添加到指定元素内部的前面

$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B

3. 添加到指定元素外部的后面

$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面

4. 添加到指定元素外部的前面

$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面

5. 移除和清空元素

remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>点击在表格最后添加一条记录-on绑定</title>
 6 </head>
 7 <body>
 8 <table border="1" id="t1">
 9     <thead>
10     <tr>
11         <th>#</th>
12         <th>姓名</th>
13         <th>爱好</th>
14         <th>操作</th>
15     </tr>
16     </thead>
17     <tbody>
18     <tr>
19         <td>1</td>
20         <td>小强</td>
21         <td>吃蛋糕</td>
22         <td>
23             <button class="del">删除</button>
24         </td>
25     </tr>
26      <tr>
27         <td>2</td>
28         <td>小爱</td>
29         <td>Girl</td>
30          <td>
31             <button class="del">删除</button>
32         </td>
33     </tr>
34     </tbody>
35 </table>
36 
37 <button id="b1">添加数据</button>
38 <script src="jquery-3.4.1.js"></script>
39 <script>
40     //绑定事件
41     $("#b1").on("click",function () {
42         //生成要添加的tr标签及其数据
43         var trEle = document.createElement("tr");
44         $(trEle).html("<td>3</td><td>小东</td><td>社会</td><td><button class=\"del\">删除</button></td>");
45 
46         //把tr插入表格中
47         $("#t1").find("tbody").append(trEle);
48     });
49 
50     //每一行的删除按钮绑定事件
51     $("tbody").on("click",".del",function () {
52         $(this).parent().parent().remove()
53     })
54 </script>
55 
56 </body>
57 </html>

表格添加数据

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>克隆示例</title>
 6 </head>
 7 <body>
 8 <button id="b1">锤你</button>
 9 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
10 <script>
11     $("#b1").click(function () {
12         $(this).clone(true).insertAfter(this);
13     })
14 </script>
15 </body>
16 </html>

克隆示例

事件

常用事件：

click(function(){...})
hover(function(){...})
blur(function(){...})
focus(function(){...})
change(function(){...})
keyup(function(){...})

  1 <!DOCTYPE html>
  2 <html lang="zh-CN">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>键盘相关事件</title>
  6 </head>
  7 <body>
  8 <table border="1" id="t1">
  9     <thead>
 10     <tr>
 11         <th>#</th>
 12         <th>姓名</th>
 13         <th>爱好</th>
 14         <th>操作</th>
 15     </tr>
 16     </thead>
 17     <tbody>
 18     <tr>
 19         <td><input type="checkbox"></td>
 20         <td>小一</td>
 21         <td>吃蛋糕</td>
 22         <td>
 23             <select>
 24                 <option value="0">下线</option>
 25                 <option value="1">上线</option>
 26                 <option value="2">离线</option>
 27             </select>
 28 
 29         </td>
 30     </tr>
 31      <tr>
 32         <td><input type="checkbox"></td>
 33         <td>小二</td>
 34         <td>Girl</td>
 35          <td>
 36             <select>
 37                 <option value="0">下线</option>
 38                 <option value="1">上线</option>
 39                 <option value="2">离线</option>
 40             </select>
 41         </td>
 42     </tr>
 43     <tr>
 44         <td><input type="checkbox"></td>
 45         <td>小三</td>
 46         <td>boy</td>
 47          <td>
 48             <select>
 49                 <option value="0">下线</option>
 50                 <option value="1">上线</option>
 51                 <option value="2">离线</option>
 52             </select>
 53         </td>
 54     </tr>
 55     <tr>
 56         <td><input type="checkbox"></td>
 57         <td>小四</td>
 58         <td>Girl</td>
 59         <td>
 60             <select>
 61                 <option value="0">下线</option>
 62                 <option value="1">上线</option>
 63                 <option value="2">离线</option>
 64             </select>
 65         </td>
 66     </tr>
 67     </tbody>
 68 </table>
 69 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
 70 <script>
 71     var mode=false;
 72     var $bodyEle = $("body");
 73     //给文档绑定 监听键盘按键
 74      $bodyEle.on("keydown",function(evt){
 75         if(evt.keyCode===17){
 76             //进入批量操作模式
 77             mode=true;
 78         }
 79     });
 80     //按键抬起来时候，退出批量操作模式
 81      $bodyEle.on("keyup",function(evt){
 82         console.log(evt.keyCode);
 83         if(evt.keyCode===17){
 84             //进入批量操作模式
 85             mode=false;
 86         }
 87     });
 88 
 89     $("select").on("change",function(){
 90         //取到当前selelct标签的值
 91         var value = $(this).val();
 92         var $thisCheckbox = $(this).parent().siblings().first().find(":checkbox");
 93         //判断checkbox是否选中
 94         if($thisCheckbox.prop("checked")&&mode){
 95             //真正进入批量模式
 96             var $checkdEles=$("input[type='checkbox']:checked");
 97             for(var i=0; i<$checkdEles.length;i++){
 98                 $($checkdEles[i]).parent().siblings().last().find("select").val(value);
 99             }
100 
101         }
102     })
103 </script>
104 </body>
105 </html>

按住Ctrl进入批量处理

事件绑定

 .on( events , selector ,function(){...})

绑定事件整理：
1. 在标签里面写 onclick="func(this);"
2. 原生的DOM的JS绑定： DOM对象.onclick=function(){...}
3. jQuery版的绑定事件：jQuery对象.click(function(){...})

# 今后用jQuery绑定事件的方式
.on("click",function(){...})
.on("click","选择器",function(){...})
适用于给未来的元素(页面生成时候还没有的标签)绑定事件(事件委托)

移出事件

.off( events , selector, function(){....}])

阻止后续事件执行

1. return false; // 常见阻止表单提交等
2. e.preventDefault();

页面载入

当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

$(document).ready(function(){
// 在这里写你的JS代码...
})
简写：

$(function(){
// 你在这里写你的代码
})

事件委托

是通过事件冒泡的原理，利用父标签去捕获子标签的事件。

例如：

表格中的每一行的编辑和删除按钮都能触发相应的事件

$("table").on("click", ".delete", function () {
  // 删除按钮绑定的事件
})

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>自定义动画点赞</title>
 6     <style>
 7         div{
 8             position: relative;
 9             display: inline-block;
10             
11         }
12         div>i{
13             display:inline-block;
14             color:red;
15             position: absolute;
16             right:-16px;
17             opacity: 1;
18         }
19     </style>
20     
21 </head>
22 <body>
23 <div id="d1">点赞</div>
24 <script src="jquery-3.4.1.js"></script>
25 <script>
26     $("#d1").on("click",function () {
27         var newI = document.createElement("i");
28         newI.innerText="+1";
29         $(this).append(newI);
30         $(this).children("i").animate({
31             opacity:0
32         },1000)
33     })
34 
35 </script>
36 </body>
37 </html>

点赞示例

补充

each

1.遍历
var a1=[1,2,3,4];
$.each(a1,function(k,v){
    console.log(k,v);
});

2. 不打印2
$.each(a1,function(k,v){
    if(v===2){
    return;
}
    console.log(v);
});

3. 到2停止循环
$.each(a1,function(k,v){
    if(v===2){
    return false;
}
    console.log(v);
});

  1 <!DOCTYPE html>
  2 <html lang="zh-CN">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>周末作业分解</title>
  6     <style>
  7         .cover {
  8             position: fixed;
  9             top: 0;
 10             right: 0;
 11             bottom: 0;
 12             left: 0;
 13             background-color: #616161;
 14             opacity: 0.4;
 15             z-index: 998;
 16         }
 17 
 18         .modal {
 19             height: 400px;
 20             width: 600px;
 21             background-color: white;
 22             position: absolute;
 23             margin-top: -200px;
 24             margin-left: -300px;
 25             top: 50%;
 26             left: 50%;
 27             z-index: 1000;
 28         }
 29 
 30         .hide {
 31             display: none;
 32         }
 33     </style>
 34 </head>
 35 <body>
 36 <button id="add">新增</button>
 37 
 38 <table border="1">
 39     <thead>
 40     <tr>
 41         <th>#</th>
 42         <th>姓名</th>
 43         <th>爱好</th>
 44         <th>操作</th>
 45     </tr>
 46     </thead>
 47     <tbody>
 48     <tr>
 49         <td>1</td>
 50         <td>Egon</td>
 51         <td>街舞</td>
 52         <td>
 53             <button class="edit-btn">编辑</button>
 54             <button class="delete-btn">删除</button>
 55         </td>
 56     </tr>
 57     <tr>
 58         <td>2</td>
 59         <td>Alex</td>
 60         <td>跑步</td>
 61         <td>
 62             <button class="edit-btn">编辑</button>
 63             <button class="delete-btn">删除</button>
 64 
 65         </td>
 66     </tr>
 67     <tr>
 68         <td>3</td>
 69         <td>Tom</td>
 70         <td>听歌</td>
 71         <td>
 72             <button class="edit-btn">编辑</button>
 73             <button class="delete-btn">删除</button>
 74         </td>
 75     </tr>
 76     <tr>
 77         <td>4</td>
 78         <td>Smith</td>
 79         <td>拳击</td>
 80         <td>
 81             <button class="edit-btn">编辑</button>
 82             <button class="delete-btn">删除</button>
 83         </td>
 84     </tr>
 85 
 86     </tbody>
 87 </table>
 88 
 89 <div id="myCover" class="cover hide"></div>
 90 <div id="myModal" class="modal hide ">
 91     <div>
 92         <p>
 93             <label for="modal-name">姓名</label>
 94             <input type="text" id="modal-name">
 95         </p>
 96         <p>
 97             <label for="modal-hobby">爱好</label>
 98             <input type="text" id="modal-hobby">
 99         </p>
100         <p>
101             <button id="modal-submit">提交</button>
102             <button id="modal-cancel">取消</button>
103         </p>
104     </div>
105 </div>
106 <script src="jquery-3.4.1.js"></script>
107 <script>
108     //定义一个弹出模态框的函数
109     function showModal() {
110         $("#myModal,#myCover").removeClass("hide");
111     }
112 
113     //定义一个关闭模态框函数
114     function closeModal() {
115         //清空模态框中的input标签
116         $("#myModal").find("input").val("");
117         $("#myModal,#myCover").addClass("hide");
118     }
119 
120     //给新增按钮绑定事件
121     $("#add").on("click", function () {
122         //把模态框弹出
123         showModal();
124     });
125 
126     //模态框中的取消按钮绑定事件
127     $("#modal-cancel").on("click", function () {
128         //隐藏模态框
129         closeModal();
130     });
131 
132     //模态框中的提交按钮事件
133     $("#modal-submit").on("click", function () {
134         //1.取到用户填写的input框的值
135         var name = $("#modal-name").val();  //把用户在模态框中输入的姓名获取到，保存在name中
136         var hobby = $("#modal-hobby").val(); //把用户在模态框中输入的爱好获取到，保存在hobby中
137 
138         //判断，按需操作
139         var $myModalEle = $("#myModal");
140         var $currentTrEle = $myModalEle.data("currentTr");
141         if ($currentTrEle !== undefined) {
142             //说明是编辑状态
143             $currentTrEle.children().eq(1).text(name);  
144             $currentTrEle.children().eq(2).text(hobby);
145 
146             //清空之前保存的当前行
147             $myModalEle.removeData();
148         } else {
149             //创建tr标签填数据
150             var trEle = document.createElement("tr");
151             var number = $("tr").length;
152             $(trEle).html("<td>" + number + "</td>" +
153                 "<td>" + name + "</td>" +
154                 "<td>" + hobby + "</td>" +
155                 '<td><button class="edit-btn">编辑</button> <button class="delete-btn">删除</button></td>'
156             );
157             //把创建好的tr添加到tbody中
158             $("tbody").append(trEle);
159         }
160         //隐藏模态框
161         closeModal();
162         //2.根据是编辑还是新增 做不同操作
163         //  2.1新增:生成一条新的tr，加到table的最后
164         //  2.2编辑:根据先前编辑按钮那一行改变值
165         //难点在于v如何确定是那一行 --> 利用data()存具体的jQuery
166     });
167 
168     //给每一行编辑按钮绑定事件
169     //要使用事件委托，基于已经存在的元素绑定事件(页面加载完后存在的标签)
170     $("tbody").on("click", ".edit-btn", function () {
171         //模态框弹出
172         showModal();
173         //把原来数据填写到模态框中的input
174         var $currentTrEle = $(this).parent().parent();
175         //把当前行的jQuery对象保存 便于判断是编辑还是新增 在新增中进行判断
176         $("#myModal").data("currentTr", $currentTrEle);
177         var name = $currentTrEle.children().eq(1).text();
178         var hobby = $currentTrEle.children().eq(2).text();
179         //填
180         $("#modal-name").val(name);
181         $("#modal-hobby").val(hobby);
182     });
183     //给每一行删除按钮绑定事件
184     $("tbody").on("click", ".delete-btn", function () {
185         //找到tr标签
186         var $currentTrEle = $(this).parent().parent();
187         //更新序号
188         //找到当前行后面所有的tr，依次更新序号
189         $currentTrEle.nextAll().each(function () {
190             //取到原来的序号
191             var oldNumber = $(this).children().first().text();
192             // var oldNumber = $(this).children().eq(0).text();
193             //减一后再赋值给序号值
194             $(this).children().first().text(oldNumber - 1);
195         });
196         //删除被点击的删除按钮那一行
197         $currentTrEle.remove();
198     });
199 </script>
200 </body>
201 </html>

表用户的新增编辑

data

我们可以给任意的jQuery对象保存数据。
$("body").data("k1","v1");
$("body").data("k2","v2");
$("body").data("k1");
$("body").removeData("k1")   --> 删除k1的值

Bootstrapt

介绍

1. Bootstrap是Twitter开源的基于HTML、CSS、JavaScript的前端框架。
2. 它是为实现快速开发Web应用程序而设计的一套前端工具包。
3. 它支持响应式布局，并且在V3版本之后坚持移动设备优先。

Bootstrapt下载

中文地址：http://www.bootcss.com

下载完解文件夹之后，把BootStrapt文件夹拷贝到项目目录，然后在页面引入即可。

BootStrapt目录结构：

bootstrap-3.3.7-dist/
├── css  // CSS文件
│   ├── bootstrap-theme.css  // Bootstrap主题样式文件
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css  // 主题相关样式压缩文件
│   ├── bootstrap-theme.min.css.map
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css  // 核心CSS样式压缩文件
│   └── bootstrap.min.css.map
├── fonts  // 字体文件
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   ├── glyphicons-halflings-regular.woff
│   └── glyphicons-halflings-regular.woff2
└── js  // JS文件
    ├── bootstrap.js
    ├── bootstrap.min.js  // 核心JS压缩文件
    └── npm.js

BootStrapt使用手册

  1 <!DOCTYPE html>
  2 <html lang="zh-CN">
  3 <head>
  4     <meta charset="UTF-8">
  5     <title>常用的样式</title>
  6     <meta name="viewport" content="width=device-width, initial-scale=1">
  7     <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
  8 </head>
  9 <body>
 10 
 11 <div class="container">
 12     <h1>h1.Bootstrap heading<small>Secondary text</small></h1>
 13     <h2>h1.Bootstrap heading<small>Secondary text</small></h2>
 14     <h3>h1.Bootstrap heading<small>Secondary text</small></h3>
 15     <h4>h1.Bootstrap heading<small>Secondary text</small></h4>
 16     <h5>h1.Bootstrap heading<small>Secondary text</small></h5>
 17     <h6>h1.Bootstrap heading<small>Secondary text</small></h6>
 18     <p>世情薄， 人情恶， 雨送黄昏花易落， 晓风干，
 19         <ins>泪痕残， 欲笺(jian)心事， 独语斜阑， 难，难，难！</ins>
 20         人成各， 今非昨， 病魂常似秋千索， 角声寒， 夜阑珊， 怕人询问， 咽(yan)泪装欢 瞒，瞒，瞒！
 21     </p>
 22     <!--    class="lead" 突出显示-->
 23     <p class="lead">世情薄，
 24         <del>人情恶</del>
 25         ， 雨送黄昏花易落， 晓风干， 泪痕残， 欲笺(jian)心事， 独语斜阑， 难，难，难！ 人成各， 今非昨， 病魂常似秋千索， 角声寒， 夜阑珊， 怕人询问， 咽(yan)泪装欢 瞒，瞒，瞒！
 26     </p>
 27     <p>高亮坐在我的
 28         <mark>右边!</mark>
 29     </p>
 30     <p class="text-left">Left aligned text.</p>
 31     <p class="text-center">Center aligned text.</p>
 32     <p class="text-right">Right aligned text.</p>
 33     <p class="text-justify">Justified text.</p>
 34     <p class="text-nowrap">No wrap text.</p>
 35 
 36     <p class="text-lowercase">Lowercased text.</p>
 37     <p class="text-uppercase">Uppercased text.</p>
 38     <p class="text-capitalize">Capitalized text.</p>
 39 
 40     <blockquote>
 41         <p>技术的提升只是量的积累，思想的提升才是质的飞跃。</p>
 42         <footer>老男孩思想</footer>
 43     </blockquote>
 44 
 45     <ul class="list-inline">
 46         <li>111</li>
 47         <li>222</li>
 48         <li>333</li>
 49     </ul>
 50 
 51     <div class="bs-example" data-example-id="horizontal-dl">
 52         <dl class="dl-horizontal">
 53             <dt>Description lists</dt>
 54             <dd>A description list is perfect for defining terms.</dd>
 55             <dt>Euismod</dt>
 56             <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
 57             <dd>Donec id elit non mi porta gravida at eget metus.</dd>
 58             <dt>Malesuada porta</dt>
 59             <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
 60             <dt>Felis euismod semper eget lacinia</dt>
 61             <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit
 62                 amet risus.
 63             </dd>
 64         </dl>
 65     </div>
 66     <code>&lt;div&gt;</code>
 67     <code>&lt;print("hello.world")&gt;</code>
 68     <p>
 69         To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br>
 70         To edit settings, press <kbd>ctrl</kbd> + <kbd>,</kbd>
 71     </p>
 72 </div>
 73 
 74 <table class="table table-bordered table-striped table-hover table-condensed">
 75     <thead>
 76     <tr>
 77         <th>#</th>
 78         <th>姓名</th>
 79         <th>爱好</th>
 80         <th>操作</th>
 81     </tr>
 82     </thead>
 83     <tbody>
 84     <tr class="success">
 85         <td>1</td>
 86         <td>小强</td>
 87         <td>吃蛋糕</td>
 88         <td>
 89             <button class="del">删除</button>
 90             <button class="edit">编辑</button>
 91         </td>
 92     </tr>
 93     <tr class="warning">
 94         <td>2</td>
 95         <td>小爱</td>
 96         <td>Girl</td>
 97         <td>
 98             <button class="del">删除</button>
 99             <button class="edit">编辑</button>
100         </td>
101     </tr>
102     <tr class="danger">
103         <td>3</td>
104         <td>小东</td>
105         <td>boy</td>
106         <td>
107             <button class="del">删除</button>
108             <button class="edit">编辑</button>
109         </td>
110     </tr>
111     <tr class="info">
112         <td>4</td>
113         <td>小峰</td>
114         <td>boy</td>
115         <td>
116             <button class="del">删除</button>
117             <button class="edit">编辑</button>
118         </td>
119     </tr>
120     </tbody>
121 </table>
122 
123 <form>
124   <div class="form-group">
125     <label for="exampleInputEmail1">Email address</label>
126     <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
127   </div>
128   <div class="form-group">
129     <label for="exampleInputPassword1">Password</label>
130     <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
131   </div>
132   <div class="form-group">
133     <label for="exampleInputFile">File input</label>
134     <input type="file" id="exampleInputFile">
135     <p class="help-block">Example block-level help text here.</p>
136   </div>
137   <div class="checkbox">
138     <label>
139       <input type="checkbox"> Check me out
140     </label>
141   </div>
142   <button type="submit" class="btn btn-default">Submit</button>
143 </form>
144 
145 <script src="jquery-3.4.1.js"></script>
146 <script SRC="bootstrap/js/bootstrap.min.js"></script>
147 </body>
148 </html>

BootStrapt使用示例

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>媒体查询</title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <style>
 8         .c1{
 9             height: 100px;
10             width: 100px;
11             background-color:red;
12         }
13         /*当打开网页的设备是一个显示器设备，并且显示器的宽度小于600px时候，使用下面的样式*/
14         @media screen and (max-width: 600px) {
15             .c2{
16                 background: green;
17             }
18         }
19     </style>
20 </head>
21 <body>
22 <div class="c1 c2"></div>
23 </body>
24 </html>

媒体查询

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>轮播图实例</title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
 8 
 9 </head>
10 <body>
11 
12 <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
13     <!-- Indicators -->
14     <ol class="carousel-indicators">
15         <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
16         <li data-target="#carousel-example-generic" data-slide-to="1"></li>
17         <li data-target="#carousel-example-generic" data-slide-to="2"></li>
18     </ol>
19 
20     <!-- Wrapper for slides -->
21     <div class="carousel-inner" role="listbox">
22         <div class="item active">
23             <img src="images/flowers.jpg" alt="...">
24             <div class="carousel-caption">
25                 <h1>第一页介绍</h1>
26                 <p>老实人的恶毒，像沙砾</p>
27             </div>
28         </div>
29         <div class="item">
30             <img src="images/night.jpg" alt="...">
31             <div class="carousel-caption">
32             </div>
33         </div>
34         <div class="item">
35             <img src="images/surf.jpg" alt="...">
36             <div class="carousel-caption">
37             </div>
38         </div>
39 
40     </div>
41 
42     <!-- Controls -->
43     <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
44         <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
45         <span class="sr-only">Previous</span>
46     </a>
47     <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
48         <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
49         <span class="sr-only">Next</span>
50     </a>
51 </div>
52 
53 <hr>
54 <!-- Button trigger modal -->
55 <button class="btn btn-success" data-toggle="modal" data-target="#">点我弹出</button>
56 
57 <!-- Modal -->
58 <div class="modal fade" id="i1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
59     <div class="modal-dialog" role="document">
60         <div class="modal-content">
61             <div class="modal-header">
62                 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
63                 </button>
64                 <h4 class="modal-title" id="myModalLabel">模态框</h4>
65             </div>
66             <div class="modal-body">
67 
68                 <form class="form-horizontal">
69                     <div class="form-group">
70                         <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
71                         <div class="col-sm-10">
72                             <input type="email" class="form-control" id="inputEmail3" placeholder="Email">
73                         </div>
74                     </div>
75                     <div class="form-group">
76                         <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
77                         <div class="col-sm-10">
78                             <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
79                         </div>
80                     </div>
81                 </form>
82             </div>
83             <div class="modal-footer">
84                 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
85                 <button type="button" class="btn btn-primary">保存</button>
86             </div>
87         </div>
88     </div>
89 </div>
90 
91 <script src="jquery-3.4.1.js"></script>
92 <script src="bootstrap/js/bootstrap.min.js"></script>
93 <script>
94     $(".carousel").carousel({
95         interval: 2000
96     })
97 </script>
98 </body>
99 </html>

轮播图示例

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>巨幕</title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
 8 
 9 </head>
10 <body>
11 <div class="container">
12 
13     <div class="jumbotron">
14         <h1>Hello, world!</h1>
15         <p>忠厚老实人的恶毒像饭里的砂砾或者出骨鱼片里未净的刺,会给人一种不期待的伤痛。</p>
16         <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
17     </div>
18 
19 </div>
20 
21 <script src="jquery-3.4.1.js"></script>
22 <script src="bootstrap/js/bootstrap.min.js"></script>
23 
24 </body>
25 </html>

巨幕

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>进度条</title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
 8 
 9 </head>
10 <body>
11 <div class="container">
12     <div class="progress">
13         <div id="myBar" class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45"
14              aria-valuemin="0"
15              aria-valuemax="100" style="width: 0%">0% >
16         </div>
17     </div>
18 </div>
19 <script src="jquery-3.4.1.js"></script>
20 <script src="bootstrap/js/bootstrap.min.js"></script>
21 <script>
22     //定义一个进度条宽度的变量
23     var width = 0;
24     //定义一个保存定时器的变量
25     var t;
26 
27     var $myBar = $("#myBar");
28 
29     function changeWidth(n) {
30         if (width < 100) {
31             //自加1
32             width++;
33             //修改属性
34             $myBar.css("width", width + "%");
35             $myBar.text(width + "%");
36         } else {
37             //清除定时器
38             clearInterval(t)
39         }
40     }
41     //每隔200ms运行一次、
42    t = setInterval(changeWidth, 200)
43 </script>
44 
45 </body>
46 </html>

进度条

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>面板</title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
 8 
 9 </head>
10 <body>
11 <div class="container">
12     <!--页头-->
13     <div class="page-header">
14         <h1>信息收集卡<small>共三步</small></h1>
15     </div>
16     <!--    进度条-->
17     <div class="progress">
18         <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="33" aria-valuemin="0"
19              aria-valuemax="100" style="width: 33%;">
20             1/3
21         </div>
22     </div>
23 
24     <div class="panel panel-primary">
25         <div class="panel-heading">
26             <h3 class="panel-title">基本信息 <span class="glyphicon glyphicon-pushpin pull-right"></span></h3>
27         </div>
28         <div class="panel-body">
29             <form class="form-horizontal">
30 
31                 <div class="form-group">
32                     <label for="name" class="col-sm-2 control-label">姓名</label>
33                     <div class="col-sm-4">
34                         <input type="text" class="form-control" id="name" placeholder="姓名">
35                     </div>
36                 </div>
37 
38                 <div class="form-group">
39                     <label for="phone" class="col-sm-2 control-label">手机</label>
40                     <div class="col-sm-4">
41                         <input type="text" class="form-control" id="phone" placeholder="手机">
42                     </div>
43                 </div>
44 
45                 <div class="form-group">
46                     <label for="inputEmail" class="col-sm-2 control-label">邮箱</label>
47                     <div class="col-sm-4">
48                         <input type="email" class="form-control" id="inputEmail" placeholder="邮箱">
49                     </div>
50                 </div>
51 
52                 <div class="form-group">
53                     <label for="inputPassword" class="col-sm-2 control-label">密码</label>
54                     <div class="col-sm-4">
55                         <input type="password" class="form-control" id="inputPassword" placeholder="邮箱">
56                     </div>
57                 </div>
58 
59                 <div class="form-group">
60                     <label for="inputfile" class="col-sm-2 control-label">头像</label>
61                     <div class="col-sm-4">
62                         <input type="file" class="" id="inputfile">
63                     </div>
64 
65                 </div>
66                 <hr>
67 
68                 <div class="form-group">
69                     <label for="inputfile" class="col-sm-2 control-label">爱好</label>
70                     <div class="col-sm-10">
71                         <div class="radio">
72                             <label>
73                                 <input type="radio" disabled>关关雎鸠，在河之洲
74                             </label>
75 
76                         </div>
77                         <div class="radio">
78                             <label>
79                                 <input type="radio">窈窕淑女，君子好逑
80                             </label>
81                         </div>
82                     </div>
83                 </div>
84             </form>
85         </div>
86     </div>
87     <button class="btn btn-success pull-right">下一步</button>
88 </div>
89 
90 <script src="jquery-3.4.1.js"></script>
91 <script src="bootstrap/js/bootstrap.min.js"></script>
92 
93 </body>
94 </html>

面板

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <!--引入BootStrap的样式，提供了大量的样式-->
 7     <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 8 </head>
 9 <style>
10     body {
11         margin: 0;
12     }
13 </style>
14 <body>
15 <div style="width: 500px;margin: 50px auto 0 auto;border: 1px solid #dddddd;padding: 10px 15px;">
16     <h2 style="text-align: center;margin-top: 10px;margin-bottom: 20px;">用户登录</h2>
17     <form class="form-horizontal">
18         <div class="form-group">
19             <label for="userName" class="col-sm-2 control-label">用户名</label>
20             <div class="col-sm-10">
21                 <input type="email" class="form-control" id="userName" placeholder="请输入用户名">
22             </div>
23         </div>
24         <div class="form-group">
25             <label for="password" class="col-sm-2 control-label">密码</label>
26             <div class="col-sm-10">
27                 <input type="password" class="form-control" id="password" placeholder="请输入密码">
28             </div>
29         </div>
30         <div class="form-group">
31             <div class="col-sm-offset-2 col-sm-10">
32                 <div class="checkbox">
33                     <label>
34                         <input type="checkbox"> 记住密码
35                     </label>
36                 </div>
37             </div>
38         </div>
39         <div class="form-group">
40             <div class="col-sm-offset-2 col-sm-10">
41                 <button type="submit" class="btn btn-primary">登 录</button>
42             </div>
43         </div>
44     </form>
45 </div>
46 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
47 <!--引入BootStrap的js，提供了一些动态效果。注意：必须先引入jQuery-->
48 <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
49 </body>
50 </html>

用户登录

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6     <!--引入BootStrap的样式，提供了大量的样式-->
 7     <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 8 </head>
 9 <style>
10     body {
11         margin: 0;
12     }
13     .register {
14         width: 400px;
15         margin-top: 30px;
16         margin-left: auto;
17         margin-right: auto;
18         border: 1px solid #f0f0f0;
19         padding: 10px 30px 30px 30px;
20         -webkit-box-shadow: 5px 10px 10px rgba(0, 0, 0, .05);
21         box-shadow: 5px 10px 10px rgba(0, 0, 0, .05);
22     }
23 </style>
24 <body>
25 <div class="register">
26     <div style="font-size: 25px; font-weight: bold;text-align: center;">
27         用户注册
28     </div>
29     <form id="fm" method="POST" novalidate>
30         <div class="form-group">
31             <label for="id_username">用户名</label>
32             <input type="text" name="username" maxlength="32" minlength="4" class="form-control"
33                    placeholder="请输入用户名" required id="id_username"/>
34             <span class="error-msg"></span>
35         </div>
36         <div class="form-group">
37             <label for="id_password">密码</label>
38             <input type="password" name="password" maxlength="64" minlength="8" class="form-control"
39                    placeholder="请输入密码" required id="id_password"/>
40             <span class="error-msg"></span>
41         </div>
42         <div class="form-group">
43             <label for="id_confirm_password">确认密码</label>
44             <input type="password" name="confirm_password" maxlength="64" minlength="8" class="form-control"
45                    placeholder="请输入确认密码" required id="id_confirm_password"/>
46             <span class="error-msg"></span>
47         </div>
48         <div class="form-group">
49             <label for="id_telephone">手机号</label>
50             <input type="text" name="telephone" class="form-control" placeholder="请输入手机号" required
51                    id="id_telephone"/>
52             <span class="error-msg"></span>
53         </div>
54         <div class="form-group">
55             <label for="id_code">短信验证码</label>
56             <div class="row">
57                 <div class="col-xs-7">
58                     <input type="text" name="code" class="form-control" placeholder="请输入短信验证码" required
59                            id="id_code"/>
60                     <span class="error-msg"></span>
61                 </div>
62                 <div class="col-xs-5">
63                     <input id="smsBtn" type="button" class="btn btn-default" value="点击获取验证码">
64                 </div>
65             </div>
66         </div>
67         <div class="row">
68             <div class="col-xs-3">
69                 <input id="submit" type="button" class="btn btn-primary" value="注  册"/>
70             </div>
71         </div>
72     </form>
73 </div>
74 <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
75 <!--引入BootStrap的js，提供了一些动态效果。注意：必须先引入jQuery-->
76 <script src="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
77 </body>
78 </html>

用户注册

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>导航条示例</title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
 8   <style>
 9     body{
10       padding-top: 70px;
11     }
12   </style>
13 </head>
14 <body>
15 
16 <nav class="navbar navbar-inverse navbar-fixed-top">
17     <div class="container-fluid">
18         <!-- Brand and toggle get grouped for better mobile display -->
19         <div class="navbar-header">
20             <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
21                     data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
22                 <span class="sr-only">Toggle navigation</span>
23                 <span class="icon-bar"></span>
24                 <span class="icon-bar"></span>
25                 <span class="icon-bar"></span>
26             </button>
27             <a class="navbar-brand" href="#">老男孩教育</a>
28         </div>
29 
30         <!-- Collect the nav links, forms, and other content for toggling -->
31         <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
32             <ul class="nav navbar-nav">
33                 <li><a href="#">Linux学院 <span class="sr-only">(current)</span></a></li>
34                 <li><a href="#">python学院</a></li>
35                 <li><a href="#">大数据学院</a></li>
36                 <li><a href="#">JavaScript</a></li>
37                 <li><a href="#">前端学院</a></li>
38 
39 
40                 <li class="dropdown">
41                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
42                     <ul class="dropdown-menu">
43                         <li><a href="#">Action</a></li>
44                         <li><a href="#">Another action</a></li>
45                         <li><a href="#">Something else here</a></li>
46                         <li role="separator" class="divider"></li>
47                         <li><a href="#">Separated link</a></li>
48                         <li role="separator" class="divider"></li>
49                         <li><a href="#">One more separated link</a></li>
50                     </ul>
51                 </li>
52             </ul>
53             <ul class="nav navbar-nav navbar-right">
54                 <li><a href="#">登陆/注册</a></li>
55                 <li class="dropdown">
56                     <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
57                        aria-expanded="false">联系我们<span class="caret"></span></a>
58                     <ul class="dropdown-menu">
59                         <li><a href="#">Action</a></li>
60                         <li><a href="#">Another action</a></li>
61                         <li><a href="#">Something else here</a></li>
62                         <li role="separator" class="divider"></li>
63                         <li><a href="#">Separated link</a></li>
64                     </ul>
65                 </li>
66             </ul>
67         </div><!-- /.navbar-collapse -->
68     </div><!-- /.container-fluid -->
69 </nav>
70 
71 <div class="container">
72   呵呵
73 </div>
74 
75 <script src="jquery-3.4.1.js"></script>
76 <script src="bootstrap/js/bootstrap.min.js"></script>
77 
78 </body>
79 </html>

导航条

FontAwesome图标库

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Font-awesome</title>
 6     <meta name="viewport" content="width=device-width, initial-scale=1">
 7     <link rel="stylesheet" href="bootstrap/css/bootstrap.min.css">
 8     <link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css">
 9 </head>
10 <body>
11 
12 <div class="container">
13     <i class="fa fa-weixin" style="color: green"></i>
14     <i class="fa fa-weibo" aria-hidden="true"></i>
15     <i class="fa fa-weibo fa-lg" aria-hidden="true"></i>
16     <i class="fa fa-weibo fa-2x" aria-hidden="true"></i>
17     <i class="fa fa-weibo fa-3x" aria-hidden="true"></i>
18     <i class="fa fa-weibo fa-3x fa-rotate-180" aria-hidden="true"></i>
19     <i class="fa fa-weibo fa-3x fa-flip-horizontal" aria-hidden="true"></i>
20 
21     <span class="fa-stack fa-lg">
22         <i class="fa fa-weibo fa-stack-1x"></i>
23         <i class="fa fa-ban fa-stack-2x text-danger"></i>
24     </span>
25 
26     <button class="btn btn-danger"><i class="fa fa-trash"></i>&nbsp;删除</button>
27     <div class="list-group">
28         <a class="list-group-item" href="#"><i class="fa fa-home fa-fw" aria-hidden="true"></i>&nbsp;home</a>
29         <a class="list-group-item" href="#"><i class="fa fa-book fa-fw" aria-hidden="true"></i>&nbsp;Library</a>
30         <a class="list-group-item" href="#"><i class="fa fa-pencil fa-fw" aria-hidden="true"></i>&nbsp;Application</a>
31         <a class="list-group-item" href="#"><i class="fa fa-cog fa-fw" aria-hidden="true"></i>&nbsp;Setting</a>
32     </div>
33     <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
34     <span class="sr-only">Loading...</span>
35 
36     <i class="fa fa-circle-o-notch fa-spin fa-3x fa-fw"></i>
37     <span class="sr-only">Loading...</span>
38 
39     <i class="fa fa-refresh fa-spin fa-3x fa-fw"></i>
40     <span class="sr-only">Loading...</span>
41 
42     <i class="fa fa-cog fa-spin fa-3x fa-fw"></i>
43     <span class="sr-only">Loading...</span>
44 
45     <i class="fa fa-spinner fa-pulse fa-3x fa-fw"></i>
46     <span class="sr-only">Loading...</span>
47 </div>
48 
49 <script src="jquery-3.4.1.js"></script>
50 <script src="bootstrap/js/bootstrap.min.js"></script>
51 
52 </body>
53 </html>

FontAwesome使用图标示例

前端 (HTML、CSS、JavaScript、BOM和DOM、jQuery、Bootstrapt)

猜你喜欢