前端知识

前端：
html：
css：
- 样式
- 选择器：
JavaScript：
jQuery
bootstrap
- bootstrap框架示例：
- 全局CSS样式：
组件

前端：

需要了解的原理：
- JS特点：
  - js是一个轻量级的语言，可以插入html页面的编程语言处理逻辑
- JS和html css的区别：
  - html是纯文本文件，使用标签来描述问题，而css是描述标签的样式，让页面更好看，而js是一个轻量级的语言，他可以切入到html页面的编程语言，js也是可以处理逻辑
什么是jquery：
- jquery是一个快速简洁的js框架，封装了js代码的模块，极大的简化了js的编程
- 优势：
  - js代码对浏览器的兼容性做的更好了
  - 隐式循环
  - 链式操作
- 封装了js代码的模块，封装了dom节点，封装了操作dom节点的简便方法
web端的组成：
- html 纯文本文件，使用标签来描述文字的，是一种描述性的标记语言
- css 描述了标签的样式，让页面更好看
- js/jq 动态的效果
http和socket：
- 前端是怎么交互的：http基于tcp-socket协议，后端发送的字符串到前端来，前端浏览器进行渲染，然后将发来的内容展示到网页上
http reques ：http请求
http response ：http响应

html：

超文本标记语言就是纯文本文件，使用标签来描述文字的，是一种描述性的标记语言
- 超文本：图片，音频，视频
- 标记：所有内容都是包裹在标签中
- 切记标签一定要闭合
标记（标签）的分类：
- 双标标记：<body> <body> （双闭合标记）
- 单标标记：<meta> （单闭合标记）

<!doctype html>           #版本，默认html5
<html lang="zh-cn">       #编码
<head>                    #head下的内容不可见
    <meta charset="UTF-8">
    <meta name="viewport" content="python,go">   #百度收录
    <meta http-equiv="refresh" content="2;URL=http://www.baidu.com">  #重定向
    <meta name="Description" content="搜索页面的标签/>
    <title>haha</title>   #显示在网页标签上的名字

</head>
<body>

</body>
</html>
                                      
import socket
sk = socket.socket()
sk.bind(("192.168.13.146",6677))
sk.listen()

while 1:
    try:
        conn,addr = sk.accept()
        ret = conn.recv(1024)
        conn.send(b"HTTP/1.1 200 OK \r\n\r\n")
        with open('demo-01.html', encoding='utf-8') as f:
            conn.send(f.read().encode('utf-8'))

    except Exception as e:
      print(e)

内联标签（行内元素）

注释：
字体标签：b标签加粗，strong标签不换行
斜体：i标签或者em
上下标：sup sub
中划线：del或s del新标签，在字符串中划一条横线
下划线：u
空格：br/ 换行
特性：空白折叠，&nbsp空格，&lt 大于号，&gt 小于号
span：没有任何样式的标签
img 单边标签-内联：
- <img src="资源路径" alt="图裂说明" height="200px">
- src 图片的网络地址，（width宽度 height高度）宽高二选一
  
  src 本地路径存放 img/0.jpg
- alt 在图片加载失败的时候显示内容，用户体验，爬虫

a 超链接标签：

<a href="http://www.baidu.com" target="_blank">进入百度</a>

href
- 属性可以连接网络资源，点击跳转
- href=mailto:邮箱地址连接到本地邮件服务器

锚连接：

#先定义a标签，在通过a标签 文件+之前定义好的A标签内容
#demo-01.html 可以跳转到另一个页面的具体位置
<a name="top">顶部</a>
<a href="#top">回到顶部</a>

target：
- self：默认在当前网页打开
- _blank：在新网页跳转打开
- title：鼠标悬浮显示小标题

块级标签（占满一整行）

标题标签：h1-h6
段落标签：<p> </p> 自动在段落中添加空白文本级标签(内部不能在嵌套别的标签) `
没有样式：<div>海洋</div> 没有任何效果的块标签
分割线：<hr>分割线</hr>

列表：

ul：无序列表：常用

属性type:disc(默认)\square(实心方形)\circle(空心圆)\none(不显示样式)
<!--设置不显示任何样式-->
<ul type="none">
    <li>手机</li>
    <li>电脑</li>
</ul>
<!--设置显示实心方块-->
<ul type="square">
    <li>旧电脑</li>
    <li>旧家具</li>
</ul>
<!--设置显示空心圆-->
<ul type="circle">
    <li>旧电脑</li>
    <li>旧家具</li>
</ul>
<!--默认显示实心圆 disc-->
<ul>
    <li>旧电脑</li>
    <li>旧家具</li>
</ul>

ol ：有序列表

属性type:1(默认)\a(小写字母)\A(大写字母)\I(罗马数字)
属性start:开始位置（了解）
<!--默认显示1,2,3序号,可以指定开始的值-->
<ol>
    <li>长头发</li>
    <li>旧家电</li>
</ol>
<!--设置根据a,b,c显示,可以指定开始的值-->
<ol type="a" start="2">
    <li>长头发</li>
    <li>旧家电</li>
</ol>
<!--设置根据A,B,C显示,可以指定开始的值-->
<ol type="A" start="26">
    <li>长头发</li>
    <li>旧家电</li>
</ol>
<!--设置根据罗马数字,可以指定开始的值-->
<ol type="I">
    <li>长头发</li>
    <li>旧家电</li>
</ol>

dl：定义列表：

<!--带标题的列表-->
<dl>
    <dt>title</dt> <!--dt表示标题--> 
    <dd>alex</dd>  <!--dd表示内容--> 
    <dd>wusir</dd>
    <dd>太白</dd>
    <dt>title</dt>
    <dd>alex</dd>
    <dd>wusir</dd>
    <dd>太白</dd>
</dl>

list-style：去掉列表样式：

在css中去掉列表的样式
ul,li{
   list-style: none;
}

表格：

标准表格:thead tbody的内容

tr表示每一行
表头：th表示thead中的每一个元素
内容：td表示tbody中的每一个元素

如果要将两个单元格合并，那肯定就要删掉一个单元格。
单元格的属性：
colspan：横向合并。例如colspan="2"表示当前单元格在水平方向上要占据两个单元格的位置。
rowspan：纵向合并。例如rowspan="2"表示当前单元格在垂直方向上
border线框 cellpadding内容距离  ellspacing外边框距离

<table border="1" cellpadding="10px" cellspacing="5px">  
        <thead>
            <tr>
                <th>第一列</th>
                <th>第二列</th>
                <th>第三列</th>
            </tr>
        </thead>

        <tbody>

            <tr>
                <td colspan="2">第一个值</td>
                <td>dudu</td>
            </tr>

            <tr>
                <td>第二个值</td>
                <td>wahaha</td>
                <td rowspan="2">ab钙</td>
            </tr>

            <tr>
                <td>第三个值</td>
                <td>wahaha</td>
            </tr>
        </tbody>
    </table>

不写thead只写tbody 就没有表头样式

 <table border="1" cellpadding="10px" cellspacing="5px">
        <tbody>
            <tr>
                <td colspan="2">第一个值</td>

                <td>dudu</td>
            </tr>
            <tr>
                <td>第二个值</td>
                <td>wahaha</td>
                <td rowspan="2">ab钙</td>
            </tr>
            <tr>
                <td>第二个值</td>
                <td>wahaha</td>

            </tr>
        </tbody>
    </table>

from 表单：

input 输入框 ：

form : 表单标签
	action : 提交到的地址,把表单中的数据提交到对应的地址上
			
input :
	type种类:text,password,radio,checkbox,submit

    name:value :把数据提交到后台的,提交的是input标签的name值和value值
	placeholder:输入框的默认提示文字
    checked:  checked属性表示默认选中
    readonly :对于输入框的禁止修改 可以提交
    disabled :对于所有元素不能修改 也不能提交

    <!--注意:如果设置了readonly,只能给输入框的模式设置,那么不能修改,但是可以提交-->
    <!--注意:如果设置了disabled,可以给所有的表单元素设置,那么不能修改,也不能提交-->
		
button :
	input的submit类型和button放在form表单中都表示提交
		
<form action="http://192.168.13.80:8899">
    <input type="text" name='username' placeholder="请输入用户名或密码" >
    <input type="password" name="password"  value="dada" disabled>

    <input type="radio" name="sex" value="1" checked > 男
    <input type="radio" name="sex" value="2" > 女

    <input type="checkbox" name="hobby" value="a" checked> 抽烟
    <input type="checkbox" name="hobby" value="b" checked> 喝酒
    <input type="checkbox" name="hobby" value="c"> 抠脚

    <input type="submit" value="表单按钮">
    <button>提交按钮</button>
    <!--注意 input的submit类型和button放在form表单中都表示提交-->

text-align: right;  样式输入框提示右浮动

其他类型：

reset：重置 hidden：隐藏输入框 button：普通按钮 file：文件选择框 date：日期输入框
注意: 如果是file类型的input标签需要修改表单的enctype类型Multipart/form-data

<form>
	<input type="hidden">
	<input type="reset">  
	<input type="button" value="普通按钮">   #button放在外面就是普通按钮，放在form表示提交
	<input type="file">
	<input type="date">
</form>

lable+input：

lable:
     for属性,点击lable中的内容,让for标示的id对应的元素获得焦点

<label for="user">姓名 : </label>
<input type="text" name='username' id="user" >

textarea 文本框：

#内容较多时使用
<textarea name="" id="" cols="30" rows="10"></textarea>

select 选择框：

select选择框:
	multiple:设置多选框
    size:选择框内显示数量
option选项:
	selected:默认选中

<select name="city" id="a" size="3">
        <option value="1" selected>北京</option>
        <option value="2">上海</option>
        <option value="3">天津</option>
</select>

<select name="" id="" multiple>
        <option value="" selected>抽烟</option>
        <option value="" selected>喝酒</option>
        <option value="" >烫头</option>
</select>
<!--注意:默认是单选-->
<!--注意:使用multiple属性设置为多选:按住鼠标下拉,按住ctrl选,按住shift选-->


import socket
sk = socket.socket()
sk.bind(('192.168.13.80',8899))
sk.listen()
try:
    conn,addr = sk.accept()
    ret = conn.recv(1024)
    print(ret)
    with open('demo-01.html',encoding='utf-8') as f:
        conn.send(f.read().encode('GBK'))

except Exception as e:
    print(e)
finally:
    conn.close()
    sk.close()

css：

层叠样式表，作用就是给HTML页面标签添加各种样式

样式

样式的引入：

<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <!--引入方式二:内接引入-->
	 <!--<style>-->
        <!--div{-->
            <!--color: blue;}-->
    <!--</style>-->

    <!--引入方式三: 外接样式-链接式 :link导入一个连接 重点重点重点*****-->
    <!--<link rel="stylesheet" href="index.css">-->

    <!--引入方式四: 外接样式-导入式 :style导入一个@import url('路径')-->
    <!--<style>-->
        <!--@import url("index.css");-->
    <!--</style>-->
</head>

<body>
<!--引入方式一 :行内引入-->
<!--<div style="color:red">wahaha</div>-->
<body>

几个基础样式

<style>
        div{
            color: red;
            width: 200px;
            height: 200px;
            background-color: yellow;
             /*background-color: yellow;* 注释css样式/ 
        }
 </style>
           
<body>
<div>qqxing</div>
<div>qqxing</div>
</body>

选择器：

基本选择器（中要）

标签：div  类：.sp   id：#div1  通用选择器:*
标签名直接选择标签,#选择id, .表示class,*表示所有标签
<style>
        span{
            color:green}

        div{
            color: #c4db69}

        a{
            color: red;}
</style>

1.样式的继承 : 子元素会继承父元素的样式(但是a标签除外)
2.要想对a标签进行样式设置,必须直接找到a标签的位置,对a单独设置
3.样式之间的重叠部分是有优先级的,继承下来的样式的优先级为0(最低)

#div1{     #内容标签的会进行匹配
   color: cornflowerblue;}

.sp{
     color: orangered;}

*{         #通用选择器:所有的标签都会被选中
   color: yellow;}

#内容id class优先级高
<body>
<div id="div1">
    wahaha1
    <span class="sp">我是一个div1-span</span>
</div>

<span>只有span</span>

<div>
    wahaha2
    <span  class="sp">我是一个div2-span</span>
    <a href="http:www.taobao.com">我是一个div-span</a>
</div>
</body>

高级选择器

后代选择器:div p 表示div标签下的所有的p标签
子代选择器:div>p 表示div下面一层所有的p标签
毗邻选择器:div+p 找div的兄弟标签中的下一个p标签
弟弟选择器:div~p 找div下的所有弟第p标签
属性选择器:div[title] div[title='aaa'] 找到所有含有title属性的div/找到所有title属性='aaa'的div
并集选择器:ul,li 所有,分隔的标签都要找到
交集选择器:div.aa 找所有class='aa'的div标签
伪类选择器:a:active鼠标按下 link连接未访问之前 visited连接访问后
         input:focus 输入框获得焦点
         hover:鼠标悬浮
伪元素选择器:first-letter第一个字的样式 
           before(after)值这个标签的前面(后面)加content,给这个content设置样式

后代\子代：

	后代选择器：找的是子孙
    子代选择器：只找子代

后代选择器:表示div 标签下的所有span标签
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       div span{
           color: tomato;
        }
    </style>
</head>

<body>
    <div>
        我是div标签的content
        <span>西红柿色1</span>
        <p>
            在div-p标签中
           <span>西红柿色2</span>
        </p>
    </div>
    <span>我只是一个单纯的span标签</span>
</body>

子代选择器：div>span  表示div下面一层所有的span标签
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       div>span{
           color: tomato;
        }
    </style>
</head>

<body>
    <div>
        我是div标签的content
        <span>西红柿色1</span>
        <p>
            在div-p标签中
           <span>西红柿色2</span>
        </p>
    </div>
    <span>我只是一个单纯的span标签</span>
</body>

毗邻+\弟弟~

毗邻: span+a  找div兄弟标签中的下一个p标签
    <style>
       span+a{
           color: tomato;}
    </style>
    <div>
        <a>我是a0标签</a>
        <span>span标签</span>
        <a>我是a1标签</a>  <!--变色-->
        <a>我是a2标签</a>
    </div>

弟弟: span~a  找div下的所有弟弟p标签
    <style>
       span~a{
           color: tomato;
        }
    </style>
    <div>
        <a>我是a0标签</a>
        <span>span标签</span>
        <a>我是a1标签</a>   <!--变色-->
        <a>我是a2标签</a>   <!--变色-->
    </div>

并集交集选择器

并集：逗号分隔的标签都要找到
<style>
    ul,ol,span{
       background-color: gainsboro;
    }
</style>

<body>
<ul>
    <li>u-first</li>
</ul>
<ol>
    <li>o-first</li>
</ol>
</body>

交集选择器:只有class中含有box1.box2才可以渲染染色
<style>
    div.box1.box2{
            background-color: red;
            width: 200px;
            height: 200px;
    }
</style>

<body>
    <div class="box1 box2">box1box2</div>
    <div class="box1">box1</div>
    <div>aaa</div>
    <span class="box1">span标签</span>
</body>

属性选择器（属性对应属性）

属性选择器 [属性]/[属性='值']
<style>
       /*a[href]{*/
            /*color: green;*/
        /*}*/
        /*a[href='http://www.taobao.com']{*/
            /*color: lightpink;*/
        /*}*/
        input[type='text']{
            background-color: red;
        }
 </style>

<body>
     <div>
        <a href="http://www.taobao.com">我是a0标签</a>
        <span>span标签</span>
        <a href="http://www.jd.com">我是a1标签</a>
        <a href="http://www.mi.com">我是a2标签</a>
        <a>没有href属性</a>
    </div>
    <input type="text">
    <input type="password">
</body>

伪类选择器：

a : link：没有被访问a标签的样式 visited：访问过后的颜色 active：输入点击摁住的颜色

input: focus   输入框获得焦点，框内背景色
通用: hover     鼠标悬浮时候的颜色

<style>
        a:link{
            color:tomato; 
        }
        a:visited{
            color: gray;
        }
        a:active{
            color: green;
        }
        input:focus{
            background-color: aquamarine;
        }
        div{
            width: 100px;
            height: 100px;
            background-color: lightgray;
        }
        div:hover{
            background-color: red;
        }
</style>

<body>
<a href="http://www.jd.com">京东</a>
<a href="http://www.xiaohuar.com">校花</a>
<input type="text">
<div></div>
</body>

伪元素选择器:

first-letter：设置第一个首字母样式
before ：在内容前添加样式
after  : 在内容后面添加样式*****

<style>
        /*div:first-letter{*/
            /*color: red;}*/

        div:before{
            content: '**';
            color: pink;}

        div:after{
            content: '.....';
            color: lightblue;}
</style>

<body>
<div>春江水暖鸭先知</div>
</body>

css选择器优先级：

行内>id选择器>类选择器>标签选择器>继承
1000  100    10       1       0
所有的值可以累加但是不进位
优先级如果相同,写在后面的生效  

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
        }
        div.a.b{
            background-color: gray;
        }
        div.a{
            background-color: blue !important;  !important提高样式优先级
        }
        #aa{
            background-color: lightpink;
        }
    </style>

<body>
    <div class="a b" id="aa">aaa</div> #id优先级最高，之后是类，最后是标签
    <div>bbb</div>
    <div>ccc</div>
    <div>ddd</div>
</body>

颜色表示：

rgb表示法:
	rgb :red green blue 光谱三原色
	rgb(255,255,255) 白色
	rgb(0,0,0) 黑色

16进制的颜色表示法
	#000000-#FFFFFF
	#000 - #FFF

单词表示法:
	# red green 
rgba表示法:
	#a表示的是透明度 0-1,0是完全透明,1是不透明
https://htmlcolorcodes.com/zh/yanse-ming/

字体:

    <style>
        p{
            font-family: '楷体';
            font-weight: bold;          变粗
            font-size: 30px;       		字体大小
            text-align: right;          右对齐
            
            /*text-decoration: overline;*/    上标线
            /*text-decoration: underline;*/   下标线
            
            text-indent: 2em;       	    em单位是一个相对单位,相对当前字体大小的像素是1em
            text-shadow: 5px 5px 5px red;}  阴影字体颜色

        div{
            height: 200px;
            line-height: 200px;
            font-size: 20px;
            background-color: orange;}      设置背景颜色
        a{
            text-decoration: none;}
    </style>

<body>

    <p>我是一个p标签</p>
    <div>我是一个p标签</div>
    <a href="">娃哈哈</a>

</body>

文本:

text-align 文字的水平对齐
	left 左对齐
    center 居中
    reght 右对齐
text-decoration 文本装饰
    none;         没有下划线
    line-through; 中划线
    overline;     上划线
    underline;    下划线

text-indent 文本缩进
	text-indent: 2em; em单位是一个相对单位,相对当前字体大小的像素是1em

line-height	行高,设置行高=容器高度,文字自动垂直居中
	line-height: 200px;

文字溢出
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style type="text/css">
        .div0 {
            width: 300px;
            border: 1px solid darkblue;
        }
        .div1 {
            width: 300px;
            border: 1px solid red;

            /*强制在一行内显示*/
            white-space: nowrap;
            /*超出部分隐藏*/
            overflow: hidden;
        }
        .div2 {
            width: 300px;
            border: 1px solid black;

            /*强制在一行内显示*/
            white-space: nowrap;
            /*超出部分隐藏*/
            overflow: hidden;
            /*修剪超出的文本*/
            text-overflow: clip;
        }
        .div3 {
            width: 300px;
            border: 1px solid chocolate;

            /*强制在一行内显示*/
            white-space: nowrap;
            /*超出部分隐藏*/
            overflow: hidden;
            /*显示省略符号来代表被修剪的文本*/
            text-overflow: ellipsis;
        }
    </style>

<body>
<div class="div0">各国领导人感谢中方作为东道主对各国参展给予的大力支持</div><br>
<div class="div1">各国领导人感谢中方作为东道主对各国参展给予的大力支持</div><br>
<div class="div2">各国领导人感谢中方作为东道主对各国参展给予的大力支持</div><br>
<div class="div3">各国领导人感谢中方作为东道主对各国参展给予的大力支持</div><br>
</body>

背景图片:

background-color: red;   在没有背景图片覆盖的范围显示背景颜色
background-image: url('timg.jpg'); 设置背景图片

height: 400px;
width: 400px; 

background-repeat: no-repeat; 设置图片不重复   repeat-x水平重复   repeat-y垂直重复
background-position: right top; 图片的位置    左中右x 上中下y
/*left center right /top center bottom*/

background-attachment: fixed; 在窗口中固定图片的位置，滚动位置不变
background:red url("timg.jpg") no-repeat left center;  把所有的设置综合写在background中


    <style>
    div{
        /*background-color: red;*/
        /*background-image: url('222.jpg');*/
        height: 400px;
        width: 400px;
        background:red url("222.jpg") no-repeat left center;
        /*background-attachment: fixed*/}   固定图片位置
    </style>

<body>
    <div>
        <p>大长腿</p>
    </div>
</body>

边框的设置:

            width: 100px;
            height: 100px;

            border-color: tomato green gray yellow;
            border-width: 1px 3px 5px 7px;
            border-style: solid dotted dashed double;
            /*一个值:上下左右
            四个值:遵循顺时针上右下左
            三个值:上 右左 下
            两个值:遵循上下 左右

            border-top-style:dotted;  单独设置顶线的样式(top,left,bottom,right)
            border-left-style:solid;  单独设置左边线的样式
            border-top-color:red;     单独设置顶线颜色

            border:yellow solid  10px;    统一设置边框的颜色 样式 宽度  ***

示例：
    <style>
        div{
            width: 100px;
            height: 100px;
            border: solid 2px red;

            border-color: tomato green gray yellow;
            border-width: 1px 3px 5px 7px;
            border-style: solid dotted dashed double;

            /*border:yellow solid  10px;*/}
        div.brother{
            display: none;}
    </style>

<body>
    <div class="brother"></div>
    <div>海洋</div>
    <a href="">手机</a>
    <a href="">小米商城</a>
</body>

块和行内的概念\转换:

行内元素：
- 与其他行内元素并排；
- 不能设置宽、高。默认的宽度，就是文字的宽度
块级元素：
- 霸占一行，不能与其他任何元素并列；
- 能接受宽、高。如果不设置宽度，那么宽度将默认变为父亲的100%

示例：

display的属性值 : block块  inline行内 inline-block行内快 none

display: block;         独占一行，元素合并在一行内，并且可以设置宽高
display: inline-block;  既可以设置宽高又不会独占一行 行内\块转行内快     ******常用

display: inline;        表示一个行内元素,不能设置宽高
display: none;          不仅不显示内容,连位置也不占了

   <style>
        a{
            /*display: block;*/        #将连个a标签放在一个行内
            display:inline-block;
            color:blue;                #字体颜色    
            height: 30px;              #字体大小
            background-color: red;     #颜色
            text-decoration: none;     #没有下划线
            line-height: 30px;         #背景颜色
            text-align: center;        #文字居中水平对齐
        }
    </style>

<body>
   <div class="brother"></div>
    <div></div>
    <a href="">手机</a>
    <a href="">小米商城</a>
</body>

盒模型:

在网页中显示方方正正的盒子称为盒模型

盒模型有两种：标准模型和IE模型。我们在这里重点讲标准模型。

border  : 边框的宽度
padding : 内边距的距离
content : width height
背景包含的部分:padding + conntent
计算一个盒子的总大小: 宽width+2padding+2border 高height+2padding+border

外边距 margin
    上下的盒子如果设置bottom和top会导致塌陷,取两个设置的最大值作为外边距
margin: 0 auto;表示左右居中(父盒子宽度,子盒子宽度)

分方向的设置
border-top border-right  border-bottom border-left
padding-top padding-right  padding-bottom padding-left
margin-top margin-right  margin-bottom margin-left

给图形设置圆角
border-radius: 5px;

盒子模型：
    <style>
        body{
            margin: 0;
        }
        div{
            width: 200px;   /*content内容部分的宽*/  #设置块大小和颜色
            height: 200px;
            background-color: yellow;   #设置块背景颜色

            border:blue solid 10px;     #外边距大小
            padding: 30px;				#外边距到内容边距大小
            /*padding: 内边距*/
        }
        div.box2{
            margin-top: 20px;
            margin-left: 20px;
            margin-bottom: 20px;   #设置上下左右大小
        }
        .box3{
            margin-top:40px        #设置上下两个模块的距离
        }
    </style>

<body>
    <div class="box2">盒子的大小 宽+padding*2+边*2  高+padding*2+边*2</div>
    <div class="box3">盒子2</div>
</body>

盒子居中：

    <style>
        div.father{
            width: 800px;
            height: 40px;
            background-color: darkgray;
        }
        div.son{
            width: 500px;
            height: 35px;
            padding: 5px 0 0 10px;
            background-color: blue;
            /*margin-left: auto;*/
            /*margin-right: auto;*/
            margin: 0 auto;
        }
    </style>

body>
<div class="father">
    <div class="son">
        你好
    </div>
</div>
</body>

三角形：

    <style>
        div{
            width: 0;
            height: 0;
            border-color: red transparent transparent transparent;
            border-width: 50px;
            border-style: solid;
        }
    </style>
    
<body>
<div></div>
</body>

图片变圆：

#img直接行内引用调用style块
<body>
    <div class="box2" >
        <img style="border-radius: 100px" src="222.jpg" alt="">
    </div>
</body>

浮动:

float：表示浮动的意思。它有四个值。
- - - none: 表示不浮动，默认
    - left: 表示左浮动
    - right：表示右浮动

示例：

浮动的元素会脱离标准文档流,原本块级元素就不再独占整行了
并且在原页面中也不占位置了,之后的元素会挤到页面上影响页面的排版
清除浮动 clear:both
伪元素清除法:
        .clearfix:after{
            content: '';
            clear: both;
            display: block;
        }
<body>
<div class="father clearfix">
<div class="box"></div>
<div class="box"></div>
</div>
<div class="main">
    主页的内容
</div>
</body>

示例：
      <style>
        div.main{
            height: 100px;
            background-color: darkgray;}

        div.box{
            width: 100px;
            height: 100px;
            border: solid red;
            background-color: yellow;
            float: right;     		   #当设置了浮动，子类会覆盖父类部分
        }

        div.father{
            background-color: blue;    #父类宽高都没有设置，大小随着子类大小走
            /*overflow: hidden;*/	   #当父类清除浮动则并排显示，
        }

        /*.clear{*/
            /*clear: both;*/
        /*}*/
        /*.clearfix:after{*/
            /*content: '';*/
            /*clear: both;*/
            /*display: block;*/
        /*}*/
    </style>

<body>
<div class="father clearfix">
    <div class="box"></div>     
    <div class="box"></div>
</div>

<div class="main">
    主页的内容

</div>
</body>

overflow:

内容多余标签的大小

示例：

visible 可见(默认)
hidden 超出部分隐藏
scroll 超出显示滚动条

    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: chartreuse;
            overflow: visible;
        }
    </style>

<body>
    <div>
        <p>两只老虎，两只老虎跑得快</p>
        <p>两只老虎，两只老虎跑得快</p>
        <p>两只老虎，两只老虎跑得快</p>
        <p>两只老虎，两只老虎跑得快</p>
        <p>两只老虎，两只老虎跑得快</p>
    </div>
</body>

定位:

定位有三种：相对定位、绝对定位、固定定位

position : 相对：relative 绝对：absolute 固定：fixed
top:10px;
right:10px;
bottom:10px;
left:10px;

相对定位 :相对自己原来的位置移动,移动之后还占据原来的位置

绝对定位 :固定在页面不会随着页面而走动，不会占据原来的位置,层级的提升
		 作用：页面布局常见的“父相子绝”，一定要会！！！！

		（绝对定位是相对于整个html页面,不会占据原来的位置,层级的提升
		 如果我们设置了绝对定位的元素 的父元素 没有设置position,那么我们对元素的所有设置都是基于整			 个页面
		如果设置了position,那么子盒子的absolute位置会根据父盒子的位置定位
		父相子绝:子元素设置的绝对位置会对应着祖级元素的相对位置）
		
固定定位 :固定是相对于整个窗口的，随着窗口移动
	     作用： 1.返回顶部栏 2.固定导航栏 3.小广告


         <style>
        div.father{
            width: 400px;
            height: 2000px;
            background-color: lightgray;
            position: absolute;          #设置底板固定
        }
        div{
            width: 100px;				 #设置div块图片的大小
            height: 100px;
        }
        .d1{
            background-color: red;}
        .d2{
            background-color: yellow;
            position: absolute;  #将d2往左绝对定位100px，绿色块直接飘上来，而相对还会站原来位置
            left:100px;}
        .d3{
            background-color: green;}
        img{
            position: fixed;	 #将绝对图片设置成固定定位，这个图片会随着页面走动，提升层级
            right: 20px;
            bottom:100px;
        }
        .d4{
            opacity: 1;
        }
    </style>


<body>
    <div class="father">
        <div class="d1"></div>
        <div class="d2"></div>
        <div class="d3"></div>
    </div>

    <div class="d4">
            你好你好娃哈哈
        <img src="222.jpg" alt="">
    </div>
</body>

z-index 优先级:

指的就是各个盒子重叠在一起谁上谁下的问题。

四大特性，只要你记住了，页面布局就不会出现找不到盒子的情况。

z-index 值表示谁压着谁，数值大的压盖住数值小的，
只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
从父现象：父亲怂了，儿子再牛逼也没用

示例：

    <style>
        .father{
            position: absolute;
            top: 0;
            left: 0;
            width: 100px;
            height: 600px;
            background-color: gray;
            z-index: 10;
        }
        .son{
            position: absolute;
            top: 0;
            left: 0;
            width: 50px;
            height: 50px;
            background-color: red;
            z-index: 100;
        }
    </style>
    
<body>
    <div class="father"></div>
    <div class="son"></div>
</body>

opacity 透明度：

透明度示例

    <style>
        img {
            opacity: 0.5;   #调整d4对应的整个标签的透明度是50%
		}   
    </style>

<body>
    <div class="d4">
        大长腿 <br/>
        <img src="111.jpg" alt="">
    </div>
</body>

JavaScript：

javascript介绍:
- 可以处理逻辑
- 可以和浏览器交互，不够严谨
javascript包含:
- ECM Ascript js的一种标准化规范标出了一些基础的js语法
- DOM document object model 文本对象模型主要操作文档中的标签
- BOM browser object model 浏览器对象模型主要用来操作浏览器

js引入和script标签

方式一:在html页写js代码
<body>
    <script>
        alert("hello,world")
    </script>
</body>

方式二: 引入js文件（项目中常用）
     <script src="first.js"></script>

结束符和注释

结束符
; 是js代码中的结束符

单行注释
// alert('hello,world');
多行注释
/*多行注释*/

变量

创建变量名

变量名 : 数字\字母\下划线\$
创建变量的关键字var :var a = 1;
创建变量的时候可以不指定数据类型
创建变量但不赋值 :var a;   a创建出来就是一个undefined未定义

输入输出：

示例：

弹出框alert
	alert('hello') 弹出框中的内容是"hello"
弹出输入框
	var inp = prompt('问句') 弹出输入框,输入的内容会被返回给inp
控制台输出
    console.log(变量或值)

基础的数据类型

查看类型

两种方式：
    typeof 变量;
    typeof(变量);

boolean 布尔值：

true  : [] {} 
false : undefined null NaN 0 ''

null 空和undefined未定义：

null 表示空  boolean值为false
undefined 没有定义 创建变量但是不赋值 boolean值为false

number-数字:

数字：

整数 var a = 1
小数 var b = 1.237
保留两位小数 b.toFixed(2)  //1.24

str-字符串:

字符串：

var s1 = '单引号'
var s2 = '双引号都是字符串的表达方式'

字符串常用方法：

属性 : .length

方法:
trim()  #去空白;
	ww = ee.trim()

concat  #拼接： 
	var str1 = "胡";
	var str2 = "海洋";
	console.log(str1.concat(str2));  结果：胡海洋

charAt(索引)  #给索引求字符
	var str1 = "胡海洋";
	console.log(str1.charAt(0));

indexOf(字符) #给字符求索引
	var str1 = "胡海洋";
	console.log(str1.indexOf("洋"));

slice(start,end) #切片，顾头不顾尾,
	var str1 = "胡海洋";
	console.log(str1.slice(0,2));

.toLowerCase()   #全部变小写	
.toUpperCase()   #全部变大写
	console.log(str.toLowerCase());
	console.log(str.toUpperCase());

.split(',',2)    #根据(第一个参数)分隔符切割,切前多少个结果，切割完变成列表
	var  str =  '哈哈哈|哒哒哒|嘟嘟嘟';
	console.log(str.split('|'));

内置对象类型

数组 Array

数组就是python中的列表：

创建:
var arr = ['a','b','c'];
var arr2 = new Array();  #创建一个空的列表

索引操作:
arr[0] 查看

Array常用的属性和方法

属性:length
	
方法:
var li = ["胡"]
	
index	  #根据索引进行赋值
	li[1]="海"    
	
.push()	  #尾部追加元素
	li.push("洋");
	
.pop()	  #删除最后一个元素，并获取
	li.pop(2)  
	
.unshift()	#头部插入元素
.shift()	#头部移除元素
    li.unshift("宝宝")
	li.shift("宝宝")
	
.slice(start, end)	#切片
    li.slice(0,1)
    
.reverse()    #在原数组上进行反转，有问题可以在翻转回来
	li.reverse();
	
.join(seq)    #a1.join('|')， 将数组元素连接成字符串
	console.log(li.join("|"));
		
.concat(val, ...)			   #多个数组合并,得到一个新数组，原数组不变
    var li = ["胡", "海", "洋"]
    var l2 = ["徐","俊","丽"]
	var l3 = li.concat(l2);
					
.sort()   	#排序
	function sortNumber(a,b){
    return a - b}

    var arr1 = [11, 100, 22, 55, 33, 44]
    arr1.sort(sortNumber)

.splice() 
	li.splice(0,2);
#参数：1.从哪删(索引), 2.删几个 3.删除位置替换的新元素(可多个元素)	删除元素，并向数组添加新元素。

自定义类型

示例
```
var obj = {"name":"海洋"}
```

JSON：

示例：

#字典key 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);

数据类型之间的转换

转换示例

string --> int   #字符串转数字
	parseInt('123') //123
	parseInt('123abc') //123
	parseInt('abc') //NaN  not a number

string --> float        
	parseFloat('1.233') 

float/int --> String
	var num = 123
	String(123)               #小数转字符串 推荐
	var str = num.toString()  #数字转

    任意类型 --> Boolean
	Boolean(数据)

#字符串和数字相加 --> 字符串
#字符串和数字相减 --> 数字

运算符

赋值运算符
```
= += -= *= /= %=
```

比较运算符

> < >= <= 
== !=  不比较类型 （常用）
===  !== 比较类型和值(常用)

算数运算符

+ - * / % ** 

++ --
var a = 1
undefined
var b = a++    // a=2  b=1
var c = ++a    // a=3  c=3

逻辑运算符

&& 逻辑与  ||逻辑或  !逻辑非
true && true    //true
true || false   //true
!true           //false

流程控制

特点

所有的代码块都是用{}标识的
所有的条件都是用()标识的

if 判断语句：

#if 单分支
var ji  = 20;
if(ji >= 20){
    console.log('恭喜你，吃鸡成功，大吉大利')
}

#if else
var ji  = 20;
if (ji > 2){console.log("大于")}
else{console.log("小于")};

#多层if判断
if (true) {
   //执行操作
}else if(true){
    //满足条件执行            
}else if(true){
   //满足条件执行        
}else{
  //满足条件执行
}

case语句

# 和if语句也可以实现，case多了一个默认输入（了解就行）
	var err_type = 'info'
    switch(err_type) {
        case 'warining':
            console.log('警告');
            break;
        case 'error':
            console.log('错误');
            break;
        default:
            console.log('没错')
    }

while-循环

var i = 1; 		    #初始化循环变量
while(i<=9){        #判断循环条件
    console.log(i);
    i = i+1; 	    #更新循环条件
}

for-循环

# 方式一:
for(var i = 1;i<=10;i++){
        console.log(i)
}

# 方式二:  for 相当于python中的range(len(arr))
var arr = [1,2,3,4,5]
for (i in arr){
        console.log([i])
}

三元运算符

# var 结果 = boolean表达式 ? 为true返回的值:为false返回的值
var a = 1
var b =2
var c = a>b ? a:b  //如果a>b成立返回a，否则返回b
console.log(c)

函数:

函数结构：

function 函数名(参数){
    函数体
    return 返回值
}
函数名(参数)
#注意 : 传递的参数可以和定义的个数不一样,但是不要这么写
#      返回值只能有一个

伪数组

#arguments伪数组

function add(){
    console.log(arguments);
}
add(1,2,3,4)

function add(a,b){
    console.log(arguments);
}
add(1,2,3,4)

匿名函数

var add = function(){
    console.log('hello,world');
} 
add()  #调用

自调用函数

(function(a,b){
    console.log(a,b)
})(1,2)

正则：

示例：

创建一个正则:
var reg = RegExp('正则表达式')  //注意,写在字符串中所有带\的元字符都会被转义,应该写作\\
var reg2 = /正则表达式/  //内部的元字符就不会转义了
reg.test('待检测的字符串') //如果字符串中含有符合表达式规则的内容就返回true,否则返回false

在字符串中应用正则
var exp = 'alex3714'
exp.match(/\d/)    //只匹配从左到右的第一个
exp.match(/\d/g)   //匹配所有符合规则的 返回一个数组
var exp2 = 'Alex is a big sb'
exp2.match(/a/) //只匹配小写a
exp2.match(/a/i) //i表示不区分大小写 A也会被匹配出来
exp2.match(/a/ig) //不区分大小写并匹配所有

exp.search(/正则表达式/i) //不区分大小写,从exp字符串中找出符合条件的子串的第一个索引位置
exp.split(/正则表达式/i,n) //不区分大小写,根据正则切割,返回前n个结果
exp.replace(/正则/gi,'新的值') //i表示不区分大小写,g表示替换所有,将符合正则条件的内容替换成新的值

小问题1
var reg2 = /\d/g     //正则表示要匹配多个值
reg2.test('a1b2c3')  //多次test会的到true true true false 继续test会循环之前的结果

小问题2
var reg3 = /\w{5,10}/
reg3.test() //如果什么都不写,那么默认test中传递undefined参数,刚好可以符合9位字符串的规则

Date对象

创建时间对象：

#创建对象:
var dt = new Date()  //获取到当前时间

#时间转换
dt.toLocalString() //转换成'2019/8/13 10:18:12'
dt.getFullYear()   //年
dt.getMonth()      //月 1月是0
dt.getday()        //周中天 周日是0
dt.getDate()       //月中天 1号是1
dt.getHours()      //时 从0开始
dt.getMinutes()    //分 从0开始
dt.getSeconds()    //秒 从0开始

自定义时间:
var dt2 = new Date('2018/1/1 12:12:12')   1月1日
var dt2 = new Date(2018,1,1);             2月1日

Math对象：

Math.abs(x)      返回数的绝对值。
pow(x,y)    返回 x 的 y 次幂。
round(x)    把数四舍五入为最接近的整数。
sqrt(x)     返回数的平方根。
exp(x)      返回 e 的指数。
log(x)      返回数的自然对数（底为e）。
sin(x)      返回数的正弦。
tan(x)      返回角的正切。

面向对象(了解):

面向对象：

function Student(name,age){
    this.stu_name = name
    this.stu_age  = age
}
Student.prototype.show = function(){
    console.log(this.stu_name,this.stu_age)
}

var stu = Student('alex',84) // 实例化
stu.stu_name  // 查看属性
stu.stu_age
stu.show()    // 调用方法

object.prototype.show = function(){
    console.log(this.stu_name,this.stu_age)
}

DOM

什么是dom：

document object modle 文档对象模型
整个文档就是一颗树
树当中的每一个节点都是一个对象 : 这个对象中维系着 属性信息 文本信息 关系信息
					
在页面上还有一些动作效果:
	根据人的行为改变的 点击 鼠标悬浮
	自动在改变的

js是怎么给前端的web加上动作的：

1.找到对应的标签
2.给标签绑定对应的事件
3.操作对应的标签

查找标签

直接查找：（元素就是样式）

var a = document.getElementById('baidu')           //直接返回一个元素对象
console.log(a)
			
var sons = document.getElementsByClassName('son')  //返回元素组成的数组
console.log(sons)
sons[0] //获取到一个标签对象
			
var divs = document.getElementsByTagName('div')    //返回元素组成的数组
console.log(divs)
			
#示例：
<body>
    <div id = 'foo'>
        <div id = 'son1' class="son">
            <img src="" alt="">
        </div>

        <div id = 'son2' class="son">
            <a href="" id="baidu"></a>
        </div>
    </div>
</body>

<script>
    var a = document.getElementById('baidu')     #返回id一个元素
    console.log(a)
    var foo = document.getElementById('foo')     #返回foo下的所有元素
    console.log(foo)

    var sons = document.getElementsBClassName('son')  #通过类名将元素转成列表返回
    console.log(sons)

    sons[0]    #获取到一个标签对象
    var divs = document.getElementsByTagName('div')  
    console.log(divs)
</script>

间接查找：

#找父亲
var a = document.getElementById('baidu')          
console.log(a)
var foodiv = a.parentNode          //获取到父节点的对象
console.log(foodiv)

#找儿子
var foo= document.getElementById('foo')
foo.children            #获取所有的子节点,返回一个数组
foo.firstElementChild   #获取第一个子节点     
foo.lastElementChild    #获取最后一个子节点
console.log(a)

#找兄弟
var son1 = document.getElementById('son1')
console.log(son1)
var son2 = document.getElementById('son2')
console.log(son2)
var a = son1.nextElementSibling     #找下一个兄弟 返回一个对象
son1.previousElementSibling         #找上一个兄弟 返回一个对象，如果没有兄弟返回null
console.log(a)

操作本身的标签

标签的创建

var obj = document.createElement('标签名')   // a div ul li span
obj就是一个新创建出来的标签对象

标签的添加

父节点.appendChild(要添加的节点) //添加在父节点的儿子们之后
父节点.insertBefore(要添加的节点,参考儿子节点) //添加在父节点的某个儿子之前

#添加节点，前要先创建好一个标签
<script>
    var obj = document.createElement('span')
    var obj1 = document.createElement('a')
    console.log(obj)
    obj.appendChild(obj1)      #添加节点，前要先创建好一个标签
    console.log(obj)
</script>

#insertBefore
<script>
    var obj = document.createElement('span')
    var obj1 = document.createElement('a')
    var obj2 = document.createElement('span')

    obj.appendChild(obj1)
    obj.insertBefore(obj2,obj1)    #在节点中，插入一个节点
    console.log(obj)
</script>

标签的删除

父节点.removeChild(要删除的子节点         # obj.removeChild(obj2)
子节点1.parentNode.removeChile(子节点2)

标签的替换

父节点.replaceChild(新标签,旧儿子)

<script>
    var obj = document.createElement('span')
    var obj1 = document.createElement('a')
    var obj2 = document.createElement('span')
    var obj3 = document.createElement('a')

    obj.appendChild(obj1)
    obj.insertBefore(obj2,obj1)
    console.log(obj)

    obj.replaceChild(obj3,obj2)
    console.log(obj)
</script>

标签的复制

节点.cloneNode()     //只克隆一层
节点.cloneNode(true) //克隆自己和所有的子子孙孙
注意 :如果克隆出来的标签的id是重复的,那么修改之后才能应用到页面上

节点的属性

操作方法：

节点对象.getAttribute('属性名')           #获取节点属性
节点对象.setAttribute('属性名','属性值')   #设置节点属性
节点对象.removeAttribute('属性名')        #删除节点属性

    <style>
        .odiv{
            width: 100px;
            height: 100px;
            background-color: red;}
    </style>

<body>
    <div id="outer"></div>
    <button id="b1">显示</button>
    <button id ="b2">隐藏</button>
</body> 

<script>
    var b1 = document.getElementById('b1')       #通过document找到b1节点
    b1.onclick = function () {				     #b1.onclick 当点击触发函数
        var div_obj = document.getElementById('outer')  #获取id-outer属性
        div_obj.setAttribute('class','odiv')            #将其设置为红色
    }

    var b2 = document.getElementById('b2')
    b2.onclick = function () {
        var div_obj = document.getElementById('outer')
        div_obj.removeAttribute('class')         #删除红色后，按钮向上浮动
    }
</script>

节点的文本：

操作方法：

节点对象.innerText = '只能写文字'
节点对象.innerHTML = '可以放标签'

#示例：
<body>
    <div id = 'box'>haiyang
        <div>xujunli</div>
    </div>
</body>

<script>
    var box = document.getElementById('box')  #获取节点
    console.log(box.innerText)                #innerText 获取内容
    console.log(box.innerText="dada")         #修改节点中的值
    console.log(box.innerHTML)                #innerHTML 标签下的内容和包括文本
</script>

获取节点值：

操作方法：

#输入框
<textarea name="" id="content" cols="30" rows="10">
</textarea>

#获取value
var content = document.getElementById('content');
content.value
content["value"]

节点的类-Class

操作方法：

    <style>
        .odiv1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .odiv2{
            background-color: yellow;
        }
    </style>

<body>
<div id='box' class = 'odiv1'></div>
</body>

<script>
    var box = document.getElementById('box')

     box.onclick = function () {
         if(this.classList.contains('odiv2')){
               this.classList.remove('odiv2')
         }else{
            this.classList.add('odiv2')
         }
    }
</script>

BOM

browser object model 浏览器对象模型

事件

onclick：鼠标单击
ondbclick：鼠标双击
onscroll：滚动轴移动
onunload：关闭网页时
onsubmit：表单提交事件
onreset：重置表单时
onmouseover：鼠标悬停，就是鼠标停留在图片上
onmouseout：鼠标移出，鼠标离开图片所在区域

绑定方式

<button id="btn">点击一下</button>

方式一:
    var btn = document.getElementById('btn')
    btn.onclick = function () {               #onclick 鼠标点击触发
        alert('点我干嘛')
    }

方式二:
	btn.onclick = clik
    function clik() {
        alert('不要点')
    }

方式三:（了解）
	<button id="btn" onclick="clik()">点击一下</button>
	function clik() {
        alert('不要点')
    }

常见对象：

示例：

alert();    #不同浏览器中的外观是不一样的
confirm();  #兼容不好
prompt();   #不推荐使用

#打开窗口：
window.open(url,target)
	<button onclick="window.open('https://www.baidu.com/')">百度首页</button>
    //url：要打开的地址。
    //target：新窗口的位置。可以是：_blank 、_self、 _parent 父框架。

#关闭窗口：
	window.close()  只能关闭用js的window.open()打开的页面
    
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth  - 浏览器窗口的内部宽度

定时器

setInterval

每隔一段时间就完成某个操作
var ret = setInterval(fn,n)  每隔n毫秒就调用一次fn函数
var ret = setInterval("fn()",n) 

clearInterval(ret)   清除定时器

#示例：
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
        }
    </style>

    var ret = setInterval(fn,500)
    function fn(){
        var box = document.getElementById('box')
        box.classList.toggle('box')
    }

setTimeOut

在设定时间之后执行一次来完成某个操作
var tid = setTimeout(fn,n)       n毫秒之后只调用一次fn函数
var tid = setTimeout("fn()",n) 
clearTimeout(tid)   清除定时器

#示例：
    var tid = window.setTimeout("fn()",2000)
    function fn() {
        alert('wahaha')
    }

location对象

window的子对象  window.location

属性:
window.location.href 			 #查看当前网页的url

window.location.href = 'http://www.baidu.com'   #修改当前网页的url,修改之后会跳转

方法:
window.location.reload();        #刷新页面

navigator

#获取客户端的信息：
console.log(navigator.userAgent);    #获取浏览器信息
console.log(navigator.platform);     #获取系统版本

练习：

设置字体颜色

<div>
    <span id = 'content'>热烈庆祝23期学生全体就业</span>
</div>

<script>
    setInterval(f,200)
    function f() {
        var content = document.getElementById('content');
        var color = parseInt(Math.ceil(Math.random()*16777215),16)
        content.style.color = '#'+color
    }
</script>

广告页关闭

    <style>
        body{
            margin: 0;
        }
        .ad{
            background-color: green;
            position: fixed;
            padding: 5px;
            width: 100%;
            height: 50px;
            color: yellow;
            text-align: center;
            line-height: 50px;
        }
        button{
            float: right;
        }
    </style>

<body>
    <div class="ad">
        python23期皇家赌场开业了,性感荷官在线发牌
        <button id="close">x</button>
    </div>

    <div class='content'>
        我是正文内容
        <img src="111.jpg" alt="">
        <img src="222.jpg" alt="">
    </div>
</body>


<script>
    var btn = document.getElementById('close')  #获取close节点
    btn.onclick = function () {
        this.parentNode.style.display = 'none'  #获取父的节点，将父节点样式清空
    }
</script>

红绿灯：

    <style>
        .outer{
            border: solid 5px darkgray;
            border-radius: 10px;
            float: left;
        }
        .light{
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background-color: lightgray;
            float: left;
        }
        .red{
            background-color: red;
        }
        .yellow{
            background-color: yellow;
        }
        .green{
            background-color: green;
        }
    </style>

<body>
<div class="outer">
    <div class="light red"></div>
    <div class="light"></div>
    <div class="light"></div>
</div>

<script>
    setInterval(change,1000)    #一秒调用一次函数
    function change(){
        var outer = document.getElementsByClassName('outer')[0]   #获取outer节点

        if(outer.children[0].classList.contains('red')){          #判断是否是红色
            outer.children[0].classList.remove('red')             #是的话删除变成黄色
            outer.children[1].classList.add('yellow')

        }else if(outer.children[1].classList.contains('yellow')){  #判断是不是黄色
            outer.children[1].classList.remove('yellow')           #是的话删除，添加绿色
            outer.children[2].classList.add('green')

        }else{
            outer.children[2].classList.remove('green')
            outer.children[0].classList.add('red')
        }
    }
</script>
</body>

浏览器滚动栏判断-onscroll事件

window.onscoll 在页面的滚动条滚动的时候触发的事件
document.documentElement.scrollTop 针对获取浏览器的垂直滚动条的位置

#示例：
    <style>
        div{
            height: 2000px;
        }
        a{
            display: none;
            position: fixed;
            bottom: 20px;
            right:20px;
        }
    </style>

<body>
    <div></div>
    <a href="#" id="back">回到顶部</a>
</body>

<script>
    //针对获取浏览器的垂直滚动条的位置
    window.onscroll = function () {              #滚动时触发
        var a = document.getElementById('back')  #获取a标签节点
        console.log(document.documentElement.scrollTop)
        if(document.documentElement.scrollTop>500){   #判断当前滚动条位置是否发于500
            a.style.display = 'block'            #大于则添加样式
        }else{
            a.style.display = 'none'             #小于则去掉样式
        }
    }
</script>

select选择框联动-onchange事件

select对象.options.selectedindex 被选中的选项在options中的索引位置

#示例：
<body>
    <select name="province" id="province">
        <option selected>请选择省份</option>
    </select>

    <select name="city" id="city">
        <option selected>请选择城市</option>
    </select>
</body>

<script>
    data = {"河北": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]}
    var pro = document.getElementById('province')  #获取省份节点

    for(k in data){
        var opt = document.createElement('option') #创建option标签
        opt.innerText = k						   #给每个标签循环添加内容
        pro.appendChild(opt)					   #往省份节点中添加配置好的标签
    }

    pro.onchange = function () {
        var city = document.getElementById('city') #获取城市节点
        city.innerText = null                      #将之前内容全部清空
        
        var ind = this.options.selectedIndex       #将每次选择的值赋予给ind
        var key = this.children[ind].innerText     #通过省份获取到城市内容
        console.log(key)
        
        for(var i in data[key]){				   #循环选择省份的城市内容
            console.log(i,typeof i)
            var val = data[key][i]				   #将每个值赋值给val
            var opt = document.createElement('option')   #创建城市标签
            opt.innerText = val							 #将每个城市内容添加到城市标签
            city.appendChild(opt)                        #将标签添加到城市标签下
        }
    }
</script>

模态框：

        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            html,body{
                height: 100%;
            }
            #box{
                width: 100%;
                height: 100%;
                background: rgba(0,0,0,.3);
            }
            #content{
                position: relative;
                top: 150px;
                width: 400px;
                height: 200px;
                line-height: 200px;
                text-align: center;
                color: red;
                background-color: #fff;
                margin: auto;
            }
            #span1{
                position: absolute;
                background-color: red;
                top: 0;
                right: 0;
                width: 30px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                color: #fff;

            }
        </style>

    <body>
        <button id="btn">弹出</button>
    </body>

	<script type="text/javascript">
        var oBtn = document.getElementById('btn');  #获取dom元素 1.获取事件源
        var oDiv = document.createElement('div');   #创建弹出模态框的相关DOM对象
        var oP = document.createElement('p');
        var oSpan = document.createElement('span');

        #设置属性
        oDiv.id = 'box';
        oP.id = 'content'
        oP.innerHTML = '模态框成功弹出'
        oSpan.innerHTML = 'X';
        oSpan.id = 'span1'

        #追加元素
        oDiv.appendChild(oP);
        oP.appendChild(oSpan);

        oBtn.onclick = function(){                   # 点击弹出按钮 弹出模态框
            this.parentNode.insertBefore(oDiv,oBtn)  # 动态的添加到body中一个div
        }

        oSpan.onclick = function(){            # 点击X 关闭模态框
            oDiv.parentNode.removeChild(oDiv)  # 移除oDiv元素
        }
    </script>

jQuery

jquery概念
jquery是一个快速简洁的js框架，极大的简化了js的编程

jquery的优势

1.js代码对浏览器的兼容性做的更好了
2.隐式循环
3.链式操作

jquery是什么?

高度封装了js代码的模块
	封装了dom节点
	封装了操作dom节点的简便方法

jquery的导入

https://code.jquery.com/jquery-3.4.1.js 未压缩版
https://code.jquery.com/jquery-3.4.1.min.js 压缩版

下载:保存在本地文件里
引入:<script src="jquery3.4.1.min.js"></script>

$和jQuery的关系

$就是jQuery名字的简写,实际上是一回事儿

for循环注意事项：

#不要用for(i in li_list){}的方式循环一个jq对象

for(let i=0;i<li_list.length;i++){   #let 声明的变量的作用域只在for循环中
        console.log(i)
}

jquery对象和dom对象的关系和转换

jquery封装了dom
dom转成jquery : jQuery(dom对象)  $(dom对象)
jquery转成dom : jq对象[index]

#示例：
<div></div>
<div id="app"></div>
<div class="box"></div>
<div class="box"></div>
<div></div>

#通过js获取这些元素节点：
    var myBox = document.getElementById("app");           //通过 id 获取单个元素
    var boxArr = document.getElementsByClassName("box");  //通过 class 获取的是伪数组
    var divArr = document.getElementsByTagName("div");    //通过标签获取的是伪数组

#通过jQuery获取这些元素节点：
   //获取的是数组，里面包含着原生 JS 中的DOM对象。
　　console.log($('#app'));
　　console.log($('.box'));
　　console.log($('div'));

jquery选择器

三种选择器

基本选择器： 一般都是通过ID或者class类来进行选择
层级选择器： 可以通过层次进行选择，如后代子代选择器
属性选择器： 可以通过属性进行选择

基础选择器（重要）：

id选择器   .类选择器  标签选择器   *通用选择器

#示例：
<body>
    <div class="box" title="baidu">
        <ul id="city">
            <li>北京</li>
            <a href="https://www.baidu.com" class="baidu" title="baidu">wahaha</a>

            <li id="sh"><a href="haha" title="luffy">上海</a></li>
            <li><a href="dada" title="luffy">山东</a></li>

            <li>河北</li>
            <span></span>
        </ul>
        <p>p标签</p>
    </div>
</body>
<script src="jquery3.4.1.min.js"></script>


#id选择器，ID设置不可重复，只选择一个
$('#city')   
k.fn.init [ul#city]  
           
#类选择器，class设置可以重复
$('.box')
k.fn.init [div.box]
			
#标签选择器，获取所有li标签
$('li')
k.fn.init(4) [li, li, li, li]
$('a')
k.fn.init(2) [a, a]

#通用选择器，选择所有
$('*')
k.fn.init(16) [html, head, meta, title, body, div.box, ul#city, li, li, a, li, a, li, p, script, script]

#div.c1交集选择器      
$('div.box')
k.fn.init [div.box]

#div,p并集选择器，多选几个
$('div,p,a')
k.fn.init(4) [div.box, a, a, p]

层级选择器：

空格 后代选择器，选择div下的所有li标签   
$('div li')

>子代选择器，表示div下面一层所有的p标签
$('div>ul>li')

+毗邻选择器，找兄弟标签中的下一个li标签
$('.baidu+li')
k.fn.init [prevObject: k.fn.init(1)]

~弟弟选择器，找兄弟标签中所有弟弟li标签
$('.baidu~li')
k.fn.init(3) [li, li, li, prevObject: k.fn.init(1)]

属性选择器：

$("[href]")          必须是含有某属性的标签
			
$('a[href]')    	 有某属性的符合前面选择器的标签，    #a=选择器  href=属性
			
$('a[title="luffy"]')        属性名="luffy"的符合选择器要求标签
$('a[title！="luffy"]')      属性名="luffy"不符合选择器要求标签
		
$('a[href$="com"]')          属性值以xxx结尾的
$('a[href^="http"]')         属性值以xxx开头的
$('a[href*="baidu"]')        属性值包含xxx
$('a[href][class="baidu"]')  拥有属性1,且属性二的值='xxx',符合前面选择器要求的

jquery筛选器

基础筛选器（重要）：

$('选择器:筛选器')
$('选择器:first')
					
作用于选择器选择出来的结果
$('a:first')   找第一个
$('a:last')    最后一个
$('a:eq(1)')   通过索引找
$('a:even')    找偶数索引
$('a:odd')     找奇数索引
$('a:gt(1)')   大于某索引的
$('a:lt(1)')   小于某索引的

$('*:not("li")')       # not(选择器) 不含 符合选择器 要求的
$('*:has("a[href]")')  # has(选择器) 后代中含有该选择器要求的(找的不是后代,找的是本身)

表单筛选器

type筛选器：

#form 表单选择
$(':text')
$(':password')
$(':radio')
$(':checkbox')
$(':file')
$(':submit')
$(':reset')
$(':button')
注意 : date type的input是找不到的

状态筛选器：

enabled
disabled
checked
selected

$(':disabled')
jQuery.fn.init [input]

$(':enabled')
jQuery.fn.init(15) [input, input, input, input, input, input, input, input, input, input, input, select, option, option, option]

$(':checked')
jQuery.fn.init(4) [input, input, input, option]

$(':selected')
$(':checkbox:checked')
jQuery.fn.init(2) [input, input]

$('input:checkbox:checked')
jQuery.fn.init(2) [input, input]

#示例：
<body>
<input type="text" name="" disabled>
<input type="password" name="" >
<input type="radio" name="sex" checked>
<input type="radio" name="sex" >
<input type="checkbox" name="hobby" checked>
<input type="checkbox" name="hobby" checked>
<input type="checkbox" name="hobby">
<input type="file" name="" >
<input type="date" name="" >
<input type="submit" name="" >
<input type="reset" name="" >
<input type="button" name="" >

<select name="" id="">
    <option value="" selected>北京</option>
    <option value="">上海</option>
    <option value="">天津</option>
</select>
</body>

<script src="jquery.3.4.1.js"></script>

筛选器方法

筛选示例：

找兄弟 :$('ul p').siblings()
		
找哥哥
$('ul p').prev()              找上一个哥哥
$('ul p').prevAll()           找所有哥哥
$('ul p').prevUntil('选择器')  找哥哥到某一个地方就停了
		
找弟弟 : next()  nextAll()     nextUntil('选择器')
找祖宗 : parent()  parents()   parentsUntil('选择器')
找儿子 : children()

筛选方法：

first()
last()
eq(index)
		
not('选择器')     去掉满足选择器条件的
filter('选择器')  交集选择器,在所有的结果中继续找满足选择器要求的
find('选择器')    后代选择器 找所有结果中符合选择器要求的后代
has('选择器')     通过后代关系找当代 后代中有符合选择器要求的就把当代的留下

事件的绑定

绑定示例

<body>
    <button>点击1</button>
    <button>点击2</button>
</body>

<script src="jquery.3.4.1.js"></script>

<script>
    $('button').click(
        function () {
            alert('你点了我一下!')
        }
    )
</script>

标签的文本操作（重要）

文本操作示例

text()
$('li:first').text()         // 获取值
$('li:first').text('wahaha') // 设置值

$('li:last').html()          // 获取值
$('li:last').html('qqxing')  // 设置值

$('li:first').html('<a href="http://www.mi.com">爽歪歪</a>')   //a标签

var a = document.createElement('a')
a.innerText = '我是AD钙'
$('li:last').html(a)     //a 是dom对象，js方式添加

var a2 = document.createElement('a')
var jqobj = $(a2)
jqobj.text('乳娃娃')
$('li:last').html(jqobj)   //jqobj是jquery对象，jquery方式

#代码示例：
<body>
    <ul>
        <li>list1</li>
        <li>list2</li>
    </ul>
</body>
<script src="jquery.3.4.1.js"></script>
<script>
    $('li:first').html('<a href="http://www.mi.com">爽歪歪</a>')   //a标签

    var a = document.createElement('a')
    a.innerText = '我是AD钙'
    $('li:last').html(a)       //a 是dom对象

    var a2 = document.createElement('a')
    var jqobj = $(a2)
    jqobj.text('乳娃娃')
    $('li:last').html(jqobj)   //jqobj是jquery对象

</script>

标签的操作

增加标签

父子关系:
	追加儿子 :(父).append(子) (子).appendTo(父)
	头部添加 :(父).prepend(子) (子).prependTo(父)

兄弟关系:
	添加哥哥 :参考点.before(要插入的)     要插入的.insertbefore(参考点)
	添加弟弟 :参考点.after(要插入的)      要插入的.insertAfter(参考点)
如果被添加的标签原本就在文档树中,就相当于移动

#代码示例：
<body>
    <ul>
        <li>唱</li>
        <li id="l2">跳</li>
        <li>rap</li>
    </ul>
</body>
<script src="jquery.3.4.1.js"></script>

例子append
    var li = document.createElement('li')
    var jq = $(li).text('张艺兴')
    $('ul').append(jq)
    
    var li = document.createElement('li')
    var jq = $(li).text('张艺兴')
    $('ul').append(jq[0])
    
    var li = document.createElement('li')
    var jq = $(li).text('张艺兴')
    $('ul').append('<li>鹿晗</li>')
    
例子appendTo
	var li = document.createElement('li')
    var jq = $(li).text('张艺兴')
    jq.appendTo('ul')
    
    var dom_ul = document.getElementsByTagName('ul')[0]
    var li = document.createElement('li')
    var jq = $(li).text('张艺兴')
    jq.appendTo(dom_ul)
    
    var li = document.createElement('li')
    var jq = $(li).text('张艺兴')
    jq.appendTo($('ul'))
   
对已经存在的内容进行添加 -- 移动
   $('li:first').appendTo('ul')

头部添加：

$('li:last').prependTo('ul')
$('ul').prepend('<li>李东宇</li>')
$('<li>邓帅</li>').prependTo('ul')

位置插入：

$('#l2').before('<li>李东宇</li>')
$('<li>李东宇222</li>').insertBefore('#l2')    #在l2上方位置插入

$('#l2').after('<li>邓帅</li>')
$('<li>邓帅222</li>').insertAfter('#l2')       #在l2下方位置插入

删除修改克隆

#删除 : remove detach empty
    remove : 删除标签和事件,被删掉的对象做返回值
        $("li").remove()
		var obj = $('button').remove()
		obj是button标签,但是事件已经被删除了
			
    detach : 删除标签,保留事件,被删掉的对象做返回值
        $("li").detach()
			
    empty : 清空内容标签,自己被保留
        $("li").empty()
			
#修改 : replaceWith replaceAll，注意标签之前元素
    $(".dada").replaceWith('<li>海洋</li>')  用b替换a
    $('<li>俊丽</li>').replaceAll(".dada")   用a替换b
			
#复制 : clone
    var btn = $(this).clone()       //克隆标签但不能克隆事件
    var btn = $(this).clone(true)   //克隆标签和事件

标签的属性操作

通用属性

#示例
<body>
    <a href="" title="baidu">百度一下</a>
    <input type="checkbox" name="hobby">
    <input type="checkbox" name="hobby" checked>
    <input type="checkbox" name="hobby">
    <input type="checkbox" name="hobby">
</body>

attr获取属性的值
$('a').attr('href')
设置/修改属性的值
$('a').attr('href','http://www.baidu.com')
设置多个属性值
$('a').attr({'href':'http://www.baidu.com','title':'baidu'})

removeAttr
$('a').removeAttr('title') //删除title属性

如果一个标签只有true和false两种情况,适合用prop处理
如果设置/获取的结果是true表示选中,false表示取消选中

$(':checkbox').prop('checked')  # 获取当前选择状态
$(':checkbox:checked').prop('checked',true)  # 表示选中
$(':checkbox:checked').prop('checked',false) # 表示取消选中

  
  								

### 类的操作			

* 类操作示例：

  ```js
  添加类   addClass
  $('div').addClass('red')        //添加一个类，所有的div标签全部都会添加
  $('div').addClass('red bigger') //添加多个类
  		
  删除类   removeClass
  $('div').removeClass('bigger')  //删除一个类
  $('div').removeClass('red bigger')
  			
  转换类   toggleClass             //有即删 无即加
  $('div').toggleClass('red')      
  $('div').toggleClass('red bigger')

value值

值得操作：

$('input').val()           #获取输入框的值
$(':text').val('值')       #向输入框内输入值
$(':password').val('值')   #没有
			  
对于选择框 : 单选 多选 下拉选择
设置选中的值需要放在数组中 : 
	$(':radio').val([1])     
	$(':radio').val([1,2,3])  #默认选择哪个

css样式

样式示例：

css('样式名称','值')
css({'样式名1':'值1','样式名2':'值2'})
			
#示例：
$('div').css('background-color','red')             # 设置一个样式
$('div').css({'height':'100px','width':'100px'})   # 设置多个样式

    <script src="jquery.3.4.1.js"></script>
	<style>
        div{
            height: 20000px;
            width : 20000px;
            overflow: scroll;}
    </style>
				
<body>
    <div>
        皇家赌场开业,性感荷官在线发牌
        皇家赌场开业,性感荷官在线发牌
        皇家赌场开业,性感荷官在线发牌
    </div>
</body>

滚动条

滚动条示例：

scrollLeft()    
scrollTop()

$(window).scrollLeft()   #页面水平滚动
$(window).scrollTop()    #页面上下滚动

盒子模型

盒子示例：

内容宽高 : width和height
	$('div').width(100)
	$('div').height(100)

内容+padding : innerWidth和innerHeight
	$('div').innerWidth(200)
	$('div').innerHeight(200)

#内边距的距离：$('div').css('padding','30')

内容+padding+border : outerWidth和outerHeight
	$('div').outerWidth(350)
	$('div').outerHeight(350)

#外边距的距离：$('div').css('border','blue solid 10px')

内容+padding+border+margin : outerWidth(true)和outerHeight(true)
设置值：变得永远是content的值

#代码示例：

  
  								

#### 表单操作

* **表单示例：**

  ```js
  <body>
  <form action="">
      <input type="text">
      <input type="password">
      <input type="submit">
  </form>
  </body>
  
<script>
  $(':submit').click(
      function () {
          return false
      }
  )
  </script>
  
  如果返回false不提交
  如果返回true不提交

作业练习

表格全选和反选示例：

<body>
<table border="1">
    <thead>
        <tr>
            <th>#</th>
            <th>姓名</th>
            <th>爱好</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td><input type="checkbox"></td>
            <td>胡海洋</td>
            <td>抽烟、喝酒、烫头</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>俊丽</td>
            <td>吃</td>
        </tr>
        <tr>
            <td><input type="checkbox"></td>
            <td>俊丹丹</td>
            <td>吃</td>
        </tr>
    </tbody>
</table>

<script>
    $(".quanxuan").click(function () {
        $(':checkbox').prop('checked',true)
    })

    $(".quxiao").click(function () {
        $(':checkbox').prop('checked',false)    #将所有选择的状态取消
    })

    $(".fanxuan").click(function () {
        var input_count = $("input:checkbox")   #获取当前勾选框的列表

        for(i=0; i<input_count.length ;i++){    #进行for循环
            var status = $(input_count[i]).prop('checked')  #或许每个i选择框的状态
            $(input_count[i]).prop('checked',!status)       #修改反向状态
    }
    })
</script>
</body>

动画

动画方法：

show系列
	显示动画：show 
    隐藏动画：hide 
    开关显示动画：toggle

slide滑动系列
   滑入动画：slideDown 
   滑出动画：slideUp 
   滑入滑出动画：slideToggle(时间,回调函数)

fade淡入淡出系列
   淡入动画：fadeIn
   淡出动画：fadeOut  
   淡入淡出动画：fadeToggle

动画的停止
   stop 永远在动画开始之前,停止动画

#示例：
    <style>
        .container{
            position: relative;
            float: right;
            height: 40px;
            width: 120px;
            background-color: lightgray;
        }
        .car{
            position: absolute;
            line-height: 40px;
            width: 120px;
            text-align: center;
            top: 0;
            right: 0;
        }
        .box{
            position: absolute;
            top: 40px;
            right: 0;
            height: 100px;
            width: 300px;
            background-color: #00F7DE;
            display: none;
        }
    </style>


<body>
<div class="container">
    <div class="car">购物车(<span>0</span>)</div>
    <div class="box"></div>
</div>
</body>                      
<script>
    $('.container').mouseenter(
        function () {
            $('.box').stop()
            $('.box').slideDown(400)
        })
    $('.container').mouseleave(
        function () {
            $('.box').stop()         #停止动画
            $('.box').slideUp(400)
        })

    // $('.container').hover(        #鼠标悬停
    //     function () {
    //         $('.box').stop()
    //         $('.box').slideToggle(400)   #滑入滑出
    //     })
</script>

动画特效示例：

    <style>
        div{
            height: 200px;
            width: 200px;
            background-color: red;
            display: none;}
    </style>
    <script src="jquery-3.4.1.js"></script>

</head>
<body>
    <button>显示</button>
    <div></div>
</body>
<script>
    // fadeIn fadeOut
    $('button').click(
        function () {
            $('div').stop()
            if($('button').text()==='显示'){
                $('button').text('隐藏')
            }else{
                $('button').text('显示')
            }
            $('div').fadeToggle(2000)
        })

    // show hide toggle
    // $('button').click(
    //     function () {
    //         $('div').stop()
    //         if($('button').text()==='显示'){
    //             $('button').text('隐藏')
    //         }else{
    //             $('button').text('显示')
    //         }
    //         $('div').toggle(2000)
    //         // $('div').toggle(2000,fn)
    //     })
</script>

事件

事件绑定

# bind 参数都是选传的,接收参数e.data
    $('button').bind('click',{'a':'b'},fn) #{'a':'b'} 发送参数
    function fn(e) {				       #e 接受参数
        console.log(e.data)
        console.log(e.data.a)
    }
				
    $('button').bind('click',fn)
    function fn(e) {
        console.log('wahaha')
    }
			  	
# 简写的事件名称当做方法名
    $('button').click({'a':'b'},fn)
    function fn(e) {
        console.log(e.data)
        console.log(e.data.a)
    }

    $('button').click(fn)
    function fn(e) {
        console.log('wahaha')
    }
	$('button').unbind('click')   		#解锁

解除绑定
```
$('button').unbind('click')
```

各种事件

click(function(){...})   // 单机事件

blur(function(){...})    // 失去焦点
focus(function(){...})   // 获得焦点

change(function(){...})  // input框鼠标离开时内容改变触发

keyup(function(){...})   // 按下的键盘触发事件 27对应的是esc键 获取键盘编号 e.keyCode
mouseover/mouseout       // 如果给父元素绑定了over事件,那么这个父元素如果有子元素,每一次进入子元素也							   触发父元素的over事件
mouseenter/mouseleave = hover(function(){...})  //鼠标的悬浮

blur focus change示例：**

<body>
    <input type="text">
    <select name="" id="">
        <option value="">北京</option>
        <option value="">上海</option>
    </select>
</body>

<script>
    $('input').focus(
        function () {
            console.log('获得焦点了')
        })
    $('input').blur(
        function () {
            console.log('失去焦点了')
        })
    $('select').change(
        function () {
            console.log('内容改变了')
        })
</script>

keyup-键盘控制：

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

    <style>
        .mask{
            position: absolute;
            background-color:rgba(0,0,0,0.5) ;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;}
        .t{
            position: absolute;
            background-color: white;
            width: 400px;
            height: 300px;
            top: 50%;
            left: 50%;
            margin-left: -200px;
            margin-top: -150px;}
    </style>
    <script src="jquery-3.4.1.js"></script>
</head>
    <body>
        <h1>皇家赌场</h1>
        <div class="mask">
            <div class="t"></div>
        </div>
    </body>

<script>
    $(window).keyup(function (e) {
        // console.log(arguments) //帮助你查看想不起来的函数参数都有哪些
        if(e.keyCode===27){
            $('.mask').css('display','none')
        }
    })
</script>
</html>

out_over

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            width: 300px;
            height: 300px;
            background-color: red;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: forestgreen;
        }
    </style>
    <script src="jquery-3.4.1.js"></script>

</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
<script>
    $('.outer').mouseout(
        function () {
            console.log('out')})
</script>
</html>

事件冒泡

#冒泡就是点击子节点，会向上触发父节点，可以使用一下两种方法进行处理
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .outer{
            width: 300px;
            height: 300px;
            background-color: red;}
        .inner{
            width: 100px;
            height: 100px;
            background-color: forestgreen;}
    </style>
    <script src="jquery-3.4.1.js"></script>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
<script>
    $('.outer').click(
        function () {
            alert('outer')
        })
    $('.inner').click(
        function (e) {
            alert('inner')
            // e.stopPropagation() //阻止事件冒泡方法1
            return false    //阻止事件冒泡方法2
        })
</script>
</html>

事件委托

$('div').on('click','button',{'a':'b'},function (event) {
        console.log(event.data)
        alert('不许点')
    })

相当于把button元素的点击事件委托给了父元素div
后添加进来的button也能拥有click事件

#示例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        $(window).ready(
            function () {
                alert('123')
        })
    </script>
    <script src="jquery-3.4.1.js"></script>

</head>
<body>
    <div>
        <button>按键1</button>
    </div>
</body>
<script>
    $('div').on('click','button',{'a':'b'},function (event) {
        console.log(event.data)
        alert('不许点')
    })
    var btn = document.createElement('button')  #添加新的标签自带button事件
    $(btn).text('按键2').appendTo('div')
</script>
</html>

页面的加载

示例：

document.onload = function(){
   //js 代码 
}

window.onload = function () {
            $('button').click(function () {
            alert('不许点')
            })}
onload要等到所有的文档 音视频都加在完毕才触发
onload只能绑定一次

//jquery的方式,只等待文档加载完毕之后就可以执行,在同一个html页面上可以多次使用
$(document).ready(
     function () {
       //文档加在完毕之后能做的事情 
})

//jquery的方式(简写)*****
$(function () {
	//文档加在完毕之后能做的事情        
  })

//示例
$(function () {
     $('button').click(function () {
          alert('不许点')
     })
})

//jquery中等待所有的资源包括视频 音频都加载完才执行function中的代码,可以使用多次
$(window).ready(
      function () {
           alert('123')
})

each

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
</head>
<body>
    <ul>
        <li>选项一</li>
        <li>选项二</li>
        <li>选项三</li>
    </ul>
</body>
<script>
    $('li').each(
        function (ind,dom) {   //主动传ind是每项的索引,dom是每一项的标签对象
            console.log(ind,dom)
        })
</script>
</html>

练习

1.form表单的验证提示信息用focus和blur事件完成

2.表格操作使用事件委托

3.小米购物车

4.模态对话框

bootstrap

bootstrap框架：
- bootstrap框架提供样式和组件，可以快速搭建网站页面的开源项目，而且支持自适应
bootstrap组件样式地址：
- https://v3.bootcss.com/components/
矢量图地址：
- http://www.fontawesome.com.cn/examples/
- https://www.iconfont.cn/search/index
js的代码 :
- 选项卡轮播图

bootstrap框架示例：

导入bootstrap：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css"> 
</head>

全局CSS样式：

栅格系统：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>
        .col-md-1,.col-md-8,.col-md-4,.col-md-6{
            border: solid 1px;}
    </style>
</head>
<body>
    <div class="row">
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
      <div class="col-md-1">.col-md-1</div>
    </div>
    <div class="row">
      <div class="col-md-8">.col-md-8</div>
      <div class="col-md-4">.col-md-4</div>
    </div>
    <div class="row">
      <!--<div class="col-md-4">.col-md-4</div>-->
      <div class="col-md-4 col-md-offset-4">.col-md-4</div>   #列偏移
      <!--<div class="col-md-4">.col-md-4</div>-->
    </div>
    <div class="row">
      <div class="col-md-6">.col-md-6</div>
      <div class="col-md-6">.col-md-6</div>
    </div>
</body>
</html>

嵌套列：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>
        .col-sm-9,.col-sm-6{
            border: solid 1px;}
    </style>
</head>
<body>
    <div class="row">
      <div class="col-sm-9">
        Level 1: .col-sm-9
        <div class="row">
          <div class="col-xs-8 col-sm-6">
            Level 2: .col-xs-8 .col-sm-6
          </div>
          <div class="col-xs-4 col-sm-6">
            Level 2: .col-xs-4 .col-sm-6
          </div>
        </div>
      </div>
    </div>
</body>
</html>

表格:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>
        .col-md-9,.col-md-3{
            border: solid 1px;}
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <table class="table table-bordered table-hover">
                    <tr class="success">
                        <td>第一列</td>
                        <td>第二列</td>
                        <td>第三列</td>
                    </tr>
                    <tr>
                        <td>第二.一列</td>
                        <td>第二.二列</td>
                        <td>第二.三列</td>
                    </tr>
                    <tr  class="danger">
                        <td>第三.一列</td>
                        <td>第三.二列</td>
                        <td>第三.三列</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</body>
</html>

表单：

#表单这里还有单选框多选框和禁用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>
        .col-md-9,.col-md-3{
            border: solid 1px;}
    </style>
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-6">
            <form>

              <div class="form-group has-success has-feedback">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Email">
                <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
              </div>
              <div class="form-group">
                <label for="exampleInputPassword1">Password</label>
                <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
              </div>
              <div class="form-group">
                <label for="exampleInputFile">File input</label>
                <input type="file" id="exampleInputFile">
                <p class="help-block">Example block-level help text here.</p>
              </div>
              <div class="checkbox">
                <label>
                  <input type="checkbox"> Check me out
                </label>
              </div>
              <button type="submit" class="btn btn-default">Submit</button>
            </form>
            </div>
        </div>
    </div>
</body>
</html>

按钮框删除：

选项卡：

# 每点击一个按钮就是一个页面
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">

</head>

<body>
    <div>
      <!-- Nav tabs -->
      <ul class="nav nav-tabs" role="tablist">
        <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
        <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
        <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
        <li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
      </ul>

      <!-- Tab panes -->
      <div class="tab-content">
        <div role="tabpanel" class="tab-pane active" id="home">111</div>
        <div role="tabpanel" class="tab-pane" id="profile">222</div>
        <div role="tabpanel" class="tab-pane" id="messages">333</div>
        <div role="tabpanel" class="tab-pane" id="settings">444</div>
      </div>
    </div>

    <script>
        $('#myTabs a').click(function (e) {
              e.preventDefault()
              $(this).tab('show')
            })
    </script>
</body>
</html>

可消失的弹出提示框：

#鼠标悬浮在框上，弹出提示框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">

</head>

<body>
  <div style="padding:100px">

    <a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="hover" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">可消失的弹出框</a>
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="left" title="Tooltip on left" data-trigger="click">Tooltip on left</button>
    <button type="button" class="btn btn-default" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>

  </div>
    <script>
            $(function () {
            $('[data-toggle="tooltip"]').tooltip()
        })
          $(function () {
          $('[data-toggle="popover"]').popover()
        })
    </script>
</body>
</html>

轮播图：

# 轮播图，轮流播放图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
</head>

<body>

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>

  <!-- Wrapper for slides -->
  <div class="carousel-inner" role="listbox">
    <div class="item active">
      <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/447da720833aa8f7c5ea7980464cac3d.jpg?thumb=1&w=1226&h=460&f=webp&q=90" alt="...">
      <div class="carousel-caption">
        ....
      </div>
    </div>
    <div class="item">
      <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/0bf2f06a3b16b37c83a5991838e3e4c7.jpg?thumb=1&w=1226&h=460&f=webp&q=90" alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    <div class="item">
      <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/64070c0d2b1e6b69316c7b9fc9d3ec50.jpg?thumb=1&w=1226&h=460&f=webp&q=90" alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ...
  </div>

  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

</body>
</html>

组件

bootstrap矢量图示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>
        span{
            font-size: 50px;} 	#设置矢量图大小，矢量图也是数字不会失真
    </style>
</head>

<body>
<span class="glyphicon glyphicon-flash" aria-hidden="true"></span>  #选择矢量图样式
</body>
</html>

下拉菜单：

#给按钮添加多个扩展功能
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
</head>

<body>
    <div class="dropdown">
      <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
        Dropdown
        <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li role="separator" class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
</body>
</html>

按钮/分裂时按钮下拉菜单：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>
    </style>
</head>

<body>
    <div class="btn-group btn-group-sm" role="group" aria-label="...">
      <button type="button" class="btn btn-default">Left</button>
      <button type="button" class="btn btn-default">Middle</button>
      <button type="button" class="btn btn-default">Right</button>
    </div>
        <script>
    </script>
</body>
</html>

输入框组：

# 输入框可以用在网页登录输入账号密码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <style>
        .dada{
            width: 300px;
            height: 300px;
        }
    </style>
</head>
				
<body>
<div class="dada">
    <div class="input-group">
      <input type="text" class="form-control" placeholder="输入账号" aria-describedby="basic-addon2">
      <span class="input-group-addon" id="basic-addon2">输入账号</span>
    </div>
    <div class="input-group">
      <input type="text" class="form-control" placeholder="输入密码" aria-describedby="basic-addon2">
      <span class="input-group-addon" id="basic-addon3">输入密码</span>
    </div>
</div>
</body>
</html>

#可变的字体
<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

徽章：

#隐藏显示未读的消息
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">

</head>
<body>
<ul class="nav nav-pills" role="tablist">
  <li role="presentation" class="active"><a href="#">Home <span class="badge">42</span></a></li>
  <li role="presentation"><a href="#">Profile</a></li>
  <li role="presentation"><a href="#">Messages <span class="badge">3</span></a></li>
</ul>
</body>
</html>

巨幕：

# 将数字放大展示在页面上
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">

</head>
<body>
    <div class="jumbotron">
      <h1>俊丽</h1>
      <p>...</p>
      <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
            </div>
</body>
</html>

页头：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">

</head>
<body>
    <div class="page-header">
      <h1> 俊丽 <small>海洋</small></h1>
    </div>
</body>
</html>

缩略图：

# 缩略图加图片
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">

</head>
<body>
    <div class="row">
      <div class="col-sm-6 col-md-4">
        <div class="thumbnail">
          <img src="111.jpg" alt="图">
          <div class="caption">
            <h3>Thumbnail label</h3>
            <p>嘟嘟嘟</p>
            <p><a href="#" class="btn btn-primary" role="button">Button</a> <a href="#" class="btn btn-default" role="button">Button</a></p>
          </div>
        </div>
      </div>
    </div>
</body>
</html>

警告框：

# 可关闭的警告框，警告框内还可以添加链接
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">

</head>
<body>
    <div class="alert alert-warning alert-dismissible" role="alert">
      <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
      <strong>Warning!</strong> Better check yourself, you're not looking too good.
    </div>
</body>
</html>

带动画的进度条

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.4.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">

</head>
<body>
    <div class="progress">
      <div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="45" aria-valuemin="0" aria-valuemax="100" style="width: 45%">
        <span class="sr-only">45% Complete</span>
      </div>
    </div>
</body>
</html>

posted @ 2019-08-07 19:48 海洋1994 阅读(472) 评论(0) 编辑收藏举报

刷新页面返回顶部

海洋