一.网页

1.1 网页由三个部分组成：html结构、css表现、js行为。

结构：html用于描述页面的结构；
表现：css用于控制页面中元素的样式；
行为：JavaScript用于响应用户的操作；

1.2 标签上属性格式和样式属性上样式格式要特别注意


标签上属性特点——  属性名=“属性值”          例如：     <link rel="stylesheet" type="text/css" href="style.css">样式属性上样式格式—— style=“ 样式名：样式值；样式名：样式值”        例如：     <p style="color: red;font-size: 30px"></p>
我们两个人的选择，

二.HTML

html（Hypertext Markup Language）是超文本标记语言；html使用不同的标签来构成网页中不同的组成部分。

一个最基本的HTML页面：
<!DOCTYPE html>             <——————————   这个是html5的文档声明<html><head> <meta charset="UTF-8">                    <——————  告诉浏览器使用什么字符集去解析网页文件<title>网页标题</title></head> <body> <h1>网页正文</h1> </body> </html>

2.1 标签、元素、属性

html中最小单元是标签：<标签名>标签内容</标签名>
一个完整的标签称为元素；通常这里我们可以将元素和标签认为是一个同义词
HTML标签可以设置一些属性；属性特点：总是以键值对形式【name=“value”】；注意——值要有引号标记；
常见属性： id（标签的唯一标识）、title（指定标签的标题，鼠标移动上去，会提示文字）；

2.2 常见标签特点：


标签常分为块和内联元素；——————  div块没有语义，主要用来布局，span内联没有语义，主要用来选中文字，然后为文字设置样式（1）通常用块去布局，所以块元素中可以有内联元素，而内联元素中一般不要有块元素奥！！！！  （2）a标签中可以包含任何其他元素；（3）p标签中不可以包含任何块元素；块元素是独占有一块位置；而内联元素是内容有多少就占用多少；
块元素默认高度是由内容决定，宽度默认是父元素100%；
而内联元素宽度和高度都是由内容决定的块元素和内联元素区别：除了本质结构的区别外，样式也有区别；
核心就是块元素的盒子模型和相关边距对相邻元素的影响，
（1）块元素内边距影响盒子大小，但不影响内容区，外边距上左影响本身移动，右下外边距影响相邻
元素移动。
（2）行内元素，内外边距的水平影响和块元素一样，但是垂直方向会覆盖或者溢出占用相邻元素。
行内元素简单说就是水平方向好使，垂直方向不太灵。
同理行内元素的盒子模型和相邻元素的影响。
盒子模型的：内容区、边框、内边距、外边距》》》》》》》》》》》》》》》》》》》 细节注意点《《《《《《《《《《《《《《《《《《《（1）块元素有内容区可以设置，但是行内元素无法设置width、heigth；
（2）块元素设置内边距也正常(会影响相邻元素位置)，但是行内元素左右边距设置正常
（影响左右相邻元素），上下内边距有点异常现场（是会直接覆盖相邻上下元素奥！！！） span标签转为点样式：span {cursor: pointer;float: left;border: 1px solid #fff;width: 10px;height: 10px;border-radius: 50%;background: #333;margin-right: 5px;}

< html >标签用于告诉浏览器这个文档中包含的信息是用HTML编写的。
< head>标签用来表示网页的元数据，其中常用于定义浏览器不可见信息。
< body>标签用来设置网页的主体，其中所以在页面中可见的内容都在body标签中。
< iframe> 内联框架，就是在一个页面中引入一个外部的页面，和图片标签一样，通过属性src指向一个外部页面的路径;有一个属性name=“xx”，表示这个内联框架容器的命名，以后有些链接跳转可以指定在这个内联容器中显示奥！！！。
< img />标签是图片标签，可以用来向页面中引入一张外部的图片。属性：src：指向图片路径；alt：图片的描述。图片标签可以通过width和heigth属性来设置图片的大小。
< a >标签是超链接标签，属性：href：指向一个链接地址；title属性可以设置这个链接当鼠标移入一会后出现的提示信息， target：设置打开链接的方式—— _ blank新窗口、 _ self当前窗口。注意： a元素可以包含任何元素奥! 通过样式属性：文本中字符的修饰（上下划线）——text-decoration：underline/none；可以去掉下划线。

	块点状的超链接————  *  *  *  * 类似于这样的超链接。a{width: 5px;height: 5px;background-color: black;margin: 2px 2px;float: left;}<a href="javascript:;"></a><a href="javascript:;"></a>

实体—— 大于号（&gt；）、小于号（&lt；）、空格（&nbsp；）

在这里插入图片描述

三.CSS

html实在是太丑了，怎么办能让页面好看些呢？————css【层叠样式表】
Css可以对网页进行装饰，所谓层叠，是将网页想象成一层一层的结构；层次高的覆盖层次低的；css可以为网页的各个层次设置样式。

3.1 基本语法

css的样式表是由一个一个的样式构成，一个样式又是由选择器和声明块构成； css中核心就是选择器和声明块。
在这里插入图片描述

选择器种类：标签、类、id、
并集选择器：（ 选择器1，选择器2，选择器3…{ } ——表示这多个选择器各自都设置同一个样式）
复合或者交集选择器：满足多个条件选择器的元素设置样式——（ 选择器1选择器2选择器3…{ } ——表示同时满足多个选择器要求的元素设置样式）注意满足多条件的选择器之间是没有空格的，而且这样类型的选择器是对一个元素的描述奥！！！
层级选择器：层级实际上细分为父子和祖孙这两种，但是将这两者统称为后代元素或者祖先元素。
后代元素选择器： 祖先元素后代元素{ } 这边祖先和后代元素之间是有空格的，这是对后代多个元素描述的选择器方式奥！！。
上面的后代元素包含子元素和子孙元素，那么如果只需要子元素呢？———— 父元素 > 子元素选择器 { }
通配选择器： * { }

选择器小结

多选择器之间如果没空格的表示交集（一般是用于一个元素满足多个选择器条件），而空格表示层级后代元素（一般表示层级关系的多个元素，而且是选出子元素和子孙元素的所有标签奥！），大于号（>）表示子元素选择器（层级只有一层；只选出子元素的标签哦！）

语法：– 选择器 {样式名:样式值；样式名:样式值 ; }    选择器常见三类：标签名、类、id 使用语法： p {} 、.className { } 、#id { }声明块中每一个属性对就是一个声明；各个声明之间用分号隔开，声明由键值对构成（中间是冒号：）   – p {color:red ; font-size:12px;}      声明之间用分号（；）   声明内属性名和属性值用冒号（：）

3.2 伪类选择器：

何为伪类：当然顾名思义，它不是一个真实的类，它实际上是表示元素的一种特殊状态；何为元素的特殊状态？
当元素的特殊状态设置样式的时候，就用到这些元素的伪类来设置对应的样式了。

超链接几种状态：正常链接或者叫未访问过的（a：link）、悬浮（a：hover）、访问过的链接状态（a：visit，注意该状态下伪类的样式只能设置颜色）、点击的链接状态<>（a：active）
文本或者文本框：鼠标焦点（：focus），为文字内容选择部分设置样式（：：selection）火狐（：：-moz-selection）等

伪元素和伪类选择器：

伪类选择器是对元素的一些特殊状态设置样式；伪元素选择器用来设置元素的一些特殊位置设置状态；

伪元素选择器用来设置元素的一些特殊位置设置状态；如元素：first-letter 来表示该元素的第一个字符位置设置样式；
属性选择器：标签[属性名或者属性名=“属性值”]用于设置相同标签不同属性的标签的样式。
子元素选择器——标签1：first-child，表示该元素1是作为子元素，且是的第一个的子元素的样式才生效；或者标签1：nth-child（odd/even）{ background-color：red；}表示该标签1作为子元素，但是分奇数偶数的子元素设置样式；
兄弟元素选择器：元素1+ 元素2表示元素1的紧挨着的兄弟元素2设置样式，注意只对元素2设置该样式奥！但是条件是必须元素1和元素2是紧挨着的。
兄弟元素选择器：元素1 ~ 元素2表示元素1后面所有兄弟元素2都设置该样式，注意区别于上面，无论是否是紧挨着的兄弟元素奥！！！

3.3 样式常见方式：

行内样式：直接在标签的style属性上设置样式—— < p style=“color: red;font-size: 30px”> 特点：定位准确，但是耦合度高且不可复用。
内部样式表：：将页面上的样式独立到< style>样式标签内部；

	<style>p{               	标签选择器的方式；color: red; font-size: 30px;}    标签选择器的方式；</style>

外部样式表：：将所有的样式保存到一个外部的css文件中，然后通过标签将样式表引入到文件中；

	<link rel="stylesheet" type="text/css" href="style.css">

四.常用标签

4.1 文本标签

无序标签和有序标签；
文本标签：strong、i、b、del（删除标签）、ins（插入或者下划线标签）、pre（原本义格式标签）、sub（下标）、sup（上标）。
文本样式：字体颜色——color、文字大小——font-size、字体加粗——font-weight:bold 、文本字体——font-family：arial，微软雅黑（个人感觉cursive：草书字体，好看点）（sans-serif 非衬线字体）；文本行间距——line-height：xx px；行高越大行间距越大。行高理解为双线格之间的间距；文本中字母的大小写——text-transform: capitalize（设置首字母大写）; 文本中字符的修饰（上下划线）——text-decoration：underline；文本对齐样式——text-align：left/right/justify（两端对齐）/center；首行缩进——text-indent：2em（em表示一个字体大小）；文本个字符间间距——letter-spacing/word-spacing: 10px;

<ol>      有序标签                                    设置样式的话，在css中 ul{   list-style:none }  去掉样式。<li>列表项1</li>      1.列表项1<li>列表项2</li>      2.列表项2<li>列表项3</li>      3.列表项3
</ol><ul>    无序标签<li>列表项1</li> <li>列表项2</li> <li>列表项3</li>
</ul>

html语法规范：不区分大小写、注释不可嵌套、html标签必须结构完整，成对出现（或者是自结束标签）、标签中属性必须有值，且值必须加引号。

4.2 css盒子模型——盒子大小和盒子位置

目前盒子的位移几种方式：

目前盒子的位移方式：
1.默认块元素和内联元素文档流原生位置
2.对文档流中元素的原生位置通过外边距 margin-top 和margin-left的正负值移动盒子，正值正向移动，负值反向移动
3.盒子浮动，可以使元素成为块元素，而通常水平方向移动。
4.定位，相对定位相对于自身文档流位置left或者top偏移，由于没有脱离文档流，所以不影响周围元素位置，但会覆盖；而绝对定位脱离文档会影响周围元素位置，   绝对和相对定位最基础两点：是否脱离文档流（绝对周围元素位置是否会替补位置）、参照物是谁必须确定（相对浏览器还是相对于自身之前位置）

css在处理网页时，将页面中的每一个元素都认为包含在一个盒子中；将每一个元素想象成一个盒子，这样对于页面的布局就相当于摆放盒子，（1）盒子边框内（边框、内边距、内容）影响大小，盒子外边距影响盒子位置。

4.2.1 盒子模型结构：

在这里插入图片描述

内容区（content）：盒子中放置内容的区域，也就是元素中的文本内容，子元素都是存在于内容区中的。通过width和height两个属性可以设置内容区的大小。默认这两个属性设置盒子的大小不包含下面内边距和边框奥！！！
内容区大小很关键奥！它是其子元素的所可占用空间奥！！！
内边距（padding）：内边距指的就是元素内容区与边框以内的空间。使用padding属性来设置元素的内边距。
内边距的大小会影响盒子的内容区和边框之间的大小，所以（2）内边距会扩大盒子的空间奥！但是不会影响盒子的内容区域，内容区域才是子元素的占用空间。

	padding:10px 20px 30px 40px
– 这样会设置元素的上、右、下、左四个方向的内边距;所以四个方向的，默认都是上 、右 、下 、左 ； 
如果三个就是：上、左右、下；
两个表示：上下，左右padding:10px 20px;
– 分别指定上下、左右四个方向的内边距;同时在css中还提供了padding-top、padding-right、padding- right、
padding-bottom分别用来指定四个方向的内边距。内容区和内边距区别：
内容区和内边距是独立开的的，设置内边距会影响盒子的大小，但是不会影响内容区大小；
内容区大小只受width和heigth影响，这两个不变，虽然设置padding会影响盒子大小，但是内容
区大小还是没变的。且注意： 子元素一般默认都是在父元素的内容区奥，父元素的盒子的内边距呀对子元素没有影响奥！！！

边框（border） ：使用border属性来设置盒子的边框；

– border:1px red solid;               注意：边框设置的话必须三个属性都设置才生效；
– 上边的样式分别指定了边框的宽度、颜色和样式。也可以使用border-top/left/right/bottom分别指定上右下左 四个方向的边框

核心————（3）外边距不影响盒子大小，影响盒子的布局位置奥！本盒子外边距移动后，会对相邻盒子也造成移动，但是上和左边距一般移动的是自身，而下和右边距移动（挤）的是相邻盒子位置奥！！
外边距（margin） ：外边距是元素边框和周围元素相距的空间；margin属性可以设置外边距；注意：（4）外边距是元素之间的距离，不再影响盒子的大小了，但是影响盒子的位置了
（5）外边距的上和左边距一般是自身盒子的移动，而下和右边距一般是移动（挤）别人的盒子。还有外边距最终效果就是让自身周围有了边距空白缓存空间了。
（6）外边距设值才有auto 和负值奥！内边距没有这些设置

用法和padding类似，同样也提供了四个方向的 margin-top/right/bottom/left。margin:auto 的 auto 一般是给外边距的左右设置距离，margin-left： auto 表示左边距最大
当将左右外边距设置为auto时，浏览器会将左右外 边距设置为相等，
所以这行代码margin:0 auto可 以使元素水平居中。
那么如何让内容垂直居中呢？  line-height：xx px；   一般就是设置行高和高度一样就会垂直居中；   
行高特点：每一行中内容在一行中默认是上下垂直的位置，所以如果让内容去就一行的话，那不就是垂直居中了嘛；

（7）外边距是和相邻元素之间的距离，如上边距是盒子的上边框和相邻其他盒子的距离，右边距是盒子的右边框和相邻其他盒子的距离。
外边距重叠：相邻的垂直方向外边距的会发生外边距的重叠（如果水平方向相邻外边距是不会重叠奥！！）：也分兄弟相邻的元素（取最大边框距离，如上元素的下边距100px，下元素的上边距也100px，实际上这样上下两个相邻的边距只有100px）、父子相邻的元素（子边框距离值会传递给父边框）
（8）块元素内边距影响盒子整体大小，但不影响内容区大小，外边距上左影响本身盒子的移动，右下外边距影响相邻盒子的元素移动。

4.2.2 盒子模型相关重要属性：

（1）display——修改元素的性质

前面了解到，内联元素虽然也是一个盒子，但是不支持设置width和height来设置宽和高，一般内联元素宽高是内容自动撑开的，可以通过display来修改元素的性质；
值得注意的是display也有隐藏的样式；但是它和visibility属性主要用于元素是否可见有区别；

display：none 和visibility ：hidden 区别：

1.display是将该元素完全在页面中隐藏，也不占空间；（人不在了，也不占位置了）
2.visibility是将该元素隐藏，但是该元素占用位置还是保持的，不会被其他元素覆盖奥！

（1）display 选值:– block:设置元素为块元素
– inline:设置元素为行内元素
– inline-block:设置元素为行内块元素
– none:隐藏元素(元素将在页面中完全消失)（2）visibility 选值:– visible:可见的 
– hidden:隐藏的- auto  自动，垂直和水平方向的滚动条自动按需添加。- scall  垂直和水平方向的滚动条无论内容多少都存在。

（2）overflow——该属性定义子元素溢出父元素内容区的内容会被如何处理>>> 也是开启BFC模式较好方式

当相关标签里面的内容超出了样式的宽度和高度是，就会发生一些奇怪的事情，浏览器会让内容溢出盒子； 通过overflow来控制内容溢出的情况
子元素的样式会默认继承父元素，如div01下有个div01；div01宽100px，则子的div02如果不设置宽度，默认会充满父元素的内容区，但是如果子元素div01设置200px宽度，则会超过父元素的从而溢出父元素的内容区；所以可以设置父元素overflow属性来处理子元素溢出父元素内容区的那部分内容。

父元素的内容区中有子元素，但是子元素的样式溢出了父元素，这时候可以在父元素中设置overflow
来控制子元素溢出的情况处理。
可选值:
– visible:默认值，溢出的时候外边继续显示
– scroll:添加滚动条，无论子元素是否超出父元素，都会有滚动条，且垂直和水平方向都有滚动条；
– auto:根据需要添加滚动条，更加子元素在父元素的内容区的情况，自动调整水平和垂直方向的滚动条，按需设置。
– hidden:隐藏超出盒子的内容解决容器高度塌陷问题——
父元素:after{content: "";height: 0;clear: both; /*overflow: hidden;*/display: block;/*visibility: hidden;*/}

在这里插入图片描述

（3）文档流

文档流是指文档中已实现的对象在排列是所占用的位置； 块元素在文档流中默认垂直排列，内联元素在文档流中默认水平排列。
文档流约束特点：在窗体中自上而下分成一行行，并在每一行中按照从左往右的顺序排放元素；即 文档流约束特点——文档流中元素默认会紧贴到上一个元素的右边，不足时会自动换行或者是块元素本身特点的换行；即——块元素独占一行，且自上向下排列；行内元素只占自身大小，且自左向右排列，超出部分才换行
每一个元素默认都是紧贴上一个元素的右边，不足时会另起一行；该特点对于块元素，原本块元素就是独立一行，所以第二个块元素会自动另起一行；这样很麻烦，元素无法灵活布局；所以出现了浮动特性float；所谓浮动就是使元素脱离原本文档流的约束，在父元素中浮动起来；

--------------------------     文档流和浮动队对立    ---------------------------文档流特点——块元素默认垂直排列，内联元素默认水平排列； 如果脱离文档流这些特点就不会受限；悬浮脱离文档流特点—— float：none就是默认还是按照文档流约束。 float：left表示本元素脱离文档流，向左侧浮动文档流是元素的自然位置布局；       
浮动是使元素脱离自然位置的约束；受父元素的边界和其他浮动元素的约束
定位也是对元素自然位置的补充；

（4）浮动

对于页面中文档流的约束规则；出现了浮动规则，所谓浮动，是使元素脱离原本文档流的约束（脱离文档流了，那么后面还在文档流中元素会自动补齐的奥！！！），在父元素中浮动起来。

文档流特点：块元素是默认垂直排列，内联元素是默认水平排列
浮动特点：脱离文档流，然后元素会向左上或者右上浮动，直到遇到父元素的边框或者其他浮动元素；浮动使用float属性。
• 可选值:
– none:不浮动
– left:向左浮动 
– right:向右浮动

脱离文档流浮动的特点：

块级元素和行内元素都可以浮动，当一个行内元素浮动以后将会自动变为一个块级元素？；块元素浮动而脱离文档流后，默认的宽度和高度是由内容撑开。
当一个块级元素浮动以后，宽度会默认被内容撑开，所以当漂浮一个块级元素时我们都会为其指定一个宽度；
浮动后，会脱离文档流，那么文档流的位置肯定也不会占用了，其下方元素会补齐，类似于display隐藏而不占原本位置一样奥！！！浮动的元素是相对于父元素的，所以会一直向上漂浮直到遇到父元素的边界或者其他浮动元素边缘；
元素默认会变为块元素，即使设置display:inline以后其依然是个块元素。
浮动特点：脱离文档流，然后元素会向左上或者右上浮动，直到遇到父元素的边框或者其他浮动元素；浮动元素和普通文档流中元素发生重叠，浮动元素悬浮于最上，但是普通文档流中文字不会被浮动元素覆盖，而是会自动悬浮于浮动元素周围奥！！！
元素只要浮动了，就会变成块元素，而通常块元素自身浮动一般就是左右悬浮移动（同时块左右浮动后，占位优先级是比文档流要高奥！），如果想要上下相邻的元素浮动在一水平上，则这上下相邻元素必须同时都浮动起来。才能在同一水平奥！！！


》》》》》》》》》》》》》》》》》》》》》》》》》》》》》浮动比较难理解的部分：《《《《《《《《《《《《《《《《《《《《《《《《《元素浮动一般不会越过周围浮动而上移奥，一般就在周围浮动位置就停了，而且虽然元素浮动了，可能会覆盖文档流约束中补上来的元素，
但是浮动元素覆盖只会覆盖补上来的元素，不可能覆盖原本文档流中元素位置奥！简单说块元素浮动只能覆盖之前水平方向，
而原本垂直方向是不可以覆盖的奥！简单但是不全面的理解——————通常块元素自身浮动一般就是左右悬浮移动，如果想要上下相邻的元素浮动在一水平上，则这上下相邻元素必须同时
都浮动起来

clear属性可以用于清除元素周围的浮动对本元素的影响，就是说某个元素使用了clear属性，会清除掉本元素被其他周围浮动元素的位置影响奥！！！
clear————用来清除其他浮动元素对当前元素的影响——clear：none/left/right/both（清除左右两侧浮动元素对当前元素最大的浮动元素的影响！！！）简单说：清除周围元素的左侧或者右侧浮动的影响，可以理解为对左侧或者右侧元素没有浮动时（即在浮动前位置），当前元素的所在文档流位置
浮动可能引起一些问题：但是W3C中，页面中元素都有一个属性： Block Formatting Context （简称BFC）；该属性特点：

某个元素代开BFC属性后：
（1）父元素的垂直外边距不会和子元素重叠；
（2）开启BFC的元素不会被浮动元素所覆盖，开启BFC的元素还是会补齐脱离文档流的浮动元素的位置，但是如果元素补齐后会被覆盖的话，会自动
位置不会被覆盖奥！！！
（3）开启BFC的元素，可以包含浮动的子元素，即就是其子元素浮动脱离了文档流，但是还会受限其父元素的包围奥！！！

（4）定位 ————相对定位和绝对定位

个人理解：
文档流是元素的默认元素位置； 											浮动是脱离文档流位置，但是本身默认只是左右浮动位置；
文档流默认位置可以通过外边距margin来调整原先默认的位置

何为定位：就是将指定的元素放到页面的任意位置；
浮动是对文档流默认元素位置的变化调整，position属性可以控制Web浏览器在何处显示特定的元素。即可以使用position属性把一个元素放置到网页中的任何位置。

定位小结：

文档流的约束布局位置：叫做元素的自然位置；
position的相对定位relative，
特点：未脱离文档流（位置不会被其他元素占用）、不会移动周围元素，但是由于等级提升所以位置重叠的话会覆盖、偏移是参照本身自然位置的偏移position的相对定位absolute
特点：脱离文档流（位置会空闲而被相邻元素占用）、偏移参照是基于最近的定位祖先元素，周围没有定位元素默认body、一般元素设置绝对定位的话，同时会设置其父元素的相对定位，这样绝对定位是相对于父元素的偏移

position属性设置如下可能的四个值： ————规定元素的定位类型

	核心两点：（1）定位偏移参照物、（2）是否脱离文档流

static : 默认值，没有定位，元素出现在正常的流中； 在static属性值下——忽略left、top、right、bottom属性或者z-index声明。
relative：生成相对定位的元素，相对于元素正常位置进行定位 同时设置偏移量也是相对于其之前的位置的偏移奥！注意————（1）偏移的参照物就是本身之前的位置，不会移动周围元素位置奥！！（2）正因为不会移动周围元素，所以会覆盖周围元素内容，因为侵犯了周围元素位置和定位后元素的占位提升一个层级奥！！（3）相对定位的元素不会脱离文档流奥！！！即不会像浮动那样让周围元素替补偏移的位置奥。因此，left：20 会向元素的left位置添加20像素。
absolute：生成绝对定位的元素，相对于static定位以外的第一个祖先元素进行定位。元素的位置通过：left、top、right、bottom属性进行规定。特点——（1）开启绝对定位，会使元素脱离文档流；（2）开启定位后，不设置偏移量，则本元素位置没有偏移；（3）绝对定位的参照物是基于离它最近的开启了定位开关的祖先元素！！！，如果没有显式开启定位的父元素，则默认是body浏览器的起点为参照物进行偏移奥！！！（4）绝对定位会改变元素的性质（内联会变成块，所以原先设置的宽和高会生效），而相对定位不会。
fixed：生成绝对定位（固定定位）的元素，和绝对定义大部分特点相同，唯一不同就是只相对于浏览器窗口进行定位，但是这也不太好就是它一直固定在窗口那个位置，滑动条也不会改变它位置；只相对于浏览器窗口位置，滚动时候也不移动位置奥！！！。元素的位置通过：left、top、right、bottom属性进行规定.
position : relative/absolute/fixed 表示开启了原生的相对定位；同时必须通过left、right、top、bottom四个属性（通常其中两个top、left就可以了）来设置元素相对于器定位位置的左右上下的偏移量。如果没有设置偏移量，则元素不会发生任何位置的变化奥！！！

		.box2{width: 200px;height: 200px;background-color: green;opacity: 0.2;position: absolute;top: 100px;left: 50px;/*text-align: center;*/}

opacity 是透明属性：值在0~1 之间；
css中有个背景属性：background-color：red；还有背景图片：（1）background-image: url(图片相对地址);这个默认是图片小不够就复制平铺，图片大小大就显示左上角；所以可以设置一些位置属性： 背景图片默认是占有整个盒子（边框内的所有部分奥！内容区和内边距部分奥！！！）图片作为背景分为：图片背景和盒子一样大（正好），比盒子小（不断平铺复制图片）、比盒子大（图片的左上角作为盒子背景）
（2）background-position：center center；top left等；前提是——图片比较小，而且设置图片不可重复的情形下，设置单个小图片的位置。（3）background-repeat: no-repeat/repeat-x;设置是否重复平铺; （4）background-attachment: fixed; 设置图片背景类似于固定定位一样，只相对于浏览器窗口位置，滚动时候也不移动位置奥！！！scroll值则表示随着滚动条滚动而移除窗口了

在这里插入图片描述
上面是开启定位，但是定位真正偏移还是需要设定的，而且每次偏移都是相对于本次偏移的上一步的位置的偏移奥！！！

五.表单

html中最常见的表格和表单；表格是用来显示格式化的数据的，表单是用来提交信息的。 ,最初创建表格就是为了以表格的形式显示数据，后来表格可以布局，但是css在布局更好，所以表格作用就一个，表示格式化的数据的。表单是用来提交信息的，用来将用户填写的信息提交到服务器，最常见就是百度搜索框。（基础表单项：文本框、密码框、单选多选、提交、下拉列表）

表格标签：< table> < tr> < td> ;colspan=“2”（表示一个单元格跨两列）或者rowspan（表示一个单元格跨两行）、cellpadding（表示单元格内容和边框之间空白）、Cell spacing（表示单元格之间距离）

表格的常用样式：（1）在border标签中设置table和td之间的距离：
border-spacing ： xx px；用于设置table和td之间的距离的；     或者理解为相邻边框之间的距离属性
或者border-collapse : collapse ;  用来设置table和td边框之间的合并；  优先级比上面高
（2）
colspan=“2”（表示一个单元格跨两列）
rowspan    （表示一个单元格跨两行）通常给border设置宽度和边框合并（border-collapse : collapse ;）  最后给td设置边框的粗细、样式、颜色就可以了table{width: 300px;	border-collapse: collapse;		}			table td,th{border: 1px solid black;text-align: center;}			<!--行的奇数和偶数行显示不同颜色-->table tr:nth-child(even){   background-color: #bfa;	}

表单标签： < form> 该标签中必须要有两个属性：action 和 method；action表示提交到的服务器地址，method表示请求的方式；
表单的功能真正体现在表单标签内部的表单项：常见的表单项：text、password、radio、checkbox、select+option；
button标签下的type属性有：reset、submit、button三种类型。

<form action="#" method="get"><label for="username">用户名：</label><input  type="text" name="username" id="username"/><br /><label for="pwd">密码：</label><input  type="password" name="pwd" id="pwd"/><br />性别：<input  type="radio" name="gender" value="male" id="gender"/>  <label for="gender">男</label> <input  type="radio" name="gender" value="famale"  id="gender1" checked="checked" />  <label for="gender1">女</label> <br />爱好：<input  type="checkbox" name="hobby" value="movie" id="hobby"/>  <label for="hobby">电影</label> <input  type="checkbox" name="hobby" value="swimming" id="hobby1"/>  <label for="hobby1">游泳</label> <input  type="checkbox" name="hobby" value="trip" id="hobby2"/>  <label for="hobby2">旅游</label> <br /><button type="submit">提交</button>   //<input type="reset" value="重置" /></form>文本框：< input type="text" name="name">密码框：<input type="password" name="pwd">多选框：<input type="checkbox" name="sports">单选框：<input type="radio" name="gender">提交按钮：<input type="submit" value="提交">下拉列表：<select> <option>北京</option></select>

在这里插入图片描述

六. 框架集

框架集就是在一个页面中同时引入多个页面；

		<frameset rows="25%,75%"><frame src="表单.html"/>	<frameset cols="20%,*"><frame src="列表.html"/><frame src="表格.html"/></frameset></frameset>

目前开发流程：    1.结构   2.样式   3.位置（先通过内外边距+浮动设置位置，最后实在不行用定位）样式注意细节：
（1）内边距影响整体盒子大小，不影响内容区域
（2）外边距影响盒子位置，上左影响自身位置，左下影响相邻盒子位置
（3）背景图片和背景颜色一样，是占用整个盒子大小，而不是内容区域奥

JavaScript

起源原因：早期网络非常慢，用于处理网页中前端的验证的，用于检查用户输入的内容是否满足某些规则的；现在网络已经很快了，js已经用于前端所有动态的效果。

JavaScript包含三个部分：ECMAScript（js语法规则）、DOM（文档对象模型）、BOM（浏览器对象模型）；

最终js实现对文档（document.write(’< h1 >helloworld!< /h1 >’);——让文档中body区域输出一段内容）和浏览器的操作（alert(‘第一行警告代码’);——控制浏览器弹出一个警告框）。

一 js语法

》》》》》》》》》》》》》》》》》》》》》》         细节          《《《《《《《《《《《《《《《《《《《《《《《《《
（1）js中函数和方法注意点：函数是直接使用， 如  alert（）函数；方法需要有对象进行调用；  如tostring方法； xxx.tostring()实际上方法和函数基本一样，就是使用场景不用

字面量：不可改变的值，简单说就是常量。如“hello” 和 hello 区别；前面是字符串字面量hello，后面是变量hello
变量：用来保存字面量，而且变量的值可以任意改变的。JS中变量命名的标识符是基于Unicode编码，所以变量名可以为中文，但是通常不会用中文奥！！
标识符：如变量名、函数名、属性名都属于标识符；命名规则——标识符中包含：字母、数字、_、$；但是不能以数字开头，不能包含#、@这些特殊字符；
JS中有六种数据类型：String字符串、Number数值【整数和小数】、Boolean布尔、Null空值（声明了，也赋值了，但是赋值为null，undefine表示声明了的，但是未赋值的状态）、Undefine未定义（undefine衍生自null，所以这两个值做相对判断的时候，会返回true；如undefine==null）、Object对象【这是引用数据类型】；区别于java中强类型语言，数据类型必须强制限定奥！！！JS中数据类型都通过var x；来声明。通过—— typeof 变量名 ——来判断该变量的数据类型【返回的类型都是小写的】。还有一个 p instanceof person 用来检查一个对象是否是一个类的实例。
类型判断三种方式： typeof xx 返回的变量数据类型的字符串值 typeof a = = = “undefined”；对象 insanceof 类名：判断的是对象是否是指定类型； === 如var a； a===undefined;这个是判断变量是否是指定类型值，不是字符串奥！！
var 和 let的区别： var 声明的变量范围是函数级别的比let块{}级别要大一点、var声明的变量会提升声明时间，而let变量是不会提升的、let声明的变量不会成为window对象的属性，var声明的变量会成为window对象

Null空值（声明了，也赋值了，但是赋值为null，undefine表示声明了的，但是从未赋值的自然状态 ）、
Undefine未定义（undefine衍生自null，所以这两个值做相对判断的时候，会返回true；如undefine==null） 变量为undefine 表示 变量声明且没有赋值；  如var a ； 就表示为undefined； 
null表示这个变量声明，且赋值了，但是赋值的内容是null；如 var a = null； 下一步就是创建好对象，然后赋值给变量a的；
null一般用于变量起始和结尾，起始表示要给这个变量准备赋值为null的，结尾表示给这个变量解除赋值对象，同时释放对象占用的内存。简单说：                   ================      核心基础      =========================
undefined表示表示创建的变量未赋值的初始状态；
而null表示我创建的变量就准备给它赋值为引用类型的，而不是基本类型，但是对象还没创建好，引用还没有，所以先给该变量一个null来赋值。

上面的数值如果通过某些计算后，超过最大值，则会显示infinity/-infinity（正无穷/负无穷——字面量奥！但还是number类型啊！）。 还有一个字面量——NaN（not a number）这个字面量的类型也是number类型奥！！如 var x = “a”*b";
Null类型的null取值，专门用来表示一个空对象； 所以该null的typeof的返回类型是object类型奥！！ 注意，该类型没有tostring方法
Undefined类型的undefined取值，表示一个变量声明了，但是没有赋值， 该 undefined的typeof的返回类型还是Undefined类型。 注意，该类型没有tostring方法
强制类型转换：通常将其他类型转为 string、 number 、 boolean 这三个类型；（1）转string——1.就是将本类型变量xxx.tostring()；或者 2.通过函数方式来转换—— String（xxx）；（2）其他类型转为Number—— 通过函数Number（xxx）直接转为number类型，如果是非数值字符串（空串转为0；true转为1；false转为0；null也会转为0；undefined转为数值类型为NAN；其他会转为NaN非数值这个字面量）。还有一个方式： parseInt()函数，可以将字符串中数值部分解析出来，其他部分不管；解析原理是先将变量转为string类型，然后将这个字符串中每个字符进行解析，取出数值部分，没有数值部分就返回NaN；（3）其他类型转Boolean；就是使用函数Boolean（xxx）—— 数字类型转布尔特点：除了0和NaN是false，其他都是true；—— 字符串类型转布尔特点：空串和null和undefined是false，其他都是true；
上面的类型转换——字符串可以通过+“”来自动转为string类型；数值转换可以通过——任何值做 - * / 运算都会自动转换为number，所以可以减0、乘1、除1也可以完成数值类型的转换奥！！（1）数值类型转换——还有一个最简单的方式：通过+操作符就可以完成隐式number类的转换；（2）布尔类型转换—— ！！xxx 通过两个取反，就可以使用隐式类型转换，将任意类型自动转为布尔类型对象的布尔类型转换，一般对象中有内容转为布尔一般是true，没有没内容是false，但是如果没定义的变量则返回保存。如obj.name

	var obj = new Object();obj.name = "sunx";obj.age = 22 ;console.log(!!obj);      ————> true    console.log(!!obj.name);         ————>trueconsole.log(!!obj.age);        ————> trueconsole.log(!!obj.gender);       ————> falseconsole.log(!!gender);       ————>   "Uncaught ReferenceError: gender is not defined"对象的布尔类型转换，对象有引用即赋值了的则返回true， 没有赋值的false，如果没声明的变量则报错。一句话就是：对象转布尔类型；如果有声明且赋值则转为true，如果有声明但没有赋值则转为false，如果没有声明则就是报错了。

二 js运算符

运算符也叫操作符；通过运算符可以对一个值或者多个值进行运算，并获取运算结果；如加减、typeof就是运算符。

基本运算符（二元运算符）：加、减、乘、除、求余；
一元运算符：只需要一个操作数；正和负运算符（+、-）; 和数学上正负号一样，所有类型的内容进行正或者负运行时，都会隐式进行number转换；
逻辑运算符：与（||）、或（&&）、非（！）; 注意—— 如果两个非布尔值进行与、或运算，那么会将其转为布尔值，然后进行运算，接着返回原值奥。
关系运算符：用于比较两个值之间的大小关系。（1）如果比较值中有非数值的，则会先转换成数值，然后进行比较奥！！如 true > false；实际上是 true转为1、false转为0，然后1>0成立，结果为true；（2）如果关系运算符两侧都是字符串，则比较的是字符编码的顺序奥！！
编码表： Unicode编码表中中文字符是基于康熙词典中顺序的；如果通过js输出十六进制编码对应的字符——console.log("\u2620")；如果想要在html中显示Unicode编码表中进制对应的字符的话，通过&#十进制值 ——如十六进制的0x2620对应的字符：< h1 style=“font-size: 100px;”> &#9760 ;/ &#9829 ;</ h1 >
相等运算符： ==运算符（如果类型不同，会做类型转换后，比较是否相对的）； ===全等（不会做类型转换比较的）；
条件运算符（三元运算符）：表达式？语句2 ：语句2；

三语句

前言：

前面的表达式和运算符等内容可以理解为是我们一门语言中的单词和短语，而语句是我们这个语句中一句一句完整的话
语句是程序中基本单元，js程序就是由一条一条语句构成的；语句是按照自上向下的顺序一条一条执行的；

在js中可以使用大括号{}来为语句进行分组。 同一组的语句中要么都执行到，要么都执行不到；一个{}中的语句我们也称为一个代码块

 三个窗口函数：alert（）confirm（）
函数  prompt（“请输入成绩： ”）；——  可以从键盘输入内容；该函数的返回值就是输入的内容，可以用一个变量来接收。

js中{} 大括号的代码块只是分组的作用，不是作用域的功能奥！就是说js中代码块的内容，在外部也可完全可见的；
流程控制语句：条件语句；循环语句；顺序语句；
switch…case… . ：在执行时会依次将case后的表达式的值和switch后的条件表达式的值进行**全等比较。 **
质数：是处理1和本身外，没有任何可整除的数，即一个整数n，在2~n-1任何x，不存在n%x==0的情况
break关键字可以用来退出switch或者整个循环语句； continue关键字作用于循环跳过本次循环；都是离最近的循环起作用奥！！！

四引用类型——对象{ 引用类型—注意对象的地址和内容的区别 }

对象前言

js和java中小异同：
1. 强弱类型；    方法返回类型和方法形参类型在js中都没有，就算声明或者定义变量也通用 var；2. 创建的对象方式不同；构造函数类似java中的类、
（1）对象中属性——js中，对象可以后加属性，即先创建好对象，然后直接通过对象.属性 = xxx；这样的方式来给对象中添加属性奥。如 var  对象 = new object（）； 对象.属性名 = xxx；
（2）对象中方法——js中对象添加方法，实际上和给匿名函数赋值一样，将匿名函数赋值给对象的一个属性就可以了。就是属性可以赋值为对象等如 var  对象 = new object（）； 对象.属性名 = function(){  xxxxxxx  }；3. js中构造函数类似java的类，构造函数的字面表现类似java中构造函数方法，构造函数隐含的原型对象使用，类似于java中父类。 4. js中可以设置对象的tostring方法，和java中一样。自定义tostring方法var p = new Person("sun",22,"nan");                    p.tmp = "hello";                          //先创建对象后，然后设置该对象指定的属性；p.toString = function(){                  //先创建对象后，然后设置该对象指定的方法；return this.name+" " + this.age +" "+ this.gender; }5. 回调函数：就是说这个函数不需要自己调用，而是浏览器会自动帮你调用；
6. js中常用对象： 普通对象，数组对象，函数对象，data对象，math对象。
7. js中的闭包（ 简单说——闭包类似于java中的私有属性+公有方法的表示方式；作用就是使得函数内部的数据外部可见、可操作或者是函数执行完后，里面内部数据还可存在。）是一个外部函数里面有内部函数，然后将内部函数return；闭包个数是基于外部函数调用的次数奥。8. 原型链： 在访问一个对象的属性时，先在自身属性中查找，找到返回，如果没有，再沿着__proto__这条链向上查找是否存在（类似于java中的父类，子类没有向上继承父类的属性和方法）
9. =======     js函数高级部分：原型和原型链、执行上下文、作用域和作用域链、闭包；     ========
10. 面向对象高级：（原型继承）在js中不是通过函数类型的继承来实现父子关系的奥！ java中是通过类型的继承实现的；
js中不同类型继承，一般可以用子类型的原型为父类型的一个实例对象；因为继承的本质是：自己实例上没有，就到原型对应的实例里面去找；
如果父类A，子类B，子类B.Prototype =  new 父类A（）；这样子类B创建的实例中没有某些属性，会到父类A这个实例里去获取奥；
即js中的继承就是子类型A的原型等于父类型B的实例就可以完成A继承B了。
11.  js中通常会将函数的属性写在函数内，而函数内的方法一般都写在函数对象的原型对象中去。这样这个函数创建的实例就不会每个实例里面
单独都保存一份相同的方法了，而是从原型（父类）中统一继承就可以了。
12. js中可以函数中再定义函数，而java中就不可以，js中函数的嵌套，就涉及到变量的作用域链（查找变量，有内向外查找变量）

      <script type="text/javascript">			function Person(name,age,gender){this.name = name;this.age = age;this.gender = gender;this.getName = function(){return this.name;}}var p = new Person("sun",22,"nan");						console.log("a" in p);//在原型（类似于父类中设置属性，p.__proto__就是定位到原型对象（即父类对象），js中先对象后，可以再设置属性）p.__proto__.a=4;			var pp = new Person("sun1",25,"nv");			// 判断对象中是否有指定属性，方式一console.log("a" in pp); 			/*  // 判断对象中是否有指定属性，方式二* console.log(pp.hasOwnProperty("a"));* */console.log(pp.a);		//判断目标所属类型console.log(typeof "abc"); </script>

基本数据类型之间没有任何的联系；不能成为一个整体。而对象是一种复合的数据类型，在对象中可以保存多个不同数据类型的属性。

4.1 对象的分类

内建对象——ES标准中定义的对象，如Math、Date、String、Number、数组对象、函数对象等定义的对象。
宿主对象—— 由JS的运行环境提供的对象，目前主要是浏览器提供的对象：console.log(xxx)；console是浏览器提供的对象。 DOM（document object Model文档对象模型；即Js通过DOM来随心所欲的操作HTML文档的）和 BOM 对象
自定义对象——由开发人员自己创建的对象。如何创建一个对象—— var obj = new object（）；new是创建一个对象；

         》》》》》》》》》》》》》》》》》》》  创建对象的核心 new 的分析《《《《《《《《《《《《《《《《《Java语言中，new关键字的作用是为一个对象（Object）分配内存，         即new + 类的构造函数，来为该类创建一个分配了内存的对象奥！！！（1）创建对象 
上面js创建对象是 new object()；  而java中创建对象是 new xxx（）；js是弱类型，所以通过object来统称所有不同类型，而java是强类型语言，不同类型，必须明确指出；
（2）对象中属性初始化
js中是弱类型语言，所以属性赋值可以在创建对象后，再单独设置属性；            即js对象可以动态的添加属性（方法）；
而java是强类型语言，属性必须在定义类型的时候就设置好；js中属性的增删改查：
var obj = new object（）；
增： obj.name = “tom”;
改： obj.name = “新值”;
查： obj.name;
删： delete obj.name;
检查对象中是否有指定属性：  “name” in obj——  true。 （3）对象的属性方式：  对象.属性名、  对象["属性名"]、对象[变量] 如： obj.name /  obj["name"] / var n = "name"; obj[n]对象的属性值： 可以是任何类型的值奥！  字符串、数值、布尔、或者是一个对象奥！！！

基本数据类型和引用数据类型：基本数据类型在栈中，引用数据类型在堆中，基本数据类型之间的赋值和变更后，都是独立的，而引用类型之间的赋值是地址的赋值，数据在堆中，所以引用类型值变更后，相关地址引用的变量中内容也会跟着改变。
判断对象中是否有指定属性的方式： “属性名” in 对象返回为true则是包含，返回为false则对象中不包含该属性名；
对象中属性的调用方式：（1）对象.属性名、（2）对象[属性名]

4.2 对象的创建

方式一： var obj =new object()；—— new 和构造函数的方式

1.new object() 这种方式是最传统的创建对象的方式；
2.之后演进-------工厂对象来简化创建对象；
3.用不同的类型的构造函数来创建具体类型的对象————构造函数就是一个普通函数，创建方式和普通函数没有区别，但是调用方式有区别：普通函数调用就是：函数名（）；  而构造函数还需要加上new 关键字： new person（）；js中构造函数和java中类的关系：
js中构造函数功能上类似java中的类，语法结构书面写法上类似于java中的类的构造函数。尤其其中   this.属性   表示本地属性，而不是指父类属性 
js中构造函数的特点：  
（1）函数内的this就是表示新建的对象、（2）该构造函数默认有返回内容this，就是创建的对象返回
》》》》》》》》》》》》》》》》》》》》》》》          构造函数的创建         《《《《《《《《《《《《《《《《《《《《《《《构造函数中的this是指——————创建的当下的实例对象；
function Person(name,age,gender){ this.name = name;this.age = age;this.gender = gender;this.getName = function(){return this.name;}}var p = new Person("sun",22,"nan");
console.log(p.name);this的三种情况：
（1）普通函数中this表示window对象；
（2）方法中this是调用该方法的对象；
（3）构造函数中this就是通过该构造函数创建的对象的代理； https://blog.csdn.net/u013250416/article/details/40869287     ——————     函数中this的对象指向
在一般情况下，this对象时在运行时基于函数的执行环境绑定的：在全局函数中，this等于window，而当函数被作为某个对象的方法调用时，
this等于那个对象。但是，匿名函数的执行环境具有全局性，因此它的this对象通常指向windows.可以修改this表示的对象
fun(param1,param2)  ~~~  fun.call(obj,param1,param2)
可以通过函数对象.call（自定义this的对象）；使用call来改变this的值。 
如果某个函数是浏览器自动调用的，那么如何修改其中的this呢？就是设置一个匿名函数，将需要修改的函数放在匿名函数中，自己来调用；
将匿名函数用来作为给浏览器自动去调用，在匿名函数里面来进行自己的手动的 fun.call(obj) 使用。

方式二： var obj = { }；—— 字面量方式大括号相当于 new object（）；

方式二字面量创建对象的方式，好处：简单、而且可以在创建对象的同时，直接指定对象中属性；

字面量的方式创建对象的语法：
var obj = {属性名： 属性值，属性名：属性值，...
}；其中属性名可以加引号，也可以不加引号，如果加引号类似于json数据格式；所以json可以在js中可以直接作为一个对象使用。

（1）对象中属性——js中对象可以后加属性，即先创建好对象，然后直接通过对象.属性 = xxx；这样的方式来给对象中添加属性奥。如 var 对象 = new object（）；对象.属性名 = xxx；
（2）对象中方法——js中对象添加方法，实际上和给匿名函数赋值一样，将匿名函数赋值给对象的一个属性就可以了。如 var 对象 = new object（）；对象.属性名 = function(){ xxxxxxx }；

4.3 函数 ————函数也是一个对象,但函数是有功能的对象

（1）函数也是一个对象，函数作用——可以封装一些功能的代码(语句)；
既然函数也是对象，那么该函数就可以赋值给变量；函数拥有普通对象的所有功能，另外还多一个功能就是___还可以封装一些功能语句。
（2）构造函数和普通函数一样；

（1）创建函数1.1 函数的构造函数方式————var  fun = new function（“函数内封装的语句”）  这种创建函数方式，是通过函数的构造函数的方式来创建对象的，一般很少用1.2 函数声明的方式————         					这种方式特点： 在所有代码执行之前就优先声明好和创建好了 函数。function 函数名（形参一，形参二，...）{函数封装的语句；}1.3 函数表达式的方式————                   		这种方式相较于第二：只有在该方式后面才能调用该函数var 函数名 	= 	function（形参一，形参二，...）{函数封装的语句；}（2）调用函数2.1	 fun（）2.2  函数名（）fun  ——  返回后面的是函数对象的整体；
console.log(函数名) —— 返回function 函数名（形参一，形参二，...）{函数封装的语句；
}

函数创建通常使用——1. 函数声明方式和 2.函数表达式的方式
函数的形参是不需要var进行类型说明的，区别于java的形参，js中直接function sum（a,b）; java 中 public void sum（int a, int b）
js函数中，最后如果需要返回值，和java一样，在函数最后，将返回值用return 返回。 js函数没有返回类型，默认返回return undefined；

function sum(a, b){				return a+b;}var result = sum (4,6);

函数名（）和函数名的区别：加括号是调用函数，相当于使用的是函数的返回值（如果没有值就是返回undefined）； 没加括号是函数对象，相当于使用函数对象（就是该函数定义的内容——function xxx{ yyy…}）。

js和java基本语法的区别
（1）一个强类型，一个弱类型，强类型必须指定参数类型，弱类型直接不需要参数类型
（2）对象创建：  强类型需要定义类型结构，弱类型不需要，而是直接创建对象，对象的属性也是创建对象同时或者之后才定义的
var obj = {属性名：属性值， 属性名：属性值}；
School s = new School（）；（3）函数创建：  js中函数也是一个特殊对象，函数创建需要关键字function，且函数无返回类型，形参也不需要参数类型；返回值也用return
function sum(a, b){				return a+b;}
public int sum（int a ,int b）{return a+b；
}
（4）js中函数没有指定返回值类型，可以是任何类型，所以直接用var定义一个变量来接收，var result = sum(1,2) ; java中，必须按照函数指定的类型的变量才可以接收    int result = sum（1,2）;

如何判断对象有哪些属性（函数中属性的遍历）—— for（var n in 对象）{ } 或者 单独一个 “指定属性名” in 对象来判断指定对象中是否有指定的属性 还有一种方式：对象.hasOwnProperty（）

4.4 函数和变量的声明提前

变量声明使用var 声明的方式则会提前声明的，赋值是在后面赋值的；  函数声明 function 函数名（）{} 方式，会在所有代码执行之前，该函数的函数对象就会被创建。上面var 变量只是声明，而函数这边是既声明好，
函数对象也创建好了

作用域：（1）全局作用域【编写在script标签中的js代码，都在全局作用域、全局作用域中有一个全局对象window{代表浏览器的窗口，由浏览器创建，全局作用域中创建的任何内容都是该window对象的属性奥！！}，可以直接使用】、（2）函数作用域【表示在函数中声明的变量，只会在函数范围内有效，但是如果函数中引用的变量在函数中没有声明，则会默认找外面的变量】
变量的声明：上面知道全局变量都是window对象的属性，所以没有var 声明的变量，实际也是window.变量；而使用var 声明的变量特点：会在所有代码执行之前被提前声明该变量的。

console.log(a);
var a = 3;          //  a = 3  使用var声明的变量a，会在代码最上面就进行了var a；的声明；  //  而没有用var 声明的就没有这个过程，提前使用会报错使用 var 定义的变量 —— var n = 1；过程分为两步：
1.  在代码最上面先 var n声明该变量;
2.  然后在var定义的位置才进行变量的赋值。如果在函数内部，直接使用变量，没有var声明，则这个变量是全局的变量奥！如果在函数内部声明的变量则是函数作用域的变量奥！！！

在函数中，不使用var声明的变量都会默认是使用的外面的全局变量：即 function xx（）{ window.c = 2 }
解析器（浏览器）在调用函数每次都会向函数内部传递一个隐含的参数————this；这个this就是函数的调用对象奥。
函数的原型对象：创建的每一个函数，浏览器或者解析器都会向函数中添加一个属性prototype，这个属性对应着一个对象，就是我们所谓的原型对象，一般普通函数调用属性prototype没有任何作用，通常是作为构造函数的函数对应的原型对象有意义，因为可以作为该构造函数下许多实例的公共对象（空间），而这些实例如何访问到该原型对象呢？函数对象通过prototype访问，构造函数创建的实例需要通过__proto__ 属性访问到该原型对象。
原型对象相当于一个公共的区域，所有同一个类的实例都可以访问到这个原型对象，所有我们可以将对象中公共的内容，统一设置到原型对象中。

原型对象使用过程：
每一个函数都会有一个属性，指向原型对象；  即使该函数创建的实例对象也会指向这个原型对象奥！  但是访问的方式不同：
函数通过属性prototype访问到原型对象；而函数创建的实例通过属性__proto__ 才能访问到；
原型中存放公共内容，当访问对象资源时，优先访问对象中资源，没有会到原型对象中找，然后返回；一句话：  js中构造函数类似java的类，构造函数的字面写法类似java中构造函数，构造函数隐含的原型对象使用，类似于java中父类。

4.5 数组对象—— Array

类似于普通对象Object一样。普通对象——var obj = new object(); 数组对象——var arr = new Array();
数组和对象一样，是用来存储内容的；不同的是普通对象，是通过属性来存储，而数组是通过索引映射成属性来存储内容的，然后数组中一个索引整体称为一个元素；实际上对象中一个属性和数组中一个元素意义是类似的。
数组的常见方法使用详情

数组的特点

var arr = new Array(); 创建数组后，赋值就是arr[0] = xxx；和对象的属性一样赋值，查询也和对象属性一样console.log(arr[0])；
数组的长度属性：length，这个属性返回是数组最大索引+1；并不是数组中真正有效元素个数
数组创建和普通对象创建对比：都可以用构造函数来—— var obj = new object（）； var arr = new array（）；或者使用字面量方式——普通对象用大括号var obj = {}；，数组用中括号 var arr = [ ]；
数组常用方法： push【数组末尾加元素】、pop【数组末尾减元素】、unshift【数组开头加元素】、shift【数组开头减元素】、slice（start，end）返回截取数组中指定索引的元素成新数组；end不包含奥，且可以是负数如-1倒数第一个，-2倒数第二个、
splice（start，number，替补新元素…）该方法表示删除原数组中指定位置指定个数的元素，并可以用新元素替换删除的元素位置；上面slice是删除元素成新元素返回，且不改变原数组，而splice是改变原数组奥，类似将原数组中指定元素替换成新元素奥。 splice是一个多功能方法：可以删除指定元素，可以替换元素，可以指定位置添加元素。
数组对象1.concat(数组对象2…)——将多个数组组合成一个新数组返回； 数组对象.join（连接符）——将数组以参数指定的连接符拼串组成一个字符串返回。 reverse（）数组元素翻转；sort排序方法；
数组的方法join（“-”）和字符串的方法split（“-”）正好相反，join是将数组联结成字符串；而split 是将字符串分解成数组。

//数组的遍历
方法一：就是for循环
方式二：用foreach 方法，但是有局限，IE8以及下不可用，所以谨慎使用foreach来遍历；//foreach 方法中参数是一个函数，该函数就是用来封装数组的功能函数，   注意该方法在IE8以上才可用//该还是第一个参数是数组中的值，第二个参数是数组中值对应的索引，第三个参数就是数组对象。arr.forEach(function(value,index,obj){			 	console.log(typeof value);})

4.6 Date/Math/String对象

可以简单了解了解，和java中相关类类似，就是对象中方法要熟悉点；
注意String字符串对象本质就是字符数组。如 var str = “hello”—— new array(‘h’,‘e’,‘l’,‘l’,‘0’)；

4.7 正则表达式

正则表达式是用来检测一个字符串是否符合某些规则；
如： var reg = /aaa/i //表示创建一个忽略大小写，规则是3个a的正则对象
reg.test(“bcdaaab”) ；判断字符串"bcdaaab" 是否满足正则对象中设置的规则；满足返回true，否则false；

最常用的是test方法。用正则对象检查字符串是否满足某个规则常用字符串和正则表达式支持的方法：
search——检索与正则表达式相匹配的值。  和字符串的indexof类似，区别是匹配可以是正则表达式，而indexof不可以。
match——找到一个或者多个正则表达式的匹配。      作用是从字符串中提取出匹配规则的内容
replace——替换于正则表达式匹配的子串。
split—— 基于正则规则来分割字符串。
test—— 用于正则对象检查指定字符串是否符合的条件方法 
如：
var reg = /[A-z]/ ; 
console.log(reg.test("a"));  //返回为truesearch 是搜索出匹配的索引位置 ；  match是提取出匹配的内容 ； replace 是将匹配的内容替换  ； split是基于匹配的规则来拆分字符串

首先创建正则表达式对象：

（1）构造函数创建正则对象的方式：  var reg = new RegExp("正则表达式"，“匹配模式”);   匹配模式： “i” 表示忽略大小写，“g”表示全局匹配模式
（2）字面量创建正则对象的方式：    var reg = /正则表达式/匹配模式；使用正则对象去检查指定字符串是否符合正则规则：
reg.test(str)；var reg = /[A-z]/ ; 
console.log(reg.test("a"));  //返回为true//通过正则来去除字符串中的空格；//  reg = /\s/g;   //表示去除所有的空格，首尾和中间所有的空格 reg = /^\s*|\s*$/g;   //表示只去除所有开头的空格和所有结尾的空格 var str = "       hello sun    ";str = str.replace(reg,"");console.log(str);  //返回为true

[ ]表示字符占位符，里面的内容是或的关系。
{}表示量词。{m,n}表示出现m~n之间的次数。如 /a{2,5}b/ 表示a出现2到5次。
量词： +（表示至少一次，即一个或者多个）、*（0个或多个，有没有都可以）、？（0个或者1个）；
开头规则： ^小三角表示开头；如/ ^a/ 表示以a开头的规则；
结尾规则： $; 如/ a $/，表示字符串以a结尾；

/^a$/ 表示以a开头且以a结尾，只能是“a”、而不是“aa”、“aaa”之类的奥；
注意：  当开头和结尾同时使用的时候，里面的正则约束是绝对规则，很严格的约束，差一点都不行。

在正则表达式中，. 表示任意一个字符，那么如果就是检查是否是一个点（.）呢？有转义字符“\”; /./表示一个正则点(.)。
转义字符表示的正则含义： \w[A-z0-9_ ]【即表示字母、数字、下划线_ 】、\W [ ^A-z0-9_]、\d[0-9]、\D[ ^0-9] 、 \s【表示存在空格】、\S[ ^ ]【表示存在非空格】、 \b单词边界【即不与其他字符连接，如var reg = /\dchild\d/,表示检查是否有child这个单词，children也不符合奥】

4.8 DOM—— 宿主对象（由浏览器环境提供）

dom即文档对象模型；作用是——可以让js通过Dom来对html文档进行操作的，可以随心所欲的操作文档中每个元素对象；

D——document 文档；整个HTML网页文档；
O——object 对象；表示将网页中每一个部分都转换为一个对象；
M——model 模型；使用模型来表示对象之间的关系，方便我们获取对象；

4.8.1 DOM中节点—— 最基本单元（节点和元素要区分开）

节点是一个宽泛的概念，而元素节点是节点中一部分，只是标签那类

节点是构成我们网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点；如标签、属性、文本、注释、整个文档都是一个节点，但是他们类型不同，标签是元素节点、属性是属性节点、文本是文本节点、文档是文档节点（这个对象在web网页中是最大的，表示整个网页奥）。
节点通用属性： nodeName 、 nodeType 、 nodeValue 这三个属性；
文档节点对象——这个对象已经由浏览器为我们提供了，它是window的属性。 document 对象；这个对象是web网页中最大的，表示整个网页，在DOM的模型中属于顶层对象，可以通过这个对象的属性或方法来获取旗下其他元素对象奥！！！
上面的文档节点对象document可以获取元素节点： document.getElementById（“标签的id”）

一. 通过document对象获取指定元素节点的方式：      注意————下面是获取标签元素节点的方法奥！！！ （1）通过id属性获取一个元素节点对象：    getElementById（）；       返回单个对象
（2）通过标签名获取一组元素节点对象：    getElementsByTagName（）；     返回一组对象 
（3）通过class获取一组指定class的标签对象——getElementsByClassName（“标签class属性值”）；但是只有ie8以上可用。所有谨慎点。但是
可以是querySelector（“选择器方式（如 .div  div）”）—— 该方法可以基于css选择器的方式来定位元素对象，所有class的元素可以通过该方法
（4）通过name属性（表单项里面有name属性）获取一组元素节点对象：   getElementsByName（）；      返回一组对象
（5）innerHTML 和 innerText 区别：  这两个属性都是标签内部内容，innerHTML是内部包含html的内容，innerText是内部文本内容。 上面获取到的元素节点————标签对象，  如果想要获取标签中内容，要么就是标签对象的属性或者方法；
同时节点包括： 元素节点、文本节点、属性节点、文档节点，这些节点中三个通用属性——nodeName、nodeType、nodeValue二. 获取元素对象下层级的子节点； 下面是————> 元素对象的方法和属性  （方法）getElementByTagName（“标签名”）；   ——   返回指定标签名的所有对象集合 。如果参数是“  *  ”，表示页面中所有元素 。（属性）childNodes  ——  当前元素节点下的所有子节点（所有子节点：实际包含有划分很细颗粒的各类对象奥！如：换行 空格文本节点）（属性）children   ———— 当前元素节点下的所有子元素；    区别于上面子节点奥！！！（属性）firstChild  ——  当前节点下的第一个子节点（属性）firstElementChild  —— 当前节点的第一个子元素   【IE8不支持这个属性，如果要兼容IE8的话，就  慎用】（属性）lastChild   ——  当前节点下的最后一个子节点 注意节点和元素区别！！！ ——————————————————  节点包含有文本、元素、属性、文档这些对象；而元素只是标签那一类奥！！！三. 获取元素对象兄弟节点和父节点（属性）parentNode —— 当前节点的父节点，父节点一定是元素节点，不可能是文本节点类型的。 （属性）previousSibling —— 表示获取当前节点的前一个兄弟节点对象。（属性）previousElementSibling ——  前一个兄弟元素节点对象（属性）nextSibling —— 获取当前节点的后一个兄弟节点对象。四. js中节点获取元素的样式方式：（1）元素对象.style.样式名 = 样式值；           只有这个方式的样式才可读可以写，下面方式二中两个获取样式的方式只能读，不可以写。但是该style修改样式，没修改一个样式浏览器就需要重新渲染一次页面。这个很耗资源。可以直接修改元素的所属类，在已有样式表的类的情况下，修改元素的类，这样元素就渲染成新的样式了。如 div01.style.width = "100px";    						 这边js修改的样式是内联样式的修改方式奥！！！
同样，如果该方式 alert（div01.style.width）读样式，也是内联样式表中的样式。（2）获取元素当前样式：  使用window对象提供的一个方法—— getComputeStyle（元素对象，null【就是伪类】）;返回一个对象，对象中封装了当前元素对应的样式getComputedStyle(div01,null)["line-height"]元素对象.currentStyle.样式名  ；  该属性只有IE浏览器支持，其他浏览器不认识currentStyle属性奥！！！如 div01.currentStyle.width = "100px";    （3）其他样式操作属性：    获取元素的可见高度和宽度————元素对象. clientHeight / width；  只是大小值，没有单位奥，且该属性只可读！（内容区+内边距总和大小）返回元素的高度和宽度 ———— 元素对象.offsetHeight / width； 内容区+内边距+边框总和大小 ； 返回当前元素的定位父元素 ———— 元素对象.offsetParent； 获取到当前元素最近的开启了定位的祖先元素，就是设置position的属性返回当前元素相对于其定位父元素的水平偏移量 ———— 元素对象.offsetLeft； 获取到这个值，可以基于此值调整本元素对象的位置； 返回当前元素相对于其定位父元素的垂直偏移量 ———— 元素对象.offsetTop； 获取到这个值，可以基于此值调整本元素对象的位置；scrollHeight表示元素的可滚动总长度，scrolltop是元素垂直滚动条滚动的距离， clientHeight是元素可见的有效长度；
一般 当scrollHeight - scrolltop == clientHeight的时候，滚动条滚动距离就到底了。五. dom中剩余方法body —— html —— document  层级递增。
document.documentElement属性 —— 对应网页中html根标签对象
document.body属性 ——  document对象中有一个属性body，就是表示网页中body对象的引用。
document.querySelector("选择器（如.div1 div）")；——  可用按照css的选择器的方式来查找指定的元素节点对象奥！！！！！！缺点：只会返回满足选择器的第一个元素节点对象奥！  
document.querySelectorAll("选择器（如.div1 div）")；  这个方法和上面类型，但是会返回满足选择器的所有节点对象；封装到一个集合中。>>>>>>>>>>>>>>>>>>>>       上面是dom中查询对象，  下面是dom中增删改对象的操作      <<<<<<<<<<<<<<<<<<<<<<<<六. Dom中增删改元素创建独立节点    ——   createElement()、createTextNode()；  对象都是document。     父节点.appendChild(子节点对象)建立父子关系。删除元素    ——   removeChild()   对象是父元素调用的。替换元素    ——   replaceChild()  对象是父元素，调用方式：父元素.replaceChild(新节点，替换节点)。insertBefore() ——  在指定的子节点前面插入新的子节点。 父元素.insertBefore(新节点，参考节点)；
大多还是父节点调用的。 通常增元素，是新创建一个较外的元素对象，然后在该元素对象的.innerHtml属性中字符串方式加入相关html标签，来加子元素部分。最后将
这个较外的新建元素给加到父元素中就完成了DOM中新元素的添加。事件的委派新增元素有些样式或事件没有的？怎么办———— 只绑定一次事件，就可以应用到多个元素上，即使元素是后添加的。方式：  可以尝试将其绑定到元素的共同的祖先元素上。   因为下面冒泡事件发现，后代元素的事件会冒泡到祖先元素上，所以可以在祖先
元素上绑定事件，然后当触发某个事件的时候，子元素上没有该事件的话，其会查看祖先元素上的相同事件来触发的。

（1）上面第四点中document获取指定节点对象、（2）然后可以基于获取到的节点再找到其下层子孙或者祖先节点、（3）或者基于节点对象获取自身的样式、（4）基于本节点对象增删改周围节点；即————获取指定对象、获取指定对象自身周围的子孙祖先节点、获取指定对象自身的样式、对指定节点的增删改相邻的节点。

4.8.2 事件——用户和浏览器之间有交互行为发生

（1）事件定义——就是文档或者浏览器窗口中发生的一些特定的交互瞬间。而JavaScript和HTML之间的交互是通过事件实现的。
（2）用户和页面之间发生一些交互行为，可以通过在页面的标签上添加某些事件属性来创建事件发生后的结果
（3）标签对应的事件属性，如果绑定了函数，这些函数就和事件产生了关联，这些函数就变成回调函数——会由浏览器基于事件触发来自动调用对应的函数。

事件属性（事件属性类型分类）：
onload： 页面或者图片加载完成后的事件属性onclick：  
对象.事件属性——  对象.onclick = function(){xxx}表示给该对象添加单击事件；即如果该对象上被单击了就触发了绑定的函数方法奥！！！！ondblclick： 
onfocus： 元素获得焦点
onmousedown：该元素上有鼠标按钮被按下 
onmouseout：该元素上有鼠标从元素移开
onmouseover：该元素上有鼠标移动到元素上
onchange： 事件经常与输入字段验证结合使用。
onmousemove/onmouseout - 当把鼠标指针移入/移出 div 时
键盘事件：     一般都会绑定给一些可以获取焦点的对象或者document对象。
onkeydown ： 按键被按下onkeyup ： 按键被松开 上面的事件属性，通常会被绑定一个函数；这样该事件一发生就会触发绑定的函数。
！！！！！！！！     注意：绑定的函数可以设置return false来取消事件的默认行为     ！！！！！！！！每一个事件绑定的函数都是由浏览器自动调用的，同时浏览器会传入一个   事件对象   进入这个函数中，这个事件对象中包含了 鼠标的坐标、
键盘哪个键被触发，鼠标滚轮的方向等和当前事件相关的一切信息。     注意：在IE8及其以下，事件对象不是由浏览器传入的，而是作为window对象的属性保存的，所以可以通过window.event属性获取事件对象，
然后获取事件对象中封装的一些属性内容。  但是在其他浏览器中，事件对象就是在浏览器调用的绑定函数上，通过传参传入该事件对象奥！！！这可如何是好呀？ - 完美的解决方式—————— event = event || window.event； 其中event是事件函数传参传入的。-   表示左边event变量是右边有效的对象赋值。- -  body01.name && body01.name();   -  表示 body01.name该属性有赋值，才调用，没赋值就不调用。用于方法是否调用事件对象的属性：  
clientX—— 获取鼠标指针的水平坐标
clientY—— 获取鼠标指针的垂直坐标 
type —— 返回当前事件对象表示的事件类型（名称）
target —— 返回触发此事件的元素节点对象。
event.wheelDelta（event.detail火狐中适用的；反向正负相反） —— 可以获取鼠标滚轮滚动的方向。值只看正负，正向上，负向下；
event.keycode —— 返回哪那个按键被按下，返回是该按键字母对应的编码值；
event.ctrlKey/altKey/shiftKey ——  如果被按下返回true，否则false；

（3）上面的事件属性，通过会被绑定一个函数；这样该事件属性一发生就会触发绑定的函数。或者理解为元素的某个事件属性上绑定了一个函数，事件属性特点是——当该事件触发时会调用该事件属性绑定的函数或者方法奥 1.先找到元素对象，2.然后设置该对象的某个事件属性上绑定一个函数

	var btn = document.getElementById("btn01");		btn.onclick = function(event){event = event || window.event；				alert("我单击了一下按钮");console.log(event.type)      //—— 》  返回该事件的类型是单击事件类型（ click ）}（1）事件绑定方式一   ：   对象.事件 = 函数的形式绑定响应函数。
它只能同时为一个元素的一个事件绑定一个响应函数， 不能绑定多个，如果绑定多个，则以后面会覆盖前面的响应函数的。（2）事件绑定方式二 ：     可以为一个元素的相同事件绑定多个响应函数
对象. addEventListener（事件类型【字符串表示，不要加on了】，事件的对应响应函数，是否在捕获阶段触发事件【一般false】）；例如：  btn.addEventListener（“click”，function(event){ event = event || window.event；				 alert("我单击了一下按钮");console.log(event.type)      //—— 》  返回该事件的类型是单击事件类型（ click ）} ，false）

（4）事件冒泡 —— 所谓的冒泡指的就是事件的向上传导，当后代元素上的事件被触发，其祖先元素的相同事件也会被触发；。如设置div、body、html都有单击事件，那么当点击div时，对应的body和html上的事件也会被触发的。如果不想要发生事件冒泡。可以通过事件对象来取消冒泡。

通过事件对象来取消冒泡：  取消冒泡是防止事件继续向上触发，所以可以在   下层级的事件函数  中设置取消冒泡，这样就不会上传上去了。
如： 事件对象—— event = event || window.event ; event.cancelBubble = true；

（5）事件的委派 —— 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素上，从而通过祖先元素的响应函数来处理。 特点：事件的委派是利用了冒泡特点，可以减少事件的绑定次数；
（6）事件的绑定

4.8.3 文档流加载顺序

文档页面中一般资源加载顺序是自上而下加载，读取一行就运行一行。所以传统js代码放在html后面，或者使用窗口事件onload来存放js代码，onload属性表示页面或者图片加载完成后才会触发的一个事件属性。

因为文档流的加载顺序，所以传统js代码写在上面的话，如果js中有操作下面html元素的话，会报错，因为还没加载到html部分；
所以出现了window.onload事件，表示窗口加载完毕后才触发的事件；（1）通过全局文档节点对象document获取指定的元素对象
<script type="text/javascript">window.onload = function(){        //window.onload事件，表示窗口加载完毕后才触发的事件；				var btn = document.getElementById("btn01");         //通过全局文档节点对象document获取指定的元素对象。btn.onclick = function(){					        // 给元素对象添加事件触发结果this.innerHTML = "我点击了一下按钮";alert("我单击了一下按钮");} }</script> （2） 获取元素对象下层级的子节点； 下面是————> 元素对象的方法和属性 getElementByTagName（“标签名”）；   ——   返回指定标签名的所有对象集合 childNodes  ——  当前元素节点下的所有子节点（所有子节点：实际包含有划分很细颗粒的各类对象奥！如：换行 空格文本节点）children   ———— 当前元素节点下的所有子元素；    区别于上面子节点奥！！！firstChild  ——  当前节点下的第一个子节点firstElementChild  —— 当前节点的第一个子元素   【IE8不支持这个属性，如果要兼容IE8的话，就  慎用】lastChild   ——  当前节点下的最后一个子节点  注意节点和元素区别！！！ ——————————————————  节点包含有文本、元素、属性、文档这些对象；而元素只是标签那一类奥！！！（3） 获取元素对象兄弟节点和父节点

在这里插入图片描述
上面第一行，是左边对象所拥有的属性，如文本节点对象.nodeValue ——> 返回的表示该文本节点的内容

4.9 js基础——拖拽

拖拽有三个事件：鼠标按钮按下（onmousedown）、鼠标被移动（onmousemove）、鼠标按钮松开（onmouseup）；
当一个交互动作有多个事件构成的时候，要理清楚多个事件之间的层级和逻辑顺序，（1）如拖拽，先当前元素的鼠标按下事件、之后鼠标移动事件应该是document对象上的，因为由css可知，层叠式，表现层元素会覆盖的，而最底层元素就是document，这样就不会受上层元素覆盖的影响。（2）而且第二个鼠标移动事件是在第一个鼠标按钮按下事件同时发生情况下才有效，所以第二个事件需要在第一个事件内部。

交互行为有多事件构成时，注意事项：
（1）事件到底绑定到哪个元素或者对象上合适 
（2）事件之间是否有层级或者并集关系，就是是否是独立的事件，还是并列的事件
（3）事件中引发的对象的样式和位置的偏移；js中有元素样式的获取方式；

捕获——可以设置事件的捕获方法；就是不同对象的相同事件，会被设置捕获的事件对象给抓取到。如按钮一、按钮二，如果按钮一设置了捕获，那么当触发按钮二的同样事件（鼠标按下事件、鼠标悬浮事件等）就会被同样设置了事件的按钮一给获取到。从而触发按钮一的事件函数。

5 BOM 对象（大多数是window对象下的属性对象奥！！！）

javascrpt组成有三个部分： ECMAScript基本语法、BOM、DOM；
BOM就是使我们通过js来操作浏览器的，即使用对象描述浏览器的各个部分的内容

window：整个浏览器的窗口，同时整个网页中的全局变量都是window的相关属性而保存的奥！！！下面几个对象也是window的属性奥！
navigator ： 代表当前浏览器的信息，通过该对象可以识别不同的浏览器；如—— appName（浏览器名称）、一般会用userAgent来判断浏览器的信息。

navigator中可以识别浏览器类型：  通常会用属性useragent；然后看这个属性中是否有：Firefox、Chrome正则判断；是火狐或者谷歌；var browinfo = navigator.userAgent; console.log(browinfo); console.log(/firefox/i.test(browinfo)); console.log(/chrom/i.test(browinfo));  console.log( /msie/i.test(browinfo)); 
判断IE方式： /msie/i.test（browinfo ） 
判断IE11的方式，ie浏览器的window对象中独有的属性：ActiveXObject属性，所以可以判 断window对象中是否有该属性；
“ActiveXObject” in window 返回为true， 表示有这个属性。反之没有；

Location ： 该对象是window对象的属性，是包含当前页面的URL的信息，即代表当前浏览器的地址栏信息；

（1）Location 该对象中封装了浏览器地址栏的信息；直接location对象的内容就是当前页面的完整绝对路径奥！！！ 
（2）注意location对象表示当前页面的url地址，所以可以设置一些事件来改变当前页面的url地址内容奥！！！！
（3）location对象的属性： host属性（主机名和端口号）、hostname（主机名）、href（返回完整的url）、protocal（当前url的协议）；
（4）location对象的方法： assign（可以设置当前页面新的url地址）就类似于location直接赋值url一样、reload（）刷新当前页面，但是缓存没刷新，如果参数传入true，表示强制刷新清空缓存；

History ： 代表浏览器的历史记录；通过该对象来操作浏览器的历史记录页面。为了安全该对象还是有限制的。


history对象的属性length；该属性表示当前页面是否是第一个打开，还是是其他页面跳转来的第几个打开的页面；
或者理解为一个会话中当前链接访问是第几个链接数。
history的方法：
back（）： 加载history列表中的前一个url； 就类似于浏览器上 左右箭头的回退一样。
forward（）： 加载history列表中的下一个url；
go（）： 加载history列表中的某个具体页面；如go（1）表示向前跳一个，类似forward； go（-2）表示向后跳两个，类似back

Screen ： 代表用户的屏幕信息。通过该对象可以获取到用户显示器的相关信息。

5.1 window对象的方法

alert、confirm、prompt
setInterval（）、setTimeout（）；clearInterval（）、clearTimeout（）；
上面四个方法是周期定时和延时器的方法；setInterval 按照指定的周期（以毫秒计）来调用函数或者计算表达式；clearInterval取消由setInterval 设置的timeout。
延时器——调用一个函数不会马上执行，而是隔一段时间以后执行该函数，只执行一次奥。同样的道理，关闭延时器就是clearTimeout（指定延时器标识符）


setInterval（）
第一个参数是回调函数；该函数每隔一段时间被调用一次；
第二个参数是每次间隔的时间，单位是毫秒；1000表示一秒； var h1 = document.getElementById("h1");
var time= 1；
var timer = setInterval（function（）{      //该方法有个返回值——这个值是该定时器的标识符；
h1.innerHTML = time++；
}，500）;var timer = setInterval(function(){span.innerHTML = num++;      //这个定时器功能是在span标签内，元素内容不断自增，到20时，停止该函数功能；if(span.innerHTML == 20){clearInterval(timer);}},1000)   //表示周期函数是一秒后调用一次内部函数。clearInterval（timer ）  取消指定的定时器，该方法是定时器的标识符；
参数是定时器的标识符；

json（JavaScript Object Notation js对象表示符），json可以当做就是特殊格式的字符串，可以转换为任何其他语言的对象，json在开发中主要用来数据的交互。 json和js对象的格式一样，只不过json中属性名必须加双引号。如{“name”：“abc”，“age”：18，“gender”：“男”}；其中json对象的属性必须有双引号，值虽然可以任意类型，但是还是需要有限制的：字符串、数值、布尔、null、普通对象（不是函数对象奥）、数组这六种，因为其他语言中对这六种类型数据也认识。
json分类两种：json对象——{}表示； json数组——[ ]；
json字符串转换成js对象： JSON对象的parse（json字符串）
js对象转为json字符串： JSON.stringify（js对象）
js和jquery区别：jquery中通过 $ (“选择器类型”)来获取元素对象，js中是document.getElementxxx("")方式；获取到对象后，js是结合html标签对象的事件属性来关联函数名【btn.onclick = function(){}】，而jquery中是将事件关联的函数写在事件里面，表示的含义：就是在这个事件里面写一个函数，通过这个函数对这个事件的操作【 $KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲btn").click(fun\dots$ (function(){ });
jquery中获取元素就是$ (“css同样的选择器表示方式”)、jQuery（“css同样的选择器表示方式”）；在jQuery中美元符号"$“其实就等同于"jQuery”，从jQuery的源码中可以看出，为了编写代码的方便，通常都采用" $ “来代替"jQuery”；

（1）选择器获取对象的区别————
$("#showDiv“) 选择器是#，表示id选择器，相当于id选择器，相当于javascript中的document.getElementById("#showDiv“")；
对比js确实简洁了很多。（2）调用功能函数————  类似于js中window.alert()的一些方法，在jquery中提供的一些功能方法调用就是 $.xxx（）；
JavaScript中一般没有类似功能的函数，jquery中提供了许多，调用时直接通过： $ . trim(变量)；就完成了将变量前后的空格清除了，$ . trim(变量) 相当于jQuery.trim(变量)；即函数或者方式是Jquery对象的一个方法。（3）通用加载页面的区别———— 
window.onload函数一般表示页面加载完毕后执行的事件，但是如果多个页面中同时运行且都包含这事件，则会发送冲突的
jquery中的ready（）方法很好解决了，它能够自动将其中的函数在页面加载完毕后自动运行。同时一个页面中使用多个ready方法也不冲突；$(document).ready(function(){
$("table.datalist tr:nth-child(odd)").addClass("altrow");
});      对于上述代码jQuery还提供了简写，可以省略其中的"(document).ready"部分，代码如下：
$(function(){
$("table.datalist tr:nth-child(odd)").addClass("altrow");
});

内存是用来存储数据的空间，变量是内存的标识；

细节

获取指定对象、获取指定对象自身周围的子孙祖先节点、获取指定对象自身的样式、对指定节点的增删改相邻的节点。
对象获取后，如果对象.属性名没有定义就返回undefined,属性可以赋值：基本类型（返回就是值）、对象（返回object和对象内容{xxx}）、函数（返回函数体function（）{xxx}）等
事件的冒泡（子孙事件会逐级触发到祖先对应同样的事件）、事件的捕获（某个事件A设置了捕获后，在相同类型的事件B会被设置捕获的对象A给获取，而触发A的事件）
css中常见三种定位方式—— 判断是否脱离文档流，脱离文档流的话，宽度和高度都是由内容撑开的。
（1）每个元素都是类似一个盒子一样,有自然文档流布局位置;但是分为内联和块元素(块元素默认垂直排列，内联元素默认水平排
列)；自然文档布局，子元素未设置宽度时会充满父元素；而脱离文档流后，自身宽度就由内容撑开；
（2）如果想要自定义布局,可以通过浮动float:left;浮动的特点：1.会使元素脱离文档流排列的限制，而且内联元素会变成块元素，元素浮动一般就是左右浮动，知道遇到其他浮动元素或者父元素的边框才停止浮动。2.所以上下垂直元素想要在水平排列；就要都设置浮动，因为单个元素浮动只左右浮动，只有上下垂直元素都浮动时，才会一直浮动到相邻其他浮动元素才停止。3.浮动由于会脱离文档流，所以之前在文档流中占位不会占用了，从而会被其他文档流元素覆盖。
（3）定位position：可以将元素放到页面任意位置；
relative：相对定位是相对于本身在文档流所在位置，且偏移不会脱离文档流，同时之前文档流位置
还是占用的，但是优先级比文档流中其他元素位置要高，所以重叠时会覆盖奥；
absolute：绝对定位，元素会脱离文档流，且偏移参考是基于最近的开启定位的父元素，如果没有开启定位的父元素，会基于body的位置而偏移的；一般元素设置绝对定位的话，会同时设置其父元素的相对定位，这样本元素绝对定位的偏移是直接相对于相邻的父元素的偏移，更清晰点。
对象的生命周期：全局对象必须成为垃圾对象才能释放，一般可以通过var a =null来释放资源；局部变量在函数调用外就释放了。
什么是对象？ 对象是可以存储多个数据的封装体（用来保存多个数据的容器），一个对象代表现实中的一个事物；
为啥用对象？ 可以统一管理多个数据；
对象下面可以有一般属性【属性名和属性值的形式】和方法属性【属性值是函数的形式】；方法属性就是属性值是一个函数的特殊属性；
对象属性的调用方式两种：一般是对象.属性名；特殊是对象[‘属性名’]的方式。 对象属性使用：对象[“属性名”] 调用的方式虽然比较复杂，但是在一些特殊的情形只能使用该方式—— 1.属性名中包含特殊字符： - 、空格；2.属性名是一个变量的形式：对象[变量名]没有引号奥！确定的属性名用引号【obj[“age”] = 18】，属性名是变量的不用引号【var tmp = “age”；obj[tmp]=18】；
js中最难的不是对象，而是函数，因为函数是一种可执行特殊对象；既有对象复杂度，同时还可以执行；
什么是函数？ 实现特定功能的n条语句的封装体； 特点：只有函数是可以执行的，其他类型的数据不可执行；
为什么要用函数？函数主要特点是封装，然后提高代码的复用；便于阅读交流；
如何定义函数？1.函数声明的方式； function fn（）{xxx}； 2.表达式的方式： var fn = function（）{xxx}；
函数调用有个方式很特殊：函数名.call/apply(任意对象)；可以将这个任意对象作为函数内的this的映射体。即js中可以让一个函数成为指定任意对象的方法进行调用
什么函数是回调函数？常见回调函数——1.事件属性的回调函数、2.定时器的回调函数；特点：你定义的、不是你调用的，但是最终会执行了；以后会遇到—— 3.ajax请求回调函数、4.生命周期回调函数；
上面回调函数常见应用中：事件回调函数是：前台和用户交互的关键点；而ajax请求回调函数是：前台和后台交互的关键点；
IIFE（Immediately-Invoked Function Expression 立即调用函数表达式）；作用是：隐藏内部实现，不污染外部命名空间（全局的变量命名）；
可以尝试使用webstorm编译期；注意可以使用模板；如何定制自己习惯的模板——定制webstorm的代码模板
一块内存包含2个数据：一个是内存存储的数据（一般值数据、地址数据（为啥存地址数据，因为数据有点多，不便直接显示，所以用这块数据的地址来表示））、一个是内存地址数据；内存分类简单分是——栈和堆；栈空间小、速度快；堆空间大（所以用于存储对象【函数和数组这些多数据内容】）、速度慢；
什么是变量？值可以变化的量；由变量名和变量值组成；一个变量对应一块小内存，变量名可以查找到内存，变量值就是内存中保存的值（内容）；即内存是存储数据的容器，变量是内存的标识，我们可以通过变量找到对应的内存，进而操作（读写）内存中的数据。
什么是对象？代表现实中的某个事物，是事物在程序中的抽象；通常是多个数据的集合体（封装体）。使用对象便于对多个数据进行统一管理；对象中属性代表对象的状态、对象中的方法代表对象的行为；js中对象中可以动态的添加属性，区别于java中必须先指定好哪些属性才可用
调用对象的属性方式：一种是对象.属性名；一种是对象[‘属性名’]。对象中方法实际上是特殊的属性，只不过属性值是一个函数，就是function（）{xxx}定义的属性值；区别于java中方法没有function这之类的关键字标注；对象的属性分为引用属性和值属性。
什么是函数？具有特定功能的n条语句的封装体，函数是可以执行的，其他类型数据是不可执行的；
如何定义函数和函数调用方式？ 函数定义两种方式——函数声明方式（function fn(){xxx}）和表达式方式（var fn = function(){xxx}）表达式方式会函数提升，提前声明； 函数调用方式—— test()、new test()、obj.test()、test.call/apply(obj)；
函数的原型属性：每个函数对象都有一个prototype属性，默认指向一个object空对象（即称：原型对象）一些内置函数如Date的原型属性指向的原型对象内部可能有许多已经定义好的方法奥！；函数对象中有一个属性prototype属性，这个属性指向函数的原型对象，但是这个原型对象中也有一个属性constructor，这个属性又返回指向了函数对象。注意——这边的constructor是原型对象中的属性奥！而且constructor指向的是这个原型对象对于的类型的函数对象奥！！！
实例对象的隐式原型对象（对象.__ proto __ ）指向构造函数的显示原型对象（函数对象.prototype）；同时函数对象的显示原型对象本质就是创建一空的object对象；即说也就是函数对象的原型对象就是一个object类型的实例
原型链：在访问一个对象的属性时，先在自身属性中查找，找到返回，如果没有，再沿着__proto__这条链向上查找是否存在（类似于java中的父类，子类没有向上继承父类的属性和方法）；

function fun(){console.log(666666);console.log(2222)}console.log(fun.prototype.constructor==(new fun().__proto__.constructor)); 函数的prototype属性是在定义函数时自动添加的，默认是一个空object对象；
对象的__proto__属性：是在创建对象时自动添加的，默认值是构造函数的prototype属性值；
我们能直接操作函数的prototype属性（显示属性），不能直接操作对象的__proto__属性（隐式属性）；fun.prototype.constructor==(new fun().__proto__.constructor) 
分析： 
（1）fun是上面函数的函数对象，
（2）而fun.prototype是函数对象的原型属性，这个属性是一个地址属性指向一个对象，即原型对象        
（3）fun.prototype.constructor 是原型对象的constructor属性，这个属性也是一个地址属性，指向是函数对象；又绕回来了。
（4）函数对象、函数创建的实例（对象）、函数对象指向的原型对象；是三个不同概念奥！！！
（5）原型对象中添加属性（方法）作用和意义：函数所创建的所有实例对象自动拥有原型中的属性（方法）

为啥每个函数对象都有一个原型属性，实际上这个原型属性指向一个空对象（也称为原型对象）；这个原型属性存在的意义是对函数的每一个实例对象开放一个公共的共享空间。这个公共空间对于函数对象访问的方式和函数创建的对象访问的方式是不同的奥！！！原型对象作为函数创建的所有实例的公共区域，只要实例里面没有指定的数据的情况下，会自动到这个公共区域中去查看是否存在，存在就可以直接使用的。
函数的原型的使用——函数对象通过prototype属性可以访问这个公共空间、而函数创建的实例对象通过__proto__属性才能访问到这个公共空间的对象奥；同时js中对象可以动态的添加属性奥！所以通过这两种任意一种方式获取到这个共享对象，然后添加属性，都是对彼此可见的！！
event = event || window.event 和 body01.name && body01.name(); 区别：（1）第一个是获取事件对象，event存在取event对象，不存在取window下的event对象，||这个符号是或逻辑；（2）第二个&&符号是逻辑与，只有当body01.name存在时，我才执行body01.name()这个函数，不然如果body01.name不存在，执行body01.name()就会报错。
A（实例对象） instanceof B（函数对象，类似于类型）用于判断左边的对象是否是右边类型的实例；实际上instanceof 的原理是基于： B函数对象的显示原型对象在A实例的原型链（隐式原型对象）上，就返回true；
实例对象的隐式原型对象（对象.__ proto __ ）指向构造函数的显示原型对象（函数对象.prototype）；同时函数对象的显示原型对象本质就是创建了一个空的object对象【函数对象.prototype = {}】；即也就是函数对象的原型对象实际也还是一个object类型的实例奥。但是Object函数对象的原型对象它就是一个null，
原型对象小结：（1）任何函数对象的显式原型对象默认都指向一个空的object对象；（2）函数实例的隐式原型对象指向该实例所属类型（函数）的函数对象的显式原型对象【实例的隐式原型对象默认被赋值为函数对象的显式原型对象，且只赋值一次，所以后面如果显式原型对象后面被重新赋值，前端的实例的隐式原型不会发生变更的奥！但是会影响后面的实例的隐式原型对象奥！！】；（3）Object函数的显式原型对象的隐式原型对象指向为null；
原型链值得是隐式原型奥！原型链一般是用来查找对象属性的，如果给对象创建属性，这是不会查找原型链的奥！注意： js的继承是基于原型的继承，而原型本质是对象。所以是基于对象的继承；区别于java的基于类的继承

任何函数的显式原型属性指向的原型对象本质是创建一空的object对象——{}；由于是object类型，所以这个object对象的隐式原型对象
就是Object类型的显式原型对象，那么Object类型的显式原型对象进一步的隐式原型对象呢？注意是null； 
即其他类型的函数对象的显式原型属性指向的显式对象是一个object类型创建的——{}空对象；任何其他函数的显式原型对象是一个object类型的{}；所以这个显示原型对象本身就是一个object对象，那么这个object对象肯定有隐式原型属性，
由于对象的隐式原型指向的是这个对象所属类型（函数对象）的显示原型对象，所以任何函数对象的显示原型对象的隐式原型对象就是
Object.prototype；那么这个Object.prototype是否还是一个Object对象呢？=====================      核心    ===============
即 显式原型对象的隐式原型对象到底是什么； 
（1）一般函数对象的显式原型对象的隐式原型对象是Object.prototype
（2）而Object函数对象的显式原型对象的隐式原型对象是null奥！！

变量提升和函数提升：通过var定义的变量，在script开头就已经声明了，可以调用的，只是未赋值而已，调用时默认为undefined；函数声明提升——通过function声明的函数，在script开头就已经声明好了，所以可以直接调用的
全局执行上下文（window）：在执行全局代码前，有一些准备工作：将window确定为全局执行上下文。这个window会对全局其他数据进行预处理—— var定义的变量会变成window对象的属性、function声明的全局函数会添加为window的方法； 即在全局代码执行前，会有一些准备工作；即window上下文对象会。
函数执行上下文（就是函数对象）：在声明好函数后，同时在调用了函数前，也会对函数内部局部数据进行预处理
当有函数提升和变量提升同时存在时，是先执行变量提升的奥！然后在执行函数提升的； js中声明的顺序：首先var a的变量优先声明，接着是函数function的声明，最后才是其他逻辑赋值、局部变量等等。
实例一般有两种：一种是函数实例，它是Function的实例，就是函数对象；还有一个是上面那个函数对象所创建的new出来的实例对象；通常我们所说的创建实例就是第二种new一个类型函数的实例奥！
显示原型属性和隐式原型属性；显示原型属性：是在创建函数对象内部时候创建的属性，内部执行的是函数名.prototype = {}；隐式原型属性：是在创建实例对象内部时候创建的属性奥，内部执行的是：this.__ proto __ = 构造函数名.prototype；
查找变量和查找对象属性： 查找变量如果找不到会报错，而查找对象属性找不到会undefine；
当有函数提升和变量提升 变量提升指的是在定义这个变量之前已经通过预处理声明了该变量，所以是可以调用该变量，只不过没有赋值而已，调用为undefined而已；即var xx = 1；在代码最开始的时候就声明了var xx；了奥；同理 函数提升也是在代码最开始就已经通过预处理声明了该函数，函数在开头就可以调用的
全局作用域之外，每个函数都会有自己的作用域，在声明函数时就已经确定了，而不是在函数调用时奥！特点——作用域是静态的，函数定义好就一直存在，且不会变化；
js中，在靠后执行的程序中，如果存在全局变量的话，要注意点；因为全局的变量是灵活多变的，当后执行的程序运行时，全局变量可以已经不再是我们想要的那边变量了；最简单的方式就是——将这边变量和对象绑定起来，正好js中对象添加属性是很简单的

比如给多个按钮绑定事件函数，不要把全局变量直接在事件函数中设置，因为函数是调用时候才执行，而里面的全局变量早已不是当初认为的那个值了，所以最好把全局或者灵活多变的变量设置到指定按钮对象上，然后在按钮对应的事件函数中通过This.xx来调用这边变量。

闭包——当一个嵌套的内部（子）函数引用了嵌套的外部（父）函数的变量（函数）时，就产生了闭包，这个闭包就在内部函数对象里面；通常大多人理解为闭包就是（嵌套的）内部函数；闭包产生的条件：（1）函数嵌套、（2）内部函数引用了外部函数的数据（变量、函数）【或者说是一个外部函数里面有内部函数，然后将内部函数return】；简单说——闭包类似于java中的私有属性+公有方法；作用就是使得函数内部的数据外部可见、可操作或者是函数执行完后，里面内部数据还可存在。
闭包本质就是将内嵌的函数封装成一个封闭的对象；后面如果有对闭包对应的函数进行调用的话，由于这个闭包是封闭的，外部进不了，内部出不去，所以如果这边闭包多次调用。里面数据是不断叠加的。即闭包作用—— （1）使用函数内部的变量在函数执行完成后，任然存活在内存中（延长了局部变量的生命周期）（2）让函数外部可以操作（读或者写）到函数内部的数据。 传统函数一执行完，函数内的局部变量就会自动释放，那后面再想访问就不方便访问了。
通常函数外部是无法操作函数内部的数据，因为作用域，而函数内部的可以操作函数外部的数据，因为作用域链；但是闭包却是可以实现函数外部操作函数内部的数据。即闭包类似于java中的私有属性+公有方法；作用就是使得函数内部的数据外部可见、可操作或者是函数执行完后，里面内部数据还可存在。
闭包应用——可以定义JS模块【一个外部函数里面有内部函数（内部函数包含有外部函数的数据），然后将内部函数return】：类似于java中的工具类中的各种内部功能方法；闭包被执行的次数——看外部函数被调用几次，闭包本质是保存外部函数中在内部函数被调用的变量的。闭包是否被释放，也是看外部函数是否有引用指向；闭包的作用——就是延长了局部变量的生命周期，只要闭包没结束，里面的值没有修改的话，值是不会改变的。
匿名函数自调用—— 将匿名函数对象用括号包含，就表示一个独立可存在的函数对象，然后直接括号就表示自动调用了；匿名函数中只需要临时调用的话，直接上面传统方式就可以，如果想要保存匿名函数内部一些数据，可以将里面数据封装到window对象的新属性中，只要匿名函数执行过一次后，就会将那些数据保存到window对象的属性中了；案例如下：

匿名函数：
(function(){var mes ="hello "function f1(){console.log(1111 + mes)}      内部函数引用了外部函数的数据；所以有闭包的存在；function f2(){console.log(2222 + mes)}window.mymodule = {name:f1,age:f2}})()		 
mymodule.name();
mymodule.age();

内存溢出情形：以外定义了全局变量（如在函数内原本定义的局部变量，但是定义成了 a =xxx，没有用var）、启动循环定时器后未关闭、闭包（内部函数return给外部使用后，未设置为null，导致内部函数的引用一直存在）。
内嵌函数一般调用外部函数的数据的话，这个内部函数通常会含有闭包；
js函数高级部分：（一）原型和原型链、（二）执行上下文（就是每个上下文对象，如一个函数调用多次，就有多个函数上下文）、（三）作用域（有全局和函数范围，用于隔离变量、在不同范围内相同名称变量而不冲突）和作用域链（js中可以函数的嵌套，就涉及到变量的作用域链（查找变量，有内向外查找变量））、（四）闭包（）；
面向对象高级部分：（一）对象创建模式【第一种Object构造函数模式：先创建一个空的object对象（var obj = new Object()；），然后动态添加属性和方法——适用于不确定对象内部数据，但是缺点是语句太多了；】【第二种对象字面量模式： var obj={name：‘sun’，age：12，setName：function（name）{this.name = name } }；所有属性和方法一步到位，优点：直接就是一条语句赋值给obj变量了；缺点是如果创建多个不同名称同结构的对象，代码可能重复。】；【第三种工厂函数模式：该函数每次调用都返回一个新的对象——function createPerson（name，age）{var obj = {name：name，age：age，setName：function（name）{this.name = name}} return obj}】；优点：创建同类型实例，不需要重复代码；缺点：对象没有一个具体类型，都是object类型；
第四种自定义构造函数模式：——创建构造函数：function Person(name,age){this.name = name,this.age = age,this.setName = function(name){ this.name = name;}} ；然后创建该构造函数的实例： var p1 = new person（“tom”，22）；优点：需要创建多个类型确定的对象时，每个类型都定义一个独有的构造函数；缺点是：不要再构造函数里面写重复的方法，将方法写在原型对象里面；这样每个用构造函数创建的实例，只会继承方法，而不是每个对象里面都自己重新创建一个奥；
（二）继承模式：（1）原型链的继承（原型继承）———— 在js中不是通过函数类型的继承来实现父子关系的奥！ java中是通过类型的继承实现的；js中不同类型继承，即js中类型的继承，就是用子类型的原型为父类型的一个实例对象而已；因为继承的本质是：自己实例上没有，就到原型对应的实例里面去找；如果父类A，子类B，子类B.Prototype = new 父类A（）；这样子类B创建的实例中没有某些属性，会到父类A这个实例里去获取奥。即js中的继承就是子类型A的原型等于（赋值为）父类型B的实例就可以完成A继承B了。
（2）构造函数的继承（概念不太重要）——首先需要了解，函数的调用可以通过： fun(param1，param2) = = = = fun.call(obj，param1，param2)；可以通过函数对象.call（自定义this的对象）；使用call来改变this的值。
进程和线程：进程是真正执行的应用程序；而线程是进程内的一个独立执行单元（是程序执行的一个完整流程、是CPU的最新的调度单元）；
Js代码是单线程运行的（而浏览器是多线程运行的奥，但是究竟是多进程或者单进程不好说奥），但是使用H5的Web Workers可以多线程运行；因为最初js的出现就是简单脚本用于表单验证的操作，没有很复杂的计算，所以单线程完全够用； Javascript单线程如何实现异步操作；js单线程如何实现异步操作2
浏览器内存由很多模块组成的： （1）js引擎模块——负责js程序的编译与运行【简单说就是代码，但这些代码是解释我们高级语言的代码的】、（2）html和css文档解析模块——负责页面文本的解析【简单说，就是对我们代码文本基于某些标签规则来拆解分析和分类】、（3）html/css这些在内存中就是DOM对象树呀，那DOM/CSS模块就是将html解析后的标签进行对象的转换，就是相关标签信息存储于内存中以一个个对象表示，即负责DOM对象在内存中的相关处理； （4）布局和渲染模块——负责页面的布局和效果的绘制【参照内存中dom对象奥！】（就是将第三步的对象进行样式的渲染显示） （5）定时器模块——负责定时器的管理（6）DOM事件响应模块——负责事件的处理（7）网络请求模块——负责ajax请求【5、6、7模块是运行在子线程上的；前面是主线程上的；即是有逻辑的】。
定时器并不能保证真正的定时执行！ 定时器的管理模块是在分线程上的，但是回调函数部分是在主线程上执行的！
js为啥用单线程而不用多线程？js作为浏览器的脚本语言，主要用途是与用户互动，以及操作DOM；这决定了它只能是单线程，否则会带来复杂的同步问题。
js引擎执行代码的基本流程—— script模块中的代码分为初始化代码和回调代码；js引擎解析其中js代码是先执行初始化代码（包含一些特别的代码：设置定时器、绑定监听、发送ajax请求这些也算是初始化代码一部分），初始化代码执行完后，后面才在某一时刻才会执行回调代码； 即回调函数代码一定在初始化代码执行完了之后才可能执行。
在H5之前，js中代码只能是单线程的，即只能有一个线程更新和操作我的界面； Javascript单线程如何实现异步操作
H5中可以通过Web Worker来创建一个分线程，来处理某一块反复重复的代码，而不冻结主线程的正常运行。

准备——————首先创建一个在分线程中执行的js文件；
接着——————在主线程中的js中发消息并设置回调函数
（1）创建一个Worker对象并向他传递将在新线程中执行的脚本的URL： —————— worker是加载在分线程中执行的js代码或者脚本的。var worker = new Worker("分线程的执行代码")；
（2）向worker发送数据： worker.postMessage(想要发送给分线程的参数内容)；
（3）接收worker返回回来的数据——————用一个事件监听函数来完成worker.onmessage = function(event){   //表示worker对象返回数据的时候回自动调用这个事件函数console.log(event.data);
}

			#div01{width: 150px;height: 150px;background-color: royalblue;position: relative; }#div02{width: 50px;position: absolute;   //表示div02这个子元素相对于div01这个父元素的绝对偏移，下面的left 50px像素位置。bottom: 5px; //表示div02这个子元素相对于div01这个父元素的绝对偏移，bottom是5px像素位置，在父元素最低部向上偏移5个像素。margin: 0px auto;/*border: 1px red solid;*/left: 50px;}

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#div01{width: 100px;height: 100px;background-color: cornflowerblue;position: absolute;}</style><script type="text/javascript">window.onload = function(){  //键盘事件var str = "today is good day";var mat = str.match(/good da/i); console.log(mat);  var browinfo = navigator.userAgent;console.log(browinfo);console.log(/firefox/i.test(browinfo));console.log(/chrom/i.test(browinfo));var div01 = document.getElementById("div01");div01.ondblclick = function(){location = 'http://www.baidu.com';}document.onkeydown = function(event){event = event || window.event;//获得那个按键被按下；//console.log(event.keyCode); if(event.keyCode ==37){div01.style.left = div01.offsetLeft + (-10) +"px";}else if(event.keyCode ==38) {div01.style.top = div01.offsetTop + (-10) +"px";}else if(event.keyCode ==39){div01.style.left = div01.offsetLeft + 10 +"px";}else if(event.keyCode ==40){div01.style.top = div01.offsetTop + (10) +"px";}}}</script></head><body><div id="div01"></div></body> 
</html>

在这里插入图片描述 ### 数据类型判断

77777 . 那些细枝末节的次要问题很重要吗？那些都是刚谈恋爱初期的感受，从余生来讲，只要主要矛盾不成问题就可以呀，比如是否会负责任，是否会兑现承诺，是否会在乎心疼你，是否有坏的习惯或者毛病，是否只说不做，是否沾花惹草，脾气暴躁等等呀，你还记得我们在一起的所有第一次，第一次因白倩倩有事而请你吃饭，第一次到你家那边去接你然后大家去滑雪，第一次元旦陪我去吃火锅，吃冰糖葫芦，去小米苹果店，教我轮滑，第一次晚上看完电影开车送你的时候找理由说你手冷而帮你捂手，第一次和我说你因为顾忌我特意避开异性同事而变得不开心，第一次我们去逛华联超市，第一次发暧昧的聊天，第一次告诉我你辞职计划并我讨论我们未来规划，第一次拉着手摇摇晃晃去吃饭之后送你去车站，第一次送你回家在公交车上靠着我肩膀休息，第一次我们在人家餐厅边吃饭边看剧呆了好久好久，第一次在面试室里准备面试资料的时候主动亲我，第一次因为见到你和异性朋友聊天而吃醋生气，第一次等候在考场门外迎接你然后去吃饭并在车里玩游戏连输了好几局，第一次去我家机试，点外卖，看电影，第一次到钱江新城看夜景，第一次去美食街胡吃海喝，去爬山有机会背着你...... 我想说的是，我依然会一直陪你爱你在乎你，不欺骗你，尽我所能保护你，可能有时候没有及时那么懂你的心思，但是只要反应过来我一定会听你和满足你。虽然我很在乎你，但我也想你开心，所以我不想给你压力和约束你。
兴趣爱好，审美性格，人生规划和梦想进程，隐私和密码（遗憾和在意的）
你知道吗，你已经对我关上了所有的窗口，我们的交互方式只有公司、微信，但是在公司你有老胡，在家；你有你自己生活和空间，我不能找你
，以前聊天还能暧昧和谈心，现在你聊天都像刺一样要么就是嗯啊，奥，不要，不想，不要和我谈这些。晚上吃饭就单纯吃饭；实际上就是一句话：不喜欢了；
我说过了，不喜欢就不喜欢，不要那么拖拉，你遇到你一个喜欢的人能嗯啊，不要和我谈这些，哪怕谈叙利亚战乱你都能开心，还有你自己就巴不得什么都分享，还管他什么没有猜你心思，只要他能关心你一下下你都能开心好久，他没拒绝你的付出就已经很开心了，那还顾及上他对你付出是否让你满意呀，哈哈哈，好吧！
我已经在努力争取了

线程池

线程池核心思想———— 将任务提交和**任务执行（线程调度和执行）**进行解耦。

1.每个线程在系统中都占用自己独立的内存空间————栈，注意其中内存模型中的堆和方法去是所有线程共享的；2.这个栈实际细分包含：虚拟机栈，本地方法栈和程序计数器，这些是每个线程所有私有的；
（2.1）其中虚拟机栈又是一个个栈帧（正好对应每个方法）组成的，
（2.2）每个栈帧中细分为：局部变量区、操作数栈、动态链接、方法的返回地址用栈帧来分析递归函数：在函数内部调用自己，在虚拟机栈中一层层的叠加栈帧，按照后入先出的顺序，一层一层级执行完然后释放，最后到栈底的main方法内；注————java中可能不太形象查看栈的调用现象：
可以通过前端的浏览器的调制工具来查看—— call stack；里面就可以看看一个个栈帧的运行状况；

一般线程会有独立的资源开销，当需要多个线程的时候，为了系统资源的合理分配，线程池工具出现了；
应用程序必须运行在某个进程的某个线程上，线程是程序中最小的执行单元。
线程池一方面可以避免了处理任务时创建销毁线程开销的代价，另一方面避免了线程数量膨胀导致的过分调度问题，保证了对内核的充分利用；
线程池java中提供了一些接口：executor（将任务提交和任务执行（包含线程调度和执行）解耦）、ExecutorService（提供了管控线程池的方法，如停止线程池的运行、）、ThreadPoolExecutor（维护自身的生命周期、管理线程和任务两者结合从而执行并行任务）、

在这里插入图片描述

jQuery

前言

（1）jQuery本身是js的一个库，这个库向外暴露的就是一个核心函数—— $ ；既然是函数，那么就可以执行，这个函数执行后返回值就是一个jQuery对象；核心注意： $ 作为函数使用时，返回的一定是一个jQuery对象奥！这个jQuery对象里面代表或者封装的是Dom元素的节点对象奥！
（2）$ 可以加括号当函数使用，或者自身作为函数对象来使用；加括号当函数使用后，必定返回一个jQuery对象，这个jQuery对象内部包含的是所有匹配的任意多个dom元素的伪数组对象奥！！！如果自身作为函数对象使用时，可以调用一些工具方法来作为通用方法使用；
（3） $ 加括号函数调用后返回的jQuery对象使用时；这个对象中包含了匹配了任意个Dom元素的节点对象；所有对jQuery对象的操作本质就是对这些dom节点对象的操作。为啥使用封装了dom节点对象的jQuery对象来操作文档呢？因为jQuery对象中拥有很多有用的属性和方法，方便程序员操作dom。
（4）jQuery中函数内部涉及到的this，还是jQuery对象内部包含的dom对象奥！！即 this 是 dom对象
（5）jQuery中，jQuery对象对元素的固有属性处理、样式、位置、尺寸都是不同的奥！！！一个标签的固有属性和样式（位置、尺寸）是两个不同概念奥！！！！

正文

JQuery对象实际上是里面封装了一个或者多个Dom对象的伪数组；区别jQuery对象和Dom对象奥！！jQuery对象的方法有个特点：读写合一（就是不同参数形式，表示不同的函数）

jQuery是js一个丰富的函数库，这个库里面引入了两个属性，这两个属性就是jQuery库向外直接暴露出来的，window. $ 和window.jQuery。
jQuery的两个利器即应用的两个核心就是:jQuery核心函数（ $ （）或者jQuery（）），jQuery核心对象（执行$（）返回的对象）

jQuery核心两点:jQuery核心函数（$（xxx））和jQuery核心对象（$. trim（）,jQuery将一些公共公用的方法封装就到这个对象里面）。函数形式有三种，体现在函数参数不同，
1.参数还是一个函数，表示dom加载完执行的回调，
2.参数是选择器字符串，表示匹配对应的dom节点封装成jQuery对象，有普通选择器、层级选择器(子孙后代或者兄弟)、过滤选择器、表单选择器等等
3.参数是HTML标签字符串，表示创建一个该标签的jQuery对象。

层级选择器强调一下：用于查找子孙后代或者兄弟节点的
$(‘xxx yyy’)表示在给定的xxx祖先元素下所有yyy的后代节点； $(‘xxx>yyy’)表示在给定的xxx祖先元素下所有yyy的子元素
$(‘xxx+yyy’)表示匹配所有紧接xxx元素后的yyy元素； $(‘xxx~yyy’)表示匹配xxx元素之后的所有yyy元素

在这里插入图片描述

1. 通过选择器表达式获取jQuery对象

基本的id、标签、类
层级：$ (“form input”) 表示form表单下层input的后代元素（子、孙子等）；$ (“form > input”) 表示form表单下input的后代元素（仅限子元素）；$(“form ~ input”) 表示form表单元素同级的兄弟元素（仅限同级）；
属性选择器： $(“div[id]”) 所有div，但是必须有id属性的所有div元素； $(“div[id=‘abc’]”) 所有div，但是必须有id属性且属性值是abc的div元素；
表单选择器：省略了input；直接：type的类型；如：$ (":text")、$ (":password") 、$ (":button")

2. jQuery对象属性内容的获取和设置

jQuery是一个包含有一个或者多个dom对象的封装体；它有隐式遍历的特点奥！！！
给jQuery对象中dom对象添加属性：

标签对象获取到了———— 标签对象内部的通用属性、类属性、内部内容如何操作
attr（‘type’）查询属性值、attr（‘type’，‘abc’）设置属性； prop和attr一样，区别在于prop通常操作布尔属性，而attr是非布尔属性。
removeAttr(name) 从对象中移除属性 —— $(“img”).removeAttr(“src”); 将文档中图像的src属性删除
addclass（‘class1’）给对象追加一个类属性值；
removeclass（‘class1’）将对象中类属性的值为class1的值给移除；
html（）取对象中文本内容、 html（‘xxx’）设置对象中文本内容

3. CSS

前言————上面完成了标签对象属性操作—— 标签对象的样式、标签元素的位置、尺寸大小该如何设置和处理呢？
（1）给jQuery对象设置样式—— 访问和设置匹配元素的style样式属性。

$(’#id’).css(‘background’); ———— 访问节点的背景属性值！
$(’#id’).css(‘background’,‘red’); ———— 设置节点的背景属性为红色！

（2）位置
offset（）—— 相对于页面左上角的坐标，不是窗口奥！；还有一种可以加参数{left:xx,top:xxx}设置元素对象相对窗口的位置；
jQuery对象.offset()—— 获取当前对象在窗口的两个相对偏移值：top和left值； var offset = $ (’.div’).offset()； offset.left和offset.right；
position（）—— 相对于父元素左上角的坐标；

（3）尺寸
每一个元素都是一个盒子，设置和查询元素的高和宽；
jQuery对象.width（）和 height（） ;返回对象中dom元素的内容区宽和高的值；
jQuery对象.innerwidth（）和 innerheight（） ;返回对象中dom元素的内容区宽和高加上内边距padding的和值；
jQuery对象.outerwidth（）和 outerheight（） ; 这两个方法可以传布尔值，不传认为是false，在基础上加上border的值，如果为true，表示还要加上margin值；

4. 筛选

前言————通过选择器可以直接找到匹配的dom对象的封装对象——jQuery对象；但是有时候需要进一步在jQuery对象中筛选dom对象；就需要用到jQuery对象的筛选方法——过滤和查找；

过滤和查找

过滤是在jQuery对象中包含的dom对象基础上进一步过滤某些dom对象并封装返回jQuery对象；返回的jQuery对象中dom是前面的jQuery对象的dom中的子集奥！！

通过下标索引： first（）、last（）、eq（index）
通过选择器过滤： filter（selector）对jQuery对象中当前元素基于过滤条件（选择器）来筛选出满足的部分、not（selector）、

查找是在jQuery对象中包含的dom对象下查找他们的子孙或者兄弟或者父母奥！！并再封装成新jQuery对象返回

children（selector）：满足选择器的仅限子层级元素
find（selector）：满足选择器条件的所有后代元素
preall（selector）：前面的所有兄弟，有选择器参数的话，就是满足选择器限定的兄弟
siblings（selector）：所有兄弟，如果有选择器参数的话，就是在所有兄弟元素中进一步限定满足选择器的那部分兄弟
parent() 就是父元素

筛选：  过滤 和 查找过滤是从一个集合中过滤某些不满足的元素；但最终返回的是集合的一个子集； 常用filter（）、first（）、last（）；查找是从一个集合中元素下层元素中查找，查找他们的后代元素；常用children（）【子元素】、find（）【后代元素包含子和孙】、parent（）父

5.文档处理

前言————上面获取标签对象、可以设置标签中属性、样式、位置、大小；那标签内部结构再增、删、改新标签元素该如何操作呢？

简单说就是向文档页面中增删改一些节点标签元素；如1.向指定的元素前面添加一个标签节点、2.删除指定匹配的元素节点、3.用自定义的标签元素替换指定匹配的元素节点

增

（1）内部插入：

append(xxx)；——向匹配的jQuery对象内部的最后面加入指定的标签节点。

A.append(B) 简单说就是将新建的B添加到目标A的内部的最后面。  B.appendTo(A);是将新建的B添加到目标A的内部的最后面。$ul1.append('<span>append()添加的span</span>');   $('<span>append()添加的span</span>').appendTo($ul1);

prepend(xxx); ——向匹配的jQuery对象内部的最前面加入指定的标签节点。

（2）外部插入：

before（xxx); —— 向匹配的jQuery对象的前面加入指定的标签节点。
after（xxx); —— 向匹配的jQuery对象的后面加入指定的标签节点。

删

empty（）—— 删除所有匹配的jQuery对象的内部的所有子元素； 简单说是目标对象内部子元素被删除，但是目标对象本身还是在的
remove（[xxx]） —— 删除匹配的jQuery对应的dom元素， 本身和内部的都删除；remove中有选择器，用于对目标对象中进一步条件筛选，而不是所以都删除的。


jQuery对象.empty()；  是将该jQuery对象内部子元素都删除； —————————— 掏空内部所有（自己还在）jQuery对象.remove()； 是将该jQuery对象自身整体删除；    —————————— 将自己及内部 都删除

改

replacewith（xxx） —— 将指定的标签内容替换当前匹配的jQuery对象

A.replacewith(B) 简单说就是用新创建的B来替换目标A。

6.事件

（1）事件绑定常用两种方式：

eventName(function(){}) —— 绑定对应事件名的监听, 例如：$(’#div’).click(function(){});
on(eventName, funcion(){}) —— 通用的绑定事件监听, 例如：$(’#div’).on(‘click’, function(){})

（2）事件解绑

jQuery对象.off(eventName) ; 如果没有参数，表示解绑该对象上所有事件，如果有参数就解绑指定参数的事件。

（3）事件对象触发时鼠标的坐标
event.target —— 可以获取事件对象；

event.clientX, event.clientY 相对于视口或者窗口的左上角此时鼠标的坐标；窗口是固定的；
event.pageX, event.pageY 相对于页面的左上角此时事件触发时鼠标的坐标；
event.offsetX, event.offsetY 相对于事件元素左上角

（4）事件相关处理

有些事件会嵌套，如外部div包含内部div，且内外div都有事件，默认内部div操作也会触发外部div事件，所以可以在内部div事件中设置阻止事件冒泡 —— event.stopPropagation()；
阻止事件默认行为 —— event.preventDefault()；如超链接a，默认行为是会跳转，但是如果你设置单击事件，当你单击a时，之后会触发跳转的，所以可以在单击事件回调函数中让这个a取消默认跳转的行为；第一种是： return false；第二种就是：event.preventDefault()；

（5）同样事件小区别
mouseover、mouseout 和 mouseenter、mouseleave 区别

前面在移入子元素时也会触发，后面只在移入当前元素时才会触发；且hover使用的就是mouseenter和mouseleave
事件的冒泡和事件委托； 委托好处是————新增的子元素，自动会有事件相应处理，且减少事件数量。
事件委托：将子元素的事件监听委托给父元素代为处理；即事件监听绑定在父元素上，但是事件发生在子元素上（回调函数中this是真实触发事件的元素对象奥！！！）
事件绑在父上，但是子去调用———— 本质是基于事件会冒泡到父元素，事件event.target是返回真正触发事件的元素对象，以此来调用事件回调函数。


冒泡：大元素包含小元素。触发小元素的事件，但是会向上继续触发连带的大元素的事件事件委托：将子元素的事件监听委托给父元素代为处理，
（1）监听回调函数是加在父元素上的，当操作一个子元素时，事件会冒泡到父元素上,
（2）但是父元素不会直接处理事件，而是根据event.target得到发生事件的真正元素（子元素），本质还是这个真正元素对象去调用回调函数奥！
（3）注意，回调函数中this到底是谁 ———————— this就是真实事件的元素对象奥（子元素对象）通过父元素委托指定子元素的事件———— $(父选择器).delegate(子选择器，“事件名（click）”，回调函数) 
上面是委托当然可以取消子元素的委托 —————— $(父选择器).undelegate（“子元素指定的委托的事件名”）

7 动画效果

有滑动显示和隐藏，通过元素高度来实现 —— 显示：slideDown（速度【slow、normal、fast或者指定毫秒数】）；隐藏：slideup（）

$("#div02").slideUp("slow");   向上减少高度来隐藏div02
$("#div02").slideDown("slow");   通过高度变化（向下增大）来动态地显示所有匹配的元素

淡入淡出的显示和隐藏，通过透明度的变化来实现元素的淡入淡出效果 ——— 淡入：

$("#div02").fadeOut(1000);  
$("#div02").fadeIn(1000);

可以自定义动画：实际上动画效果：元素除了大小变化，肯定还伴随位置的移动，所以通过设置这几个属性或者样式就可以完成动画效果；

$("#div01").animate({width:200},1000).animate({height:200},1000)   ;     元素大小的动画变化$("#div01").animate({left:lef+50,top:heigh+100},1000)     ；    元素位置的动画变化
这个表示是在每次位置基础上移动；所以一般需要知道上一次位置坐标；实际上人家也提供了一直便捷的语法形式：
“$("#div01").animate({left:"+=50",top:"+=100"},1000)”

window.onload和 $ (function(){ }) 区别：第一个window.onload是页面中所有都加载完，如图片都加载完才会回调；而第二个 $ (function(){ }) 只是页面加载完就回调的，不管图片是否加载成功或者结束的；还有一个区别是window.onload只能有一个监听，而 $ (function(){ })监听可以有多个；区别小结：时间顺序的区别，监听个数的区别。

8 插件

基于jquery编写的扩展库；
插件思想—— 声明式操作；就是真正操作的代码封装好了，开发者只需要按照规则进行声明操作就可以实现。有时候会需要自定义操作，也是按照规则来配置就可以了

动画样式

dom元素常见难点样式：display， float 、position 、overflow

display 可以设置元素性质；内联（内联元素虽然也是一个盒子，但是不支持设置width和height来设置宽和高，一般内联元素宽高是内容自动撑开的，可以通过display来修改元素的性质）和块元素；取值： block、inline、inline-block、none（彻彻底底隐藏本元素，不显示也不占位置）
float：简单说是元素脱离文档流，左右浮动，一般元素设置浮动属性后，都是左右浮动，如果想要垂直位置的元素浮动到水平位置，那必须垂直位置上的两个元素都同时设置了浮动
position：定位；一般有相对定位和绝对定位；相对定位没有脱离文档流，且left和top移动还是基于自然文档流位置的偏移；而absolute绝对定位则是脱离文档流了；一般绝对定位是基于最近的定位元素来偏移的，周围没有默认以body。；通常一个元素设置绝对定位的话，会给它父元素设置相对定位，这样基于父元素的偏移；
overflow：是定义子元素溢出父元素内容区后，如何处理的属性；auto属性值会自动进行滚动条，hidden属性值会将子元素超出的部分隐藏；核心注意———— 该属性设置在父元素上奥！！！
使用jQuery过程中，注意jQuery对象和dom对象的区别；（1）对元素对象的固有属性是用attr方法、样式（大小：当前元素内在占有宽度和高度、颜色、位置：当前元素所在布局的偏移量）这些是通过css方法奥！（2）还有获取元素位置offset是相对窗口的left和top；position方法是相对父元素的left和top；（3）选择器语法获取对象、（4）文档处理方法是增删改对象的操作、（5）筛选通过查找方法在同一层筛选出新对象，查找方法是返回其下层子元素的新对象。

Json

定义：本质是键值对，1.最外围由大括号包围，2.每个键由引号引起来，3.键值之间用冒号进行分割、4.多组键值对之间进行逗号分割。 {“name”：“abc”, “age”：22}
注意：（1）json中键：是需要引号的，可以理解为对象中一个属性，值：可以是数值类型、字符串、布尔、数组、json对象。（2）json本身也是一个object类型，就是一个对象。但传递时通常会转换为字符串—— ’{“name”：“abc”, “age”：22}‘；所以要区别开json对象和json字符串奥。
json存在的两种形式—— （1）json对象形式（内部操作数据时用json对象）、（2）json字符串的形式（端对端数据传递时）；这两种格式之间经常相互转换； 在前端转换的方式是——Json.stringify(json对象)：将json对象转为json字符串； Json.parse(json字符串)：将json字符串解析为json对象。后端有Gson、fastjson等工具奥！！！
java中会出现json字符串和javabean之间的转换： javabean 有list和map比较复杂，简单的是直接一个javabean单对象；list和map的转换，会使用到typeToken接口，这个接口中用来指明java的详细类型的； new TypeToken<HashMap<Integer,Person>>(){}.getType（）

Ajax 请求

定义：是一种浏览器通过js异步发起请求，局部更新页面的技术。

JS中Ajax原生的方式：

$(function(){var str;console.log("请求开始！！！");//原生ajax的创建过程：//（1）首先创建请求客户端对象var ajaxtest = new XMLHttpRequest();//（2）通过上面网络请求对象的open方法进行请求参数的设置ajaxtest.open("GET","http://localhost:8088/getall",true);//（4）下面开始判断请求是否完成，设置事件监听;通常这一步是绑定请求响应的事件，可以放在发送请求send前ajaxtest.onreadystatechange = function(){if(ajaxtest.readyState ==4 && ajaxtest.status==200){str  =  ajaxtest.responseText;console.log("获取到的响应内容", str);}}//（3）上面是设置好网络请求的相关参数，还需要发送这一行为才可以ajaxtest.send();console.log("测试是否异步！！！"); })

jQuery的ajax请求：

在这里插入图片描述

使用jQuery函数对象的工具ajax：
方式一》》》复杂的：     content-type  在那一端设置，就是告诉对方，自己数据内容的编码类型
$.ajax({
url:  请求的地址
data:   发送到服务端的数据  
type:    请求方式
success:    请求成功，响应的回调函数；这样这边响应回调函数中返回的数据会根据下面返回数据类型自动解析后，才传递到此回调函数的数据奥！
dataType:   期望响应的数据类型_"text"纯文本； “json”返回json数据；
}) 案例：
$.ajax({type: "POST",url: "some.php",data: "name=John&location=Boston",success: function(msg){alert( "Data Saved: " + msg );}
});function rawJqueryAjax(){
$.ajax({url: "http://localhost:8088/getall",type: "GET",success: function(meg){console.log("$.ajax 请求方式：",  meg.length)},
// dataType: "text"  //这边如果没有指定响应类型，默认好像后端传来的是json对象，可以明确设置，然后回调函数的参数就是指定的类型了//特别注意：  dataType这个表示返回的数据编码类型，它直接决定上面回调函数的返回参数的数据类型奥！！！ //如 dataType: "text"  则上面mes就是字符串类型的返回数据；  dataType: "json"  表示上面meg是一个json 对象；
})
}方式二》》》简化版：
$.get(url,data,callback,type)
其中data传递给后端的参数类型有两种：
第一种"name=John111&&location=Boston"；这种方式通常是get请求；好像在使用$.post时候也可以是这种传参格式，但是原生$.ajax的post不可以
第二种{ name: "John-JQueryAjax", time: "2pm" }   这种方式get和post请求都可以
同样注意，data参数的选择不同，直接决定回调函数的参数类型；如“text”；则回调函数的mes是字符串返回响应；如“json”表示是json对象返回的
案例：function JQueryAjax(){// $.get("http://localhost:8088/getall",{ name: "John-JQueryAjax", time: "2pm" },function(data){$.get("http://localhost:8088/getall","name=John111&&location=Boston",function(data){console.log(typeof data);},"text")}

ajax原生案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><script type="text/javascript" src="jquery.js"></script><script type="text/javascript">$(function(){var sertext;/* function rawAjax(){var str;console.log("请求开始！！！");//原生ajax的创建过程：//（1）首先创建请求客户端对象var ajaxtest = new XMLHttpRequest();//（2）通过上面网络请求对象的open方法进行请求参数的设置ajaxtest.open("GET","http://localhost:8088/getall",true);//（4）下面开始判断请求是否完成，设置事件监听;通常这一步是绑定请求响应的事件，可以放在发送请求send前ajaxtest.onreadystatechange = function(){if(ajaxtest.readyState ==4 && ajaxtest.status==200){str  =  ajaxtest.responseText;console.log("获取到的响应内容", str);}}//（3）上面是设置好网络请求的相关参数，还需要发送这一行为才可以ajaxtest.send();console.log("测试是否异步！！！");} */// rawAjax();// function rawJqueryAjax(){// 	jQuery.ajax({// 		url: "http://localhost:8081",// 		data: "name=John111&&location=Boston",// 		type: "get",// 		success: function(meg){// 			console.log("$.ajax 请求方式：",  meg)// 		},// 		dataType: "text"// 	})// }// function rawJqueryAjax(){// 	alert(2224444);// 	$.ajax({// 		// url: "http://localhost:8088/getall",// 		url: "http://localhost:8081",// 		type: "GET",// 		data: "name=John111&&location=Boston",// 		// data: { name: "John-JQueryAjax-222", time: "2pm" },// 		success: function(meg){// 			console.log("$.ajax 请求方式：",  meg)// 		},// 		error: function(XMLHttpRequest, textStatus, errorThrown){// 			alert("返回时异常"+textStatus)// 		},// 		dataType: "text"// 	})// }// rawJqueryAjax();// $("#btn01").click(function(){// 	alert(222);// 	sertext = $("#form01").serialize();// 	console.log(sertext)// })// $.get("http://localhost:8088/getall",{ "name": "John-JQueryAjax-get", time: "2pm" },function(data){function JQueryAjax(){alert(3333)// $.post("http://localhost:8088/getall","name=post&&location=Boston",function(data){$.get("http://localhost:8088/getall","name=get&&location=Boston",function(data){console.log(typeof data);console.log( data);},"html") } JQueryAjax();})</script></head><body><p>hello world</p><form  method="get" id="form01"><input type="text" name="username" id="username"/><br><input type="password" name="password" id="password"/> <br><button type="button" id="btn01"> 序列化表单数据</button></form></body>
</html>

vue

前言

我们现在的编码方式都是一种声明式编程，就是有一种好像什么都没做，只要按照框架限定的语法要求写一些对应的声明式代码；即声明式开发简单说就是按照别人的语法做一些声明的定义或者描述，就可以完成我们需要的交互操作了。
与声明式开发相对的；命令式开发，就是所有逻辑流程都需要开发者完成。
Vue是一个MVVM的架构，首先MV理解为Vue对象（类似于mvc中的C），V理解为页面html（模板页面），M理解为两者交互的数据（vue实例中的数据）。
vue指令，是用来扩展HTML标签功能的，原本HTML标签没有这些属性，而vue框架结合自身特性和功能给HTML标签又添加一些额外属性。
在vue指令（属性以v-xxx开头的）中写内容的和在mv中写的内容一样，如v-model=“username（这个是定义在data中的变量奥）”，而如果在其他非vue指令的地方用到mv中变量是这样形式{{xxx}}


特点：
遵循MVVM模式
代码简洁、体积小、运行效率高
与其他框架的关联：
借鉴angular的模板和数据绑定技术
借鉴react的组件化和虚拟Dom技术通常我们一些程序设计语言，其中相关代码都是局限在指定的环境下编写；
同样，vue框架可以通过相关的vue指令属性，在html视图层进行一些代码操作；
如vue环境中（vm对象）内部可以编写一些方法、属性; 方法中可以进行各种变量和各种逻辑结构操作；而只要在html标签中设定一些vue指令属性，
那么就可以在html视图模块中也可见vue环境中操作的一些数据或者内容了。
（1）比如vue对象中创建了一个变量 tmp：“abc”；  而在html标签中通过v-model = “tmp” 就可以获取到vue环境中创建的这个tmp变量了； 
（2） 同理vue环境中创建了一个方法，在html标签中可以通过@click = “xxx”直接获取该方法的响应结果，变成了回调函数；
这两个案例当伪代码理解，理解其思想。

在这里插入图片描述

查看全文
如若内容造成侵权/违法违规/事实不符，请联系编程学习网邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！

微前端 - 将微服务理念延伸到前端开发中
翻译自 https://micro-frontends.org/ 本文描述了采用不同 JavaScript 技术框架的多个团队中协同构建一个现代化前端 Web 应用所需要的技术、策略和方法。什么是微前端？ 微前端这个术语最初来自 2016 年的 ThoughtWorks 技术雷达[ https://www.thoughtworks.com…...
2024/4/27 23:34:38
切开的双眼皮能保持多久时间
...
2024/4/20 16:03:36
切开的双眼皮能保持多久
...
2024/4/20 16:03:35
修改数据页面不更新的原因和解决方案
我们在开发过程中会碰到数据更新，但是视图并未改变的情况，情况如下： 1. 直接添加或删除属性原因：官方回答 - 由于 JavaScript（ES5） 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue…...
2024/4/20 16:03:35
做双眼皮可以管多少年
...
2024/4/20 16:03:33
埋线双眼皮真的不持久吗
...
2024/4/20 16:03:32
做埋线双眼皮唯上海吴海龙真信
...
2024/4/20 16:03:31
Angular 表单控件示例
本文的主要是演示 Template-driven 中，一些常用控件的使用方式，仅供参考。具体请根据实际业务需求做相应调整。本文将介绍 Angular Template-driven 表单中，常用控件的使用。涉及的表单控件如下： textnumberradioselect (基本类型…...
2024/4/20 16:03:30
理解ROS话题（六）
本教程介绍ROS话题（topics）以及如何使用rostopic 和 rxplot 命令行工具。内容开始roscoreturtlesim通过键盘远程控制turtle ROS Topics使用 rqt_graphrostopic介绍使用 rostopic echo使用 rostopic list ROS Messages使用 rostopic type 继续学习 ro…...
2024/4/20 3:18:01
ROS中的话题
运行ROS程序前须先运行 roscore 下面进入学习： 1.运行 $ rosrun turtlesim turtlesim_node 出现一个小乌龟界面 2.通过键盘远程控制turtle,在一个新的终端运行 $ rosrun turtlesim turtle_teleop_key 现在你可以使用键盘上的方向键来控制turtle运动了。如果不…...
2024/4/21 13:15:02
angular——话题精选（动态更换显示一条）
<section class"white_bg topics "><header class"fix_container "><div class"fix_top_left" id"topics_mark"><i class"icon-topic"…...
2024/4/21 13:15:00
双眼皮埋线唯上海杜园园真实
...
2024/4/21 13:15:00
割双眼皮后可以保持多久
...
2024/4/21 13:14:58
360lib投影格式介绍(二) - 立方体贴图投影(CMP / ACP / EAC / SSP / TSP)
CubeMap Projection (CMP) 投影方式在计算机图形学中，立方体投影是常用的环境映射方法之一，常用于游戏场景中的天空盒，相当于等距柱状投影的优化版，环境投影到立方体之后可分六个正方形纹理来存储；或者将立方体展开…...
2024/4/21 13:14:57
react从入门到入坑
React React学习内容 React学习版本： 16.x React老版本项目： 15.x react官网说 17.x 会使用的一些技术 React应用级脚手架 CRAdvaumi create-react-app 【 CRA 】 React官网提供的脚手架脚手架： 作用： 快速构建一个项目全局安装…...
2024/4/26 13:55:33
Android中的数据绑定框架DataBinding(对比AngularJS双向数据绑定很好理解)
转自：http://blog.csdn.net/qibin0506/article/details/47393725 今天来了解一下Android最新给我们带来的数据绑定框架——Data Binding Library。数据绑定框架给我们带来了更大的方便性，以前我们可能需要在Activity里写很多的findViewById，烦…...
2024/4/21 13:14:55
[OpenGL] Shadow Map 阴影
图：随着键盘控制点光源位置移动，阴影发生实时的变换之前在 https://blog.csdn.net/ZJU_fish1996/article/details/51932954 一文中已经介绍了shadow map的基本原理，至今为止，它依旧是在游戏开发中运用较(最?)广的一种阴影技术。…...
2024/4/23 10:45:51
工作积累（九）——前后台传递类Map型参数
最近在工作中整合友盟消息推送服务时，遇到了用 Ajax 向 Java 后台传递自定义参数的需求，当时想要采取 java.util.Map ，但发现 Ajax 无法传递 java.util.Map 类型的参数，后来无奈采取的方式的是采用了这样的 Vo 对象： p…...
2024/4/21 13:14:53
割双眼皮价位SOU奇致治病
...
2024/4/21 13:14:53
双眼皮和填脂肪可以一起做吗
...
2024/4/21 13:14:52

2020.11.20 前端html

一.网页

1.2 标签上属性格式和样式属性上样式格式要特别注意

二.HTML

2.1 标签、元素、属性

2.2 常见标签特点：

三.CSS

3.1 基本语法

选择器小结

3.2 伪类选择器：

伪元素和伪类选择器：

3.3 样式常见方式：

四.常用标签

4.1 文本标签

4.2 css盒子模型——盒子大小和盒子位置

目前盒子的位移几种方式：

4.2.1 盒子模型结构：

4.2.2 盒子模型相关重要属性：

（1）display——修改元素的性质

（2）overflow——该属性定义子元素溢出父元素内容区的内容会被如何处理>>> 也是开启BFC模式较好方式

（3）文档流

（4）浮动

（4）定位 ————相对定位和绝对定位

定位小结：

五.表单

六. 框架集

JavaScript

一 js语法

二 js运算符

三 语句

前言：

四 引用类型——对象{ 引用类型—注意对象的地址和内容的区别 }

对象前言

4.1 对象的分类

4.2 对象的创建

4.3 函数 ————函数也是一个对象,但函数是有功能的对象

4.4 函数和变量的声明提前

4.5 数组对象—— Array

数组的特点

4.6 Date/Math/String对象

4.7 正则表达式

4.8 DOM—— 宿主对象（由浏览器环境提供）

4.8.1 DOM中节点—— 最基本单元（节点和元素要区分开）

4.8.2 事件——用户和浏览器之间有交互行为发生

4.8.3 文档流加载顺序

4.9 js基础——拖拽

5 BOM 对象（大多数是window对象下的属性对象奥！！！）

5.1 window对象的方法

细节

线程池

jQuery

前言

正文

1. 通过选择器表达式获取jQuery对象

2. jQuery对象属性内容的获取和设置

3. CSS

4. 筛选

过滤和查找

5.文档处理

增

删

改

6.事件

7 动画效果

8 插件

动画样式

Json

Ajax 请求

ajax原生案例

vue

前言

相关文章

最新文章

三语句

四引用类型——对象{ 引用类型—注意对象的地址和内容的区别 }