前端知识小总结

复习html属性#

table标签的属性{

Width、height 宽高（单位是像素或百分比）

align 对齐   left/center/ right

border 外边框

bgcolor 背景色

background 背景图片

Cellspacing 单元格间距(单元格和单元格的距离) 一般情况写0

Cellpadding 单元格边距（表格边框与内容的距离） 一般情况写0

}

2.tr属性{

Align 水平对齐

left/center/ right

valign 垂直对齐

Top（上）/middle（中）/bottom（下）

bgcolor 背景色

}

3.td的属性{

Width、height 宽高（单位是像素或%）

align valign 水平对齐、垂直对齐

bgcolor 背景色

background 指定背景图片

Colspan 水平合并 合并多列

rowspan 垂直合并 合并多行

}

th为表格的标题标签

thead 页眉   tbody 主题部分   tfoot 页脚 

<caption></caption>表格标题标签  不属于表格部分  再表格的头部

a标签的属性

a标签 内部跳转href属性后写跳转部分的id值   a href="#id" 

a标签 外部跳转href属性后面跟跳转地址    a href="www.baidu.com"

a标签的属性 target属性  值有 _self 在当前页面进行跳转  _blank打开一个新的页面进行跳转

img标签的属性

img标签属性{

   src属性：图片的源路径地址 

   alt属性：图片找不到显示的内容 ， 图片找到了这不显示

   Width、height 宽和高设置图片的宽高

   title属性 当鼠标悬浮上去显示的内容

   usemap 图像映射，图像可以点击，进行跳转类似a标签

   

   <map name='a' id="a">

   <area 

   shape="画出的图形 1.圆形circ  2.rect 矩形 3.多边形" 

            第一个值X轴，Y轴

   cooeds="1.圆心坐标，半径坐标||2.矩形左上角坐标，右下角坐标|| 3.多边形坐标1，多边形坐标2，。。。" 

   href="点击后跳转的页面"

   target="于a标签一样"

   alt="为跳转成显示的文字"

   title="鼠标悬停显示的文字"

    ></area>

   </map>

}

表单标签

1.form 表单: 收集用户填写的信息

    action: 值：一个地址，收集到的信息提交到这个地址

    method: 值：get提交的内容在浏览器地址栏可见

                不安全、内容少，不超过4k

                post 提交的内容，不会出现在浏览器地址栏里面

                安全、提交的内容多

表单元素：

1.label : 无具体含义 一般配合 input标签使用

    for: 值：字符串 和input 标签的id相对应 方便用户操作 用户体验

2.input:输入框

    type: text 文本

          password 密码

          radio 单选按钮 必须和name结合使用

          checkbox 多选框

          file 文件

          reset 重置

          button 普通按钮

    maxlength:最大长度

3.select 下拉框 一般和 option标签结合使用

4.option 选项标签 

5.textarea 文本域

h5新增标签 基于语义

 页眉标签 

    <header>页眉标签</header>

     文章标签 

    <article>文章表彰</article>

     侧边栏 

    <aside>侧边栏</aside>

     页脚标签  

    <footer>页脚标签</footer>

​

视频标签 video

​ src:视频资源地址
​ controls 控制视频的播放暂停 界面
​ width 值：数字 不带单位
​ height 值：数字 不带单位
​ loop 循环播放

<video src="地址" controls width="200" height="200" loop>

        <p>抱歉，您的浏览器不支持视频标签，请您升级浏览器</p>

    </video>

​

   <video controls>

            资源

            source属性：

            src:视频资源地址

            type:视频资源类型

   <source src="./video/movie.mp4" type="video/mpeg">
    <source src="./video/movie.ogg" type="video/ogg">
    <p>抱歉，您的浏览器不支持视频标签，请您升级浏览器</p>
</video>
音频标签：audio
音频标签属性：
src:音频资源地址
controls 控制音频的播放暂停 界面
loop 循环播放
autoplay 自动播放

audio视频标签的属性

<audio src="./audio/BeethovenVirus.mp3" controls loop autoplay>
        <p>抱歉，您的浏览器不支持音频标签，请您升级浏览器</p>
    </audio>

    <audio controls loop>
        <source src="./audio/horse.mp3" type="audio/mp3">
        <source src="./audio/horse.ogg" type="audio/ogg">
        <p>抱歉，您的浏览器不支持音频标签，请您升级浏览器</p>
    </audio>

form表单的新增属性

<form action="#" method="GET">
        <!-- type类型：
                number 数字 只能输入数字
                email 邮件类型
                URL 网络地址类型
                range 滑动条
        -->
        <!-- 新增属性：
            max 最大值
            min 最小值
            step 步长
            required 必填
            placeholder 提示内容
            pattern 正则表达式
        -->
        <label for="age">年龄：</label>
        <input name="age" id="age" type="number" min="1"  max="150" step="5">
        <br>
        
        <input name="email" type="email" placeholder="请输入邮箱" >
        <br>
        <input type="url" name="url" placeholder="http://aaa/bbb/cc" pattern="http://.*" required>
        <br>
        <input type="range">
        <br>
        <input type="date" name="date" >
        <input type="month" name="month">
        <input type="week" name="week">
        <input type="text" autofocus>
        <br>

        <input type="submit" value="提交">
    </form>

HTML框架集

**内联框架：在网页里面嵌入其他网页 **

​ src:网页地址
​ frameborder 边框是否显示 0 不显示边框 1 显示边框
​ width 数字 不带单位
​ height 数字 不带单位
​ 框架集：
​ 不能和body标签同级使用
​ 有frameset标签，不能有body标签(一般情况)

属性：
cols 列 值 可以是数字，百分比，*
rows 行 值 可以是数字，百分比，*
这两个属性必须要有一个

<!-- 垂直分布 -->
    <!-- <frameset cols="25%, 50%, 25%">
        <frame src="05个人基本信息.html">
        <frame src="06电子版简历案例.html">
        <frame src="04表格.html"></frame>
    </frameset> -->

CSS样式

CSS选择器：

1. id选择器 #  保持唯一 

     一般不用id选择器 来给标签添加样式

     id是保留给JavaScript用的，用做交互

1. class 类选择器 . 可以有多个
   一般都是用类选择器来添加样式 
2. 标签选择器（元素）
3. 后代选择器 空格 子子孙孙都可以选到
4. 子代选择器  >  直接子代可以选到
5. 相邻选择器 + 向下找，找一个
6. 伪类选择器 
7. 伪元素选择器 必须理解，必须会写，清除浮
   span:before span元素之前显示 
    span::afterspan元素之后显示 
    contrnt分别有内容样式 如：content: 'after我是';
8. 分组选择器 ,

分组选择器 ,

​ 这四个伪类有没有顺序要求
​

  同时使用是有顺序：{
   1. 未点击是的样式：link 
   2. 点击过后的样式：visited 
   3. 鼠标经过时的样式 ：hover 
   4. 点击时的样式：active
    }

使用颜色单词

​ 使用rgb,三原色
​ rgb(0, 0, 0) 黑色
​ rgba(0，0，0，透明度(取值在0~1之间))

尺寸：

1. px:像素 固定的值 硬件一个点就是一个像素

2. em: 相对单位 是它本身 (font-size属性可以被继承) 相对字体的大小变化 一般用在移动设备上 做响应式布局 font-size 相对于父元素的字体大小

3. rem: 相对单位 root 相对字体的大小变化 一般用在移动设备上 做响应式布局 font-size 相对于html元素的字体大小单位

4. font-size属性可以被继承（默认被继承）

选择器： 优先级

1. 最高优先级：!important 不建议使用（打破优先级的规律）
2. 类型：id>class>元素
3. 引入方式：内联>嵌入>外联

背景图样式

background的用法

1. ​ background-color： 为背景添加颜色
2. ​ background-image: 为背景添加背景图片
3. ​ background-repeat： repeat默认值水平垂直都平铺 repeat-x在x轴平铺 repeat-y在y轴平铺 no-repeat不平铺 inherit规定应该从父元素继承 background-repeat 属性的设置。
4. ​ background-position ： 可以是像素 第一个值是 x 第二个值是y 可以是%数
5. ​ 可以说单词第一个值 left（左） center（居中） right（右） 第二个值 top（上） middle（中） bottom（下）
6. ​ background-size 设置背景图片的大小
7. ​ background-attachment ：设置图片是否随浏览器的滚动而滚动 scroll：背景图像会随着页面其余部分的滚动而移动。
8. ​ fixed 当页面的其余部分滚动时，背景图像不会移动。 inherit：规定应该从父元素继承 background-attachment 属性的设置。

文本样式

1.     text-indent:文本缩进 一般是rem
   

2. ​ line-height:设置行高
3. ​ taxt-align:设置文本的对齐方式
   ​. text-decoration:修饰文本 none（无样式） underilne（定义文本下的一条线） overline 定义文本上的一 条线。line-through 定义穿过文本下的一条线。
4. ​ font: 字体大小/行高
5. ​ font-size：设置文字大小
6. ​ font-style：设置字体风格 normal - 文本正常显示 italic - 文本斜体显示 oblique - 文本倾斜显示
7. ​ font-weight:设置字体是否加粗
8. ​ font-family：设置字体系列
9. ​ 简写式 必须要有font-family属性

列表样式

1. list-style-type：none 无标记

2. list-style-image： URL图像的路径。 none 默认。无图形被显示。

3. list-style-position outside 在li标签外 inside 在里标签内

表格样式

1. ​ border-collapse collapse折叠边框
2. ​ text-align 和 vertical-align 属性设置表格中文本的对齐方式。
3. ​ border-spacing 水平和垂直间距 数字
4. ​ caption-side: 表头的位置 top（上） bottom（下）
5. ​ empty-cells hide 不在空单元格周围绘制边框 show在空单元格周围绘制边框 默认
6. ​ table-layout:设置表格布局算法

盒模型使用技巧及相关问题

margin外边距合并

1.**外边距合并 **

**外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等 于两个发生合并的外边距的高度中的较大者 **
解决方法如下：

​ 1、使用这种特性
​ 2、设置一边的外边距，一般设置margin-top
​ 3、将元素浮动或者定位

margin-top 塌陷

在两个盒子嵌套时候，内部的盒子设置的margin-top会加到外边的盒子上，导致内部的盒子margin-top设置失败，解决方法如下：

1、外部盒子设置一个边框
2、外部盒子设置 overflow:hidden
3、使用伪元素类：

 .clearbox::before {
       content: '';
       display: table;
 }

css元素溢出

当子元素的尺寸超过父元素的尺寸时，需要设置父元素显示溢出的子元素的方式，设置的方法是通过overflow属性来设置。

overflow的设置项：

1、visible 默认值。内容不会被修剪，会呈现在元素框之外。
2、hidden 内容会被修剪，并且其余内容是不可见的，此属性还有清除浮动、清除margin-top塌陷的功能。
3、scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
4、auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
5、inherit 规定应该从父元素继承 overflow 属性的值。

元素类型

元素就是标签，布局中常用的有三种标签，块元素、内联元素、内联块元素，了解这三种元素的特性，才能熟练的进行页面布局。

块元素

块元素，也可以称为行元素，布局中常用的标签如：div、p、ul、li、h1~h6、dl、dt、dd等等都是块元素，它在布局中的行为：

• 支持全部的样式
• 如果没有设置宽度，默认的宽度为父级宽度100%
• 盒子占据一行、即使设置了宽度

内联元素

内联元素，也可以称为行内元素，布局中常用的标签如：a、span、em、b、strong、i等等都是内联元素，它们在布局中的行为：

• 支持部分样式（不支持宽、高、margin上下、padding上下）
• 宽高由内容决定
• 盒子并在一行
• 代码换行，盒子之间会产生间距
• 子元素是内联元素，父元素可以用text-align属性设置子元素水平对齐方式

解决内联元素间隙的方法

1. 去掉内联元素之间的换行
2. 将内联元素的父级设置font-size为0，内联元素自身再设置font-size

内联块元素

内联块元素，也叫行内块元素，是新增的元素类型，现有元素没有归于此类别的，img和input元素的行为类似这种元素，但是也归类于内联元素，我们可以用display属性将块元素或者内联元素转化成这种元素。它们在布局中表现的行为：

• 支持全部样式
• 如果没有设置宽高，宽高由内容决定
• 盒子并在一行
• 代码换行，盒子会产生间距
• 子元素是内联块元素，父元素可以用text-align属性设置子元素水平对齐方式。

这三种元素，可以通过display属性来相互转化，不过实际开发中，块元素用得比较多，所以我们经常把内联元素转化为块元素，少量转化为内联块，而要使用内联元素时，直接使用内联元素，而不用块元素转化了。

display属性

display属性是用来设置元素的类型及隐藏的，常用的属性有：

1. none 元素隐藏且不占位置
2. block 元素以块元素显示
3. nline 元素以内联元素显示
4. inline-block 元素以内联块元素显示

CSS3 弹性盒子(响应式布局)

弹性盒子是 CSS3 的一种新的布局模式。
CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。
引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

属性	描述
display	指定 HTML 元素盒子类型。(flex属性)
flex-direction	指定了弹性容器中子元素的排列方式
justify-content	设置弹性盒子元素在主轴（横轴）方向上的对齐方式。
align-items	设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式。
flex-wrap	设置弹性盒子的子元素超出父容器时是否换行。
align-content	修改 flex-wrap 属性的行为，类似 align-items, 但不是设置子元素对齐，而是设置行对齐
flex-flow	flex-direction 和 flex-wrap 的简写
order	设置弹性盒子的子元素排列顺序。
align-self	在弹性子元素上使用。覆盖容器的 align-items 属性。
flex	设置弹性盒子的子元素如何分配空间。

​

定义弹性盒子

display: flex或inline-flex将其定义为弹性容器。
弹性容器内包含了一个或多个弹性子元素。

弹性盒子的属性（盒子父元素）

 1.flex-direction
            row：横向从左到右排列（左对齐），默认的排列方式。
            row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
            column：纵向排列。
            column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

  2.justify-content 属性(控制的为X轴)
  		    flex-start：
            弹性项目向行头紧挨着填充。这个是默认值。
            第一个弹性项的main-start外边距边线被放置在该行的main-start边线，
            而后续弹性项依次平齐摆放。
            
            flex-end：在该
            弹性项目向行尾紧挨着填充。
            第一个弹性项的main-end外边距边线被放置行的main-end边线，
            而后续弹性项依次平齐摆放。
            
            center：
        **  弹性项目居中紧挨着填充。
            （如果剩余的自由空间是负的，则弹性项目将在两个方向上同时溢出）。
            
            space-between：
        **  弹性项目平均分布在该行上。
            如果剩余空间为负或者只有一个弹性项，则该值等同于flex-start。
            否则，第1个弹性项的外边距和行的main-start边线对齐，
            而最后1个弹性项的外边距和行的main-end边线对齐，
            然后剩余的弹性项分布在该行上，相邻项目的间隔相等。
            
        **  space-around：
            弹性项目平均分布在该行上，两边留有一半的间隔空间。
            如果剩余空间为负或者只有一个弹性项，则该值等同于center。
            否则，弹性项目沿该行分布，且彼此间隔相等（比如是20px），
            同时首尾两边和弹性容器之间留有一半的间隔（1/2*20px=10px）。
            

align-items 属性（控制的为Y轴位置）
align-items 设置或检索弹性盒子元素在侧轴（纵轴/Y轴）方向上的对齐方式。

            flex-start：弹性盒子元素的侧轴（纵轴/Y轴）
            起始位置的边界紧靠住该行的侧轴起始边界。

            flex-end：弹性盒子元素的侧轴（纵轴/Y轴）起始位置的边界紧靠住该行的侧轴结束边界。
            
            center：弹性盒子元素在该行的侧轴（纵轴/Y轴）上居中放置。
            （如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
            
            baseline：如弹性盒子元素的行内轴与侧轴为同一条，
            则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

            stretch：如果指定侧轴大小的属性值为'auto'，（默认值）
            则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，
            但同时会遵照'min/max-width/height'属性的限制。
            

flex-wrap 属性
flex-wrap 属性用于指定弹性盒子的子元素换行方式。

            nowrap - 默认， 弹性容器为单行。该情况下弹性子项可能会溢出容器。
            wrap - 弹性容器为多行。该情况下弹性子项溢出的部分会被放置到新行，子项内部会发生断行
            wrap-reverse -反转 wrap 排列。

align-content 属性
 align-content 属性用于修改 flex-wrap 属性的行为。
            类似于 align-items, 但它不是设置弹性子元素的对齐，
            而是设置各个行的对齐。

            stretch - 默认。各行将会伸展以占用剩余的空间。

            flex-start - 各行向弹性盒容器的起始位置堆叠。

            flex-end - 各行向弹性盒容器的结束位置堆叠。

            center -各行向弹性盒容器的中间位置堆叠。

            space-between -各行在弹性盒容器中平均分布。

            space-around - 各行在弹性盒容器中平均分布，
              两端保留子元素与子元素之间间距大小的一半。

弹性盒子子元素属性（盒子里的元素/子元素）

order 属性设置弹性容器内弹性子元素的属性:
                用整数值来定义排列顺序，数值小的排在前面。可以为负值。

对齐

设置"margin"值为"auto"值，自动获取弹性容器中剩余的空间。
             所以设置垂直方向margin值为"auto"，
             可以使弹性子元素在弹性容器的两上轴方向都完全居中。

完美的居中(两轴同时居中)

使用弹性盒子，居中变的很简单，只想要设置 margin: auto; 
            可以使得弹性子元素在两上轴方向上完全居中:(在盒子的正中间)

align-self(控制元素在Y轴的排列方式)

align-self 属性用于设置弹性元素自身在侧轴（纵轴）方向上的对齐方式。

            auto：如果'align-self'的值为'auto'，
            则其计算值为元素的父元素的'align-items'值，
            如果其没有父元素，则计算值为'stretch'。

            flex-start：弹性盒子元素的侧轴（纵轴）
            起始位置的边界紧靠住该行的侧轴起始边界。

            flex-end：弹性盒子元素的侧轴（纵轴）
            起始位置的边界紧靠住该行的侧轴结束边界。

            center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。
            （如果该行的尺寸小于弹性盒子元素的尺寸，
            则会向两个方向溢出相同的长度）。

            baseline：如弹性盒子元素的行内轴与侧轴为同一条，
            则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。

            stretch：如果指定侧轴大小的属性值为'auto'，（height会沾满父元素）
            则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，
            但同时会遵照'min/max-width/height'属性的限制。

flex（可继承）

 flex 属性用于指定弹性子元素如何分配空间。
            auto: 计算值为 1 1 auto
            initial: 计算值为 0 1 auto
            none：计算值为 0 0 auto
            inherit：从父元素继承
            [ flex-grow ]：定义弹性盒子元素的扩展比率。
            [ flex-shrink ]：定义弹性盒子元素的收缩比率。
            [ flex-basis ]：定义弹性盒子元素的默认基准值。

JS复习笔记

生命变量

变量的的生命要求
1.可以是数字，字母，下划线（_），$，但数字不能开头
2.不能是js里面的关键字和保留着
var age = 18;
console.log("age = %d",age);

JavaScript基本数据类型

1.undefined
  值只有一个，就是undefined，派生于null
2.null
   值只有一个，就是null
3.string
   弱类型语言"",''都可以
   toString（基数）可以把任何类型的数据转化为String类型
   String（）可以把任何类型的数据，转化为String类型，包含null，undefined 没有 基数
4.nummber
   包含整数，浮点数32位，64位 默认精确到小数点后17后
   Infinity 无穷大小 64位 2 32次方 算法
   isFinite() 判断是否无穷大小 返回值Boolean 类型  NaN 字符串 undefined  正负Infinity 返回false
   NaN not a number NaN != NaN
   isNaN() 判断是否 不是数字
   parseInt() 把给的值转换成整数
   parseFloat() 把给的值转换成浮点数（toFixed(2)精确到小数点后两位）
   document.writeln("PI转换为Float="+parseFloat(Math.PI).toFixed(2)+"<br>")
5.boolean
   true false
   Boolean() 可以把任何类型的数据，转换成boolean类型
    NaN,0,"",null,undefied 这五种返回值是false，其他的都是true。
 6.JavaScript引用数据类型：1个
    Object

typeof 操作符：返回数据的数据类型

    1.undefined
    2.object
    3.number
    4.Boolean
    5.function
    6.string 

类型转换案例

var num1 = 36;
console.log("%s 的类型是 %s",num1.toString(),typeof num1.toString());
console.log("%s 的类型是 %s",num1.toString(),typeof num1.toString());
var flag = true;
console.log("%s 的类型是 %s",flag,typeof flag);
console.log("%s 的类型是 %s",flag.toString(),typeof flag.toString());
var date = new Date();
console.log("%o 的类型是 %s",date,typeof date);
console.log("%s 的类型是 %s",date.toString(),typeof date.toString());

var num1 = 0.1;
var num2 = 0.2;
var num3 = 10;
console.log(num1,num2,num3);
var num4 = num1 + num2 ;
console.log("num4 = "+ num4.toFixed(2));
转化为boolea案例
console.log(isFinite('hello'));// false
console.log(isFinite(2));// true
console.log(isFinite(NaN));// false
console.log(isFinite(true));// true
console.log(isFinite(false));// true
console.log(isFinite(null));// true
console.log(isFinite(undefined));// false
console.log(isFinite(0));// true
console.log(isFinite(-Infinity));// false
转化为整数案例
console.log(parseInt("hello word"));//NaN
console.log(parseInt("123abc"));//123
console.log(parseInt("abc123"));//NaN
console.log(parseInt("12.345"));//12
console.log(parseInt("12.845"));//12
console.log(parseInt("12.845.567"));//12
console.log(parseInt(null));//NaN
console.log(parseInt(undefined));//NaN
console.log(parseInt(true));//NaN
console.log(parseInt(false));//NaN
转化为float案例
console.log(parseFloat("hello word"));//NaN
console.log(parseFloat("123abc"));//123
console.log(parseFloat("abc123"));//NaN
console.log(parseFloat("12.345"));//12.345
console.log(parseFloat("12.845"));//12.845
console.log(parseFloat("12.845.567"));//12.845
console.log(parseFloat("00012.845.567"));//12.845
console.log(parseFloat(null));//NaN
console.log(parseFloat(undefined));//NaN
console.log(parseFloat(true));//NaN
console.log(parseFloat(false));//NaN 

JavaScrpit运算符

一元运算符

i++,++i,--i,i--
var i = 10;
var j ;
var k ;
// j = i++; // 10
// console.log("i = %d",i);
// k = i--; // 11
// console.log("j = %d",j);
// console.log("k = %d",k);
// console.log('i = %d',i);

// j = ++i;
// k = --i;
// console.log("j = %d",j); // 11
// console.log("k = %d",k); // 10
// console.log("i = %d",i);

算数运算符

+,-,*,/,%
var i = 10;
console.log(10%2)//0
console.log(10*2)//20
console.log(10/2)//5
console.log(10+2)//12

比较运算符

>,>=,<,<=,==,===

逻辑运算符

&，||，！

赋值运算符

=，+=，-=，*=，/=，%=
var a = 5;
a+=10;// a = a+10;
console.log(a);

控制语句

JavaScript控制语句有哪些

if，if-else，if-else if-else，switch
if(5>3){
    conlose.log("true")
}

if(5>3){
     conlose.log("true")
}else{
     conlose.log("false")
}
var a=10;
if(a>3){
     conlose.log("true")
}else if(a>5）{
     conlose.log("false")
}else{
    conlose.log("false")
}

循环语句

while(条件){
    循环体          //至少一次也不执行
}

do｛
循环体             //至少一次也不执行
｝while（条件）

for（初始化；条件；迭代）｛
循环体         //条件不写默认是true  死循环
｝

函数

function 函数名（形参1，形参2）｛  //形参定义式的参数 可在函数体里使用
函数体
｝
函数名（实参1，实参2）；//实参是传入是的参数

函数名不能相同，相同的话这会覆盖前面写的

//匿名方法 没有方法名，需要一个变量指向他（方法）
var fun=function（）｛
alert("你方法")
｝
fun();
//使用匿名函数，不要指向他的变量 ---立即函数
(
    function (){
        alert("立即函数")
    })();
//立即函数传参
(
    function (a,b,c){
        alert(a+b+c)  //6
    })(1,2,3);

变量作用于

全局作用域和局部作用域

全局作用域：整个JS执行环境
局部作用域：通过创建一个函数就开辟出了一个局部作用域
第一题：
var a=1;
function test(){
    console.log(a);//出现了变量提升的现象
    var a=1;
}
test();
根据变量声明提升和变量搜索机制，函数test（）应为
function test(){
    var a;
    console.log(a);//此时由于a并咩有被赋值，所以也就是undefined
        a=1;
}
第二题：
var b=2;
function test2(){
    window.b=3;
    console.log(b);//值为3
}
test2();
第三题：
//任何通过附加在window上的变量都相当于声明一个全局变量，或者是给全局变量赋值
c=5; 
function test3(){
    window.c=3;
    console.log(c);
    var c;
    console.log(window.c);
}
test3();
/*根据变量声明提升和变量搜索机制：*/
c=5;//声明一个全局变量c 
function test3(){
       var c;//变量声明提升，声明一个局部变量
    window.c=3;//改变全局变量c的值
    console.log(c);//由于此时的c是一个局部变量c，并且没有被赋值 c就是undefined    
    console.log(window.c);//此时的c就是一个全局变量c，也就是值为3
}
test3();

变量的收索机制是：
1.现在块级作用域找  从上到下如果在下面找到  这上面的引用会出现undefunct未定义
2.如果在块级作用域没有找到这会在全局进行查找如果还没有找到这回 报错。
如果出现window是定于变量要小心判断
1.如果在全局中定于了该变量  又在块级作用域  用window重新赋值这显示的为则新赋的值
2.如果出现一个块级作用于里面有window和var两个关键字则如   例3

*闭包

闭包的概念：生命在一个函数中的函数，叫做闭包
闭包：内部函数总是可以访问其所在的外部函数中声明的参数和变量，即使在其外部函数被返回（寿命终结）了之后
2.特点
  让外部访问函数内部变量成为可能；

  局部变量会常驻在内存中；

  可以避免使用全局变量，防止全局变量污染；

  会造成内存泄漏（有一块内存空间被长期占用，而不被释放）
3.闭包的创建
闭包就是可以创建一个独立的环境，每个闭包里面的环境都是独立的，互不干扰。闭包会发生内存泄漏，每次外部函数执行的时 候，外部函数的引用地址不同，都会重新创建一个新的地址。但凡是当前活动对象中有被内部子集引用的数据，那么这个时候，这个数据不删除，保留一根指针给内部活动对象。

var lis = document.getElementsByTagName("li");
for(var i=0;i<lis.length;i++){
  (function(i){
      lis[i].onclick = function(){
           console.log(i);
      };
  })(i);       //事件处理函数中闭包的写法
}  
//运行结果为每一个li添加事件 且 输出i的值为1~10;

 //案例一
    /* function outerFn(){
        var i=0;
        function innerFn(){
            i++
            console.log(i)
        }
        return innerFn;
    }
 var num= outerFn();
   num();//1
   num();//2
   num();//3
   num();//4
   var num2=outerFn();
   num2()//1
   num2()//2
   num2()//3
   num2()//4
//   num于num2 互不影响  每创建一次  就有一个新的内存地址值

 //案例二
    /* var i = 0;
    function outerFn() {
        function innerFn() {
            i++
            console.log(i)
        }
        return innerFn;
    }
    var num = outerFn();
    var num2 = outerFn();
    num();//1
    num2();//2
    num();//3
    num2();//4
    //当引用变量在是全局变量是者 虽然是内存地址不同但是引用的变量相同这回  则会出现感染
     */

//案例三
    /* function fn(){
        var a=3;
        return function(){
            return ++a;
        }
    }
    console.log(fn()())//4
    console.log(fn()())//4
    //变量为局部变量 每次调用都是一个新的值  fn()()这样调用到匿名函数
     */

使用闭包函数是要注意引用的变量是全局变量还是局部变量
1.全局变量有不同的调用可能会出现  全局变量污染现象
2.局部变量每一次的引用都是一个新的变量

JavaScript对象

1.通过字面量方式创建对象
 var obj = {
    name:"张三",
    age:18,
    isMale:true,
    run:function(){
        console.log('会跑步');
    }
}
console.log(obj);

2.构造方法创建对象
function poerson(name,sex){
    this.name=name;
	this.sex=sex;
	this.job=function(){
	alert('program');
    }
}
var child=new person("小孩","男");
var man=new person("男人","男");
person.job();
man.job();

原型和原型链

每个函数都有一个 prototype 属性：

*Class关键字 super关键字 继承 static关键字

es6语法
<script>
    class dongwu{
        constructor(name,age){
            this.name=name;
            this.age=age;
        }
        show (){
            console.log("名字："+this.name);
            console.log("年龄："+this.age);
        }
    }
	//extends继承关键字
    class Dog extends dongwu{
        constructor(name,age,pz){
            super(name,age); //调用父类构造方法
            this.pz=pz;

        }
        show(){
            super.show();//调用父类show方法
            console.log("狗的品种="+this.pz);
        }
        //static 定义静态方法 且只能被类名调用 一般是工具方法  不参加方法里的属性
        static xingwei(){
            console.log(this.name+"汪汪叫~~~")
        }
    };
   var dog=new Dog("小黑",3,"哈士奇");
    dog.show();
	Dog.xingwei() //打印出来的是 Dog汪汪叫~~~  

String内置对象方法

方法名	用法
indexOf(“str”)	查找第一次出现的str的下表返回一个numner类型的值
charAt(num)	后返回指定小标的字符
split(“分割的方式”)	把字符串分割成一个数组 默认把每一字符都分割
substr(num1,num2)	从下标为num1开始截取num2个字符（num2为截取的个数）
substring(num1,num2)	从小标为num1开始截取到下标为num2的字符（截取的为两者之间的字符）
replace(“正则表达式”/“字符串”,下标)	查找字符并返回下标值
includes(“查找字符串”，从下标为几开始)	方法用于判断字符串是否包含指定的子字符串。如果找到匹配的字符串则返回 true，否则返回 false。

数组

//定义数组
1.var arr=new array();
arr[1]=1
....
2.var arr2=new array(1,2,3);

3.var arr3=[1,2,3,4]
//数组里面可以放不同类型的数据    不建议使用
//数组中的方法
//1.indexOf(要查询的值,从下标多少开始查询)  //不会改变原来的数组
//2.concat(数组1，数组2，。。)   //拼接数组  并返回新的数组
//join(":")  //会把数组转化为字符串  以:分割
//sotr()//会修改原来的数组值
//unshift()在数组的开头添加一个元素  返回添加后的数组
//push()在数组的结尾添加一个元素	 返回添加后的数组
//pop()删除数字中的最后一个元素   返回删除后的数组
//shift()删除数组中的第一个元素   返回删除后的数组
//splice("删除的起始位置","删除的个数","添加的第一个元素",...)在数组任意位置删除或添加元素
// ^ 并返回删除元素组成的新数组

DOM模型

//js入口函数
window.onload=function(){
//js代码
}

	nodeType	nodeName	nodeValues
文本节点	3	#text	文本本身
元素节点	1	标签名相同	undefined 或 null
属性节点	2	属性名相同	属性值
文档节点	9	#document	undefined 或 null
注释节点	8	#comment	文本本身

增加元素节点

方法名	有无参数/传参类型	传参个数	有无返回值
appendChlid()	node	1	有 node
append()	node/string	1/n	无
insertBefore()	(newChild: Node, refChild: Node)	2	有

//insertBefore 向父节指定位置加一个节点 参数个数：2个，必填，参数类型：元素Node，返回值：Node类型 追加的Node
var aa=myUl.insertBefore(newli,myUl.childNodes[0]);
//向父节点末尾追加一个或者多个节点 参数个数：1/n个，必填，参数类型：Node/string，返回值：无
myUl.append(newli,"hello","你好");
//appendChild 向父节点末尾追加一个节点 参数个数：1个，必填，参数类型：Node，返回值：Node类型 追加的Node
var a=newli.appendChild(txt);

删除元素节点

方法名	有无参数/传参类型	传参个数	有无返回值
removeChlid()	oldChild: Node	1	有 node
remove()	无	无	无

// 删除本身
myUl.remove();
// 2.删除
// 返回值：删除的那个节点
// var b=myUl.removeChild(myUl.children[3]);
// console.log(b);

修改元素节点

方法名	有无参数/传参类型	传参个数	有无返回值
replaceChild()	newChild: Node, oldChild: Node	2	node

查找元素节点

// 4. 查找
// 获取的是节点
//查询第一个孩子的节点
// console.log(myUl.firstChild);
//查询最后一个孩子的节点
// console.log(myUl.lastChild);
var li03 = document.getElementById("li03");
//获取兄弟标签
// console.log(li03.nextElementSibling);
// console.log(li03.nextSibling);
// console.log(li03.previousElementSibling);
// console.log(li03.previousSibling);
// console.log(li03.parentNode);

克隆

  // 克隆
// var d = myUl.cloneNode(true);
// console.log(d);

获取属性

 // 获取属性值
var str = myUl.getAttribute("id");
 // 设置
myUl.setAttribute("title","标题");
myUl.setAttribute("class","d");

css样式

 // css 样式
  li03.style.color="red";
  li03.style.backgroundColor="yellow";

js（排它思想）应用于轮播图 Tba切换

for(var i=0;i<lis.length;i++){
 lis[i].onmouseover=function(){
 	for(var j=0;j<lis.length;j++){
 		lis[j].className="";
 	}
 	this.className="item";
 }
}

可以为element设置属性

for(var i=0;i<lis.length;i++){
lis[i].index=i;
 lis[i].onmouseover=function(){
 	for(var j=0;j<lis.length;j++){
 		lis[j].className="";
 	}
 	//this.className="item";
     //位lis设置index属性 值为i= 1,2,3.....
 	lis[index].className="item";
 }
}

鼠标在页面上的位置

一、clientX、clientY
点击位置距离当前body可视区域的x，y坐标

//二、pageX、pageY
对于整个页面来说，包括了被卷去的body部分的长度

三、screenX、screenY
点击位置距离当前电脑屏幕的x，y坐标

四、offsetX、offsetY
相对于带有定位的父盒子的x，y坐标

五、x、y
和screenX、screenY一样

offset家族

1. obj.offsetWidth=width + padding(左右) + border(左右)
2. obj.offsetHeight=height + padding(上下) + border(上下)
3. obj.offsetTop指的是 该盒子到具有定位的父级元素之间距离
4. obj.offsetLeft指的是 该盒子到具有定位的父级元素之间距离
5. offsetParent 返回值：是元素：盒子的父级（具有定位）元素，如果没定位，( 一直向上找，知道找到body为止。)
6. offsetX、offsetY (相对于带有定位的父盒子的x，y坐标)

scrollWidth

1. scrollWidth = width + padding(左右) - 滚动条宽度(17px);

拖动进度条的案例

防止选择内容–当拖动鼠标过快时候，弹起鼠标，span也会移动，修复bug

​

//兼容性写法
window.getSelection ? window.getSelection().removeAllRanges():document.selection.empty();

防止冒泡和捕获

w3c的方法是e.preventDefault()/return false，IE则是使用e.returnValue = false;

function stopBubble(e) { 
//如果提供了事件对象，则这是一个非IE浏览器 
if ( e && e.stopPropagation ) 
   //因此它支持W3C的stopPropagation()方法 
   e.stopPropagation(); 
else 
   //否则，我们需要使用IE的方式来取消事件冒泡 
   window.event.cancelBubble = true; 
}

//阻止浏览器的默认行为 
function stopDefault( e ) { 
   //阻止默认浏览器动作(W3C) 
   if ( e && e.preventDefault ) 
       e.preventDefault(); 
   //IE中阻止函数器默认动作的方式 
   else 
       window.event.returnValue = false; 
   return false; 
}