zoukankan html css js c++ java

前端

第十二章: 前端开发

12.1 HTML介绍

web服务本质

import socket

sk = socket.socket()
sk.bind(('127.0.0.1',8008))
sk.listen()

while True:
    conn,addr = sk.accept()
    data = conn.recv(1024)
    conn.send(b"HTTP/1.1 200 OK

")
    conn.send(b'<h1>hello word</h1>')
    conn.close()

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

HTML 是什么?
- 超文本标记语言,是一种用于创建网页的标记语言,不是编程语言
- 本质上是浏览器可识别的规则,我们按照规则写网页,浏览器根据规则渲染我们的网页.对于不同的浏览器,对同一个标签可能会有不同的解释. (兼容性问题)
- 网页文件的扩展名: .html 或 .htm
HTML 文档结构
```
<!DOCTYPE html> 
<html lang="zh-CN">   #这个lang表示语言，zh-CN是中文的意思，就是说，你整个文档的内容以中文为主，如果以英文为主，就写成lang='en'

<head> 
  <meta charset="UTF-8">  # 编码
  <title>css样式优先级</title>
</head>
<body> 

</body>
</html>
```
- <!DOCTYPE html> 声明为HTML5文档
- <html> </html> 是文档的开始标记和结束标记. 是HTML页面的根元素,在它们之间的文档的头部(head) 和主体(body)
- <head> </head> 定义了HTML文档的开头部分,它们之间的内容不会在浏览器的文档窗口显示. 包含了文档的元 (meta) 数据,配置信息等,是给浏览器看的,我们看到是在body标签里面写的内容
- 注意: 对于中文网页需要使用<meta charset = 'utf-8'>声明编码,否则会出现乱码. 有些浏览器会设置GBK编码,则需要设置为<meta charset = 'gbk'>
请求和响应
- 请求: 浏览器socket客户端给服务端发信息
- 响应: 服务端socket给客户端回信息

12.2 标签

标签必须是封闭的
标签的语法:
- <标签名属性1='属性值1' 属性2='属性值2' ... > 内容部分 </标签名>
- <标签名属性1='属性值1' 属性2='属性值' ... />

12.2.1 标签的分类

内敛标签(行内标签): 不独占一行,内敛标签只能嵌套内敛标签 (b / i / u / s / button / span / img / a 等)
块级标签(行外标签): 自己独占一行,可以嵌套内敛标签和某些块级标签 (h1 - h6 / br / hr / p / div)
- p标签: 不能嵌套p标签,也不能嵌套块级标签

12.2.2 head 标签中的标签

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

meta标签的组成: meta标签共有两个属性,分别是http_equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能
- http_equiv属性: 相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。
```
<meta http-equiv="refresh" content="2;URL=https://www.oldboyedu.com">
# 两秒后跳转到相应的网址,如果把URL和后面的内容删掉,就是两秒中刷新一次

<meta http-equiv="content-Type" charset="UTF8">                    # 指定编码的类型          
```
- name属性: 主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
  - 红框就是描述的信息

12.2.3 body 标签中的基本标签

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

<p>
    段落标签  # 独占一个段落
</p>

<button>一个按钮</button>

<h1>标题1</h1>
<h2>标题2</h2>
<h3>标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
# 从上到下,字体依次变小

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

<!--水平线 / 分割线-->
<hr>

div标签: 用来定义一个块级元素,并无实际的意义. 主要通过CSS样式为其赋予不同的表现
span标签: 用来定义内联(行内)元素,并无实际的意义. 主要通过CSS样式为其赋予不同的表现

12.2.4 img标签

图片标签
属性:
- src = '图片的路径' # 网络地址的绝对路径或本地的相对路径
- alt = '图片未加载成功时的提示'
- title = '鼠标悬浮时提示信息'
- width = '设置图片的宽'
- height = '设置图片的高'
```
# 示例:
<img src="1.jpg" alt="这是个美女,请稍等.." title="美女" width="200" height="200">
```

12.2.5 a标签

超链接标签
属性:
- href : 超链接的地址，href的值为空，刷新当前页面，为#号不刷新页面，但是会在url后加#号，
- target : 是否新建窗口
  - target = '_self' 当前窗口打开某个路径对应的html页面
  - target = '_bland' 新建窗口打开某个路径对应的html页面
```
<a href="https://www.baidu.com" target="_blank">
   <button>点击进入百度</button>
</a>
```

12.2.6 列表标签

无序列表
- type属性:
  - disc : 实心圆点(默认值)
  - circle : 空心圆圈
  - square : 实心方块
  - none : 无样式
```
<ul type = 'disc'>
    <li>太白</li>
    <li>alex</li>
    <li>wusir</li>
</ul>
```
有序列表
- start属性 : 是从数字几开始
- type属性
  - 1 : 数字列表 ,默认值
  - A : 大写字母
  - a : 小写字母
  - I : 大写罗马
  - i : 小写罗马
```
<ol type="A" start="2">
    <li>太白</li>
    <li>alex</li>
    <li>wusir</li>
</ol>
# 表示按照大写字母进行排序,从B开始
```

标题列表标签

就像大纲一样,有一个层级效果

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

12.2.7 特殊字符

html中默认是不显示空格的，也就是说通过空格键加了空格也没有多少个空格的效果，加多少个都是显示一个空格的效果，需要特殊字符才能显示出空格的效果

内容	对应代码
空格	` `
>	`>`
<	`&lt`
&	`&amp`
￥	`&yen`
版权标识（写公司网站的时候会用到）	`&copy`
注册（一个圆圈里面有个R）	`&reg`

12.2.8 表格标签

属性:

border : 表格边框 (边框宽度)
cellpadding : 内边距 (内边框和内容的距离)
cellspacing : 外边距 (内外边框的距离)
width : 像数百分比 (最好通过css来设置长宽)
rowspan : 单元格竖跨多少行 (写在td里面)

colspan : 单元格横跨多少列(即合并单元格) (写在td里面)

<table border="5" cellpadding="5" cellspacing="2">
    <thead>   # 表格的标题(头)
        <tr>  # 一行
            <th>姓名</th>  # 一个单元格的内容
            <th>年龄</th>
            <th>爱好</th>
        </tr>
    </thead>

    <tbody>   # 表格的正文内容
        <tr>
            <td>alex</td>
            <td>83</td>
            <td>抽烟</td>
        </tr>
        <tr>
            <td>wusir</td>
            <td>74</td>
            <td>喝酒</td>
        </tr>
    </tbody>
</table>

12.2.9 form表单

input标签

type属性 : 控制输入框的样式
name属性 : 分组,携带数据key 传给后台的是: key:value
value : 表单提交时对应项的值
- type="button", "reset", "submit"时，为按钮上显示的文本内容
- type="text","password","hidden"时，为输入框的初始值
- type="checkbox", "radio", "file"，为输入相关联的值
readonly : 只读,针对的是输入框如: text password
disabled : 不允许操作,所有的input都可以设置
设置了readonly的标签,它的数据可以被提交到后台,设置了disabled的数据,是不能提交到后台的

type属性	表现形式	对应代码
text	单行输入文本	`<input type = 'text' />`
password	密码输入框(不显示明文)	`<input type = 'password' />`
date	日期输入框	`<input type = 'date' />`
checkbox	复选框	`<input type = 'checkbox' name = 'x' />`
radio	单选框	`<input type = 'radio' name = 'x' />`
submit	提交按钮	`<input type = 'submit' value = '提交' />`
reset	重置按钮	`<input type = 'reset' value = '重置' />`
button	普通按钮	`<input type = 'button' value = '普通按钮' />`
hidden	隐藏输入框	`<input type = 'hidden' />`
file	文本选择框	`<input type = 'file' />`

submit : 发送浏览器上输入标签中的内容,配合form表单使用,页面会刷新
reset : 页面不会刷新,将所有内容清空

form表单

<form action="http://127.0.0.1:8008">    # action: 指定数据提交的路径
    用户名:<input type="text" name = 'username'>
    密码:<input type="password" name = 'password'>
    <br>
    <input type="radio" name = 'sex' value="1">男  # 传给后台的数据是 : sex:1
    <input type="radio" name = 'sex' value="2">女
    <br> 
    <input type="checkbox" name = 'hobby' value="a">喝酒  # 传给后台的数据是: hobby:a
    <input type="checkbox" name = 'hobby' value="b">抽烟
    <input type="checkbox" name = 'hobby' value="c">烫头
    <input type="submit" value = '提交按钮'>
    <br>
    <input type="date">
    <input type="button" value = '提交按钮'>
    <input type="reset" value = '重置'>
    <input type="hidden">
    <input type="file">
</form>

注意: form表单触发提交数据的操作,必须写在form表单标签里面,写在外面就是普通按钮
- <input type='submit'>
- <button>提交按钮</button>
checked默认选中
- <input type="radio" name="sex" value="2" checked>女 #简写方式,当属性名和属性值相同时可简写 # 默认选中 : 女
- <input type="checkbox" name="hobby" value="a">喝酒
- <input type="checkbox" name="hobby" value="b" checked="checked">抽烟
- <input type="checkbox" name="hobby" value="c" checked="checked"> 烫头
- 默认选中了 : 抽烟,喝酒

12.2.10 select标签下拉选择框

# 单选
<select name="city">
    <option value="1">北京</option>
    <option value="2" selected='selected'>上海</option>  # 默认选中上海
    <option value="3">深圳</option>
</select>

# 多选:multiple
<select name="city" multiple>
    <option value="1">北京</option>
    <option value="2" selected>上海</option>  # # 默认选中上海
    <option value="3">深圳</option>
</select>

multiple：布尔属性，设置后为多选下拉框，否则默认单选
disabled：禁用
selected：默认选中该项
value：定义提交时的选项值

12.2.11 label标签

标识标签的功能

方式一: for:执行对哪个标签进行标识
效果: 点击label标签中的文字.就能让标识的标签获得光标
<label for="username">用户名</label>
<input id="username" type="text" name="username" value="alex">

方式二:
<label>
    密码:<input type="password" name="password" value="111" disabled>
</label>

说明:
1. label 元素不会向用户呈现任何特殊效果,但是点击label标签里面的文本,那么和他关联的input标签就获得了光标,让你输入内容
2. label标签的for属性值应当与相关元素的id属性值相同

12.2.12 textarea多行文本

<textarea name="memo" id="memo" cols="30" rows="10">
  默认内容
</textarea>
name：名称
rows：行数   #相当于文本框高度设置
cols：列数   #相当于文本框长度设置
disabled：禁用

12.3 CSS的选择器

12.3.1 css的几种引入方式

行内样式
- 行内式是在标记style属性中设定css样式.不推荐大规模使用
```
/*写在body标签里面*/
<p style="color: red">hello word</p>
```

内部样式

嵌入式是将css样式集中写在网页的<head></head>标签对应的<style></style>标签中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>玺</title>
    <style>
        div{
            color: aqua;
        }
    </style>
</head>
<body>
    <div>
        你好
    </div>
</body>
</html>

外部样式

外部样式就是将css写在一个单独的文件中然后在页面进行引入即可. 推荐使用此方式

# 在一个 aa.css 文件中写入以下内容
div{
    background-color: aquamarine;
    height:100px;
    200px
}

# 在另一个文件引入
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>玺</title>
    <link rel="stylesheet" href="aa.css">
</head>
<body>
    <div> </div>
</body>
</html>

12.3.2 基本选择器

元素选择器

<style>
div{  
    color:deepskyblue;
}
</style>
/*渲染div标签中的内容*/

id选择器: id值不能重复

<style>
    #name{
        color:red;
    }
</style>

<body>
    <div id="name">张三</div>
    <div>李四</div>
</body>
/*只将张三的名字变成红色*/

类选择器: 类值可以重复

<style>
    /*div.c1{*/    # 仅将div标签中含有class值为c1的文字内容变为绿色
    /*color:green;*/
    /*}*/
	
	.c1{    # 将所有标签中含有class值为c1的文字内容变为绿色
            color:green;
        }
</style>

<body>
    <div class="c1">深圳</div>
    <div class="c1">北京</div>
    <span class="c1">上海</span>
</body>

通用选择器

*{    # 找到所有的标签
	color: green;
}

12.3.3 组合选择器

后代选择器

<style>
    div a{  # 找到div标签后代里面的所有的a标签
        color:red;
    }
</style>

<body>
    <div>
        <a href="">天猫</a>
        <p>
            <a href="">百度</a>
        </p>
    </div>
</body>
# 天猫和百度的颜色变成红色

儿子选择器

<style>
    div>a{  # 找到div的儿子标签这一代的a标签
        color:red;
    }
</style>

<body>
    <div>
        <a href="">天猫</a>
        <p>
            <a href="">百度</a>
        </p>
    </div>
</body>
# 只有天猫的颜色变为红色

毗邻选择器

<style>
    div+a{  # 找到紧挨着div标签的下一个标签(是兄弟标签)
        color:red;
    }
</style>

<body>
    <p>淘宝</p>
    <div>
        <a href="">天猫</a>
        <p>
            <a href="">百度</a>
        </p>
    </div>
    <a href="">小米</a>
    <a href="">华为</a>
</body>
# 只有小米的颜色变为红色

弟弟选择器

<style>
    div~a{  # 找到同级后面的所有兄弟标签
        color:red;
    }
</style>

<body>
    <p>淘宝</p>
    <div>
        <a href="">天猫</a>
        <p>
            <a href="">百度</a>
        </p>
    </div>
    <a href="">小米</a>
    <a href="">华为</a>
</body>
# 小米和华为的颜色变红

12.3.4 属性选择器

<style>
    [title]{  # 找到所有含有title属性的标签  
        color: red;
    }

    div[title]{  # 找到含有title属性的div标签
        color: red;
    }

    [title=a]{  # 通过属性名对应的值来查找
        color: red;
    }

    [title='1']{  # 当属性名对应的值为数字时,数字要加上引号
        color: red;
    }

    input[type=text]{  # 含有type属性,并且type属性值为text的input标签
        background-color: red;
    }
</style>

<body>
    <div title="a">你好</div>
    <span title="1">我好</span>
    <p title="a">他好</p>
    <input type="text">
    <input type="password">
</body>

12.3.5 分组

多个选择器选择的标签设置相同css样式的时候,就可以用分组

div,p{  # div和p选择器共同设置相同的样式,可以用逗号分隔
    color:red;
}

12.3.5 伪类选择器

a标签自带的效果:未访问过的时候是蓝色的字体颜色,访问过之后是紫色的,自带下划线
<style>
	/* 未访问的链接 */
	a:link{  
        color: red;
    }

 	/* 已访问的链接 */
    a:visited{  
        color: blue;
    }
	
	/* 鼠标移动到链接上变色 */  这个用的比较多,可以应用在其他标签上
    a:hover{  
        color: green;
    }

	/* 选定的链接 */ 就是鼠标点下去还没有抬起来的那个瞬间，可以让它变颜色
    a:active{  
        color:red
    }

	/*input输入框获取焦点时样式*/
    input:focus{  # input默认的有个样式，鼠标点进去的时候，input框会变天蓝色
        #outline:none;
        background-color: deepskyblue;  # 框里面的背景色
    }
</style>

12.3.6 伪元素选择器

<style>
	/*将div标签内的内容的首字符大小改成30,颜色改成天蓝色*/
    div:first-letter{
        color:deepskyblue;
        font-size: 30px;
    }

	/*在p标签内容前面插入大小为40,颜色红色的python内容*/
    p:before{
        content:'python';
        color:red;
        font-size: 40px;
    }

	/*在p标签内容后面插入大小为30,颜色粉色的Java内容*/
    p:after{
        content:'java';
        color:pink;
        font-size:30px;
    }
</style>

12.3.7 选择器的优先级

优先级数字越大,越优先显示其效果,优先级相同的,显示后面定义的选择器对应的样式

继承的优先级为 0
元素选择器的优先级为 1
类选择器的优先级为 10
id选择器的优先级为 100
内敛样式的优先级为 1000
! important 优先级最高,为最重要的  示例: color:red !important;

12.4 CSS属性相关

高度宽度设置 : 只有块级标签可以设置高度宽度,内敛标签不能设置高度宽度,它的高度宽度是由内容决定的
```
div{
     100px;  宽度
    height: 100px; 高度
    background-color: pink;
}
```

补充 : a标签的字体颜色设置必须选中a标签才行

# 通过类选择器选中a标签
.c1 a{ 
    color: red;
}

12.4.1 字体属性

字体

div{
    font-family: '楷体','宋体','微软雅黑';
}
# 会选择字体中的一种显示文本

字体大小

div{
    font-size: 20px;
}
# 设置字体大小为20  默认字体大小是16

子重(字体的粗细)

值描述

normal 默认值,标准粗细

bold 粗体

bolder 更粗

lighter 更细
- 100 - 900 设置具体粗细,400 等同于normal,700 等同于bold
```
div{
    font-weight: bold;
    font-weight: 100;   # 两种表示方式
}
```

值	描述
normal	默认值,标准粗细
bold	粗体
bolder	更粗
lighter	更细

颜色的表示方式

p{
    color: red;
    color: #78FFC9;
    color: rgb(123,199,255);
    color: rgba(123,199,255,0.3); # 多了一个透明度的数字: 0-1之间的一个数字
}
# 四种表示方式

12.4.2 文字属性

文字对齐

left : 左对齐,默认值
right : 右对齐
center : 居中对齐

div{     
    200px;
    height: 200px;
    background-color: pink;
    color: red;
    text-align: center;  # 文本居中对齐
}

文字装饰

值描述

none 默认,定义标准的文本

underline 在文本下方定义一条线

overline 在文本上方定义一条线

line-through 定义穿过文本的一条线
```
div a{
    text-decoration: none ;  # 给a标签去除下划线
    text-decoration: line-through;
    text-decoration: overline;
}
```

值	描述
none	默认,定义标准的文本
underline	在文本下方定义一条线
overline	在文本上方定义一条线
line-through	定义穿过文本的一条线

首行缩进

p{
    text-indent : 32px;
}
# 首行缩进两个字符,一个字符大小在页面上的默认大小是16px,所以缩进32px

12.4.3 背景属性

图片位置
- 左上:left top
- 上中: center top
- 右上: right top
- 左中: left center
- 正中心: center center
- 右中: right center
- 左下: left bottom
- 下中: center bottom
- 右下: right bottom

div{
     600px;
    height: 600px;
    background-color: pink;
    /*background-repeat: no-repeat;*/  no-repeat:背景图片不平铺 ,不写默认是平铺的
    /*background-image: url('lan.png');*/  图片的地址             
    /*background-position: center center;*/  图片摆放的位置               
    background:url('lan.png') no-repeat right center; 以上三句话可以写成这一句话
    /*background-position: 100px 50px;*/  相对于div标签的,距离左边100px,距离上面50px
}

# 简写方式
background:pink url('1.png') no-repeat right top;
    颜色          图片路径     是否平铺   图片位置

其他:
background-attachment:fiexed;   固定在屏幕的某个位置

12.5 边框

边框样式:

值	描述
none	无边框
dotted	点状虚线边框
dashed	矩形虚线边框
solid	实线边框

div{
     200px;
    height:200px;
    border-style:solid;
    border-color:red;
    border-10px;
    # 上面三句的简写方式简写方式
    border: 10px solid red;

    border-top-style:dashed;    # 单独设置上边框
    border-bottom-style:dashed; # 单独设置下边框
    border-left-style:dashed;   # 单独设置左边框
    border-right-style:dashed;  # 单独设置右边框
    border-left:10px solid red;  单独设置边框的简写方式
    border-radius: 50%;  # 控制圆角,50%以上的都是圆形
}

12.6 display 属性

用于控制HTML元素的显示效果

值	意义
display:none	HTML文档中元素存在,但在浏览器中不显示
display:block	默认占满整个页面的宽度,如果设置了指定宽度,则会用margin填充剩下的部分
display:inline	按行内元素显示,此时设置元素的width height margin-top和float属性都不会生效
display:inline-block	使元素同时具有行内元素和块级元素的特点,不独占一行

display:none 和 visibility:hidden 的区别
- visibility:hidden: 可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。
- display:none: 可以隐藏某个元素，且隐藏的元素不会占用任何空间。也就是说，该元素不但被隐藏了，而且该元素原本占用的空间也会从页面布局中消失。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{           
            200px;
            height:200px;
            border:5px solid red;
            display:inline;  # 将div标签设置成内敛标签,不独占一行
        }
        span{
            border:5px solid orange;
        }
        .c1{      
            200px;
            height:200px;
            /*display:block;*/      # 将span标签设置成行外标签,独占一行
            display:none;           # 隐藏类c1中的元素,不占用空间
            /*visibility:hidden;*/  # 隐藏类c1中的元素,占用空间
        }
    </style>
</head>
<body>
    <div>人生苦短,用毛python</div>
    <span class="c1">开心就好</span>
    <span class="c2">快乐最重要</span>
</body>

12.7 CSS盒子模型

在css里面,每个标签可以称为一个盒子模型
1. margin : 外边距,用于控制元素与元素之间的距离,margin的最基本用途就是控制元素周围的间隔,从视觉角度上达到相互隔开的目的
2. border : 围绕在内边距和内容外的边框
3. padding : 内边距,用于控制内容和边框之间的距离
4. content : 盒子的内容,显示文本和图像

padding : 内边距

<style>
    .d1{
        border:2px solid red;
        200px;
        height:100px;
        padding-top:10px;   上边距: 10
        padding-left:3px;   左边距: 3
        padding-right:5px;  右边距: 5
        padding-bottom:6px; 下边距: 6

        # 简写方式
        padding:10px;	            上下左右边距都为10
        padding:10px 15px;	        上下边距10,左右边距15
        padding:10px 15px 20px;		上边距10,左右边距15,下边距20
        padding:5px 10px 15px 20px;  顺时针表示: 上 右 下 左
        padding:5px 10px 15px 0;     如果不设置内边距,则写 0 即可
    }
</style>

margin 外边距

top : 距离上面标签的距离
bottom : 距离下面标签的距离
left : 距离左边标签的距离

right : 距离右边标签的距离

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            border: 5px solid red;
             200px;
            height:100px;
            margin-bottom:100px;  # 距离下面标签的距离为100
        }
        .c2{
            border:5px solid green;
            200px;
            height:100px;
            margin-left:50px;   # 距离上面标签的距离为50,由于100大于50,所有上下标签的距离为100
        }
        .s1{
            margin-right:100px;  # 距离右标签的距离为100
        }
        .s2{
            margin-left:200px;   # 距离左标签的距离为200,跟上面结合一起,两者的距离就是300
        }
    </style>
</head>
<body>
    <div class="c1">人生苦短</div>
    <div class="c2">用毛python</div>
    <span class="s1">生于忧患</span>
    <span class="s2">死于安乐</span>
</body>

两种简写方式
margin: 10px 20px  -->跟上下标签的距离为10,左右标签的距离为20
margin:2px 5px 8px 10px  --> 顺时针表示: 上 右 下 左

两种情况:
1.垂直方向如果上下两个标签都设置了margin外边距,则去两者的最大值
2.水平方向两个标签设置了外边距,则取这两者的边距之和

12.8 浮动: float

布局用的,设置了浮动的标签会脱离正常文档流

三种取值:
- left : 向左取值
- right : 向右取值
- none : 默认值,不浮动

clear : 规定元素的哪一侧不允许其他浮动元素

值	描述
left	在左侧不允许浮动元素
right	在右侧不允许浮动元素
both	在左右两侧均不允许出现浮动元素
none	默认值,允许浮动元素出现在两侧
inherit	规定应该从父元素继承clear属性的值

<head>
<meta charset="UTF-8">
<title>Title</title>
    <style>
        .c1{
            background-color:red;
            100px;
            height:100px;
            float:right;  # 向右浮动
        }
        .c2{
            background-color: orange;
            100px;
            height:100px;
            float:left;  # 向左浮动
        }
        .c3{
            background-color: green;
            height:100px;  # 不设置宽度,让其充满屏幕
        }

		# 浮动会造成父级标签塌陷的问题
		# 解决方法
		1. 给父级标签设置高度
           .cc{
                height: 200px;
            }
		2. 伪元素选择器清除浮动,给父级标签加上下面这个类值
            .clearfix:after{
                content:'';
                display:block;
                clear:both;  # 清除浮动clear
        }
    </style>
</head>
<body>
    <div class="cc clearfix">
    	<div class="c1"></div>
    	<div class="c2"></div>
    </div>
<div class="c3"></div>
</body>

12.9 overflow 溢出属性

值	描述
visible	默认值,内容不会被修剪,会呈现在元素框之外
hidden	内容会被修剪,并且其余内容是不可见的
scroll	内容会被修剪.但是浏览器会显示滚动以便查看其余的内容,也可以左右滚动
auto	如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            200px;
            height:200px;
            border: 3px solid red;
            /*overflow:hidden;*/  # 内容会被修剪,其余内容不可见
            overflow:auto;    # 内容被修剪,浏览器会显示滚动条以便查看其余的内容
        }
    </style>
</head>
<body>
    <div>
        你的理想是诗，理想是梦，理想是远方的田野，理想是穿越世界的旅行。但现在你能做的所有，只是把手握紧，厚积薄发，你只有付出，付出你的时间，赌上你的尊严，拿出你的全部，你的everything。当别人打游戏时，你在学习；当别人睡懒觉时，你在学习；你含着泪在深夜里舞蹈，在回忆里奔跑，没有人在年少时想成为一个普通人。尽管生活它会剥夺你的所爱，践踏你的尊严，把你踩在脚下，遍体鳞伤，但你，怎能倒下！你的身后，是挚爱的人。
    </div>
</body>

12.10 圆形头像示例

<head>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <title>圆形头像</title>
    <style>
        .c{
            300px;
            height:300px;
            border:5px solid wheat;
            border-radius: 50%;
            overflow: hidden;  # 设置为修剪不可见
        }
        .c>img{
            100%;   # 让img标签按照外层div标签的宽度来显示
        }
    </style>
</head>
<body>
    <div class="c">
        <img src="xiaohua.png" alt="" title="校花">
    </div>
</body>

总结一点:width宽度设置的时候,直接可以写100px,30% 这种百分比的写法,它的宽度按照父级标签的宽度的百分比来计算

12.11 定位position : 相对定位和绝对定位

position : relative; -->相对定位,保留原来的空间位置,相对自己原来的位置移动,以左上角为基准

position : absolute; -->绝对定位,不保留自己原来的位置,按照父级标签或者祖先级标签设置了position为relative的标签的位置进行移动,如果一直找不到设置了这个属性的标签,那么按照body标签来移动

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red;
            height: 100px;
             100px;
        }
        .c2{
            background-color: blue;
            height: 100px;
             100px;
            position:relative;  相对定位
            bottom:100px;  往上移100px
            left:100px;    往左移100px
            top:100px;     往下移100px(距离原来位置的上边框100px)
            top:-100px;    往上移100px

            position:absolute;   绝对定位
            top:100px;   下移100px
            left:100px;   左移100px
        }
        .c3{
            background-color: green;
            height: 100px;
             100px;
        }
        .ccc{
            background-color: purple;
             200px;
            height: 100px;
        }
        .cc{
            position:relative;
            left:200px
        }
    </style>
</head>
<body>
    <div class="ccc"></div>
    <div class="cc">
        <div class="c1"></div>
        <div class="c2"></div>
        <div class="c3"></div>
    </div>
</body>

回到顶部示例:

position为fixed固定定位,通过相对于浏览器窗口的距离来设置位置

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red;
            height: 500px;
             200px;
        }

        .c2{
            background-color: green;
            height: 500px;
             200px;
        }

        .s1{
            position:fixed;   /*固定位置,位置是根据浏览器窗口来的*/
            left:20px;
            bottom:40px;
            background-color: aqua;
            height: 40px;
             80px;
            text-align: center;
            line-height: 40px;   /* 和标签高度一致,标签内容就是垂直居中*/
        }
        .s1 a{
            color:white;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <!--<a name="top">这是顶部 honey</a>  锚点,另一种写法-->
    <div id="top">这是顶部</div>   <!-- 锚点 -->
    <div class="c1"></div>
    <div class="c2"></div>
    <span class="s1">
        <a href="#top">回到顶部</a>  <!--触发锚点-->
    </span>
</body>

锚点设置的两种方式:
- <a name="top">这里是顶部</a>
- <div id="top">这是顶部</div>
触发锚点的a标签写法
- <a href='#top'>回到顶部</a>

12.12 z-index 控制层级

模态对话框示例

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .shadow{
            position: fixed;
            top:0;
            bottom:0;
            left:0;
            right:0;
            background-color: rgba(0,0,0,0.5);
            z-index: 10;
        }
        .mode{
            position: fixed;
            height: 400px;
             300px;
            background-color: white;
            z-index: 11;    /* 数值越大越在上层显示 */
            left:50%;       /* 按照窗口宽度的50%来移动 */
            top:50%;        /* 按照窗口高度的50%来移动 */
            margin-left:-150px;
            margin-top:-200px;
        }
    </style>
</head>
<body>
    <div>
        <h1>
            亚洲最大男性交流平台
        </h1>
    </div>
    <div class="mode"></div>
    <div class="shadow"></div>
</body>

12.13 opacity 透明度

.c1{
    background-color: rgba(255,0,0,0.3); /* 背景颜色或者字体颜色等单独的透明度 */
    height: 100px;
     100px;
}
.c2{
    background-color: rgb(255,0,0);
    height: 100px;
     100px;
    opacity: 0.3;  /* 整个标签透明度 */
}
<div class="c1">
    你好
</div>
<div class="c2">
    我好
</div>

12.14 JavaScript

js引入

方式一:
    <script>
        alter('我要学python')
    </script>

方式二: 外部文件引入 xx.js文件
	<script src='xx,js'></script>

注释

//  这是单行注释

/*
这是
多行注释
*/

结束符:JavaScript中的语句要以分号（;）为结束符。也就是说和缩进没关系了

声明变量var

JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头。
注意：
- 变量名是区分大小写的。
- 推荐使用驼峰式命名规则。首字母大写
- 保留字不能用做变量名。
var a=10;
声明变脸时可以先不赋值:
- var a; 此时a的值为undefined

基础数据类型

数值类型 Number

JavaScript不区分整型和浮点型,就只有一种数值类型

查看数据类型用 : typeof 变量名;

var a = 10;
undefined
typeof a;
"number"
var b = 1.11;
undefined
typeof b;
"number"
查看数据类型用 typeof a;

var c = 123e5;  // 12300000
var d = 123e-5;  // 0.00123

字符类型 String

var a = 'alexdsb'   // "alexdsb"
typeof a;           // "string"
var a = "Hello"
var b = "world;
var c = a + b;      //字符串拼接
console.log(c);     // 得到Helloworld

类型转换

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

示例:
var a = 'a123';
var b = parseInt(a);  // NaN
typeof b;      // "number"
		
var b = '1.11';
parseFloat(b); // 1.11

字符串中常用方法

length 属性:查看字符串的长度
```
var a = 'hello';
a.length;  // 5
```
trim() : 移除两边空白
```
var a = '  hello  ';
a.trim();   // "hello"
```
- trimLeft() 去除左边空白
- trimRight() 去除右边空白
charAt(n) : 从0开始返回索引为n的那个字符
```
var a='hello';
a.charAt(2);  //  e
```

concat() : 字符串的拼接

var a = 'hello';
var b = 'world';
a.concat(b)  //"helloworld"

indexOf() : 通过元素找索引

var a='interesting';
a.indexOf('t');  // 2 : 只找到第一个就不再继续找

start参数 : 索引的起始位置
var a='interesting';
a.indexOf('n',2);  // 从第二个位置往后找,得到结果是 : 9

如果找不到就返回 -1:
a.indexOf('t',8);  // 第八个位置之后没有t元素了,得到结果 : -1

slice() : 切片(前取后不取)

var a='happy';
a.slice(1,-1);  // app
a.slice(1,4);   // app

toLowerCase() 全部变小写 , toUpperCase() 全部变大写
```
var a='happy';
a.toUpperCase();  // HAPPY
```

split() : 字符串分割,第二个参数是返回多少个数据

var a='happy';
a.split('a');  // ["h", "ppy"]
a.split('a',1);  // ["h"] :返回一个数

布尔值

在JS里面布尔值首字母为小写
var a=true;
var b=flase;

""(空字符串)、0、null、undefined、NaN都是false。

null和undefined

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

对象类型 object

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...此外，JavaScript 允许自定义对象。

　　　　JavaScript 提供多个内建对象，比如 Number、String、Date、Array 等等，通过new实例化的对象都是object类型(var s = new String('hello')，var n = new Number(12)等)，数组不需要new生命，类型就是object类型。

　　　　对象只是带有属性和方法的特殊数据类型。

复杂数据类型 / 引用数据类型

数组:Array

数组对象的作用是：使用单独的变量名来存储一系列的值

创建数组

var a = [11,22,33];
var b = new Array([22,33]
typeof a;  //object类型

数组常用方法和属性

索引取值

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

length属性 :

var a = [123, "ABC"]; 
a.length;  // 2

push() : 尾部追加 pop() : 尾部删除

var a = [11,22,33]
a.push('123');   // [11, 22, 33, "123"]
a.pop();  //"123"
a  --  [11, 22, 33]

unshift() : 头部追加 shift() : 头部删除

	var a = [11,22,33]
	a   // [11, 22, 33]
	a.unshift('aa');
	a   // ["aa", 11, 22, 33]
    
	a.shift();  // "aa"
	a   // [11, 22, 33]

sort() : 排序
```
	var a = [11,4,84,73];

	a.sort();  // [11, 4, 73, 84] 首字符会按照ASCII的大小排序
	function sortNumber(a,b){
    	return a - b;    // 从小到大排
	}
	a.sort(sortNumber);  // [4, 11, 73, 84]

	function sortNumber(a,b){
    	return b - a     // 从大到小排
	}
	a.sort(sortNumber);  // [84, 73, 11, 4]
```
解释:
- 如果想按照其他标准进行排序，就需要提供比较函数，也就是自己提供一个函数提供排序规则，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
- 若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
- 若 a 等于 b，则返回 0。
- 若 a 大于 b，则返回一个大于 0 的值。

splice() : 删除元素

var a=[11,22,33,44];
a.splice(1,2,'aa','bb'); // 从索引为1的位置往后删两个,并将内容替换
a;  // 得到结果 : [11, "aa", "bb", 44]
// 参数: 1.根据索引从哪删,2.删几个,3.删除位置替换的新元素(可多个元素)

reverse() : 在原数组上的反转

var a=[11,22,33,44];
a.reverse();  // [44, 33, 22, 11]

join() : 将数组元素连接成字符串

var a=['aa','bb'];
a.join('+');  // 'aa+bb' 通过+号将数组里面的元素拼接

concat() : 连接组合并,得到一个新数组，原数组不变(类似于python列表的extend)
```
var a=["aa", "bb"]
var b=[11,22];
a.concat(b);  // ["aa", "bb", 11, 22]
```

自定义对象 { }

var a = {"name": "Alex", "age": 18};
var d = {'name':'chao',age:18};  // 键可以不加引号

console.log(a.name);    // alex
console.log(a["name"]); // alex

for循环遍历自定义对象
var a = {"name": "Alex", "age": 18};
for (var i in a){    // 拿到的i是字典的key
  console.log(i, a[i]);  // 得到结果:name alex   age 18
}

类型查询

运算符

算数运算

+ - * / % ++ --
i++,是i自加1,i--是i自减1
i++的这个加1操作优先级低，先执行后面逻辑，然后再自加1，而++i，这个加1操作优先级高，先自加1，然后再执行代码后面的逻辑

比较运算

> >= < <= != == === !==
==是弱等于(不比较数据类型)
===强等于强等于会比较数据类型

逻辑运算

&& || ! #and，or，非(取反）
!null返回true

赋值运算

= += -= *= /=
n += 1其实就是n = n + 1

流程控制

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");
}

switch 切换

var a = 10;
switch (a){    
    case 9:
		console.log('999');
	break;
    case 10:
		console.log('101010');
	break;
    case 11:
		console.log('111111');
	break;
}
// 如果写成switch (++a) 会先自加1,再执行下面代码

加上default示例:
    var a = 20;
    switch (a){
        case 9:
            console.log('999');
        break;
        case 10:
            console.log('101010');
        break;
        case 11:
            console.log('111111');
        break;
        default :  //上面的条件都不成立的时候,走default
            console.log('啥也不对!!')
    }

for循环

for (var i=0;i<10;i++) {  
  console.log(i);
} //先执行代码再自加1
// 打印0-9 ,相当于 for i in range(10):

循环数组：
var l2 = ['aa','bb','dd','cc']
方式1
for (var i in l2){  //  i是索引的位置
   console.log(i,l2[i]);  //得到结果: 0 aa  1 bb  2 cc  3 dd
}

方式2
for (var i=0;i<l2.length;i++){
　　console.log(i,l2[i])
}

循环自定义对象：
var d = {aa:'xxx',bb:'ss',name:'小明'};
for (var i in d){
    console.log(i,d[i],d.i)  // 注意循环自定义对象的时候，打印键对应的值，只能是对象[键]来取值，不能使用对象.键来取值。
}

while循环

var i = 0;
while (i < 10) {
  console.log(i);
  i++;
}

三元运算符

var a = 1;
var b = 2;
var c = a > b ? a : b //如果a>b这个条件成立，就把冒号前面的值给c，否则把冒号后面的值给c

函数

基本函数

// 普通函数定义
function f1() {
  console.log("Hello world!");
}
f1()  // 调用函数

// 带参数的函数
function f2(a, b) {
  console.log(arguments);  // 内置的arguments对象
  console.log(arguments.length);
  console.log(a, b);
}
f2(1,2)  // 调用函数

/ 带返回值的函数
function sum(a, b){
  return a + b;  //在js中，如果你想返回多个值是不行的，比如return a ，b；只能给你返回最后一个值，如果就想返回多个值，你可以用数组包裹起来 return [a,b]；
}
sum(1, 2);  // 调用函数  sum(1,2,3,4,5)参数给多了，也不会报错，还是执行前两个参数的和，sum(1)，少参数或者没参数也不报错，不过返回值就会是NAN

// 匿名函数方式，多和其他函数配合使用，后面我们就会用到了
var sum = function(a, b){  //在es6中，使用var，可能会飘黄，是因为在es6中，建议你使用let来定义变量，不过不影响你使用
  return a + b;  
}
sum(1, 2);

// 立即执行函数，页面加载到这里，这个函数就直接执行了，不需要被调用执行
(function(a, b){
  return a + b;
})(1, 2);  //python中写可以这么写：ret=(lambda x,y:x+y)(10,20) 然后print(ret)

函数的全局变量和局部变量

局部变量:在JavaScript函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。
全局变量: 在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。
变量生存周期：
- JavaScript变量的生命期从它们被声明的时间开始。
- 局部变量会在函数运行以后被删除。
- 全局变量会在页面关闭后被删除。

作用域

首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层。

闭包

var city = "BeiJing";
function f(){
    var city = "ShangHai";
    function inner(){
        console.log(city);
    }
    return inner;
}
var ret = f();

面向对象

面向对象，在ES5中没有类的概念，只有个构造函数，命名的首字母要大写，实例化的时候使用new关键字进行实例化

创建对象

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

es5封装方式

function Person(name){
    this.name=name
}

console.log(p1.name)  
Person.prototype.func1 = function(hobby){  //添加一些方法，使用prototype，叫做原型链 方法
    console.log(this.name,hobby)
}
var p1 = new Person('chao');
p1.func1(爱编程)  // 方法和属性只能通过对象来调用，不能使用类名来调用
// xin
// xin 爱编程！

date对象

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");  // 月/日/年(可以写成04/03/2020)
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());  //毫秒并不直接显

date对象的其他方法

var d = new Date(); 
d.getDate()                 获取日
d.getDay ()                 获取星期 ，数字表示（0-6），周日数字是0
d.getMonth ()               获取月（0-11,0表示1月,依次类推）
d.getFullYear ()            获取完整年份
d.getHours ()               获取小时
d.getMinutes ()             获取分钟
d.getSeconds ()             获取秒
d.getMilliseconds ()        获取毫秒
d.getTime ()                返回累计毫秒数(从1970/1/1午夜),时间戳

json

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

RegExp 正则对象

创建正则对象的方法
	var reg = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");
简写方式:
	var reg = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;

test方法.测试某个字符串是否符合正则规则
	var s = 'hello'
	reg.test(s)  符合返回True,不符合返回false
	
一个坑:
    reg1.test() 里面什么也不写,会默认放一个"undefined"字符串
    reg1.test("undefined")

其他正则方法

var s2 = "hello world";

s2.match(/o/g);   // ["o", "o"]  查找字符串中 符合正则 的内容 ，/o/g后面这个g的意思是匹配所有的o,
s2.search(/h/g);  // 0  查找字符串中符合正则表达式的内容位置，返回第一个配到的元素的索引位置，加不加g效果相同
s2.split(/o/g);   // ["hell", " w", "rld"]  按照正则表达式对字符串进行切割，得到一个新值，原数据不变
s2.replace(/o/g, "s");  // "hells wsrld"    对字符串按照正则进行替换

var s1 = "name:Alex age:18";

s1.replace(/a/, "哈哈哈");      // "n哈哈哈me:Alex age:18"
s1.replace(/a/g, "哈哈哈");     // "n哈哈哈me:Alex 哈哈哈ge:18"      全局匹配
s1.replace(/a/gi, "哈哈哈");    // "n哈哈哈me:哈哈哈lex 哈哈哈ge:18"  不区分大小写

坑:
	var reg = /a/g;
	var s = 'alex a sb';
	reg.test(s); //true
	reg.lastIndex; // 1
	reg.test(s); //true
	reg.lastIndex; // 6
	reg.test(s); //false
	
	reg.lastIndex = 0;重新赋值,让其归零

Math计算模块

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

12.15 JS中的BOM

浏览器对象模型,能使JS有能力和浏览器进行交互

window对象的子对象中的location

location.href;   // 获取当前的URL
location.href="URL" // 跳转到指定页面
	示例:location.href = 'http://www.baidu.com';直接跳转到百度
location.reload();  // 重新加载页面,就是刷新一下页面

确认框(了解即可)
- confirm('你确定吗?'); 如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。

计时器相关(计时器是异步的)

setTimeout 计时器,一段时间之后做某些事

var t=setTimeout("JS语句",毫秒)  第一个参数js语句多数是写一个函数，不然一般的js语句到这里就直接执行了，先用函数封装一下，返回值t其实就是一个id值（浏览器给你自动分配的

setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。

第二个参数指示从当前起多少毫秒后执行第一个参数（1000 毫秒等于一秒）。

setTimeout('confirm("你好");',3000);  // 3秒之后执行前面的js代码
setTimeout(confirm('xxx'),3000);  // 如果写的不是字符串,会直接执行
setTimeout(function(){confirm('xxx')},3000);  // 最好写成函数

var a = setTimeout(function(){console.log('xxx')},3000);  // a是浏览器来记录计时器的一个随机数字
clearTimeout(a)    // 清除计时器,通过这个数字可以清除

setInterval() 计时器,每隔一段时间做某些事
- setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
- setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
```
var a = setInterval(function(){console.log('xxx')},3000);  
clearInterval(a);
```

12.16 JS中的DOM

认识DOM

HTML DOM 模型被构造为对象的树。
是一套对文档的内容进行抽象和概念化的方法。
DOM标准规定HTML文档中的每个成分都是一个节点(node)：
- 文档节点(document对象)：代表整个文档
- 元素节点(element 对象)：代表一个元素（标签）
- 文本节点(text对象)：代表元素（标签）中的文本
- 属性节点(attribute对象)：代表一个属性，元素（标签）才有属性
- 注释是注释节点(comment对象)　
JavaScript 可以通过DOM创建动态的 HTML：
- JavaScript 能够改变页面中的所有 HTML 元素 / HTML 属性 / CSS 样式

查找标签

和css一样,你想操作某个标签需要先找到它

直接查找

document.getElementById(id值); 根据ID获取一个标签
document.getElementsByClassName(类值); 根据class属性获取（可以获取多个元素，所以返回的是一个数组）

document.getElementsByTagName(标签名); 根据标签名获取标签合集(得到的是数组,可以通过索引拿到值)

<div class="c1" id="d1">
    待到将军归来日,朕与将军解战袍!
    </div>

<div class="c1" id="d2">
    日照香炉生紫烟,遥看瀑布挂前川!
    </div>
	
var a = document.getElementById('d1');  // 获取id属性值为d1的标签  拿到的直接是标签对象
var a = document.getElementsByClassName('c1'); // 获取class值为c1的所有标签  拿到的是数组
var a = document.getElementsByTagName('div');  // 获取所有div标签  拿到的是数组

间接查找

var a = document.getElementById('d1');
a.parentElement;            // 获取a这个标签的父级标签
a.children;                 所有子标签 得到的一个数组,可以通过索引取值
a.firstElementChild;        第一个子标签元素
a.lastElementChild;         最后一个子标签元素
a.nextElementSibling;       下一个兄弟标签元素
a.previousElementSibling;   上一个兄弟标签元素

如果查找出来的内容是个数组，那么就可以通过索引来取对应的标签对象

节点操作

创建节点(创建标签) 
	var a = document.createElement('标签名称'); 
	示例,创建a标签
		var a = document.createElement('a');
	var dd = document.getElementById('dd');  // 找到div标签
	
添加节点
	// 添加节点,添加到了最后
	dd.appendChild(a);     // 将创建的a标签添加到dd这个div标签里面的最后.

	// 某个节点前面添加节点
	父级标签.insertBefore(新标签,某个儿子标签)
	示例:
		var dd = document.getElementById('dd');  // 找到父级标签
		var a = document.createElement('a');   // 创建一个新的a标签
		var d2 = dd.children[1];  // 找到父级标签下的某个儿子标签
		dd.insertBefore(a,d2);   // 将a标签插入到上面这个儿子标签的前面.
删除节点
	dd.removeChild(d2);  父级标签中删除子标签
        
替换节点
	var dd = document.getElementById('dd');  // 找到父级标签
	var a = document.createElement('a');  // 创建a标签
	a.innerText = '百度';  
	var d1 = dd.children[0];  // 找到要被替换的子标签
	dd.replaceChild(a,d1);  // 替换

文本操作

var divEle = document.getElementById("d1")
divEle.innerText; // 输入这个指令，一执行就能获取该标签和内部所有标签的文本内容
divEle.innerHTML;  // 获取的是该标签内的所有内容，包括文本和标签

d1.innerText; 查看

设置一个文本:
	d1.innerText = "<a href=''>百度</a>";  
	d1.innerHTML = "<a href=''>百度</a>";  能够识别标签

属性操作

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")  // 比较规范的写法 给某一标签增加属性
divEle.getAttribute("age")     // 查看属性
divEle.removeAttribute("age")  // 删除属性

// 自带的属性还可以直接.属性名来获取和设置，如果是你自定义的属性，是不能通过.来获取属性值的
标签对象.属性;  // 设置属性
标签对象.属性="..."    // 修改属性

获取值操作

适用于用户输入或者选择类型的标签如:input / select / textarea

var inp = document.getElementById('username');
inp.value;              // 查看值
inp.value = 'taibai';   // 设置值

选择框
	<select name="city" id="city">
        <option value="1">上海</option>
        <option value="2">北京</option>
        <option value="3">深圳</option>
    </select>
	
	var inp = document.getElementById('city');
	inp.value;        // 查看值
	inp.value = '1';  设置值

class的操作

var d = document.getElementById('dd'); 
d.classList;  // 获得这个标签的class属性的所有的值
d.classList.add('xx2');       // 添加class值
d.classList.remove('xx2');    // 删除class值
d.classList.contains('xx2');  // 判断是否有某个class值,有返回true,没有返回false
d.classList.toggle('xx2');    // 有就删除,没有就增加

css操作

对于没有中横线的CSS属性一般直接使用style.属性名即可

对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可。

var d = document.getElementById('d');
d.style.backgroundColor = 'deeppink';  
d.style.height = '1000px'

事件

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

绑定事件的方式有两种

方式一:

<div id="d1" onclick="f1();"></div>

<script>  // 可写在body标签里也可写在head标签里
    function f1() {
        var d = document.getElementById('d1');
        d.style.backgroundColor = 'yellow';
    }
</script>

方式二: (常用这种方式)

<div id="d1"></div>
<script>  // 只能写在body标签里面
    var a=document.getElementById('d1');
	a.onclick=function () {
    	a.style.backgroundColor='red';
}
</script>

其他:
<body>
    <div id="d1"></div>
    <div id="d2"></div>
    <script>
        var a=document.getElementById('d1');
        a.onclick=function () {
            var b=document.getElementById('d2');
            b.style.backgroundColor='yellow';    // 点击d1所属标签时,d2所属标签会变色
        }
    </script>
</body>

事件里面的this

绑定方式一:

this表示当前标签对象
<div id="d1" class="c1" onclick="f1(this);"></div>
<script>
    function f1(ths) {
            // var d = document.getElementById('d1');
            // d.style.backgroundColor = 'yellow';
            ths.style.backgroundColor = 'yellow';
        }
</script>

绑定方式二:

<div id="d1" class="c1"></div>
<script>
    var d = document.getElementById('d1');
    d.onclick = function () {
        this.style.backgroundColor = 'yellow';
        // d.style.backgroundColor = 'yellow'; //this表示当前标签对象
    }
</script>

onfocus 元素获得焦点 ; onblur 元素失去焦点

<body>
    用户名<input type="text" id="username">
    <div id="d1"></div>
    <div id="d2"></div>
    <script>
        var a=document.getElementById('username');
        a.onclick=function () {
            var b=document.getElementById('d1');
            b.style.backgroundColor='pink';  // 当input输入框获取到光标时,d1所属标签变色
        }

        a.onblur=function () {
            var c=document.getElementById('d2');
            c.style.backgroundColor='blue';  // 当input输入框获失去光标时,d2所属标签变色
        }
    </script>
</body>

onchange事件,域内容发生变化时触发

<select name="" id="jishi">
    <option value="1">太白</option>
    <option value="2">alex</option>
    <option value="3">沛齐</option>
</select>

// onchange事件，内容发生变化时触发的事件
    var s = document.getElementById('jishi');
    s.onchange = function () {
    	//this.options  select标签的所有的option标签
    	//this.selectedIndex被选中的标签在所有标签中的索引值
        console.log(this.options[this.selectedIndex].innerText + '搓的舒服');
    }
     
用户名:<input type="text" id="username">    

//input标签绑定onchange事件
    var inp = document.getElementById('username');
	inp.onchange = function () {
    	console.log(this.value);  
	};

常用事件

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

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

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

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

12.17 JQuery

jQuery引入

下载链接: [jQuery官网](https://jquery.com/)，首先需要下载这个jQuery的文件，然后在HTML文件中引入这个文件，就可以使用这个文件中帮我们提供的jquery的接口了。

jQuery对象和dom对象

jQuery找到的对象称为 --> jQuery对象
原生js找到的标签称为 --> dom对象
dom对象只能使用dom对象的方法,不能使用jquery对象的方法,jquery对象也是,它不能使用dom对象的方法
dom对象和jquery对象互相转换:
- jquery对象转dom对象 -- jquery对象[0] 示例: $('#d1')[0]
- dom对象转jquery对象 -- $(dom对象)

jQuery选择器

基本选择器(同css一样)

不管找什么标签，用什么选择器，都必须要写$("")，引号里面再写选择器，通过jQuery找到的标签对象就是一个jQuery对象，用原生JS找到的标签对象叫做DOM对象
通过 .text() 可以拿到标签里面的文本内容

id选择器
- $("#id值")
标签选择器
- $("标签名")
class选择器
- $(".类名")
配合使用
- $("div.c1") 找到有c1 class类的div 标签
所有元素选择器
- $("*")
组合选择器
- $("#id, .className, tagName")
层级选择器
- x和y可以为任意选择器
- $("x y"); // x的所有后代y（子子孙孙）
- $("x > y");// x的所有儿子y（儿子）
- $("x + y")// 找到所有紧挨在x后面的y
- $("x ~ y")// x之后所有的兄弟y

选择器找到的可能是多个标签,会放到数组里面,但还是jquery对象,能够直接使用jquery的方法,意思是找到的所有标签进行统一设置,如果要单独设置选中的所有标签中的某个标签,可以通过索引取值的方式找到,然后注意,通过索引取值拿到的标签,是个dom对象

基本筛选器(选择之后进行过滤)

<ul>
    <li id="1">南山</li>
    <li id="2">
        <a href="">百度</a>
        宝安
    </li>
    <li id="3">坪山</li>
    <li id="4">罗湖</li>
    <li id="5">
        <a href="">华为</a>
        福田
    </li>
    <li id="6">龙岗</li>
</ul>

:first  -- 示例:$('li:first') // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// --$('li:has(.c1)')  找到后代中含有满足has里面选择器的那个标签
:not(:has(.c1)) -- $('li:not(:has(.c1))') 排除后代中含有满足has里面选择器的那个标签

属性选择器

[attribute = value] 属性等于

[attribute != value] 属性不等于

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

表单筛选器

多用于找form表单里面出现的input标签,当然通过属性选择器找肯定没有问题的,这样就是写着简单一点

找到的是type属性为这个值的input标签中
:text
:password
:file
:radio
:checkbox

:submit
:reset
:button

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

表单对象属性筛选器

:enabled 可用的标签
:disabled 不可用的标签
:enabled 可用的标签

:selected 选中的option标签

// 找到可用的input标签
<form>
  <input name="email" disabled="disabled" />
  <input name="id" />
</form>

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

// 找到被选中的option：
<select id="s1">
  <option value="beijing">北京市</option>
  <option value="shanghai">上海市</option>
  <option selected value="guangzhou">广州市</option>
  <option value="shenzhen">深圳市</option>
</select>

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

筛选器方法

选择器或者筛选器选择出来的都是对象，而筛选器方法其实就是通过对象来调用一个进一步过滤作用的方法，写在对象后面加括号，不再是写在选择器里面的了。

下一个元素

$('#l3').next();  找到下一个兄弟标签
$('#l3').nextAll(); 找到下面所有的兄弟标签
$('#l3').nextUntil('#l5');直到找到id为l5的标签就结束查找，不包含它

上一个元素

$("#id").prev()   找到上一个兄弟标签
$("#id").prevAll()  找到上面所有的兄弟标签
$("#id").prevUntil("#i2") 直到找到id为i2的标签就结束查找，不包含它

父亲元素

$("#id").parent()   // 查找一级父类
$("#id").parents()  // 查找当前元素的所有的父辈元素（爷爷辈、祖先辈都找到）
$("#id").parentsUntil('body') // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止，这里直到body标签，不包含body标签，基本选择器都可以放到这里面使用。

儿子和兄弟元素

$('ul').children();       // 找所有的儿子们标签
$('ul').children('#l3');  // 找到符合后面这个选择器的儿子标签

$('#l5').siblings();      // 找到所有的兄弟们标签,不包含自己
$('#l5').siblings('#l3'); // 找到符合后面这个选择器的兄弟标签

查找
- 搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法
- $("div").find("p") 找到后代中含有p标签的div标签,相当于 `$('div p')

筛选

筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式

$("div").filter(".c1")  // 从结果集中过滤出有c1样式类的，从所有的div标签中过滤出有class='c1'属性的div，和find不同，find是找div标签的子子孙孙中找到一个符合条件的标签 等价于 $("div.c1")

.first() // 获取匹配的第一个元素
.last()  // 获取匹配的最后一个元素
.not()   // 从匹配元素的集合中删除与指定表达式匹配的元素$('li').not('#l3');
.has()   // 保留包含特定后代的元素，去掉那些不含有指定后代的元素。
.eq()    // 索引值等于指定值的元素

样式类操作

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

示例代码
	$('.c1').addClass('c2');
	$('.c1').addClass('c2');
	$('.c1').hasClass('c2');
	$('.c1').toggleClass('c2');

css样式

原生js
	标签.style.color = 'red';
jquery
	$('.c1').css('background-color','red');  
	同时设置多个css样式
	$('.c1').css({'background-color':'yellow','width':'200px'})

位置操作

查看位置
$('.c2').position();  //查看相对位置 
	{top: 20, left: 20}
$('.c2').offset();    //查看距离窗口左上角的绝对位置
	{top: 28, left: 28}
设置位置
	$('.c2').offset({'top':'20','left':'40'});

jQuery绑定点击事件的写法

    原生js绑定点击事件
    // $('.c1')[0].onclick = function () {
    //     this.style.backgroundColor = 'green';
    // }
jquery绑定点击事件
    $('.c1').click(function () {
        $(this).css('background-color','green');
    })

点击事件和滚动事件的示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red;
            height: 100px;
             100px;
        }
        .c2{
            background-color: green;
            height: 1000px;
             100px;
        }
        .c3{
            background-color: blue;
            height: 1000px;
             100px;
        }
        .s1{
            position: fixed;
            left:20px;
            bottom: 20px;
            height: 40px;
             80px;
            background-color: purple;
            line-height: 40px;
            text-align: center;

        }
        .s1 a{
            color: white;
            font-size: 14px;
            text-decoration: none;
        }
        .hide{
            display: none;
        }


    </style>
</head>
<body>
<!--<a name="top">这里是顶部</a>-->
<!--<a>这里是顶部</a>-->
<span>顶部位置</span>
<div class="c1"></div>

<button class="change-postion">走你</button>

<div class="c2"></div>
<div class="c3"></div>

<span class="s1 hide">
    <!--<a href="#top">返回顶部</a>-->
    <span>返回顶部</span>

</span>


<script src="jquery.js"></script>
<script>
	//点击事件来改变标签位置
    $('.change-postion').click(function () {
        $('.c1').offset({top:200,left:200});
    });
    
	//滚动事件,监听滚动距离来显示或者隐藏标签
    $(window).scroll(function () {
        console.log($(window).scrollTop());
        if ($(window).scrollTop() >=200){
            $('.s1').removeClass('hide');
        }else {
            $('.s1').addClass('hide');
        }
    });
    
	// 回到顶部,scrollTop设置值
    $('.s1').click(function () {
        $(window).scrollTop(0);
    })

</script>

</body>
</html>

尺寸

$('.c1').height();  //content 高度
$('.c1').width();   //content 宽度
$('.c1').innerHeight();//content高度+padding高度
$('.c1').innerWidth(); //content宽度+padding宽度
$('.c1').outerHeight();//content高度+padding高度 + border高度
$('.c1').outerWidth();//content宽度+padding宽度+ border宽度


示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
             100px;
            height: 100px;
            border: 2px solid red;
            background-color: green;
            padding: 20px 30px;
        }
    </style>
</head>
<body>
<div class="c1"></div>

<script src="jquery.js"></script>
</body>
</html>

文本操作

html()//取得第一个匹配元素的html内容，包含标签内容
html(val)//设置所有匹配元素的html内容，识别标签，能够表现出标签的效果

text()// 取得所有匹配元素的内容，只有文本内容，没有标签
text(val)//设置所有匹配元素的内容，不识别标签，将标签作为文本插入进去
示例:
$('.c1').text('<h3>你好,太白</h3>');
$('.c1').html('<h3>你好,太白</h3>');

值操作

获取值
	input type='text'的标签--$('#username').val();
	input type='radio'标签获取被选中的标签的值 --- $(':radio:checked').val();
	input type='checkbox'标签获取被选中的标签的值 --- 直接$(':checkbox:checked').val();是不行的,需要循环取值  
		var d = $(':checkbox:checked');
		for (var i=0;i<d.length;i++){
			console.log(d.eq(i).val());
		}
		
	单选select --- $('#city').val();
	多选select --- $('#author').val(); // ["2", "3"]	

设置值
	input type='text'的标签 --- $('#username').val('李杰');
	input type='radio'标签 ---  $('[name="sex"]').val(['3']);
			如果 $('[name="sex"]').val('3'),所有标签的值都变成了'3';
	input type='checkbox'设置值 --- $('[name="hobby"]').val(['2','3'])
	单选select --- $('#city').val('1');  option value='1'
	多选select --- $('#author').val(['2','3'])

属性操作

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

示例:
	设置单个属性
		$('.c1').attr('xx','oo');
	设置多个属性
		$('.c1').attr({'age':'18','sex':'alex'});
	查看属性
		$('.c1').attr('属性名');
    	$('.c1').attr('xx');
    删除属性
    	$('.c1').removeAttr('xx');

prop -- 针对的是checkedselecteddisabled..

查看标签是否有checked属性,也就是是否被选中
	    attr $(':checked').attr('checked'); //checked -- undefined
	    prop $(':checked').prop('checked'); //true  -- false
		
		通过设置属性的方式来设置是否选中:
			$(':radio').eq(2).prop('checked',true);  true和false不能加引号
			$(':radio').eq(2).prop('checked',false);

简单总结:
	1.对于标签上有的能看到的属性和自定义属性都用attr
	2.对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用prop。
	具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()

文档处理

添加到指定元素内部的后面
	$(A).append(B)// 把B追加到A
	$(A).appendTo(B)// 把A追加到B
	#添加字符串照样能识别标签  *****
	$('#d1').append('<a href="http://www.jd.com">京东</a>');
添加到指定元素内部的前面
	$(A).prepend(B)// 把B前置到A
	$(A).prependTo(B)// 把A前置到B
	示例
		$('a').prependTo($('div'));

添加到指定元素外部的后面
	$(A).after(B)// 把B放到A的后面
	$(A).insertAfter(B)// 把A放到B的后面

添加到指定元素外部的前面
	$(A).before(B)// 把B放到A的前面
	$(A).insertBefore(B)// 把A放到B的前面
	
移除和清空元素
	remove()// 从DOM中删除所有匹配的元素。
	empty()// 删除匹配的元素集合中所有的子节点，包括文本被全部删除，但是匹配的元素还
	$('div').remove();
	$('div').empty();

替换
	replaceWith()
	replaceAll()
	示例:
		var a = document.createElement('a')
		a.href = 'http://www.baidu.com';
		a.innerText = 'xxx';
		
		$('span').replaceWith(a);
		$(a).replaceAll('span');
		
clone()克隆
	<button class="btn">屠龙宝刀,点击就送!</button>	

    $('.btn').click(function () {
        // var a = $(this).clone(); //克隆标签
        var a = $(this).clone(true);  //连带事件一起克隆
        $(this).after(a);

    })

边框

	div{
            
             200px;
            height: 200px;
            /*border-style: solid;*/  边框样式
            /*border-color: red;*/    边框颜色
            /*border- 10px;*/   边框宽度
            /*border:10px solid red;*/  简写方式

            
            
            /*border-left-style: solid;*/
            /*border-left- 10px;*/

            /*border-right-style: dashed;*/
            /*border-top-style: dashed;*/
            /*border-bottom-style: dashed;*/
            /*border-right- 5px;*/
            border-left:10px solid red;  单独设置边框的简写方式

        }

控制圆角
	border-radius: 50%;

display属性

        div{
             100px;
            height: 100px;
            border: 1px solid red;
            /*display: inline;  !* 将标签设置为内敛标签 *!*/
            /*display: inline-block;  !* 将标签设置为同时具备内敛和块级标签的一些特性,比如可以设置高度宽度,但是不独占一行 *!*/
            /*display: none;  !* 隐藏标签 ,并且不占用自己之前的空间*!*/

        }
        span{
            border: 2px solid blue;

        }

        .c1{
             200px;
            height: 200px;
            /*display: inline-block;*/  
            display: block; /* 将内敛标签设置为块级标签 */
        }
        
     值	           意义
     display:"none"	HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
     display:"block"	默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
     display:"inline"	按行内元素显示，此时再设置元素的width、height、margin-top、margin-  bottom和float属性都不会有什么影响。
     display:"inline-block"	使元素同时具有行内元素和块级元素的特点。   
	
	
隐藏标签
	visibility: hidden; /* 隐藏标签,但是标签还占用原来的空间 */
    /*display: none;  !* 隐藏标签 ,并且不占用自己之前的空间*!*/

css盒子模型

content内容区域  
padding 内边距
border 边框宽度
	div{
             200px;
            height: 100px;
            border: 2px solid deeppink;
            /*padding-top: 10px;*/
            /*padding-left: 5px;*/
            /*padding-right: 2px;*/
            /*padding-bottom: 4px;*/
            /*padding: 10px 20px;  !* 10px上下内边距 ,20px左右内边距 *!*/
            /*padding: 10px 20px 5px 2px;  !* 上 右 下 左 *!*/
            padding: 10px 20px 5px 0;  /* 上 右 下 左 */
            
        }

margin 外边距
top距离上面标签的距离
bottom距离下面标签的距离
left 距离左边标签的距离
rigth 距离右边标签的距离

        .d1 {
             200px;
            height: 100px;
            border: 2px solid deeppink;
            margin-bottom: 200px;  
        }
		.d2{
            margin-top: 100px;  
            border: 2px solid blue;

        }

	两个简写的方式
	/*margin: 10px 20px;*/    上下为10px 左右为20px
	margin: 10px 5px 6px 3px;   顺序为上、右、下、左

	两个情况:
		垂直方向如果上下两个标签都设置了margin外边距,那么取两者的最大的值
		水平方法,两个标签都设这外边距,取两者的边距之和

浮动float

	.c1{
            background-color: red;
            height: 100px;
             100px;
            float: left;
        }
        .c2{
            background-color: blue;
            height: 100px;
             100px;
            float: right;
        }
        
浮动会造成父级标签塌陷问题
解决方法:
	1 父级标签设置高度
	2 伪元素选择器清除浮动,给父级标签加上下面这个类值
		.clearfix:after{
            content: '';
            display: block;
            clear: both;  清除浮动clear
        }
        
clear的值和描述        
	值	描述
	left	在左侧不允许浮动元素。
	right	在右侧不允许浮动元素。
	both	在左右两侧均不允许浮动元素。

overflow溢出属性

 	.c1{
             200px;
            height: 200px;
            border: 1px solid red;
            /*overflow: hidden;*/
            overflow: auto;  
        }
	<div class="c1">
    	总结一下：为什么要有浮动啊，是想做页面布局，但是浮动有副作用，父级标签塌陷，所以要想办法去掉这个副作用，使用了clear来清除浮动带来的副作用，我们当然也可以通过设置标签为inline-block来实现这种布局效果，但是把一个块级标签变成一个类似内敛标签的感觉，不好操控，容易混乱，所以一般都用浮动来进行布局。
	</div>

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

圆形头像示例

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="x-ua-compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>圆形的头像示例</title>
  <style>

    .header-img {
       150px;
      height: 150px;
      border: 3px solid white;
      border-radius: 50%;
      overflow: hidden;
    }
    
    .header-img>img {
         100%;  #让img标签按照外层div标签的宽度来显示

    }
  </style>
</head>
<body>

<div class="header-img">
  <img src="meinv.png" alt="">
</div>

</body>
</html>

总结一点:width宽度设置的时候,直接可以写100px,30%这种百分比的写法,它的宽度按照父级标签的宽度的百分比来计算.

定位position:相对定位和绝对定位

<!DOCTYPE html>
<html lang="en">	
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red;
            height: 100px;
             100px;
        }
        .c2{
            background-color: blue;
            height: 100px;
             100px;
            /*position: relative;  !*相对定位,保留原来的空间位置,相对自己原来的位置移动,以左上角为基准*!*/

            /*top: 20px; 往下移20px,距离原来位置的上边框20px */
            /*top: -20px;*/
            /*left: 20px;*/
            /*right: ;*/
            /*bottom: ;*/

            position: absolute; /* 绝对定位,不保留自己原来的位置,按照父级标签或者祖先级标签..设置了position为 relative的标签的位置进行移动,如果一直找不到设置了设个属性的标签,那么按照body标签来移动 */

            top: 20px;
            left: 20px;
        }
        .c3{
            background-color: green;
            height: 100px;
             100px;
        }
        .ccc{
            height: 100px;
             200px;
            background-color: purple;
        }
        .cc{
            position: relative;
            left: 200px;
        }
    </style>
</head>
<body>
<div class="ccc"></div>
<div class="cc">
    <div class="c1"></div>
    <div class="c2"></div>
    <div class="c3"></div>
</div>

</body>
</html>

回到顶部示例:position为fixed固定定位,通过相对于浏览器窗口的距离来设置位置.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red;
            height: 500px;
             200px;
        }
        .c2{
            background-color: green;
            height: 500px;
             200px;
        }

        .s1{
            position: fixed; /*固定定位,位置是根据浏览器窗口来的*/
            /*top:20px;*/
            left: 20px;
            bottom: 20px;
            background-color: blue;
            height: 40px;
             80px;
            text-align: center;

            line-height: 40px; /* 和标签高度一致,标签内容就垂直居中 */

        }
        .s1 a{
            color: white;
            text-decoration: none;
        }
    </style>
</head>
<body>

<!--<a name="top">这里是顶部,亲爱的</a>-->  <!-- 锚点 -->
<div id="top">这是顶部</div> <!-- 锚点 -->

<div class="c1"></div>
<div class="c2"></div>

<span class="s1">
    <a href="#top">回到顶部</a> <!-- 触发锚点 -->
</span>

</body>
</html>


锚点设置的两种方式
	<!--<a name="top">这里是顶部,亲爱的</a>-->  <!-- 锚点 -->
	<div id="top">这是顶部</div> <!-- 锚点 -->
触发锚点的a标签写法
<a href="#top">回到顶部</a> <!-- 触发锚点 -->

z-index控制层级

模态对话框示例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .shadow{
            position: fixed;
            top:0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0,0,0,0.5);
            z-index: 99;
        }
        .mode{
            position: fixed;
            height: 400px;
             300px;
            background-color: white;
            z-index: 100;  /* 数值越大越在上层显示 */
            left: 50%;  /* 按照窗口宽度的50%来移动 */
            top:50%;    /* 按照窗口高度的50%来移动 */
            margin-left: -150px;
            margin-top: -200px;

        }

    </style>
</head>
<body>

<div>
    <h1>
        22期,吴老板唱歌
    </h1>
</div>


<div class="mode">

</div>

<div class="shadow">

</div>


</body>
</html>

opacity透明度

        .c1{
            background-color: rgba(255,0,0,0.3); /* 背景颜色或者字体颜色等单独的透明度 */
            height: 100px;
             100px;
        }
        .c2{
            background-color: rgb(255,0,0);
            height: 100px;
             100px;
            opacity: 0.3;  /* 整个标签透明度 */
        }
<div class="c1">
    你好
</div>
<div class="c2">
    我好
</div>

BOM 浏览器对象模型

window对象的子对象中的location

location.href   获取当前url:"https://www.cnblogs.com/clschao/articles/10092991.html"
location.href="URL" // 跳转到指定页面
	示例:location.href = 'http://www.baidu.com';直接跳转到百度
location.reload() 重新加载页面,就是刷新一下页面

计时器相关(计时器是异步的)

setTimeout 计时器,一段时间之后做某些事情

setTimeout('confirm("你好");',3000);  #3秒之后执行前面的js代码
setTimeout(confirm('xxx'),3000);  #如果写的不是字符串,会直接执行
setTimeout(function(){confirm('xxx')},3000);  #最好写成函数

var a = setTimeout(function(){console.log('xxx')},3000);  #a是浏览器来记录计时器的一个随机数字
clearTimeout(a)  #清除计时器,通过这个数字可以清除

setInterval 计时器,每隔一段时间做某些事情

var a = setInterval(function(){console.log('xxx')},3000);  
clearInterval(a);

DOM

选择器

直接查找

document.getElementById           根据ID获取一个标签
document.getElementsByClassName   根据class属性获取（可以获取多个元素，所以返回的是一个数组）
document.getElementsByTagName     根据标签名获取标签合集
示例:
	<div class="c1" id="d1">
    	待到将军归来日,朕与将军解战袍!
	</div>

	<div class="c1" id="d2">
    	日照香炉生紫烟,遥看瀑布挂前川!
	</div>
	
	var a = document.getElementById('d1');  # 获取id属性值为d1的标签  拿到的直接是标签对象
	var a = document.getElementsByClassName('c1'); #获取class值为c1的所有标签  拿到的是数组
	var a = document.getElementsByTagName('div');  #获取所有div标签  拿到的是数组

间接查找

var a = document.getElementById('d1');
a.parentElement; #获取a这个标签的父级标签.
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素

节点操作

创建节点(创建标签) 
	var a = document.createElement('标签名称'); 
	示例,创建a标签
		var a = document.createElement('a');
	var dd = document.getElementById('dd'); 找到div标签
	
添加节点
	#添加节点,添加到了最后
	dd.appendChild(a);将创建的a标签添加到dd这个div标签里面的最后.

	#在某个节点前面添加节点
	父级标签.insertBefore(新标签,某个儿子标签)
	示例
		var dd = document.getElementById('dd');  #找到父级标签
		var a = document.createElement('a');   #创建一个新的a标签
		var d2 = dd.children[1];  #找到父级标签下的某个儿子标签
		dd.insertBefore(a,d2);   #将a标签插入到上面这个儿子标签的前面.
删除节点
	dd.removeChild(d2);  父级标签中删除子标签
        
替换节点
	var dd = document.getElementById('dd');  #找到父级标签
	var a = document.createElement('a');  #创建a标签
	a.innerText = '百度';  
	var d1 = dd.children[0];  #找到要被替换的子标签
	dd.replaceChild(a,d1);  #替换

文本操作

d1.innerText; 查看

设置:
	d1.innerText = "<a href=''>百度</a>";  
	d1.innerHTML = "<a href=''>百度</a>";  能够识别标签

属性操作

var divEle = document.getElementById("d1");
divEle.setAttribute("age","18")  #比较规范的写法
divEle.getAttribute("age")
divEle.removeAttribute("age")

// 自带的属性还可以直接.属性名来获取和设置，如果是你自定义的属性，是不能通过.来获取属性值的
imgEle.src
imgEle.src="..."

值操作

var inp = document.getElementById('username');
inp.value;  #查看值
inp.value = 'taibai'; #设置值

选择框:
	<select name="city" id="city">
        <option value="1">上海</option>
        <option value="2">北京</option>
        <option value="3">深圳</option>
    </select>
	
	var inp = document.getElementById('city');
	inp.value;  #查看值
	inp.value = '1';  #设置值

class的操作

var d = document.getElementById('oo'); 
d.classList;  #获得这个标签的class属性的所有的值
d.classList.add('xx2');  #添加class值
d.classList.remove('xx2'); #删除class值
d.classList.contains('xx2');  #判断是否有某个class值,有返回true,没有返回false
d.classList.toggle('xx2');  #有就删除,没有就增加

css操作

var d = document.getElementById('oo');
d.style.backgroundColor = 'deeppink';  有横杠的css属性,写法要去掉横杠,并且横杠后面的单词首字母大写
d.style.height = '1000px'

事件

绑定事件的方式有两种

方式1:

<div id="d1" class="c1" onclick="f1();"></div>

<script>
    function f1() {
        var d = document.getElementById('d1');
        d.style.backgroundColor = 'yellow';
    }

</script>

方式2

	<div id="d1" class="c1"></div>

    var d = document.getElementById('d1');
    d.onclick = function () {
        d.style.backgroundColor = 'yellow';
    }

事件里面的this

绑定方式1:

this表示当前标签对象
<div id="d1" class="c1" onclick="f1(this);"></div>
function f1(ths) {
        // var d = document.getElementById('d1');
        // d.style.backgroundColor = 'yellow';
        ths.style.backgroundColor = 'yellow';

        var d = document.getElementById('d2');
        d.style.backgroundColor = 'yellow';
    }

方式2:

    <div id="d1" class="c1"></div>
    
    var d = document.getElementById('d1');
    d.onclick = function () {
        this.style.backgroundColor = 'yellow';
        // d.style.backgroundColor = 'yellow'; //this表示当前标签对象
    }

onblur和onfocus事件

 var inp = document.getElementById('username');
    inp.onfocus = function () {
        var d = document.getElementById('d1');
        d.style.backgroundColor = 'pink';
    };
    // onblur 失去光标时触发的事件

    inp.onblur = function () {
        var d = document.getElementById('d1');
        d.style.backgroundColor = 'green';
    };

onchange事件,域内容发生变化时触发

<select name="" id="jishi">
    <option value="1">太白</option>
    <option value="2">alex</option>
    <option value="3">沛齐</option>

</select>

// onchange事件，内容发生变化时触发的事件
    var s = document.getElementById('jishi');
    s.onchange = function () {
    	//this.options  select标签的所有的option标签
    	//this.selectedIndex被选中的标签在所有标签中的索引值
        console.log(this.options[this.selectedIndex].innerText + '搓的舒服');
    }
    
    
用户名:<input type="text" id="username">    

    //input标签绑定onchange事件
    var inp = document.getElementById('username');
    inp.onchange = function () {
        console.log(this.value);  
    };

样式操作

样式类操作

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

示例代码
	$('.c1').addClass('c2');
	$('.c1').addClass('c2');
	$('.c1').hasClass('c2');
	$('.c1').toggleClass('c2');

css样式

原生js
	标签.style.color = 'red';
jquery
	$('.c1').css('background-color','red');  
	同时设置多个css样式
	$('.c1').css({'background-color':'yellow','width':'200px'})

位置操作

查看位置
$('.c2').position();  //查看相对位置 
	{top: 20, left: 20}
$('.c2').offset();    //查看距离窗口左上角的绝对位置
	{top: 28, left: 28}
设置位置
	$('.c2').offset({'top':'20','left':'40'});

jQuery绑定点击事件的写法

    原生js绑定点击事件
    // $('.c1')[0].onclick = function () {
    //     this.style.backgroundColor = 'green';
    // }
jquery绑定点击事件
    $('.c1').click(function () {
        $(this).css('background-color','green');
    })

点击事件和滚动事件的示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: red;
            height: 100px;
             100px;
        }
        .c2{
            background-color: green;
            height: 1000px;
             100px;
        }
        .c3{
            background-color: blue;
            height: 1000px;
             100px;
        }
        .s1{
            position: fixed;
            left:20px;
            bottom: 20px;
            height: 40px;
             80px;
            background-color: purple;
            line-height: 40px;
            text-align: center;

        }
        .s1 a{
            color: white;
            font-size: 14px;
            text-decoration: none;
        }
        .hide{
            display: none;
        }


    </style>
</head>
<body>
<!--<a name="top">这里是顶部</a>-->
<!--<a>这里是顶部</a>-->
<span>顶部位置</span>
<div class="c1"></div>

<button class="change-postion">走你</button>

<div class="c2"></div>
<div class="c3"></div>

<span class="s1 hide">
    <!--<a href="#top">返回顶部</a>-->
    <span>返回顶部</span>

</span>


<script src="jquery.js"></script>
<script>
	//点击事件来改变标签位置
    $('.change-postion').click(function () {
        $('.c1').offset({top:200,left:200});
    });
    
	//滚动事件,监听滚动距离来显示或者隐藏标签
    $(window).scroll(function () {
        console.log($(window).scrollTop());
        if ($(window).scrollTop() >=200){
            $('.s1').removeClass('hide');
        }else {
            $('.s1').addClass('hide');
        }
    });
    
	// 回到顶部,scrollTop设置值
    $('.s1').click(function () {
        $(window).scrollTop(0);
    })

</script>

</body>
</html>

尺寸

$('.c1').height();  //content 高度
$('.c1').width();   //content 宽度
$('.c1').innerHeight();//content高度+padding高度
$('.c1').innerWidth(); //content宽度+padding宽度
$('.c1').outerHeight();//content高度+padding高度 + border高度
$('.c1').outerWidth();//content宽度+padding宽度+ border宽度


示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
             100px;
            height: 100px;
            border: 2px solid red;
            background-color: green;
            padding: 20px 30px;
        }
    </style>
</head>
<body>
<div class="c1"></div>

<script src="jquery.js"></script>
</body>
</html>

文本操作

html()//取得第一个匹配元素的html内容，包含标签内容
html(val)//设置所有匹配元素的html内容，识别标签，能够表现出标签的效果

text()// 取得所有匹配元素的内容，只有文本内容，没有标签
text(val)//设置所有匹配元素的内容，不识别标签，将标签作为文本插入进去
示例:
$('.c1').text('<h3>你好,太白</h3>');
$('.c1').html('<h3>你好,太白</h3>');

值操作

获取值
	input type='text'的标签--$('#username').val();
	input type='radio'标签获取被选中的标签的值 --- $(':radio:checked').val();
	input type='checkbox'标签获取被选中的标签的值 --- 直接$(':checkbox:checked').val();是不行的,需要循环取值  
		var d = $(':checkbox:checked');
		for (var i=0;i<d.length;i++){
			console.log(d.eq(i).val());
		}
		
	单选select --- $('#city').val();
	多选select --- $('#author').val(); // ["2", "3"]	

设置值
	input type='text'的标签 --- $('#username').val('李杰');
	input type='radio'标签 ---  $('[name="sex"]').val(['3']);
			如果 $('[name="sex"]').val('3'),所有标签的值都变成了'3';
	input type='checkbox'设置值 --- $('[name="hobby"]').val(['2','3'])
	单选select --- $('#city').val('1');  option value='1'
	多选select --- $('#author').val(['2','3'])

属性操作

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

示例:
	设置单个属性
		$('.c1').attr('xx','oo');
	设置多个属性
		$('.c1').attr({'age':'18','sex':'alex'});
	查看属性
		$('.c1').attr('属性名');
    	$('.c1').attr('xx');
    删除属性
    	$('.c1').removeAttr('xx');

prop -- 针对的是checkedselecteddisabled..

查看标签是否有checked属性,也就是是否被选中
	    attr $(':checked').attr('checked'); //checked -- undefined
	    prop $(':checked').prop('checked'); //true  -- false
		
		通过设置属性的方式来设置是否选中:
			$(':radio').eq(2).prop('checked',true);  true和false不能加引号
			$(':radio').eq(2).prop('checked',false);

简单总结:
	1.对于标签上有的能看到的属性和自定义属性都用attr
	2.对于返回布尔值的比如checkbox、radio和option的是否被选中或者设置其被选中与取消选中都用prop。
	具有 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其他的使用 attr()

文档处理

添加到指定元素内部的后面
	$(A).append(B)// 把B追加到A
	$(A).appendTo(B)// 把A追加到B
	#添加字符串照样能识别标签  *****
	$('#d1').append('<a href="http://www.jd.com">京东</a>');
添加到指定元素内部的前面
	$(A).prepend(B)// 把B前置到A
	$(A).prependTo(B)// 把A前置到B
	示例
		$('a').prependTo($('div'));

添加到指定元素外部的后面
	$(A).after(B)// 把B放到A的后面
	$(A).insertAfter(B)// 把A放到B的后面

添加到指定元素外部的前面
	$(A).before(B)// 把B放到A的前面
	$(A).insertBefore(B)// 把A放到B的前面
	
移除和清空元素
	remove()// 从DOM中删除所有匹配的元素。
	empty()// 删除匹配的元素集合中所有的子节点，包括文本被全部删除，但是匹配的元素还
	$('div').remove();
	$('div').empty();

替换
	replaceWith()
	replaceAll()
	示例:
		var a = document.createElement('a')
		a.href = 'http://www.baidu.com';
		a.innerText = 'xxx';
		
		$('span').replaceWith(a);
		$(a).replaceAll('span');
		
clone()克隆
	<button class="btn">屠龙宝刀,点击就送!</button>	

    $('.btn').click(function () {
        // var a = $(this).clone(); //克隆标签
        var a = $(this).clone(true);  //连带事件一起克隆
        $(this).after(a);

    })

事件

事件绑定方式

<script src="jquery.js"></script>
<script>
    //方式1
    // $('#d1').click(function () {
    //     $(this).css({'background-color':'green'});
    // });
    //方式2
    $('#d1').on('click',function () {
        $(this).css({'background-color':'green'});
    })

</script>

常用事件

click  左键点击事件
    //获取光标触发的事件
    $('[type="text"]').focus(function () {
        $('.c1').css({'background-color':'black'});
    });
    //失去光标(焦点)触发的事件
    $('[type="text"]').blur(function () {
        $('.c1').css({'background-color':'purple'});
    });

    //域内容发生改变时触发的事件
    $('select').change(function () {
        $('.c1').toggleClass('cc');
    });

    //鼠标悬浮触发的事件
    // $('.c1').hover(
    //     //第一步:鼠标放上去
    //     function () {
    //         $(this).css({'background-color':'blue'});
    //     },
    //     //第二步,鼠标移走
    //     function () {
    //         $(this).css({'background-color':'yellow'});
    //     }
    // )

    // 鼠标悬浮  等同于hover事件
    // 鼠标进入
    // $('.c1').mouseenter(function () {
    //     $(this).css({'background-color':'blue'});
    // });
    // 鼠标移出
    //  $('.c1').mouseout(function () {
    //     $(this).css({'background-color':'yellow'});
    // });
	
    // $('.c2').mouseenter(function () {
    //     console.log('得港绿了');
    // });
    // 鼠标悬浮事件
    // $('.c2').mouseover(function () {
    //     console.log('得港绿了');
    // });
    // mouseover 和 mouseenter的区别是：mouseover事件是如果该标签有子标签，那么移动到该标签或者移动到子标签时会连续触发，mmouseenter事件不管有没有子标签都只触发一次，表示鼠标进入这个对象


//键盘按下触发的事件  eevent事件对象
    $(window).keydown(function (e) {
        // console.log(e.keyCode); //每个键都有一个keyCode值,通过不同的值来触发不同的事件
        if (e.keyCode === 37){
            $('.c1').css({'background-color':'red'});
        }else if(e.keyCode === 39){
            $('.c1').css({'background-color':'green'});
        }
        else {
            $('.c1').css({'background-color':'black'});
        }
    })
    // 键盘抬起触发的事件
    $(window).keyup(function (e) {
        console.log(e.keyCode);
    })

	
	input事件:
        22期百度:<input type="text" id="search">
        <script src="jquery.js"></script>
        <script>
            $('#search').on('input',function () {
                console.log($(this).val());
            })

        </script>

事件冒泡

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #d1{
            background-color: red;
            height: 200px;
        }
        #d2{
            background-color: green;
            height: 100px;
             100px;
        }

    </style>

</head>
<body>

<div id="d1">
    <div id="d2"></div>

</div>


<script src="jquery.js"></script>
<script>
    $('#d1').click(function () {
        alert('父级标签');
    });
    $('#d2').click(function () {
        alert('子级标签');
    });
    

</script>

</body>
</html>

阻止后续事件发生

    $('#d1').click(function () {
        alert('父级标签');
    });
    $('#d2').click(function (e) {
        alert('子级标签');
        return false;
        // e.stopPropagation();
    });

事件委托

事件委托是通过事件冒泡的原理，利用父标签去捕获子标签的事件，将未来添加进来的某些子标签自动绑定上事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div id="d1">
    <button class="c1">爱的魔力转圈圈</button>

</div>

<script src="jquery.js"></script>
<script>
    // $('.c1').on('click',function () {
    //     alert('得港被雪飞调教了,大壮很难受!');
    //     var btn = document.createElement('button');
    //     $(btn).text('爱的魔力转圈圈');
    //     $(btn).addClass('c1');
    //     console.log(btn);
    //     //添加到div标签里面的后面
    //     $('#d1').append(btn);
    //
    // });

	#将'button' 选择器选中的标签的点击事件委托给了$('#d1');
    $('#d1').on('click','button',function () {
        alert('得港被雪飞调教了,大壮很难受!');
        var btn = document.createElement('button');
        $(btn).text('爱的魔力转圈圈');
        $(btn).addClass('c1');
        console.log(btn);
        console.log($(this)) //还是我们点击的那个button按钮
        //添加到div标签里面的后面
        $('#d1').append(btn);

    });


</script>
</body>
</html>

页面载入和window.onload

1. jquery文件要在使用jquery的代码之前引入

2. js代码最好都放到body标签下面或者里面的最下面来写

3.window.onload
	// window.onload = function () {
    //     $('.c1').click(function () {
    //         $(this).css({'background-color':'green'});
    //     })
    // }
4.页面载入,$(function (){alert('xx');}) -- $(document).ready(function(){});
	页面载入与window.onload的区别
　　　　1.window.onload()函数有覆盖现象，必须等待着图片资源加载完成之后才能调用
　　　　2.jQuery的这个入口函数没有函数覆盖现象，文档加载完成之后就可以调用（建议使用此函数）
　　　　
示例:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.js"></script>
    <script>
        // 等待整个页面中的内容全部加载完成之后,触发window.onload对应的函数里面的内容
        // window.onload 有覆盖现象,会被后面的window.onload给重新赋值
        // window.onload = function () {
        //     $('.c1').click(function () {
        //         $(this).css({'background-color':'green'});
        //     })
        // }

        
        $(function () {
            $('.c1').click(function () {
                $(this).css({'background-color':'green'});
            })
        });

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


    <style>
        .c1{
            background-color: red;
            height: 200px;
             200px;
        }
    </style>
</head>
<body>

<div class="c1"></div>

<img src="" alt="">


</body>

</html>

each循环

循环标签对象数组
$('li').each(function(k,v){
	console.log(k,v);
});

循环普通数组
var d1 = ['aa','bb','cc'];
$.each(d1,function(k,v){
	console.log(k,v);
})

跳出循环  return false; 类似于break  #取标签的
$('li').each(function(k,v){
	console.log(k,v.innerText);
	if (k === 1){
		return false;
	}
});

跳出本次循环  return; 类似于continue   #取标签的
$('li').each(function(k,v){
	
	if (k === 1){
		return;
	}
	console.log(k,v.innerText);
});

data

给标签对象添加数据,类似于添加了全局变量
	.data(key, value): 设置值
	.data(key)   取值
	.removeData(key) 删除值

插件(了解)

<script>
jQuery.extend({ //$.extend({})
  min:function(a, b){return a < b ? a : b;}, //自定义了一个min和max方法，min和max作为键，值是一个function
  max:function(a, b){return a > b ? a : b;}
});
jQuery.min(2,3);// => 2
jQuery.max(4,5);// => 5
$('div').min(1,2);不能通过标签对象来调用
</script>

<script>
  jQuery.fn.extend({  //给任意的jQuery标签对象添加一个方法
    check:function(){
      return this.each(function(){this.checked =true;});
    },
    uncheck:function(){
      return this.each(function(){this.checked =false;});
    }
  });
// jQuery对象可以使用新添加的check()方法了。
$("input[type='checkbox']").check();
</script>

查看全文

相关阅读:
九.Spring Boot JPAHibernateSpring Data
JIRA安装过程中链接mysql的问题！
五、案例-指令参考-freemarker指令、表达式
 四、模版指令操作
 三、freemarker数据、模版指令
 二、freemarker.controller半自动静态化+Tomcat虚拟资源映射
 一、springMVC、freemarker页面半自动静态化
 window窗口-button(按钮)-dialog(对话框,带按钮)
panel面板
 python 给定年份、月份，返回当月对应天数

原文地址：https://www.cnblogs.com/dxxpython/p/11505296.html

内容	对应代码
空格	` `
>	`>`
<	`&lt`
&	`&amp`
￥	`&yen`
版权标识（写公司网站的时候会用到）	`&copy`
注册（一个圆圈里面有个R）	`&reg`

内容	对应代码
空格	` `
>	`>`
<	`&lt`
&	`&amp`
￥	`&yen`
版权标识（写公司网站的时候会用到）	`&copy`
注册（一个圆圈里面有个R）	`&reg`

前端

第十二章: 前端开发

12.1 HTML介绍

12.2 标签

12.2.1 标签的分类

12.2.2 head 标签中的标签

12.2.3 body 标签中的基本标签

12.2.4 img标签

12.2.5 a标签

12.2.6 列表标签

12.2.7 特殊字符

12.2.8 表格标签

12.2.9 form表单

12.2.10 select标签下拉选择框

12.2.11 label标签

12.2.12 textarea多行文本

12.3 CSS的选择器

12.3.1 css的几种引入方式

12.3.2 基本选择器

12.3.3 组合选择器

12.3.4 属性选择器

12.3.5 分组

12.3.5 伪类选择器

12.3.6 伪元素选择器

12.3.7 选择器的优先级

12.4 CSS属性相关

12.4.1 字体属性

12.4.2 文字属性

12.4.3 背景属性

12.5 边框

12.6 display 属性

12.7 CSS盒子模型

12.8 浮动: float

12.9 overflow 溢出属性

12.10 圆形头像示例

12.11 定位position : 相对定位和绝对定位

12.12 z-index 控制层级

12.13 opacity 透明度

12.14 JavaScript

js引入

注释

声明变量var

基础数据类型

数值类型 Number

字符类型 String

类型转换

字符串中常用方法

布尔值

null和undefined

对象类型 object

复杂数据类型 / 引用数据类型

数组:Array

数组常用方法和属性

自定义对象 { }

运算符

算数运算

比较运算

逻辑运算

赋值运算

流程控制

if-else if-else

switch 切换

for循环

while循环

三元运算符

函数

基本函数

函数的全局变量和局部变量

作用域

闭包

面向对象

面向对象，在ES5中没有类的概念，只有个构造函数，命名的首字母要大写，实例化的时候使用new关键字进行实例化

date对象

date对象的其他方法

json

RegExp 正则对象

Math计算模块

12.15 JS中的BOM

window对象的子对象中的location

计时器相关(计时器是异步的)

内容	对应代码
空格	` `
>	`>`
<	`&lt`
&	`&amp`
￥	`&yen`
版权标识（写公司网站的时候会用到）	`&copy`
注册（一个圆圈里面有个R）	`&reg`