前端

第十二章: 前端开发

12.1 HTML介绍

  1. 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文件内容发给浏览器 --> 浏览器渲染页面

  2. HTML 是什么?

    • 超文本标记语言,是一种用于创建网页的标记语言,不是编程语言
    • 本质上是浏览器可识别的规则,我们按照规则写网页,浏览器根据规则渲染我们的网页.对于不同的浏览器,对同一个标签可能会有不同的解释. (兼容性问题)
    • 网页文件的扩展名: .html 或 .htm

  3. 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'>

  4. 请求和响应

    • 请求: 浏览器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中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

      • 红框就是描述的信息

img

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 列表标签

  1. 无序列表

    • type属性:

      • disc : 实心圆点(默认值)
      • circle : 空心圆圈
      • square : 实心方块
      • none : 无样式
      <ul type = 'disc'>
    <li>太白</li>
    <li>alex</li>
    <li>wusir</li>
</ul>

  2. 有序列表

    • start属性 : 是从数字几开始

    • type属性

      • 1 : 数字列表 ,默认值
      • A : 大写字母
      • a : 小写字母
      • I : 大写罗马
      • i : 小写罗马
      <ol type="A" start="2">
    <li>太白</li>
    <li>alex</li>
    <li>wusir</li>
</ol>
# 表示按照大写字母进行排序,从B开始

  3. 标题列表标签

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

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

12.2.7 特殊字符

  • html中默认是不显示空格的，也就是说通过空格键加了空格也没有多少个空格的效果，加多少个都是显示一个空格的效果，需要特殊字符才能显示出空格的效果
内容 对应代码
空格 &nbsp;
> &gt;
< &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表单

  1. 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 : 页面不会刷新,将所有内容清空

  1. 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的几种引入方式

  1. 行内样式

    • 行内式是在标记style属性中设定css样式.不推荐大规模使用

      /*写在body标签里面*/
<p style="color: red">hello word</p>

  2. 内部样式

    • 嵌入式是将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>

  3. 外部样式

    • 外部样式就是将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 基本选择器

  1. 元素选择器

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

  2. id选择器: id值不能重复

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

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

  3. 类选择器: 类值可以重复

    <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>

  4. 通用选择器

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

12.3.3 组合选择器

  1. 后代选择器

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

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

  2. 儿子选择器

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

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

  3. 毗邻选择器

    <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>
# 只有小米的颜色变为红色

  4. 弟弟选择器

    <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 字体属性

  1. 字体

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

  2. 字体大小

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

  3. 子重(字体的粗细)

    值 描述
    normal 默认值,标准粗细
    bold 粗体
    bolder 更粗
    lighter 更细
    • 100 - 900 设置具体粗细,400 等同于normal,700 等同于bold
    div{
    font-weight: bold;
    font-weight: 100;   # 两种表示方式
}

  4. 颜色的表示方式

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

12.4.2 文字属性

  1. 文字对齐

    • left : 左对齐,默认值
    • right : 右对齐
    • center : 居中对齐
    div{     
    200px;
    height: 200px;
    background-color: pink;
    color: red;
    text-align: center;  # 文本居中对齐
}

  2. 文字装饰

    值 描述
    none 默认,定义标准的文本
    underline 在文本下方定义一条线
    overline 在文本上方定义一条线
    line-through 定义穿过文本的一条线 
    div a{
    text-decoration: none ;  # 给a标签去除下划线
    text-decoration: line-through;
    text-decoration: overline;
}

  3. 首行缩进

    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 : 盒子的内容,显示文本和图像

      1562065757159

  • 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

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

  1. 三种取值:

    • left : 向左取值
    • right : 向右取值
    • none : 默认值,不浮动

  2. 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

字符串中常用方法

  1. length 属性:查看字符串的长度

    var a = 'hello';
a.length;  // 5

  2. trim() : 移除两边空白

    var a = '  hello  ';
a.trim();   // "hello"
    • trimLeft() 去除左边空白
    • trimRight() 去除右边空白

  3. charAt(n) : 从0开始返回索引为n的那个字符

    var a='hello';
a.charAt(2);  //  e

  4. concat() : 字符串的拼接

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

  5. indexOf() : 通过元素找索引

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

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

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

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

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

  7. toLowerCase() 全部变小写 , toUpperCase() 全部变大写

    var a='happy';
a.toUpperCase();  // HAPPY

  8. 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类型

数组常用方法和属性

  1. 索引取值

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

  2. length属性 :

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

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

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

  4. 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]

  5. 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 的值。

  6. splice() : 删除元素

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

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

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

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

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

  9. 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
}

  • 类型查询

    1562156106839

运算符

算数运算

  • + - * / % ++ --
  • 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。

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

  1. 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)    // 清除计时器,通过这个数字可以清除

  2. 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'

事件

  1. 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>

  2. 事件里面的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>

  3. 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>

  4. 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);  
	};

  5. 常用事件

    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() 可以拿到标签里面的文本内容
  1. id选择器
    • $("#id值")
  2. 标签选择器
    • $("标签名")
  3. class选择器
    • $(".类名")
  4. 配合使用
    • $("div.c1") 找到有c1 class类的div 标签
  5. 所有元素选择器
    • $("*")
  6. 组合选择器
    • $("#id, .className, tagName")
  7. 层级选择器
    • 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>
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/dxxpython/p/11505296.html