1. 技术文章
  2. 前端

前端

由 情到浓时终转凉″ 提交于 2020-03-05 15:04:04

day42

WEB基础知识

分为前端与后端

c/s

c:客户端client
s:服务端server  后端
特点;必须通过指定的客户端软件,才能访问服务端的一种程序例如QQ

b/s

B:浏览器 Browser
特点:通过浏览器就能访问服务端的一种程序

前端

内容的展示

browser 浏览器

后端

逻辑的处理

HTML

html  显示的内容
css   样式  美化
js    动态效果
Hyper(超级) Text(文本) Markup(标记)  language(语言) 
HTML(超级文本标记语言)

标记的分类

封闭类型的标记也称为"双标记"必须成对出现

语法:<标记>内容</标记>

非封闭类型的标记也称为"单标记"

语法:<标记> 或者</标记>
在一对标记中允许出现另一对(一个)标记 (功能的嵌套)
注意:嵌套标记的书写格式==>被嵌套的标记要通过一个tab缩进键来表示层级关系

语法

属性必须声明在开始标记中
属性与标记名称之间用"空格"隔开
属性的值与属性之间使用"="连接
一个元素允许有多属性,多属性之间排名不分前后,中间用"空格"隔开即可

标签的分类

块级标记

h1-h6

行类标签

标签 描述
span 一行
b或strong 加粗
i或em 斜体
u 下划线
s 或 del 删除线
sup 上标
sub 下标
p 段落 有间距 前后
br 换行
注释

图片

<img src="地址" alt="图片加载失败提示信息" width="宽度" height="高度" title="悬浮显示信

超连接

<a href="地址" target="_blank">显示信息</a> <!--新页面打开-->
<a href="地址" target="_self">显示信息</a> <!--当前页面打开-->

锚连接

<a name="mao">锚点</a>
<a href="#mao">到锚点</a>

特殊符号

符号 描述
  空格
> 大于号
< 小于号
© 版权号

HTML标签

HTML标签
    head  一个的思维
        meta  元信息
            charset 编码 
            <meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">  
            description  描述
            Keywords  关键字
            
        title  标题
        
        
        <style></style>  <!-- css -->
        <link rel="stylesheet" href=""> <!-- 连接 -->
        <script></script>    <!-- js -->
        
        
    body  一个人的身体

day43

内容回顾

前后端怎么交互

浏览器发送一个请求到后端，后端处理逻辑，把结果（HTML文本）返回给浏览器。

前端

HTML 骨架 内容

css 样式

js 动态效果

HTML 超文本标记语言

标记 标签

分类

单边标记\双边标记

head

<meta>  编码 关键字 描述  
<title>标题的内容</title>  
link     style   script

body

内联(行内)标签

字体
    加粗  b   strong
    斜体  i  em 
    上下标   sup  sub 
    中划线 下划线   del s  u 
<span></span> 
<br>
<a href="链接" target="_blank" title >页面显示的内容</a>
href: 链接地址
    锚点： #id
target：打开方式
    _blank： 新建一个窗口
    _self:  当前窗口
title: 鼠标悬浮上显示的标题
<img src="图片的地址" alt='' title width="20px"  height="100%" >
src:   网络地址、本地地址（相对路径、绝对路径）
alt ：  链接地址有问题时提示的内容 
title: 鼠标悬浮上显示的标题
width： 设置图片的宽度
height：设置图片的高度  
width和height选择一个

特殊字符：

&nbsp: 空格

块级标签

h1 - h6

今日内容

块级标签

排版标签

p:一个文本级别的段落标签 前后有间距

P标签中不嵌套其他的块级标签

div 没有任何样式的块级标签

hr 分割线

列表

无序列表

type="原点的样式"

<!-- 样式 disc（实心圆、默认）、 circle（空心圆）、none（无）、square（方点）-->

<ul >
    <li>手机</li>
    <li>电脑</li>
    <li>iPad</li>
</ul>

<ul type="none">
    <li>手机</li>
    <li>电脑</li>
    <li>iPad</li>
</ul>
<ul type="circle">
    <li>手机</li>
    <li>电脑</li>
    <li>iPad</li>
</ul>
<ul type="square">
    <li>手机</li>
    <li>电脑</li>
    <li>iPad</li>
</ul>
有序列表

type="数字的样式" start =“起始值”（数字）

<!-- 样式 1（数字）、 a（小写字母）、A（大写）、I（罗马数字）-->

<ol>
    <li>手机</li>
    <li>电脑</li>
    <li>iPad</li>
</ol>

<ol type="1">
    <li>手机</li>
    <li>电脑</li>
    <li>iPad</li>
</ol>

<ol type="a" start="25">
    <li>手机</li>
    <li>电脑</li>
    <li>iPad</li>
</ol>

<ol type="A">
    <li>手机</li>
    <li>电脑</li>
    <li>iPad</li>
</ol>

<ol type="I">
    <li>手机</li>
    <li>电脑</li>
    <li>iPad</li>
</ol>
定义列表

dt 标题

dd 内容

<dl>
    <dt>城市</dt>
    <dd>北京</dd>
    <dd>上海</dd>
    <dd>深圳</dd>

    <dt>城市</dt>
    <dd>北京</dd>
    <dd>上海</dd>
    <dd>深圳</dd>
</dl>

表格

<!--有表头的表格-->
<!--tbale 嵌套 thead tbody 
    thead和tbody嵌套tr
    tr嵌套 th  td 
-->

<!--tbale 属性 
border 边框
cellpadding   元素和单元格的边距
cellspacing   单元格和边框的间距
-->

<!--tr 属性 
align   内容的水平排列  left  center  right
valign  内容的垂直排列  top middle bottom
-->
<!--td  属性 
rowspan   占几行
colspan   占几列
-->

<table border="1" cellpadding="20px" cellspacing="20px">
    <thead>
    <tr align="left">
        <th> 序号</th>
        <th> 姓名</th>
        <th> 年龄</th>
    </tr>
    </thead>
    <tbody>
    <tr align="center" valign="bottom">
        <td>1</td>
        <td >alex</td>
        <td >84</td>


    </tr>
    <tr align="center" valign="top">
        <td>2</td>
        <td >alex</td>


    </tr>
    <tr>
        <td>2</td>
        <td>wusir</td>
        <td rowspan="2">2208</td>

    </tr>
    </tbody>

</table>

<!-- 无表头的表格-->
<table border="1" cellpadding="20px" cellspacing="20px">
    
    <tbody>
    <tr align="center" valign="bottom">
        <td>1</td>
        <td >alex</td>
        <td >84</td>


    </tr>
    <tr align="center" valign="top">
        <td>2</td>
        <td >alex</td>


    </tr>
    <tr>
        <td>2</td>
        <td>wusir</td>
        <td rowspan="2">2208</td>

    </tr>
    </tbody>

</table>

表单

<!-- form 标签
action： 提交的地址  
-->

<!-- input 标签
type： 类型   
    text：普通文本
    password：密码 密文
    ra  dio：  单选框
    checkbox： 复选框
    submit： 提交按钮
能提交数据 input有name属性  有value值

-->

<button>提交</button>  
<!-- 
form表单中button和type=‘submit’的input的作用是一样的
-->


<form action="http://127.0.0.1:9999">
    <input type="text" name="user" placeholder="请输入用户名">   <!--name:提交数据的key   value:值   placeholder：占位的内容 -->
    <input type="password" name="pwd" value="3714">
    <input type="radio" name="sex" value="1"> 男
    <input type="radio" name="sex" value="2" checked  > 女  <!-- checked默认选中 -->
    <input type="checkbox" name="hobby" value="1"> 跳
    <input type="checkbox" name="hobby" value="2"> 唱
    <input type="checkbox" name="hobby" value="3"> rap
    <input type="checkbox" name="hobby" value="4"> 篮球
    <input type="submit">
    <button>提交</button  
    
</form>

label

<!--给input标签定义id  给label标签的for填上id-->
<label for="i1">用户名：</label>
<input id="i1" type="text" name="user" placeholder="请输入用户名">

其他的input

<input type="hidden" name="alex" value="alexdsb">   <!--  隐藏的input框  -->
<input type="reset"> <!--  重置按钮  -->
<input type="button" value="提交"> <!--  普通的按钮  -->
<button type="button">提交</button>  <!--  普通的按钮  -->
<input type="date">    <!--  日期格式  -->

select option

<!--下拉框 单选 -->
<!--size  框的大小 -->
<select name="city" id="" size="4" >
     <option value="1">北京</option>
     <option value="2"  selected >上海</option>  <!-- selected默认选中 -->
     <option value="3">深圳</option>
</select>

<!--下拉框 多选 -->
<!--size  框的大小 -->
<select name="city" id="" size="4"  multiple>
     <option value="1">北京</option>
     <option value="2">上海</option>
     <option value="3">深圳</option>
</select>

上传文件

<input type="file" name="f1">   
<form  enctype="multipart/form-data">  <!--编码指定为multipart/form-data-->

CSS

引入方式

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

    <!--内联引入-->
    <style>
        div {
            color: #ffef6b
        }

    </style>

    <!--外联引入：链接  使用较多  -->
        <link rel="stylesheet" href="index.css">
    <!--外联引入：导入-->
    <style>
        @import url('index.css');
    </style>


</head>
<body>


<!--行内引入-->
<div style="color: red">黄焖鸡米饭</div>
<div>黄焖鸡排骨</div>

</body>
</html>

简单的样式

 color: #ffef6b;      /*字体颜色*/
 width: 200px;        /*宽度*/
 height: 200px;       /*高度*/    
 background: blue;   /*背景颜色*/

选择器

基本选择器

标签\id\类\通用选择器

<style>
        div {      标签
            color: #ffef6b;
        }

        a {
            color: green;
        }


        span {
            color: #42ff68;
        }

        #sp1 {    id
            color: chartreuse;

        }

        .cai {    类
             color: #192aff;
        }

        .x1 {
             background: #3bff00;
        }
    
        
        * {
             background: #3bff00;
        }

    </style>


<body>

<!--<div >黄焖鸡米饭</div>-->
<!--<div>黄焖鸡排骨</div>-->

<div>黄焖鸡米饭
    <span class="cai">鸡</span>
    <span>米饭</span>
    <a href="xxxx">外卖连接</a>
</div>
<div>黄焖鸡排骨
    <span class="cai x1 x2">排骨</span>
    <span>米饭</span>
</div>
<span id="sp1">米饭</span>


</body>

排版标签代码

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

    <h1>段落1</h1>
<p>

    从学习p的第一天开始，就要死死记住：p标签是一个文本级标签，p里面只能放文字、图片、表单元素。其他的一律不能放。
错误写法：（把h系列的标签放到p里）</p>

<div> 从学习p的第一天开始，就要死死记住</div>
    <hr>
<div> 从学习p的第一天开始，就要死死记住</div>
<p>从学习p</p>



</body>
</html>

列表代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<ul >-->
<!--    <li>手机</li>-->
<!--    <li>电脑</li>-->
<!--    <li>iPad</li>-->
<!--</ul>-->

<!--<ul type="none">-->
<!--    <li>手机</li>-->
<!--    <li>电脑</li>-->
<!--    <li>iPad</li>-->
<!--</ul>-->
<!--<ul type="circle">-->
<!--    <li>手机</li>-->
<!--    <li>电脑</li>-->
<!--    <li>iPad</li>-->
<!--</ul>-->
<!--<ul type="square">-->
<!--    <li>手机</li>-->
<!--    <li>电脑</li>-->
<!--    <li>iPad</li>-->
<!--</ul>-->
<!--<ul type="disc">-->
<!--    <li>手机</li>-->
<!--    <li>电脑</li>-->
<!--    <li>iPad</li>-->
<!--</ul>-->


<!--<ol>-->
<!--    <li>手机</li>-->
<!--    <li>电脑</li>-->
<!--    <li>iPad</li>-->
<!--</ol>-->

<!--<ol type="1">-->
<!--    <li>手机</li>-->
<!--    <li>电脑</li>-->
<!--    <li>iPad</li>-->
<!--</ol>-->

<!--<ol type="a" start="25">-->
<!--    <li>手机</li>-->
<!--    <li>电脑</li>-->
<!--    <li>iPad</li>-->
<!--</ol>-->

<!--<ol type="A">-->
<!--    <li>手机</li>-->
<!--    <li>电脑</li>-->
<!--    <li>iPad</li>-->
<!--</ol>-->

<!--<ol type="I">-->
<!--    <li>手机</li>-->
<!--    <li>电脑</li>-->
<!--    <li>iPad</li>-->
<!--</ol>-->


<dl>
    <dt>城市</dt>
    <dd>北京</dd>
    <dd>上海</dd>
    <dd>深圳</dd>

    <dt>城市</dt>
    <dd>北京</dd>
    <dd>上海</dd>
    <dd>深圳</dd>
</dl>



</body>
</html>

表格代码

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

<table border="1" cellpadding="20px" cellspacing="20px">
    <thead>
    <tr align="left">
        <th> 序号</th>
        <th> 姓名</th>
        <th> 年龄</th>
    </tr>
    </thead>
    <tbody>
    <tr align="center" >
        <td>1</td>
        <td >alex</td>
        <td rowspan="2" valign="top">84</td>


    </tr>
    <tr align="center" valign="top">
        <td>2</td>
        <td >alex</td>


    </tr>
    <tr>
        <td>2</td>
        <td>wusir</td>
        <td rowspan="2">2208</td>

    </tr>
    </tbody>

</table>

<table border="1" cellpadding="20px" cellspacing="20px">

    <tbody>
    <tr align="center" valign="bottom">
        <td>1</td>
        <td >alex</td>
        <td >84</td>


    </tr>
    <tr align="center" valign="top">
        <td>2</td>
        <td >alex</td>


    </tr>
    <tr>
        <td>2</td>
        <td>wusir</td>
        <td rowspan="2">2208</td>

    </tr>
    </tbody>

</table>


</body>
</html>

表单代码

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

<form action="http://127.0.0.1:9999" >
<!--    <input type="text" name="user" placeholder="请输入用户名">   &lt;!&ndash;name:提交数据的key   value:值   placeholder：占位的内容 &ndash;&gt;-->
<!--    <input type="password" name="pwd">-->
<!--    <input type="radio" name="sex" value="1" checked > 男-->
<!--    <input type="radio" name="sex" value="2"> 女-->
<!--    <input type="checkbox" name="hobby" value="1" checked="checked"> 跳-->
<!--    <input type="checkbox" name="hobby" value="2"> 唱-->
<!--    <input type="checkbox" name="hobby" value="3"> rap-->
<!--    <input type="checkbox" name="hobby" value="4"> 篮球-->
    <!--    <input type="submit">-->

    <!--    <p>-->
    <!--        <label for="i1">用户名：</label><input id="i1" type="text" name="user" placeholder="请输入用户名">-->

    <!--    </p>-->
    <!--     <p>-->
    <!--        密码：<input type="password" name="pwd" >-->

    <!--    </p>-->

    <!--    <input type="hidden" name="alex" value="alexdsb">-->
    <!--    <input type="reset">-->
    <!--    <input type="button" value="提交"> &lt;!&ndash;  普通的按钮  &ndash;&gt;-->

<!--    <select name="city" id="" size="4" multiple>-->

<!--        <option value="1" selected="selected">北京</option>-->
<!--        <option value="2">上海</option>-->
<!--        <option value="3">深圳</option>-->

<!--    </select>-->


<!--    <input type="file" name="f1">-->
    <input type="text">

    <button>提交</button>


</form>

</body>
</html>

css引入代码

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


    <!--    &lt;!&ndash;外联引入：链接  使用较多  &ndash;&gt;-->
    <link rel="stylesheet" href="index.css">
    <!--    &lt;!&ndash;外联引入：导入&ndash;&gt;-->
    <!--    <style>-->
    <!--        @import url('index.css');-->
    <!--    </style>-->


</head>
<body>


<!--&lt;!&ndash;行内引入&ndash;&gt;-->
<!--<div >黄焖鸡米饭</div>-->
<!--<div>黄焖鸡排骨</div>-->

<div>黄焖鸡米饭
    <span class="cai">鸡</span>
    <span>米饭</span>
    <a href="xxxx">外卖连接</a>
</div>
<div>黄焖鸡排骨
    <span class="cai x1 x2">排骨</span>
    <span>米饭</span>
</div>
<span id="sp1">米饭</span>


</body>
</html>

day44

内容回顾

前后端怎么交互

浏览器发送一个请求到后端，后端处理逻辑，把结果（HTML文本）返回给浏览器。

前端

HTML 骨架 内容

css 样式

js 动态效果

HTML 超文本标记语言

标记 标签

分类

单边标记\双边标记

head

<meta>  编码 关键字 描述  
<title>标题的内容</title>  
link     style   script

body

内联(行内)标签

字体
    加粗  b   strong
    斜体  i  em 
    上下标   sup  sub 
    中划线 下划线   del s  u 
<span></span> 
<br>
<a href="链接" target="_blank" title >页面显示的内容</a>
href: 链接地址
    锚点： #id
target：打开方式
    _blank： 新建一个窗口
    _self:  当前窗口
title: 鼠标悬浮上显示的标题
<img src="图片的地址" alt='' title width="20px"  height="100%" >
src:   网络地址、本地地址（相对路径、绝对路径）
alt ：  链接地址有问题时提示的内容 
title: 鼠标悬浮上显示的标题
width： 设置图片的宽度
height：设置图片的高度  
width和height选择一个

特殊字符：

&nbsp: 空格

块级标签

h1 - h6

今日内容

块级标签

排版标签

p:一个文本级别的段落标签 前后有间距

P标签中不嵌套其他的块级标签

div 没有任何样式的块级标签

hr 分割线

列表

无序列表

type="原点的样式"

<!-- 样式 disc（实心圆、默认）、 circle（空心圆）、none（无）、square（方点）-->

<ul >
    <li>手机</li>
    <li>电脑</li>
    <li>iPad</li>
</ul>

<ul type="none">
    <li>手机</li>
    <li>电脑</li>
    <li>iPad</li>
</ul>
<ul type="circle">
    <li>手机</li>
    <li>电脑</li>
    <li>iPad</li>
</ul>
<ul type="square">
    <li>手机</li>
    <li>电脑</li>
    <li>iPad</li>
</ul>
有序列表

type="数字的样式" start =“起始值”（数字）

<!-- 样式 1（数字）、 a（小写字母）、A（大写）、I（罗马数字）-->

<ol>
    <li>手机</li>
    <li>电脑</li>
    <li>iPad</li>
</ol>

<ol type="1">
    <li>手机</li>
    <li>电脑</li>
    <li>iPad</li>
</ol>

<ol type="a" start="25">
    <li>手机</li>
    <li>电脑</li>
    <li>iPad</li>
</ol>

<ol type="A">
    <li>手机</li>
    <li>电脑</li>
    <li>iPad</li>
</ol>

<ol type="I">
    <li>手机</li>
    <li>电脑</li>
    <li>iPad</li>
</ol>
定义列表

dt 标题

dd 内容

<dl>
    <dt>城市</dt>
    <dd>北京</dd>
    <dd>上海</dd>
    <dd>深圳</dd>

    <dt>城市</dt>
    <dd>北京</dd>
    <dd>上海</dd>
    <dd>深圳</dd>
</dl>

表格

<!--有表头的表格-->
<!--tbale 嵌套 thead tbody 
    thead和tbody嵌套tr
    tr嵌套 th  td 
-->

<!--tbale 属性 
border 边框
cellpadding   元素和单元格的边距
cellspacing   单元格和边框的间距
-->

<!--tr 属性 
align   内容的水平排列  left  center  right
valign  内容的垂直排列  top middle bottom
-->
<!--td  属性 
rowspan   占几行
colspan   占几列
-->

<table border="1" cellpadding="20px" cellspacing="20px">
    <thead>
    <tr align="left">
        <th> 序号</th>
        <th> 姓名</th>
        <th> 年龄</th>
    </tr>
    </thead>
    <tbody>
    <tr align="center" valign="bottom">
        <td>1</td>
        <td >alex</td>
        <td >84</td>


    </tr>
    <tr align="center" valign="top">
        <td>2</td>
        <td >alex</td>


    </tr>
    <tr>
        <td>2</td>
        <td>wusir</td>
        <td rowspan="2">2208</td>

    </tr>
    </tbody>

</table>

<!-- 无表头的表格-->
<table border="1" cellpadding="20px" cellspacing="20px">
    
    <tbody>
    <tr align="center" valign="bottom">
        <td>1</td>
        <td >alex</td>
        <td >84</td>


    </tr>
    <tr align="center" valign="top">
        <td>2</td>
        <td >alex</td>


    </tr>
    <tr>
        <td>2</td>
        <td>wusir</td>
        <td rowspan="2">2208</td>

    </tr>
    </tbody>

</table>

表单

<!-- form 标签
action： 提交的地址  
-->

<!-- input 标签
type： 类型   
    text：普通文本
    password：密码 密文
    ra  dio：  单选框
    checkbox： 复选框
    submit： 提交按钮
能提交数据 input有name属性  有value值

-->

<button>提交</button>  
<!-- 
form表单中button和type=‘submit’的input的作用是一样的
-->


<form action="http://127.0.0.1:9999">
    <input type="text" name="user" placeholder="请输入用户名">   <!--name:提交数据的key   value:值   placeholder：占位的内容 -->
    <input type="password" name="pwd" value="3714">
    <input type="radio" name="sex" value="1"> 男
    <input type="radio" name="sex" value="2" checked  > 女  <!-- checked默认选中 -->
    <input type="checkbox" name="hobby" value="1"> 跳
    <input type="checkbox" name="hobby" value="2"> 唱
    <input type="checkbox" name="hobby" value="3"> rap
    <input type="checkbox" name="hobby" value="4"> 篮球
    <input type="submit">
    <button>提交</button  
    
</form>

label

<!--给input标签定义id  给label标签的for填上id-->
<label for="i1">用户名：</label>
<input id="i1" type="text" name="user" placeholder="请输入用户名">

其他的input

<input type="hidden" name="alex" value="alexdsb">   <!--  隐藏的input框  -->
<input type="reset"> <!--  重置按钮  -->
<input type="button" value="提交"> <!--  普通的按钮  -->
<button type="button">提交</button>  <!--  普通的按钮  -->
<input type="date">    <!--  日期格式  -->

select option

<!--下拉框 单选 -->
<!--size  框的大小 -->
<select name="city" id="" size="4" >
     <option value="1">北京</option>
     <option value="2"  selected >上海</option>  <!-- selected默认选中 -->
     <option value="3">深圳</option>
</select>

<!--下拉框 多选 -->
<!--size  框的大小 -->
<select name="city" id="" size="4"  multiple>
     <option value="1">北京</option>
     <option value="2">上海</option>
     <option value="3">深圳</option>
</select>

上传文件

<input type="file" name="f1">   
<form  enctype="multipart/form-data">  <!--编码指定为multipart/form-data-->

CSS

引入方式

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

    <!--内联引入-->
    <style>
        div {
            color: #ffef6b
        }

    </style>

    <!--外联引入：链接  使用较多  -->
        <link rel="stylesheet" href="index.css">
    <!--外联引入：导入-->
    <style>
        @import url('index.css');
    </style>


</head>
<body>


<!--行内引入-->
<div style="color: red">黄焖鸡米饭</div>
<div>黄焖鸡排骨</div>

</body>
</html>

简单的样式

 color: #ffef6b;      /*字体颜色*/
 width: 200px;        /*宽度*/
 height: 200px;       /*高度*/    
 background: blue;   /*背景颜色*/

选择器

基本选择器

标签\id\类\通用选择器

<style>
        div {      标签
            color: #ffef6b;
        }

        a {
            color: green;
        }


        span {
            color: #42ff68;
        }

        #sp1 {    id
            color: chartreuse;

        }

        .cai {    类
             color: #192aff;
        }

        .x1 {
             background: #3bff00;
        }
    
        
        * {
             background: #3bff00;
        }

    </style>


<body>

<!--<div >黄焖鸡米饭</div>-->
<!--<div>黄焖鸡排骨</div>-->

<div>黄焖鸡米饭
    <span class="cai">鸡</span>
    <span>米饭</span>
    <a href="xxxx">外卖连接</a>
</div>
<div>黄焖鸡排骨
    <span class="cai x1 x2">排骨</span>
    <span>米饭</span>
</div>
<span id="sp1">米饭</span>


</body>

高级选择器

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

    <style>
        p+a {
            color: red;
        }

    </style>

</head>
<body>


<div>
    <a>这是一个a0 </a>
    <p>这是一个p </p>
    <a >这是一个a1 </a>
    <a >这是一个a2 </a>
    <a>这是一个a3 </a>

</div>

</body>
</html>

选择器的优先级

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

    <style>


        /*#p1 {*/
        /*    color: green ;*/
        /*}*/

        .c1 {
            color: blue ;
        }

        p.c1  {
            color: red;
        }

        p.c2  {
            color: rgba(255,103,0,0);
        }

    </style>

</head>
<body>

<p id="p1" class="c1 c2 " >aaa</p>
<p>bbb</p>
<p>ccc</p>
<p>ddd</p>


</body>
</html>

字体

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

    <style>

        p {
            font-family: '宋体';
        }

        #p1 {
            font-size:100px;
            font-weight:900;
            font-family: '华文楷体','微软雅黑 Light','宋体';
        }

    </style>
</head>
<body>


<p>这是一个p标签</p>
<p id="p1">这是一个p标签</p>


</body>
</html>

文本

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

    <style>
        #p1 {
            background-color:yellow ;
            height: 80px;
            text-align: left;
            /*font-size: 18px;*/
            color: red;
            text-decoration: line-through;
            text-indent:2em;
            line-height: 80px;


        }

        a {
            text-decoration: none;

        }
    </style>

</head>
<body>

<u>这是一个p标签</u>
<s>这是一个p标签</s>

<p id="p1">这是一个p标签</p>
<p style="font-size: 18px">这是一个p标签</p>

<a href="">这是一个a标签</a>

</body>
</html>

文字的溢出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>text-overflow</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>
</head>
<body>
<div class="div0">各国领导人感谢中方作为东道主对各国参展给予的大力支持</div><br>
<div class="div1">各国领导人感谢中方作为东道主对各国参展给予的大力支持</div><br>
<div class="div2">各国领导人感谢中方作为东道主对各国参展给予的大力支持</div><br>
<div class="div3">各国领导人感谢中方作为东道主对各国参展给予的大力支持</div><br>
</body>
</html>

文字溢出

背景图片

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

    <style>

        div {
            /*background-color: red;*/
            /*background-image: url("1.png");*/
            /*background-repeat: no-repeat;*/
            /*background-position:right bottom;*/
            width: 900px;
            height: 900px;
            background: red url("1.png") no-repeat left center;
        }
    </style>

</head>
<body>

<div>
    <p>
        这是一个p标签

    </p>

</div>


</body>
</html>

边框的设置

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


    <style>

        div {
            background-color: red;
            width: 100px;
            height: 100px;
            /*border: 2px;*/
            /*border-color: black yellow;*/
            /*border-style: solid dotted ;*/
        /*  4个 方向  上 右 下 左
            2个   上下  左右
            1个  所有方法
        */
            /*border-left:2px ;*/
            /*border-left-color:yellow ;*/
            /*border-left-style:solid ;*/

            border: #3bff00 2px solid;


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


<div>
    <p>
        这是一个p标签

    </p>

</div>

</body>
</html>

块和行内的转换

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

    <style>
        span {
            display: block;
            background: #3bff00;
        }

        div {

            width: 100px;
            height: 100px;
            /*display: inline-block;*/
            background: #ff1cf2;
        }

        #div1 {
            display: none;

        }
    </style>

</head>
<body>

<span>行内</span><span>行内</span><span>行内</span>
<div id="div1">块1</div>
<div>块</div>


</body>
</html>

盒模型

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

    <style>

        div {
            background: #3bff00;
            height: 200px;
            width: 200px;
            padding: 20px;
            /*padding-top: 10px;*/
            border: 2px red solid;
            margin: 20px;
        }


    </style>

</head>
<body>

<div>块1</div>
<div style="margin-top: -30px" >块1</div>



</body>
</html>

day45

内容回顾

选择器

基本选择器

标签 div p span

id #id

类 class=‘xxx x2’ .xxx

通用选择器 * {}

高级选择器

后代 div p 找div标签下所有的p标签

子代 div>p 找div标签下子代的p标签

毗邻 div+p 找div标签下一个p标签

弟弟 div~p 找div标签后面所有的p标签

属性 [href] [href='www.baidu.com'] 找有属性为href的标签 找有属性href=www.baidu.com的标签

并集 div,p,span 找逗号左右所有的标签

交集 div.x1 找class=‘x1‘的div的标签

伪类 a:link 没有访问过的样式 a:visited 访问过后的样式 a:active 鼠标按下时的样式

    div:hover 鼠标悬浮上的样式

伪元素 p:before p标签内部之前 content 内容

        p:after  p标签内部之后 content 内容

        p:fistt-letter  一个元素的样式

选择器的优先级

行内（1000）  > id(100) > 类（10） > 标签（1） >继承（0）
优先级会累加但是不进位
!important 最高级别

颜色的表示

rgb  光学三原色  红色 绿色 蓝色
rgb(0,0,0)   黑色  rgb(255,255,255)   白色
十六进制  #000000 - #ffffff    #000-#fff
单词  green red  
rgba(0,0,0,0)   0 完全透明 1 完全不透明

字体

font-family：’宋体‘,'微软雅黑'；
font-size:   字体大小  默认16px;
font-weight:  粗细 sold;  100-900   400
color:  字体颜色

文本

text-aligin:  文字水平排列  left  center right 
line-hight : 行高
text-indent:  缩进  2em
text-decoration: underline  overline line-through none

背景图片

background-color : 背景颜色
background-imge : 背景图片  URL('')
background-repeat: repeat  repeat-x  repeat-y no-repeat 
background-position : 12px  12px  \   left right center   top center bottom
background-size:  图片大小的设置  px  %  cover 整个覆盖 contain 包含在内
background: 颜色 图片 重复 位置；

边框

border-style: solid 实心  double 双线  dotted 实心圆  dashed虚线
border-color：
border-size：
border-color： red green;   red green gray yellow; 
border-botom-color
border : 1px green solid ;

行内和块的元素

display： inline 基本不用
display：block  块    
display：inline-block  行内块  
display：none   无  不显示 不占位

盒模型

width:   内容的宽
height： 内容的高
border：  边框
padding： 内边距  
margin： 外边距

塌陷现象 ：上下时只取最大的margin

今日内容

overflow

overflow: visible;  可见  默认
overflow: hidden;  隐藏
overflow: auto;    超出时出现滚动条
overflow: scroll;  显示滚动条

浮动

float: right; left ： 脱离文档流 先浮动的先占位，后面的紧贴着
清除浮动：
.clear{
            clear: both;
        }
<div id="father" style="">
    <div id="d1" class="box"></div>
    <div class="box"></div>
    <div class="clear"></div>
</div>
伪元素清除法：
.clearfix:after{
      content: '';
      display: block;
      clear: both;
   }

定位

相对定位 relative  相对于原位置进行定位，还占原来的位置
绝对定位 absolute  相对于已经有相对定位的父标签的定位\相对于body的定位 不占原来的位置
固定定位：fixed  相对于窗口的位置  
  top: ;
  left: ;
  right: ;
  bottom: ;

z-index

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

javascript 编程语言

ECMAScript 标准化的规范

DOM document object model 文档对象模型

BOM bowser object model 浏览器对象模型

JS引入

写在html script标签内部
<script>
    alert('hello,world!')
</script>

变量

变量名  数字 字母 下划线 $ 
使用var 定义变量  var a =1
var a  ;  表示声明了一个变量  undefined

注释

当行注释  //
多行注释  /*  
*/

输出和输入

alert()  弹窗
console.log()  控制台输出

prompt('请输入')
"1111111"
var a = prompt('请输入')

基本的数据类型

number 数字

表示整数 浮点数   NaN  not a number

a.toFixed(2)   保留小数位数 四舍五入

string 字符串

var  a  = '单引号'
var  a  = “双引号“

布尔值 boolean

true
false

空元素 null 未定义undefined

var a = null;
var a ;  undefined

数组

var a = [1,2,3]
var a = new Array()

对象

var a = {name:'alex',age:87}
var a = {'name':'alex','age':87}
取值  a['name']
赋值  a['name'] = 'alexdsb'

浮动代码

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

    <style>
        .box {
            height: 100px;
            width: 100px;
            background-color: green;
            border: red solid;
                        float: right;

        }

        #d1 {
            background-color: #4c3880;
        }

        #father {
            background-color: #ff1cf2;

        }

        .clear{
            clear: both;
        }

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


    </style>

</head>
<body>

<div id="father" style=""  class="clearfix">
    <div id="d1" class="box"></div>
    <div class="box"></div>
<!--    <div class="clear"></div>-->
</div>
<div style="height: 300px;background-color:#000;"></div>



</body>
</html>

定位代码

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


    <style>
        .box {
            position: relative;
            height: 150px;
            width: 100px;
            background-color: green;
            border: #433aff solid 1px;
            /*display: inline-block;*/
            z-index: 2;
        }

        .father {
            position: relative;
            height: 110px;
            width: 200px;
            background-color: #7a8053;
            /*z-index: 1;*/
        }

        .box1 {
            position: relative;
            width: 200px;
            height: 200px;
            z-index: 3 ;
        }

    </style>
</head>
<body>

<div class="box"></div>
<div class="father">
    <div class="box box1" style="background-color: #ff1cf2"></div>
</div>

<div class="box" style="background-color: red"></div>



</body>
</html>

day46

内容回顾

css

overflow

溢出：
visible 可见
hidden  隐藏
auto  不超出时正常  超出了有滚动条
scroll 滚动条

浮动

float ： left  right 
浮动起来脱离文档流  不占位置  
清除浮动：clear:both
伪元素清除法：
    .clearfix {
        content:'';
        clear:both;
        display:block;
    }
 overflow: hidden;  给父标签加

定位

position: relative absolute fixed 
top 
left
rigt
bottom

相对定位: 相对于原来的位置的定位  占用原来的位置 
绝对定位： 相对于已经定位的父标签/html页面的位置的定位  不占原来的位置  
固定定位： 相对于窗口的位置

z-index

显示层级的优先级  
1. 数值越大越在上 
2. 没有单位
3. 从父现象：父亲的z-index值小，自己的z-index值再大也没有用 
4. 浮动的元素没有z-index

javascript

 ECMAScript  标准化的规则    ES5  ES6 

 DOM   

 BOM

引入

方式一：
<script> 
   js代码
</script>

方式二：
xxxx.js
<script src='xxxx.js'></script>

js的标准

结束符  ; 
注释  单行注释 //
     多行注释  /* 多行   */

变量

变量名   数字 字母 下划线 $    数字不能开头 区分大小写
定义一个变量  var 
var a ;  声明变量  undefined 
a= 1;
var a = 1;

输入输出

alert('弹出的窗口')
console.log（‘xxxx’）

var  a = prompt('提示')

基本数据类型

number
var a = 1;
var b = 1.1;
typeof(a)  number
NaN
string
var a = '单引号'
var a = "双引号"
a[0]  
属性：  a.length 长度
方法： 
    trim()       左右去空白
    a.indexOf('a')   根据字符查找索引    
    a.concat('xxxxxx')   字符串的拼接
    a.slice(0,3)    切片
    a.split('',2)   分割   数字代表取前几个元素
    a.toUpperCase()  变大写
    a.toLowerCase()  变小写
boolean
true 
false
null
定义一个空
undefined
声明了 但是没有定义

内置对象类型

Array 数组
var a = [1,2,3,4,5];
var a = new Array();
a[0] =1;

属性： length 长度
方法：
    push  从后面插入
    unshfit  从前面插入
    pop   从后面删除  支持索引
    shfit  从前面删除
    a.concat('1','2') a.concat([1,2,3,4])  拼接列表
    a.slice(0,3) 切片
    a.join(',')  拼接元素
    a.sort() 排序
    a.reverse()  翻转
    a.splice(0,0,items)    删除的位置 删除的个数  替换的元素
自定义对象
var a  = {}
var a = { name:'alex'  }
取值  a['name']
赋值  a['age'] = 73

今日内容

数据类型的转换

字符串转数字

parseInt   字符串转整形
parseFloat   字符串转浮点型
Number(null)   0   
Number(undefined)  NaN

数字转字符串

String(111.1111)

var a = 11
var b = a.toString()

转布尔值

Boolean('')

true   []  {}
false  0 ‘’  null  undefined

运算符

赋值运算符

= += -= *= /=

算数运算符

+ - * /  % 
a++  ++a  自加1

比较运算符

>  <  >=  <=
==  !=
===  !==
// != NaN 值为true

字符串 + 数字 字符串

字符串 - 数字 = 数字

逻辑运算

或 与 非

与 1 && 2

或 false || true

非 !true

流程控制

条件 （）
代码块 {}
if
    if (2>1){
        console.log(1)
    }

    if (2 < 1) {
        console.log(1)
    } else {
        console.log(2)
    }
    
    
    if (2 < 1) {
        console.log(1)
    } else if (2 > 1) {
        console.log(3)
    } else {
        console.log(2)
    }
case switch
    var error_num = 1;

    switch (error_num) {
        
        case 1:
            console.log(1);
            break;
        case 2:
            console.log(2);
            break;
        default:
            console.log('xxxx');
    }
while
while(i<=9){ //判断循环条件
    console.log(i);
    i++; //更新循环条件
}
do - while 至少执行一次
do{

    console.log(i)
    i++;//更新循环条件

}while (i<10)
for
var a = [1,2]

for (i in a ){
    //  i 索引
    //  a[i]
}

for (var i=0;i<a.length;i++){
   //  a[i] 
}
三元运算
var c = a>b ? a:b  //如果a>b成立返回a，否则返回b

函数

python 

def 函数名():
    函数体
    return 1
函数名()

js 
function  函数名(参数){
    函数体
    return 返回值

}

arguments 伪数组   接受所有的参数

匿名函数

function (参数){
    函数体
    return 返回值
}

自执行函数
(函数)(参数，参数)

函数
函数（参数）
var c = (function (a,b){
    console.log(arguments)
    console.log(a,b)
    return 1
})(1,2)


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

正则表达式

var reg = RegExp('\\d')   
var reg = /\d/
reg.test('sss1')   能匹配成功返回true 不能返回false


字符串中使用正则
var a = 'alex is a dsb'
var reg = /a/

a.match(reg)  从左到右匹配一次 
a.match(/a/g) g 代表获取所有
a.match(/a/ig)  i 忽略大小写
a.search(/a/)   获取索引值 只找一个  匹配到就是索引 匹配不到就是-1
a.replace(/a/ig,'123')   替换  ig替换所有并且忽略大小写


问题1：
var reg =  /\d/g
reg.test('a1b2c3')
true
reg.test('a1b2c3')
true
reg.test('a1b2c3')
true
reg.test('a1b2c3')
false

问题2 
var reg =  /\d/
reg.test()   #不写内容相当于写的undefined

day47

内容回顾

js

引入

在HTML中写标签
<script>
    js代码
</script>

引入文件

<script src='js文件' ></script>

//  link  href

变量

var 声明变量
数字 下划线 字母  $  
    不能数字开通  不能使用关键

基本的数据类型

number

1 1.222

string
''   ""  
属性： length 
方法：trim()  charAt()  indexOf()  split()   slice()  concat()
boolean

true [] {}

false '' null undefined NaN

null 定义的空

undefined 未定义

内置的对象

Array
var a  =  [1,2,3,4,5]
var a = new Array()
a[1]  // 2 
a[1] = 3  
属性： length 
方法: push()  pop()  unshfit()  shift() concat()  join(',,')  slice() sort() reverse() 
splice(1,2,4,4,5,6,7)
自定义的对象
var  a = { 'name':'alex','age':84 }
a['name']  //  'alex'
a['name']  ='alexdsb'  //  'alex'

数据类型的转换

数字转字符串
num.toString()
String(num)
字符串转数字
parseInt(s)   //  NaN  
parseFloat(s) 
Number（s）   //   null  _> 0   undefined NaN

转化成布尔值
Boolean()

运算符

赋值运算符

= += -+ *= /=

算数运算符
+ - * /  %  ++ --
var a = 1;
var b = a++    // b 1 a 2  
var a = 1;
var b = ++a    // b 2 a 2
比较运算
> < >= <= 
==  != 
===  !==
逻辑运算
或  ||    // or 
与  &&    // and     
非  !     // not
流程控制

if判断

if (条件){
 // 条件满足时执行的代码
}

if (条件){
    // 条件满足时执行的代码
}else {
    // 条件不满足时执行的代码
}


if (条件){
    // 条件满足时执行的代码
else  if (条件){
    // 条件满足时执行的代码
}  
}else {
    // 条件不满足时执行的代码
}

switch case

switch (值){
    case 1 :
        // 要执行的代码
        break;
    case 2 :
        // 要执行的代码
        break;
    default:
        // 值不匹配的时候执行的代码
}

while

while (条件) {

    // 条件满足时执行的代码
}

do - while

do {
    // 不管条件是佛满足先执行一次，如果满足条件继续执行的代码
}while (条件)

for

for ( i in arr ) {

    // i 获取到索引

}

for (var i=0;i<arr.length;i++) {

    // i 是自己声明的索引
    //  执行完代码后 i自增
}

三元运算：

var a =  条件 ？   条件成立时的值：条件不成立时的值
//   a =  条件成立时的值  if  条件 else 条件不成立时的值

函数

function 函数名（参数）{

    // 函数体
    return 返回值  //  [1,2,3,4]
}
函数名（参数）

匿名函数
function （参数）{

    // 函数体
    return 返回值  //  [1,2,3,4]
}

自执行函数

（function 函数名（参数）{

    // 函数体
    return 返回值  //  [1,2,3,4]
}）（参数，参数）

//  argumenets  接受了所有的参数

正则表达式

var reg = RegExp('[0-9]')
var reg = RegExp('\\d')
var reg = /\d/
reg.test('字符串')  //  判断字符中是否包含正则表达式的内容 

字符串的正则的应用
var  a ='alex is a big sb'
a.match(/a/)   // a.match(/a/g)    a.match(/a/gi)      g查找所有  i忽略大小写
a.search(/a/) // 匹配元素的索引
a.replace(/a/,'777') // 替换掉匹配了的元素

问题1：
var reg = /\d/g
reg.test('a1b2c3')
true
reg.test('a1b2c3')
true
reg.test('a1b2c3')
true
reg.test('a1b2c3')
false


问题2：
var reg = /\w{5,10}/
undefined
reg.test()  //  不写内容 就是'undefined'
true

今日内容

DOM

document object model 文档对象模型

查找元素

直接查找
document.getElementById('div1')   // 通过ID查找  返回一个节点
document.getElementsByClassName('son')  // 通过类名查找  返回一个对象 对象中包含多个节点
document.getElementsByTagName('div')  /// 通过标签名查找
间接查找
节点.parentNode   // 找到父节点
节点.children    // 找子节点  多个节点 
节点.firstElementChild  // 找第一个子节点 
节点.lastElementChild // 找最后一个子节点 
节点.nextElementSibling  //找下一个兄弟节点
节点.previousElementSibling  //找上一个兄弟节点
节点的属性操作
节点.getAttribute('属性')  //获取属性
节点.setAttribute('属性','值')  //设置属性
节点.removeAttribute('属性')  //删除属性
节点的文本操作
节点.innerText  // 标签的文本内容
节点.innerHTML  // 标签内部的HTML文本

节点.innerText='设置的文本'    // 标签的文本内容
节点.innerHTML='设置HTML的文本'  // 标签内部的html的文本
节点的值操作
//  input  select textarea
节点.value  // 获取节点的值 
节点.value = '值'  // 设置节点的值
节点样式的操作
节点.style // 所有的样式   只有行内样式才能拿多
节点.style.样式名称  
节点.style.样式名称   = '值'  // 设置样式
节点类的操作
节点.classList                   // 节点所有的class 
节点.classList.add（'类名'）      // 给节点添加一个类
节点.classList.remove（'类名'）   // 给节点删除一个类
节点的操作
document.createElement('标签的名字')   //  创建一个标签节点   div  a  span 

添加节点到文档中
父节点.appendChild(子节点)   // 添加一个子节点到父节点的后面
父节点.insertBefore(新节点,父节点的子节点)   // 添加一个子节点到父节中的指定子节点前

删除节点
父节点.removeChild(子节点) // 通过父节点删除子节点


替换节点
节点.replaceChild(新节点,节点的子节点)

复制节点
节点.cloneNode()   //  不写数字或者0 只拷贝节点
节点.cloneNode(1)   // 拷贝节点和它的子孙节点

事件

事件的绑定
// 方式一
<div onclick="alert('你点我了')">
    事件示例
</div>

// 方式二
<div onclick="func()">
    事件示例2
</div>


<script>
    function func() {
        alert('你点我了')
        alert('你还点')
    }

</script>

// 方式三
<div id="div1">
    事件示例3
</div>

<script>

    var div1 = document.getElementById('div1')


    div1.onclick = function () {
        alert('你点我了');
        alert('你还点');
        alert('你还点!!!');
    }


</script>
事件的种类
属性 当以下情况发生时，出现此事件
onblur 元素失去焦点
onchange 用户改变域的内容
onclick 鼠标点击某个对象
ondblclick 鼠标双击某个对象
onerror 当加载文档或图像时发生某个错误
onfocus 元素获得焦点
onkeydown 某个键盘的键被按下
onkeyup 某个键盘的键被松开
onload 某个页面或图像被完成加载
onmousemove 鼠标被移动
onmouseout 鼠标从某元素移开
onmouseover 鼠标被移到某元素之上
onmouseup 某个鼠标按键被松开
onreset 重置按钮被点击
onresize 窗口或框架被调整尺寸
onselect 文本被选定
onsubmit 提交按钮被点击

滚动事件：

<script>

    //实施监听滚动事件
    window.onscroll = function () {
        console.log(1111)
        console.log('上' + document.documentElement.scrollTop)
        console.log('左' + document.documentElement.scrollLeft)
        console.log('宽' + document.documentElement.scrollWidth)
        console.log('高' + document.documentElement.scrollHeight)
    }
</script>

BOM

browser object model

窗口

打开新窗口
window.open(url,target)
关闭窗口 
window.close()  // 只能关闭用open打开的窗口

窗口的宽高
window.innerHeight  高度
window.innerWidth   宽度

定时器 **

定时器 ** 
// setTimeout  某段时间结束后触发执行
 function func(){
        alert('是否已满18岁')
    }
    
 setTimeout(func,2000)

// setInterval  设置时间间隔的定时器 每隔一段时间要触发执行函数
var ret= setInterval(func, 500);  // 开启定时器
clearInterval(ret)  // 关闭定时器

location **

location.href // 当前的地址
location.href = '地址'  // 当前页面会跳转到新页面

dom代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="div1"  class="father">
    <div id="son1" class="son b1">
        <a href="" id="diva"></a>
    </div>
    <div id="son2" class="son">
        <img src="" alt="">
    </div>
</div>

<script>

    var div1 = document.getElementById('div1')
    // console.log(div1)

    var son = document.getElementsByClassName('son')
    console.log(son)

    // var son = document.getElementsByTagName('div')
    // console.log(son)




</script>

</body>
</html>

值的操作代码

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

<input type="text" id="i1" >

<select id="s2">
    <option value="1">北京</option>
    <option value="2">上海</option>
    <option value="3">深圳</option>
</select>

<textarea id="t1"></textarea>

<script>
    var i1= document.getElementById('i1');
    var s1= document.getElementById('s1');
    var t1= document.getElementById('t1');
</script>


</body>
</html>

类和样式的操作

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

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

        .b1 {
            background-color: green;

        }

    </style>

</head>
<body>
<div id="div1"  class="father">
    <div id="son1" class="son b1" >
        <a href="" id="diva"></a>
    </div>
    <div id="son2" class="son">
        <img src="" alt="">
    </div>
</div>

<script>


</script>

</body>
</html>

时间的绑定

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

<div onclick="alert('你点我了')">
    事件示例
</div>


<div onclick="func()">
    事件示例2
</div>


<script>
    function func() {
        alert('你点我了')
        alert('你还点')
    }

</script>

<div id="div1">
    事件示例3
</div>


<script>

    var div1 = document.getElementById('div1')


    div1.onclick = function () {
        alert('你点我了');
        alert('你还点');
        alert('你还点!!!');
    }


</script>

<input type="text">


</body>
</html>

滚动代码

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

<p>滚动</p>
<p>滚动</p>
<p>滚动</p>
<p>滚动</p>
<p>滚动</p>
<p>滚动</p>
<p>滚动</p>
<p>滚动</p>
<p>滚动</p>
<p>滚动</p>
<p>滚动</p>
<p>滚动</p>




<script>
    // s = document.getElementById('scroll');

    //实施监听滚动事件
    window.onscroll = function () {
        console.log(1111)
        console.log('上' + document.documentElement.scrollTop)
        console.log('左' + document.documentElement.scrollLeft)
        console.log('宽' + document.documentElement.scrollWidth)
        console.log('高' + document.documentElement.scrollHeight)


    }

</script>


</body>
</html>

day48

内容回顾

DOM

dom数

整个HTML就是一个数  多个节点
节点含的内容:本身的内容 属性 关系

查找节点

直接查找
var 节点 = document.getElementById('id) 通过id查找返回一个
var 节点 = document.getElementsByClassName('类型') 通过类名查找  返回多个 按索引拿一个
var 节点 = document.getElementsByTagName('div') 通过标签名查找  返回多个 按照索引拿一个
间接查找
节点.children   //多个子节点
节点.firstElementChild //父节点下的第一个子节点
节点.lastElementChild //父节点下的最后一个子节点

节点.parentNode //父节点

节点.nextElementSibling //下一个兄弟节点
节点.previousElementSibling//前一个兄弟节点

属性的操作

节点.getAttribute("属性名")//获取属性
节点.setAttribute('属性名,'属性值')//设置属性
节点.removeAttribute('属性名') //删除属性
文本的操作
节点.innerText //节点中的内容
节点.innerText = '文本'  //节点中的内容   不识别标签


节点.innerHTML //节点中的HTML文本
节点.innerHTML = '文本'   ..节点中的HTML文本   识别标签
值的操作
input    select   textarea
节点.value   //获取节点的值
节点.value = '值'  //设置节点的值
样式的操作
节点.style.样式属性  //获取样式的值   只能获取行内样式
节点.style.样式属性 = '值' //设置样式的值
类的操作
节点.classList   //查找类的名称
节点.classList.add('类名')  //添加
节点.classList.remove('类名') //删除
节点.classList.toggle('类名') //转换  存在的时候删除.没有的时候添加
节点.classList.contains('类名') //包含

节点的操作

document.createElement('标签名')  // 创建标签节点
父节点.appendChild(子节点)  //  添加节点到父节点后面
父节点.insertBefore(子节点，父节点中的子节点  )  //  添加节点到某个子节点的前面
父节点.removeChild（子节点）  // 通过某个父节点删除子节点
父节点.replaceChild(新节点，替换的节点)   // 替换节点
节点.cloneNode(值) //  复制节点   值0 只复制该节点  值1  复制所有的子孙节点

事件

绑定事件
<button id = 'b1'><button>
方式一
<script>
    var b1 = document.getElementById('b1')
    b1.onclick = function (){   
        // 点击事件后要执行的代码  
    }
<script>
方式二
<button id='b1' onclick='fn()'><button/>

<script>
    function fn(){
    
        // 点击事件后要执行的代码  
    }
</script>
常用事件
onclick      鼠标单击
onfocus      获取焦点
onblur       失去焦点
onmouseover  鼠标悬浮
onmouseout   鼠标移出
onsubmit     提交表单触发
onslecet     下拉框选中
onchange     文本下拉框改变时
onkeyup      键松开
onload       文档图片加载完成
onscroll     滚动条滚动

BOM

窗口

window.open('url地址',打开方式)
window.close() // 只能关闭用open打开的窗口

定时器(重点)

//  每隔一段时间要执行一次操作
var 定时器的id = setInterval(函数,毫秒数)   //开启定时器每隔一段时间执行函数
clearInterval(定时器的id)   //关闭定时器

// 一段时间后再执行函数
var 定时器的id = setTimeout(函数,毫秒数) //开启定时器时间到了在执行函数
clearTimeout(定时器的id) //关闭定时器

location**

location.href //当前的地址
location.href = '新的地址'  //跳转到新地址

location.reload()  //刷新页面

history

history.back() //后退
history.forward() //前进
history.go() // 0 刷新  -1 后退  1前进

今日内容

博客:https://www.cnblogs.com/maple-shaw/articles/6972913.html

jQuery的优点

  1. 浏览器的兼容性好
  2. 隐式循环
  3. 链式编程

Jquery对象和DOM对象的关系,转换

Jquery对象内部封装DOM对象,方法

DOM对象 ——》 Jquery对象
Jquery（DOM对象）     $（DOM对象）  
Jquery对象 ——》 DOM对象
Jquery对象[索引]      $（DOM对象）[]

Jquery 和 $ 是一个东西

jQuery的选择器

基本选择器

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

$('#id')
$('.类名')
$('标签名')
$('*')  

交集选择器 
$('li.city#l1')
并集选择器
$('div,li,a')

层级选择器

后代选择器  空格  自带选择器>    毗邻选择+    弟弟选择器~
$('ul li')     // 选择ul 下的所有li标签
$('ul>a')      //选择ul 下的子代中的a标签
$('#l1+li')    //选择id为l1的标签后的一个li标签
$('#l1~li')    //选择id为l1的标签后的所有的li标签

属性选择器

$('[属性]')
$('标签[属性]')  //选择某个包含某个属性的标签
$('[属性="值"]')
$('[属性$="值"]') //属性结尾为某个值的标签
$('[属性A="值"]') //属性开头为某个标签
$('[属性*="值"]')//属性包含某个值标签

jQuery的筛选器

基本筛选器

$('选择器:帅选器')
$('选择器:first') 第一个 
$('选择器:last')  最后一个
:eq(索引)  等于某索引的标签
:gt(索引)  大于某索引的标签
:lt(索引)  小于某索引的标签
:odd   奇数
:even  偶数
:not(选择器)   //在当前的标签内排除某些标签
:has("选择器")  获取一个包含子代对象的父对象

type筛选器

$(':text')
$(':radio')
$(':checkbox')
$(':password')
$(':submit')
$(':button')
$(':file')
$(':reset')
注意： date 不支持

状态选择器

$(':disabled')   // 禁用的标签
$(':enabled')   //  可使用的标签
$(':checked')    // radio、checkbox、select（option） 选中的标签
$(':selected')   // select 选中的option标签

jQuery的筛选器方法

.children()  // 子代
.parent()   //  父代
.parents()   // 父辈们
.parentsUntil('选择器')   // 找父辈们，直达某个标签，且不包含该标签

.siblings()  // 所有兄弟标签
.prev()   // 上一个
.prevAll()   // 前面所有的兄弟
.prevUntil()   // 前面的兄弟到某个标签位置


.next()   // 下一个
.nextAll()   // 后面所有的兄弟
.nextUntil()   // 后面的兄弟到某个标签位置
first()     第一个
last()      最后一个
eq()        等于
has()  //  $('li').has('a')    选择一个包含a标签的li标签
find()  //  $('li').find('a')  在li标签下找所有的a标签
not()  //  在所有的标签内排除某些标签
filter()  // 获取一些满足条件的标签  交集选择器

day49

补充内容

1.循环多个元素时

var ul_li = $('li')
for (let i=0;i<ul_li.length;i++){
    console.log('li',ul_li[i])
}     // let 声明的变量只能在代码跨中生效

2.局部变量 全局变量

function f(){
    var b = 2;  //局部变量
    let c = 3;  //在当前代码块生效
    d = 4;
}

内容回顾

jquery

jquery是一个高度封装了js的库
jq 封装 dom对象\方法
$ == jQuery

引入方式

<script src="jquery.3.4.1.js"> </script>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"> </script>
$('选择器') jQuery('选择器')

dom对象 —— 》  jq对象
$(dom对象)


jq对象 —— 》 dom对象
jq对象[index]

jquery选择器

$('选择器')

基本选择器

通用选择器  $('*')
标签选择器  $('div')  
id选择器   $('#id')
类选择器   $('.类名')

交集选择器  $('div.类名') $('div#id')
并集选择器  $('div,.类名')

层级选择器

后代选择器  $('div p')
子代选择器  $('div>p')
毗邻选择器  $('div+p')  
弟弟选择器  $('div~p')

属性选择器

$('[属性]')
$('[属性="值"]')
$('[属性!="值"]')
$('[属性$="值"]')
$('[属性^="值"]')
$('[属性*="值"]')

jquery筛选器

$('选择器:筛选器')

:first  第一个
:last   最后一个
:eq(index)  按照索引取
:gt(index)  索引大于index的对象
:lt(index)  索引小于index的对象
:odd   奇数
:even  偶数
:not(‘选择器’)   排除选择器的其他的对象 排除某些
:has（'选择器'）  获取一个包含子代对象的父对象

表单

:text  password radio checkbox submit button file reset date(用不了)
:disabled  enabled   checked(radio\checkbox\select(option)) selected(option) 

$(':checkbox:checked')  // 选择已选中的checkbox
$(':selected')

jquery筛选器方法

子代: .children()
父亲： .parent（）  .parents()  .parentsUntil('选择器') 
兄弟： siblings()
弟弟： next()  nextAll()  nextUntil('选择器')
哥哥： prev()  prevAll()  prevUntil('选择器')
 
first
last
eq
has     获取一个包含子代对象的父对象
not     排除选择器的其他的对象 排除某些
filter  交集选择器
find    找子代

今日内容

事件的绑定

<button>按钮1</button>
<button>按钮2</button>

<script>
    $('button').click(function () {
        alert('你点我干啥')
        alert('点你咋地')
        alert('再点一个试试')
    })

</script>

jQuery对象的操作

文本的操作

.text()     // 获取标签的内容
.text(内容)  // 设置标签的内容


.html()       // 获取标签的内容
.html(HTML标签文本)  // 设置标签的内容
.html(DOM对象)  // 设置标签的内容
.html(jq对象)  // 设置标签的内容

标签的操作

添加   //  js  父节点.appendChild(新的节点)  父节点.insertBefore(新的节点,参考节点) 
父子关系：
    添加到后面
    a.append（b）     在a节点孩子中添加一个b
    // a 父节点  b 新添加的子节点
    // a 必须是jq对象 b  （标签字符串、dom对象、jq对象 ）

    a.appendTo(b)    把a节点添加到b的孩子中
    // b 父节点  a 新添加的子节点
    // a 必须是jq对象  b  （选择器、dom对象、jq对象 ）
    添加到前面
    a.prepend(b)   b.prependTo(a)
兄弟关系：
    a.after(b)    在a的后面添加一个b   b.insertAfter(a)   把b添加到a的后面
    a.before(b)   在a的前面添加一个b   b.insertBefore(a)  把b添加到a的前面
 
    
// 操作同一个对象时，操作多次，相当于是移动的效果。
删除 remove detach empty

remove  // 删除标签并且删除事件  返回值是标签对象
detach  // 删除标签，但是保留事件  返回值是标签对象
empty   // 清空标签内容，但是保留标签本身

替换

a.replaceWith(b)   //  用b替换a标签
a.replaceAll(b)    //  用a替换所有的b  (选择器、jq对象、dom对象)

拷贝
clone(false)  // 只拷贝标签
clone(true)  // 拷贝标签也拷贝事件

属性的操作

普通属性
.attr('属性')  // 获取属性的值
.attr('属性','值')  // 设置单个属性的值
.attr({'属性'：'值'，'属性2':'值'})  // 设置多个属性的值

removeAttr('属性')   // 删除单一属性
值
input  select textarea 

val（）  // 获取值
val（'值'）  // 设置值


//  radio  checkbox  select  是否选中使用prop 不建议attr
.prop('属性')  // 获取属性的值
.prop('checked',true)  // checked 变为选中状态
.prop('checked',false)  // checked 变为未选中状态
类
addClass()     //  添加类 
removeClass()  //  删除类
toggleClass()  // 切换类

事件绑定代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.3.4.1.js"></script>
</head>
<body>

<button>按钮1</button>
<button>按钮2</button>

<script>
    $('button').click(function () {
        alert('你点我干啥')
        alert('点你咋地')
        alert('再点一个试试')
    })

</script>


</body>
</html>

文件操作代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.3.4.1.js"></script>
</head>
<body>

<p></p>
<p></p>

<script>
    var p = document.getElementsByTagName('p')[0];
    p.innerText = '这是第一个p标签';
    p.innerHTML = '<a href="http://www.mi.com">这是一个a标签</a>';

    var t = $('p:first').text() ; // 获取标签的内容
    console.log(t);

    var last = $('p:last');
    var a = document.createElement('a')
    a.innerText ='这是第二个a标签'
    a.setAttribute('href','http://www.mi.com')


    last.html($(a)) // 设置标签的html



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

添加标签代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.3.4.1.js"></script>
</head>
<body>
<div>
    <ul id="u1">;
        <li>1</li>
        <li id="l1">2</li>
        <li>3</li>
        <li>4</li>
    </ul>
</div>
<script>
    var fa = $('ul');
    var l1 = $('#l1');
    var li = document.createElement('li');
    li.innerText =5;

    $(li).insertAfter(l1)







</script>


</body>
</html>

删除标签代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.3.4.1.js"></script>
</head>
<body>

<button id="b1">按钮</button>

<ul>
    <li>11</li>
    <li>22</li>
    <li id="l3" >33</li>

</ul>

<script>
    // $('#b1').click(function () {
    //         alert('点我试试')
    //     }
    // )
    //

   var l4 = $('<li>')
    l4.text(44)


</script>

</body>
</html>

拷贝标签代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <script src="jquery.3.4.1.js"></script>

</head>
<body>
<button>按钮</button>

</body>
<script>
    $('button').click(function () {
        var btn = $(this).clone()
        $('body').append(btn)
    })

</script>

</html>

属性的操作代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.3.4.1.js"></script>

</head>
<body>

<a href="" ></a>
<input type="text">
<select >
    <option value="1" selected>北京</option>
    <option value="2">上海</option>
</select>
<textarea name="" id="" cols="30" rows="10"></textarea>

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





</body>
</html>

类的操作代码

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

    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: green;

        }

        .red {
            background-color: red;
        }

        .big {
             width: 200px;
            height: 200px;
        }

        .hide {
            display: none;
        }

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

</head>
<body>

<div></div>


</body>
</html>

菜单代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
        }
        .header{
            height: 48px;
            background-color: yellow;
        }
        .body{
            min-height: 500px;
        }
        .menu{
            width: 20%;
            min-height: 500px;
            float: left;
        }
        .content{
            width: 80%;
            background-color: #dddddd;
            min-height: 500px;
            float: left;
        }
        .menu .item .tou{
            border: 1px solid #4c3880;
            padding: 8px 0;
            background-color: brown;
        }
        .hide{
            display: none;
        }
    </style>
    
    
</head>
<body>

<div class="header"></div>
<div class="body">
    <div class="menu">
         <div class="item">
            <div class="tou" >蔬菜</div>
            <div class="ti hide">
                <a>胡萝卜</a>
                <a>皇冠</a>
                <a>茄子</a>
            </div>
        </div>
        <div class="item">
            <div class="tou">水果</div>
            <div class="ti hide">
                <a>香蕉</a>
                <a>苹果</a>
            </div>
        </div>
        <div class="item">
            <div class="tou" >蔬菜</div>
            <div class="ti hide">
                <a>胡萝卜</a>
                <a>皇冠</a>
                <a>茄子</a>
            </div>
        </div>
    </div>
    <div class="content"></div>
</div>

<script src="jquery.3.4.1.js"></script>
<script>
    $('.tou').click(function () {
        // $(this).next().removeClass('hide');
        // $(this).next().toggleClass('hide');

        // $(this).next().removeClass('hide'); //把自己展开
        // $(this).parent().siblings().find('.ti').addClass('hide'); // 让其他隐藏

        $('.ti').addClass('hide');
        $(this).next().removeClass('hide'); //把自己展开
    });
</script>
</body>
</html>

day50

内容回顾

文本操作

节点.text()  //  获取标签文本
节点.text('文本内容')  //  设置标签文本内容 
节点.html('<a>xxxx</a>')  //  设置标签html的内容  (dom对象、jq对象)

标签操作

增加

父子关系：  给父标签内部添加子标签
    父标签.append（子标签）     子标签.appendTo（父标签）   添加到后面
    父标签.prepend（子标签）    子标签.prependTo（父标签）  添加到前面
兄弟关系：  给兄弟前后添加兄弟标签
    兄标签.after(弟标签)       弟标签.insertAfter（兄标签）  
    兄标签.before(弟标签)      弟标签.insertBefore（兄标签）

删除

remove     删除标签和事件 返回当前删除的标签
detach     删除标签  不删除事件 返回当前删除的标签
empty      清空内部的内容 保留当前的标签

替换

a.replaceWith(b)   //  用b去替换a
b.replaceAll(a)    //  用b去替换a

克隆

.clone()   //  仅复制标签  0 false
.clone(true)   //  复制标签和事件

属性操作

通用属性

.attr('属性')  // 获取某个属性的值
.attr('属性'，‘值’)  // 设置单个属性的值
.attr({'属性'：‘值’，'属性'：‘值’})   // 设置多个属性的值

.removeAttr('属性')  //  删除某个属性

表单的值

input   select  textarea    （value）
.val()   // 获取标签的值
.val(‘值’)   // 获取标签的值
$('#s1').val(['1','2'])   // 设置select的多选的值

radio checkbox select // 查看是否选中

类

.addClass('类名')     //  classList.add()
.removeClass('类名')  //  classList.remove()
.toggleClass('类名')  //  classList.toggle()  切换  有就删除 没有就添加

css

.css（'css样式名'）   // 获取对应样式的值
.css（'css样式名','值'）   // 设置对应样式的值
.css（{'css样式名':'值','css样式名2':'值'}）   // 设置对应样式的值

盒子模型

width()   //  内容的宽
height()  //  内容的高

innerHeight()    // 内容 + 内边距  高
innerWidth()     // 内容 + 内边距  宽

outerWidth()    //  内容 + 内边距  + 边框  宽
outerHeight()   //  内容 + 内边距  + 边框  高

outerHeight(true)    //  内容 + 内边距  + 边框 + 外边距 高
outerWidth(true)   //  内容 + 内边距  + 边框 + 外边距 宽

设置宽高的时候 只是设置内容的宽高

今日内容

动画

滑动系列
slideDown     向下划入
slideUp       向上划出
slideToggle   切换 
slideDown（毫秒数，回调函数）


show显示   hide 隐藏  toggle切换 

渐入渐出
配合hover()事件使用
fadeIn   渐入
fadeOut  渐出
fadeToggle  切换


stop()  停止之前的动画

事件

绑定事件

// bind  
 $('button').bind('click',{'a':'bb'},fn);  //   事件类型 参数 函数

    function fn(e) {    //   e 事件的对象 
        console.log(e);    
        console.log(e.data);   //  传的参数
        // alert(123)
  }
  
 $('button').bind('click',fn);

    function fn(e) {
        console.log(e);
    } 

// 事件

$('button').click({'a': 'b'}, fn)  //  参数  函数

    function fn(e) {
        console.log(e.data);
    }
    
$('button').click( fn)

    function fn(e) {
        console.log(e.data);
    }

解除事件

$('button').unbind('click')

常用的事件

click(function(){...})    // 点击事件

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


change(function(){...})  //内容发生变化，input（鼠标移出），select等

keyup(function(){...})  

mouseover/mouseout   
mouseenter/mouseleave  =   hover(function(){...})

文档的加载

js
window.onload = function () {  //  页面 图片 视频 音频 都加载好执行
            $('#b1').click(
                function () {
                    $('.mask').show()
                }
            );
        }

//  window.onload  只执行一次  多次的划  后面的覆盖前面的

jquery
 $(window).ready(function () {  //  页面 图片 视频 音频 都加载好执行
            $('#b1').click(
                function () {
                    $('.mask').show()
                }
           );

  })
  // $(window).ready()  可执行多次  不会覆盖
  

  $(document).ready(function () {  //  页面  都加载好执行
            $('#b1').click(
                function () {
                    $('.mask').show()
                }
            );
            })
        })

//  简写
    $(
           function () {  //  页面  都加载好执行
                $('#b1').click(
                    function () {
                        $('.mask').show()
                    }
               );


        )

each

$('li').each(function (i,dom) {
        console.log(i,dom)
        console.log(i,dom.innerText)
})

作业：

  1. 小米购物车
  2. input框单独校验（不能为空）手机号
  3. 模态框
    小米购物车代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .d1 {
            position: relative;
            float: right;
        }

        .d2 {
            position: absolute;
            right: 0;
            top: 0;
            width: 120px;
            height: 40px;
            background-color: rgb(172, 172, 172);
            text-align: center;
            line-height: 40px;
        }

        .d3 {
            position: absolute;
            right: 0;
            top: 40px;
            width: 300px;
            height: 60px;
            background-color: pink;
            display: none;
        }


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


</head>
<body>

<div class="d1">
    <div class="d2 clearfix">购物车（<span>0</span>）</div>
    <div class="d3"></div>
</div>

<script>

    // var flag = true;
    // $('.d2').click(function () {
    //
    //
    //
    //     if (flag) {
    //         $('.d3').css('display', 'block')
    //
    //     } else {
    //         $('.d3').css('display', 'none')
    //
    //     }
    //     flag = !flag
    //
    // })


    // var flag = true;
    // $('.d2').click(function () {
    //
    //     // $('.d3').slideToggle(1000,
    //     //     function () {
    //     //         alert('结束了')
    //     //     })
    //
    //
    //     if (flag) {
    //
    //         // $('.d3').slideDown(1000)
    //          $('.d3').show(1000)
    //
    //     } else {
    //       // $('.d3').slideUp(1000)
    //         $('.d3').hide(1000)
    //     }
    //     flag = !flag
    //
    // })
    // var flag = true;
    // $('.d2').click(function () {
    //     var _this = $(this);
    //     if (flag) {
    //         _this.css('color', 'red')
    //
    //     } else {
    //         _this.css('color', 'black')
    //
    //     }
    //     flag = !flag;
    //     $('.d3').toggle(1000)
    //     // $('.d3').toggle(1000, function () {
    //     //     if (flag) {
    //     //         _this.css('color', 'red')
    //     //
    //     //     } else {
    //     //         _this.css('color', 'black')
    //     //
    //     //     }
    //     //     flag = !flag;
    //     // })
    //
    // })


    var flag = true;
    $('.d2').hover(function () {
        $('.d3').stop()
        $('.d3').fadeToggle();

            // if (flag) {
            //
            //
            //     $('.d3').fadeIn(1000)
            //
            // } else {
            //
            //     $('.d3').fadeOut(1000)
            // }
            flag = !flag

    })

</script>

</body>
</html>

绑定事件代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.3.4.1.js"></script>
</head>
<body>

<button>点击</button>

<script>
    // $('button').bind('click',{'a':'bb'},fn);
    //
    // function fn(e) {
    //     console.log(e);
    //     console.log(e.data);
    //     // alert(123)
    // }
    //
    // $('button').bind('click',fn);
    //
    // function fn(e) {
    //     console.log(e);
    // }
    //
    // $('button').click({'a': 'b'}, fn)
    //
    // function fn(e) {
    //     console.log(e.data);
    // }


     $('button').click( fn)

    function fn(e) {
        console.log(e.data);
         $('button').unbind('click')
    }




</script>

</body>

</html>

事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.3.4.1.js"></script>
</head>
<body>

<input type="text" id="i1">
<input type="text" id="i2">

<select name="" id="">
    <option value="1">北京</option>
    <option value="2">上海</option>

</select>

<script>
    $('#i1').focus(function () {
        console.log('获取到焦点了')
    })

    $('#i1').blur(function () {
        console.log('失去到焦点了')
    })

    $('#i1').change(function () {
        console.log('内容修改了')
    })


    $('select').change(function () {
        console.log('内容修改了~~~')
    })

    $('#i1').keyup(function (e) {
        console.log(e.keyCode)
    })

</script>

</body>
</html>

静态框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.3.4.1.js"></script>

    <style>
        .mask {
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(127, 127, 127, 0.5);
            width: 100%;
            height: 100%;
            display: none;
        }

        .model {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 400px;
            background-color: white;
            margin-top: -200px;
            margin-left: -250px;

        }


    </style>


</head>
<body>

<h3> 模态框示例 </h3>
<button id="b1">显示</button>

<div>
    <div class="mask">
        <div class="model">

            <input type="text">
            <input type="password">

        </div>
    </div>

</div>

    <script>
        $('#b1').click(
            function () {
                $('.mask').show()
            }
        );

        $(window).keyup(function (e) {

            if (e.keyCode === 27) {
                $('.mask').hide()
            }

        })
    </script>
</body>
</html>

鼠标悬浮

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

    <style>
        .father {
            background-color: red;
            width: 300px;
            height: 300px;
        }

        .son {
            background-color: green;
            width: 100px;
            height: 100px;
        }

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

</head>
<body>

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

<script>

    //   $('.father').mouseover(function () {
    //     console.log('我进来了！')
    // })
    //
    //  $('.father').mouseout(function () {
    //     console.log('我出来了！')
    // })

    // $('.father').mouseenter(function () {
    //     console.log('我进来了！')
    // })
    //
    //  $('.father').mouseleave(function () {
    //     console.log('我出来了！')
    // })

     // $('.father').hover(
     //     function () {
     //         console.log('hover')
     //     }
     // )



</script>


</body>
</html>

文档加载

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.3.4.1.js"></script>

    <style>
        .mask {
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(127, 127, 127, 0.5);
            width: 100%;
            height: 100%;
            display: none;
        }

        .model {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 400px;
            background-color: white;
            margin-top: -200px;
            margin-left: -250px;

        }


    </style>
    <script src="home.js"></script>
    <script src="index.js"></script>


    <!--    <script>-->

<!--        window.onload = function () {  //  页面 图片 视频 音频 都加载好执行-->
<!--            $('#b1').click(-->
<!--                function () {-->
<!--                    $('.mask').show()-->
<!--                }-->
<!--            );-->

<!--            $(window).keyup(function (e) {-->

<!--                if (e.keyCode === 27) {-->
<!--                    $('.mask').hide()-->
<!--                }-->

<!--            })-->
<!--        }-->


<!--        window.onload = function () {  //  页面 图片 视频 音频 都加载好执行-->
<!--            $('#b1').click(-->
<!--                function () {-->
<!--                    $('.mask').show()-->
<!--                }-->
<!--            );-->
<!--        }-->

<!--        $(window).ready(function () {  //  页面 图片 视频 音频 都加载好执行-->
<!--            $('#b1').click(-->
<!--                function () {-->
<!--                    $('.mask').show()-->
<!--                }-->
<!--            );-->

<!--            $(window).keyup(function (e) {-->

<!--                if (e.keyCode === 27) {-->
<!--                    $('.mask').hide()-->
<!--                }-->

<!--            })-->
<!--        })-->


<!--        $(document).ready(function () {  //  页面  都加载好执行-->
<!--            $('#b1').click(-->
<!--                function () {-->
<!--                    $('.mask').show()-->
<!--                }-->
<!--            );-->

<!--            $(window).keyup(function (e) {-->

<!--                if (e.keyCode === 27) {-->
<!--                    $('.mask').hide()-->
<!--                }-->

<!--            })-->
<!--        })-->

<!--        $(-->
<!--            function () {  //  页面  都加载好执行-->
<!--                $('#b1').click(-->
<!--                    function () {-->
<!--                        $('.mask').show()-->
<!--                    }-->
<!--                );-->

<!--                $(window).keyup(function (e) {-->

<!--                    if (e.keyCode === 27) {-->
<!--                        $('.mask').hide()-->
<!--                    }-->

<!--                })-->
<!--            }-->
<!--        )-->

<!--        document.onload = function () {   //  页面  都加载好执行-->
<!--            $('#b1').click(-->
<!--                function () {-->
<!--                    $('.mask').show()-->
<!--                }-->
<!--            );-->

<!--            $(window).keyup(function (e) {-->

<!--                if (e.keyCode === 27) {-->
<!--                    $('.mask').hide()-->
<!--                }-->

<!--            })-->
<!--        }-->


<!--    </script>-->


</head>
<body>

<h3> 模态框示例 </h3>
<button id="b1">显示</button>

<div>
    <div class="mask">
        <div class="model">

            <input type="text">
            <input type="password">

        </div>
    </div>

</div>


</body>
</html>

day51

内容回顾

前端

HTML

css

js

js /jquery $ == jQuery

jquery封装js的一个库

dom对象 jQuery对象

dom _> jq $(dom对象)

jq _> dom jq对象【index】

js 操作标签 标签的属性 文本 事件

document.getEmelentById
document.getEmelentsByClassName
document.getEmelentsByTagName
document.createEmelent

添加  删除 替换  克隆

getAttribute()
setAttribute()
removeAttribute()

节点.innerText
节点.innerText = 

节点.innerHTML
节点.innerHTML = 

节点.onclick = fn 
windows.onload = fn   // 页面 视频 图片 音频 
body.onload = fn   // 页面

jq

$('选择器：筛选器').筛选器方法()
#  .  * div     div.s1   div,span
div p
div>p
div+p
div~p

[href]   "[href='xxx']"   "[href!='xxx']"    "[href$='xxx']"  "[href^='xxx']" "[href*='xxx']"   

:first
:last 
:eq(index)
:has(选择器)
:not(选择器)

first（） 
last（）
parent()   children()
siblings()   
prev()   next()
has()  not()
文本
text()    html()
属性
attr('属性')  
值
val（） 
属性
prop（‘selected’） prop（‘checked’）
事件
jq.bind('事件名'，参数，函数) 
函数名（e）{
    e.data    // 插入的参数
}


jq.事件名(参数，函数) 
函数名（e）{
    e.data    // 插入的参数
}

jq.unbind('事件名')

常用的事件
click
focus blur 
change 
mouseenter  mouseleave      hover
mouseover  mouseout

动画
show  hide  toggle
slideDown(时间，函数)  slideUp()  slideToggle()
fadeIn  fadeOut  fadeToggle 

stop()  停止动画

事件冒泡

触发子代的事件，父辈的事件也依次执行。

阻止事件冒泡：

return false

e.stopPropagation()

事件委托

利用事件冒泡的原理，将子代的事件委托给父代执行。

 $('tbody').on('click','button',function () {
     console.log(this)
})

bootstrap

https://v3.bootcss.com/

http://www.fontawesome.com.cn/

前端展示数据代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
      <style>
        .mask {
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(127, 127, 127, 0.5);
            width: 100%;
            height: 100%;
            display: none;
        }

        .model {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 400px;
            background-color: white;
            margin-top: -200px;
            margin-left: -250px;

        }


    </style>
    <script src="jquery.3.4.1.js"></script>
    <script>
        $(function () {
            var flag = false

            $('#all').click(function () {
                if (!flag) {
                    $(':checkbox').prop('checked', true)
                    $(this).text('取消')
                } else {

                    $(':checkbox').prop('checked', false)
                    $(this).text('全选')
                }
                flag =!flag

            })

            $('#reverse').click(function () {
               $(':checkbox').each(function (index, dom) {
                   var checked = $(dom).prop('checked')
                   $(dom).prop('checked',!checked)
               })
            })

            $('#add').click(function () {
                $('.mask').show()
            })

            $('#save').click(function () {
                $('.mask').hide();
                var tr =  $('tbody tr:first').clone();
                tr.find(':checkbox').prop('checked',false);

                tr.children().slice(1,3).each(function (i, d) {
                    $(d).text($('.model input').eq(i).val())
                });

                tr.css('display','').appendTo('tbody')

                $('.model input').val('')
            })
            //
            // $('tr button').click(function () {
            //     $(this).parent().parent().remove()
            // })

            $('tbody').on('click','button',function () {
                console.log(this)
                $(this).parent().parent().remove()
            })


        })

    </script>


</head>
<body>

<button id="all">全选</button>
<button id="reverse">反选</button>
<button id="add">新增</button>
<table border="1">
    <thead>
    <tr>
        <th>选择</th>
        <th>用户名</th>
        <th>密码</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr style="display: none">
        <td><input type="checkbox"></td>
        <td></td>
        <td></td>
        <td>
            <button>删除</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>alex</td>
        <td>alex3714</td>
        <td>
            <button>删除</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>alex1</td>
        <td>alex3714</td>
        <td>
            <button>删除</button>
        </td>
    </tr>
    <tr>
        <td><input type="checkbox"></td>
        <td>alex2</td>
        <td>alex3714</td>
        <td>
            <button>删除</button>
        </td>
    </tr>
    </tbody>
</table>


<div>
    <div class="mask">
        <div class="model">

            <p>
                用户名： <input type="text">
            </p>
            <p>
                密码： <input type="text">
            </p>
            <button id="save">保存</button>

        </div>
    </div>

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

事件冒泡代码

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

    <style>
        .father {
            background-color: red;
            width: 300px;
            height: 300px;
        }

        .son {
            background-color: green;
            width: 100px;
            height: 100px;
        }

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

</head>
<body>

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

<script>

    $('.father').click(function () {
        alert('我是你爸爸')
    })

    $('.son').click(function (e) {
        alert('你是我儿子')
        // return false
        e.stopPropagation()
    })

</script>


</body>
</html>

删格代码

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

    <style>
        .row div {
            background-color: #ff1cf2;
            border: 1px solid;
            /*height: 900px;*/
        }
    </style>


</head>
<body>

<div class="container">
    <h1>h1. Bootstrap heading</h1>
    <p class="lead">Nullam quis risus eget urna mollis ornare vel eu leo.</p>
    <p>
        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh
        ultricies vehicula.

        Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec ullamcorper nulla
        non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio
        sem nec elit. Donec ullamcorper nulla non metus auctor fringilla.

        Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget
        metus. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.
    </p>

    <div class="row">
        <div class=" col-md-8 col-md-offset-2">
            <div class="col-lg-3">1</div>
            <div class="col-lg-3">2</div>
            <div class="col-lg-3">3</div>
            <div class="col-lg-3">4</div>
        </div>

    </div>

    <div class="row">
        <p>对不齐</p>

        <blockquote class="blockquote-reverse">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
            <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
        </blockquote>
        <div class=" col-md-3 col-md-offset-2">col-lg-1</div>

    </div>

    <dl class="dl-horizontal">
        <dt>Description lists</dt>
        <dd>A description list is perfect for defining terms.</dd>
        <dt>Euismod</dt>
        <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
        <dd>Donec id elit non mi porta gravida at eget metus.</dd>
        <dd>Donec id elit non mi porta gravida at eget metus.</dd>
        <dd>Donec id elit non mi porta gravida at eget metus.</dd>
        <dt>Malesuada porta</dt>
        <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
        <dt>Felis euismod semper eget lacinia</dt>
        <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet
            risus.
        </dd>
    </dl>
</div>


</body>
</html>

前端展示数据(bs)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .mask {
            position: absolute;
            top: 0;
            left: 0;
            background-color: rgba(127, 127, 127, 0.5);
            width: 100%;
            height: 100%;
            display: none;
        }

        .model {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 400px;
            background-color: white;
            margin-top: -200px;
            margin-left: -250px;

        }


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

    <script>
        $(function () {
            var flag = false

            $('#all').click(function () {
                if (!flag) {
                    $(':checkbox').prop('checked', true)
                    $(this).text('取消')
                } else {

                    $(':checkbox').prop('checked', false)
                    $(this).text('全选')
                }
                flag = !flag

            })

            $('#reverse').click(function () {
                $(':checkbox').each(function (index, dom) {
                    var checked = $(dom).prop('checked')
                    $(dom).prop('checked', !checked)
                })
            })

            $('#add').click(function () {
                $('.mask').show()
            })

            $('#save').click(function () {
                $('.mask').hide();
                var tr = $('tbody tr:first').clone();
                tr.find(':checkbox').prop('checked', false);

                tr.children().slice(1, 3).each(function (i, d) {
                    $(d).text($('.model input').eq(i).val())
                });

                tr.css('display', '').appendTo('tbody')

                $('.model input').val('')
            })
            //
            // $('tr button').click(function () {
            //     $(this).parent().parent().remove()
            // })

            $('tbody').on('click', 'button', function () {
                console.log(this)
                $(this).parent().parent().remove()
            })


        })

    </script>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>


</head>
<body>

<button id="all">全选</button>
<button id="reverse">反选</button>
<button id="add">新增</button>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  新增
</button>


<div class="row">
    <div class="col-lg-5 col-lg-offset-2">
        <table class="table table-bordered table-hover">
            <thead>
            <tr class="active">
                <th>选择</th>
                <th>用户名</th>
                <th>密码</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr style="display: none">
                <td><input type="checkbox"></td>
                <td></td>
                <td></td>
                <td>
                    <button>删除</button>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>alex</td>
                <td>alex3714</td>
                <td>
                    <button>删除</button>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>alex1</td>
                <td>alex3714</td>
                <td>
                    <button>删除</button>
                </td>
            </tr>
            <tr>
                <td><input type="checkbox"></td>
                <td>alex2</td>
                <td>alex3714</td>
                <td>
                    <button>删除</button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>


</div>

<!-- Button trigger modal -->

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        <div class="col-lg-11" style="margin-top: 20%">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="inputEmail3" class="col-sm-2 control-label" >用户名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputEmail3">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
                        <div class="col-sm-10">
                            <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button id="save" type="submit" class="btn btn-default">保存</button>
                        </div>
                    </div>
                </form>

            </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


<!--<div>-->
<!--    <div class="mask">-->
<!--        <div class="model">-->

<!--            <div class="col-lg-11" style="margin-top: 20%">-->
<!--                <form class="form-horizontal">-->
<!--                    <div class="form-group">-->
<!--                        <label for="inputEmail3" class="col-sm-2 control-label" >用户名</label>-->
<!--                        <div class="col-sm-10">-->
<!--                            <input type="text" class="form-control" id="inputEmail3">-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div class="form-group">-->
<!--                        <label for="inputPassword3" class="col-sm-2 control-label">密码</label>-->
<!--                        <div class="col-sm-10">-->
<!--                            <input type="password" class="form-control" id="inputPassword3" placeholder="Password">-->
<!--                        </div>-->
<!--                    </div>-->

<!--                    <div class="form-group">-->
<!--                        <div class="col-sm-offset-2 col-sm-10">-->
<!--                            <button id="save" type="submit" class="btn btn-default">保存</button>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                </form>-->

<!--            </div>-->

<!--        </div>-->
<!--    </div>-->

<!--</div>-->
</body>
</html>

表单代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
    <script src="jquery.3.4.1.js"></script>
    <script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</head>
<body>
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <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>
            <li role="separator" class="divider"></li>
            <li><a href="#">One more separated link</a></li>
          </ul>
        </li>
      </ul>
      <form class="navbar-form navbar-left">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="Search">
        </div>
        <button type="submit" class="btn btn-default">Submit</button>
      </form>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Link</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <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>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">
    60%
  </div>
</div>
<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>


<div class="panel panel-default">
  <div class="panel-body">
    Basic panel example
  </div>
</div>


<span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span>
<i class="fa fa-battery-4" aria-hidden="true"></i>
<span class="fa-stack fa-lg">
  <i class="fa fa-square-o fa-stack-2x"></i>
  <i class="fa fa-twitter fa-stack-1x"></i>
</span>

<div class="btn-group-vertical" role="group" aria-label="Vertical button group">
      <button type="button" class="btn btn-default">Button</button>
      <button type="button" class="btn btn-default">Button</button>
      <div class="btn-group" role="group">
        <button id="btnGroupVerticalDrop1" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
          <li><a href="#">Dropdown link</a></li>
          <li><a href="#">Dropdown link</a></li>
        </ul>
      </div>
      <button type="button" class="btn btn-default">Button</button>
      <button type="button" class="btn btn-default">Button</button>
      <div class="btn-group" role="group">
        <button id="btnGroupVerticalDrop2" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
          <li><a href="#">Dropdown link</a></li>
          <li><a href="#">Dropdown link</a></li>
        </ul>
      </div>
      <div class="btn-group" role="group">
        <button id="btnGroupVerticalDrop3" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
          <li><a href="#">Dropdown link</a></li>
          <li><a href="#">Dropdown link</a></li>
        </ul>
      </div>
      <div class="btn-group" role="group">
        <button id="btnGroupVerticalDrop4" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
          <span class="caret"></span>
        </button>
        <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
          <li><a href="#">Dropdown link</a></li>
          <li><a href="#">Dropdown link</a></li>
        </ul>
      </div>
    </div>

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

<div class="dropup">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropup
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <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>

<a href="" class="btn btn-default">跳转</a>
<div class="col-lg-8">
    <form class="form-horizontal ">
    <div class="form-group has-error has-feedback">
        <label for="inputEmail3" class="col-sm-2 control-label">Email</label>
        <div class="col-sm-10">
            <input type="email" class="form-control" id="inputEmail3" placeholder="Email" readonly>
            <span class="glyphicon glyphicon-ok form-control-feedback" aria-hidden="true"></span>
            <span id="helpBlock2" class="help-block">A block of help text that breaks onto a new line and may extend beyond one line.</span>
        </div>
    </div>
    <div class="form-group">
        <label for="inputPassword3" class="col-sm-2 control-label">Password</label>
        <div class="col-sm-10">
            <input type="password" class="form-control" id="inputPassword3" placeholder="Password">
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <div class="checkbox">
                <label>
                    <input type="checkbox"> Remember me
                </label>
            </div>
        </div>
    </div>
    <div class="form-group">
        <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-default">Sign in</button>
        </div>
    </div>
</form>
</div>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
</body>
</html>

精度条代码

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

<div class="progress">
  <div class="progress-bar" style="min-width: 2em;" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" >
    0%
  </div>
</div>


<script>
    var i =0;
    setInterval(function () {
        i++;
        if (i<=100){
            $('.progress-bar').text(i + '%').css('width', i + '%')
        }


    },100)



</script>

</body>
</html>
标签
input
html代码
手机电脑
html语言
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!