2021-10-18 HTML复习总结

我同桌总结！！！

HTML的基本结构？

HTML是超文本标记语言，基本结构：

①文档声明（用来声明HTML文档所遵循的HTML规范和版本）

②根标签（用来包裹所有的网页内容）

③头部分（用来存放HTML文档的基本属性信息，网页的标题，文档使用的编码）

④体部分（用来存放可视化的网页内容）

Form表单的作用是什么，如何实现？

用于向服务器提交数据，

通过表单向服务器提交数据，

通过超链接向服务器提交数据

Form标签的常用属性有什么，作用是什么？

action表单的提交地址

method表单提交的方式

input文本输入框

select定义下拉选框

option下拉选框中的内容

textarea多文本输入区域

什么是分区标签？常用的分区元素有哪些？作用是什么？

分区标签可以对多个有相关性的标签进行统一管理

div块级分区元素，独占一行，可以设置宽和高，如果不设置，宽就填满父级元素，高由内容决定

p块级分区元素，独占一行，用于包裹一段文本，可以设置宽和高

span行内分区元素，共占一行，不能设置宽和高

CSS引入方式有几种？分别是什么？

3种，

外部样式用<link href=“”>标签引入，引入外部的css文件设置样式

行内样式用<style>标签引入，给所有的分区标签设置相同的样式

内部样式用<style>标签引入，给单个分区标签设置样式

常见的CSS选择器有哪些？是否存在优先级？

1、标签名选择2、类选择器3、id选择器4、属性选择器5、后代选择器6、分组选择器7、任意元素选择器8、伪类选择器

什么是盒子模型？

盒子模型=外边距+边框+内边距+宽高

JavaScript和java的区别？

1. JS是一门直译式的语言，边解释边执行，没有编译过程，JAVA是有编译过程的语言
2. JS是一门基于对象的语言，有对象但是没有概念，JAVA是一门面向对象语言
3. JS是一门弱类型的语言，JAVA是一门强类型语言

JavaScript数组声明方式？

1. 字面量声明  例如：let arr=[];
2. 内置的构造函数声明  例如：let arr=new Array（）；

Java数组与JavaScript数组的区别？

(1)java数组声明后长度不可变,js数组声明后长度可以任意改变

(2)java数组只能存储同类型数据，js数组可以存储任意类型的数据

Function函数的三种声明方式？

1. 函数声明：function 方法名（参数）{要执行的代码}
2. 函数表达式：方法名=function（参数）{要执行的代码}
3. Function构造器：方法名=function（“参数1”，“参数2”，“要执行的代码”）

分别描述HTML、CSS、JS在页面组成中的作用？

HTML是超文本标记语言，是用来描述网页的语言，定义网页的结构，内容可以包含文字、图片、视频等。

CSS是层叠样式表，定义如何显示HTML元素，比如，标题字体、颜色变化，或为标题加入背景图片、边框等。用来描述网页，美化网页。

JavaScript是一种脚本语言，将文本格式的字符代码发送给浏览器，由浏览器解释运行。

js代码的书写方式(即js的引入方式)？

三种：

1. 内联引入：直接在标签的事件属性中添加js代码，事件触发则执行。

onclick 单击事件属性的属性值：alert（） /əˈlɜːt /

1. 内部引入：直接在script标签中添加js代码
2. 外部引入：通过script标签的src属性指定引入的js文件的路径

js中的变量类型？

1. 基本数据类型

string字符串,可以用单引号也可以用双引号

number数字，可以带小数点，也可以不带小数点

js中的数字都是浮点数，但是在显示的时候都会自动转成整数

boolean布尔，两个值true false

null空 可以将变量的值设置为空来清空变量

Symbol表示一种新的原始数据类型，表示独一无二的值

2、引用类型

Array数组

Object对象

Function函数

js声明变量有几种方式？有什么区别？

var全局变量

let局部变量

const常量  声明后需要赋值，一旦赋值不可修改

如何定义js对象？如果获取对象的属性值？如何调用对象的方法？

1. 使用大括号定义js对象，大括号内的值用键值对表示，用：隔开，多个值用，隔开。对象属性：名称：值。 对象方法：名称：值。
2. 使用js关键字new来创建对象，new Object()；。

对象名.属性名。 对象名.方法名。

什么是文档就绪事件？怎么实现？有什么作用？

当js获取元素时，内部引入js无法获取元素内容，需要文档就绪事件来解决;浏览器加载整个页面后立即执行，这样获取任何元素都可以获取到。window.οnlοad=function（）{}

常见的js弹框方式有哪些？

有三种：

1、alert警告框 只有一个确认选项，只有确认选项后在能进行下一步。

1. confirm确认/取消框 有两个选项确认和取消，确认返回true，取消返回false

3、prompt包含输入框 参数：1个参数时是指定提示消息，2个参数时是第二个参数是指定消息默认值。返回值：输入内容点击确认返回的是String类型的字符串，不输入内容返回的是空字符串。点击取消返回null，类型是Object。

什么是NaN？什么时候会出现？怎么避免？

NaN是Not a Number 不是一个数字。当规定输入框的内容是一个文本的时候，要求输入数字时，则需要用NaN判断输入内容是否合法。用if语句判断isNaN（内容），如果不是一个数字返回true，提示输入有误，相反返回false。

==和===的区别？

==比较时先统一两个值的类型再比较值，所以只要两个值相同，则返回true

===比较时先比较两个值的类型在比较两个值，所以只有类型相同，值相同，返回才能是true。

ready和load的区别？

jQuery里的ready函数是在html内的所有标签都加载完之后才执行。

javaScript里的load事件等所有内容都加载完，包括外部引入的都加载完之后才执行。

Js获取元素中间的文本内容？

innerText/innerHTML

1. 直接调用属性可以获取元素对象中的内容

2赋值可以修改元素对象中的内容：

 innerText是写入普通文本，没有解析过程，写入innerHTML是写入html代码，会解析成html执行

Js获取页面上的元素对象？

1. 通过id属性值获取元素，返回单个值。

document.getElementById();

1. 通过class属性值获取元素，返回数组。

doument.getElementsByClassName();

1. 通过name属性值获取元素，返回数组。

doument.getElementsByName();

1. 通过标签名获取元素，返回数组。

doument.getElementsByTagName();

Jq怎么获取页面上的元素对象？

先引入JQuery的函数文件库。

1. 通过id属性值获取元素

$(“#id”)

1. 通过.class属性值获取元素

$(“.class”)

1. 通过元素名获取元素

$(“元素名”)

1. 通过任意元素获取元素对象

$(“*”)

js和jq的区别？

1. js和jq在使用方法和属性上的区别

（1）js对象不能用jq对象的属性和方法，jq对象不能用js对象的方法和属性

（2）jq对象是一个数组

（3）jq和js之间的转换 js转jq：$(js对象) jq转js：jq对象[]

1. 在声明事件上有区别

Js声明事件需要获取对象然后用获取到的对象动态调用事件实现内容2行

Jq声明事件$()在括号内添加jq选择器，然后动态调用事件实现内容1行

1. 页面加载完毕上的区别

Js的onload事件是等到所有内容，包括外部的图片及文件都加载完后才执行。

Jq的ready函数是在html中所有标签（DOM）都加载完，就会执行。

vue.js安装常用方式？

（1）独立版本：直接在官网上下载并使用script标签引入，引入后vue会被注册为一个全局变量。

下载的有开发版本和生产版本两个选项，开发版本有健全的警告和debug，生产版本比较简洁。

（2）npm安装：用vue，js构建大型应用的时候推荐用npm安装。

npm是javaScript的包管理工具，并且是Node.js平台默认的包管理工具，通过npm可以安装、共享。分发代码，管理项目依赖关系。

Node.js是一个运行在服务端的javaScript，是一个基于ChromejavaScript运行时建立的一个平台。

什么是MVVM框架？

在body中创建数据展示View和js，在js中创建数据Model，并创建vue实例，传入参数，参数是建立连接的对象，内容是el：（挂载点）绑定数据展示，data绑定数据。

什么双向绑定？怎么实现？

用于表单控件元素上，创建双向的数据绑定，根据表单上的值，自动更新绑定元素的值。用v-model实现。

vue常用指令及其作用？

v-text:展示文字 展示数据对象的值

v-if：判断 判断数据对象的值是否符合条件

v-show：展示 判断符合就展示，不符合就隐藏

v-for：循环遍历 遍历数组，对象

v-bind：属性绑定

v-on：事件绑定

js怎么获取元素对象？jq怎么获取？vue怎么获取？

document.getElementById();ByName();ByClassName();ByTagName()

基础选择器:#id/.class/*/元素名/多个元素名，

层级选择器:.next/.prev/.nextAll/.prevAll/.siblings/后代

过滤选择器::first/:last/.eq(n-1)/:visible/:hidden

表单选择器::表单项/:表单元素/:表单元素：checked/:selected

通过ref属性绑定在元素上，通vue对象获取元素：this.$refs

关系型数据库和非关系型数据库的区别？

关系型数据库底层以二维表的形式保存数据的库就是关系型数据库

非关系型数据库严格上不是一种数据库，应该是一种数据结构化存储方法的 集合，可以是文档、键值对或图形等。

- 关系型数据库: Oracle、MySQL、SQLServer、Access

- 非关系型数据库: MongoDB、Redis、Solr、ElasticSearch、Hive、HBase

V-if和v-show的区别？

相同点：都可以动态的控制DOM元素的显示或隐藏

不同点：v-if的显示和隐藏是将DOM元素整个添加或删除，v-show的显示和隐藏是为DOM元素添加css样式display，将其值设置为none或者block，DOM元素还是存在的

v-if的切换开销更高，v-show的初始渲染开销更高，如果需要频繁的切换，推荐使用v-show，如果运行条件很少改变，推荐使用v-if

什么是DOM?
文档对象模型（Document Object Model，DOM）是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。我们最为关心的是，DOM把网页和脚本以及其他的编程语言联系了起来。

HTML：

文本标签：

1. h1~h6标题标签：

字体自动加粗，字号依次从大到小，独占一行，自带上下间距，默认位置居左。

1. align属性：可以通过修改标签的align属性改变位置。
2. hr标签：水平分割线
3. br标签：换行
4. p段落标签：独占一行，自带上下间距

字体效果标签：

1. b标签：加粗标签
2. i标签：斜体标签
3. u标签：下划线标签
4. s标签：删除线标签
5. small标签：把字体变小标签

空格标签：

1.  不换行空格
2.  半角空格
3.  全角空格

列表标签：

1. ul标签：无序列表
2. li标签：列表项
3. ol标签：有序列表

图片标签：img

1. src属性：用来指定路径
2. weight属性：指定宽度
3. height属性：指定高度
4. title属性：鼠标悬停显示图片文本
5. alt属性：图片不能正常显示时，显示的文本

超衔接标签：a

1. href属性：用于指定要跳转的路径

①#top跳转到页面顶端

②#img2，跳转到设置锚点的图片

1. target属性：用于指定打开超链接的方式

①_self默认当前窗口打开链接

②_blank新窗口打开链接

1. id属性：设置锚点

音频标签：audio

视频标签：video

1. controls属性：用于向用户显示控件
2. autoplay属性：用于资源加载完毕后自动播放

表格标签：用于页面布局，存放数据。

最外层table标签：定义一个表格

tr标签：定义行

td标签：定义列

1. border属性：指定表格边框，属性值得大小决定边框得粗细
2. cellspaceing属性：指定单元格间距，属性值的大小决定间距的大小
3. cellpadding属性：指定单元格与内容的距离
4. rowspan属性：跨行，属性值是跨几行
5. colspan属性：跨列，属性值是跨几列
6. caption标签：表格标签，默认居中
7. th标签：表头标签，默认加粗并居中

表单标签：form：用于数据的传输，比如提交。

1. action属性：指定表单提交的路径，也叫url
2. method属性：指定表单提交方式（get/post）想在地址栏看见就用get
3. enctype属性：规定表单数据的编码类型

①application/x-www-form-urlencoded

在发送前把所有字符使用默认的字符集进行编码，空格转换成“+”，特殊符号转换为ASSCII HEX（十六进制）值。

②multipart/form-data

不对字符进行编码。在使用包含文件上传控件的表单时必须使用该值。

③text/plain

空格转换为“+”，但不对特殊字符进行编码。

1. name属性：

只要是需要向服务器中提交数据，该表单就必须添加name属性，否则在表单提交时，该项就会被忽略。

1. input标签：输入框
2. label标签：与input标签一起使用一起使用，为input标签定义标记。

当用户点击label标签中的文本时，浏览器会自动将焦点转到和该标签相关联的表单控件上。

①for属性值应当与相关元素的id属性值相同。

1. value属性：默认提交值
2. Placeholder属性：占位文本
3. readonly属性：只读
4. maxlength属性：最大字符长度
5. type属性：输入的数据类型

①text：普通文本输入框

②password:密码输入框，有掩码效果

③radio：单选框，同一组单选框的name属性值应保持一致，要设置value值。

④checkbox：多选框，同一组多选框的name属性值应保持一致，要设置value值。

⑤file：文本选择框，可以用来上传附件等

⑥date：日期框

⑦submit:提交按钮，用于将表单中的数据提交到服务器

⑧reset：重置按钮

⑨button：自定义按钮

⑩number:只能写数字

12、checked属性：单选框，多选框设置默认被选中

13、select标签：下拉选择框

14、option标签：添加下拉选的内容

option不设置value值，提交的是option内的内容

15、selected属性：设置当前option选项默认被选中

16、textarea标签：文本域标签，可以输入多行文本，文本框是单行文本框

①rows属性：设置行数（高度）

②cols属性：设置列数（宽度）

③placeholder属性：占位文本在textarea标签中使用时，标签内部不能有换行或者空格。

  分区标签

1. div：块级分区元素，默认独占一行

可以设置宽和高，如果不设置，宽是默认填满父级元素，高由内容决定。

1. p:块级分区元素，默认独占一行，内部包裹一段文本
2. span：行内分区元素，共占一行，不能设置宽和高

CSS：

在HTML中引入CSS

方式1：行内样式 - style标签（单独给某一个分区标签设置样式）

方式2：内部样式 - style标签（可以给所有分区标签设置共同的样式）

type:“text/css”通过css选择器选择到标签后，添加样式

方式3：外部样式 - link标签 （引入外部的css文件设置样式）

rel：“stylesheet”不能省略，表示引入的是一个样式表文件。

可以设置的样式：

border：边框，粗细，样式，颜色

样式：solid-实线，dashed-虚线，double-双线，dotted-点状线

设置文本的字体样式：

text-align:文本的对齐方式

text-decoration:文本修饰

值：underline下划线

    overline上划线

    line-through删除线

    none去掉文本修饰

      color:字体颜色

      Line-height:行高（多行文本控制行间距，单行文本可以实现垂直居中）

      text-shadow:阴影（颜色 x偏移值 y偏移值-的往上 浓度（值越小越清晰））

font-size:字体大小（div中默认大小是16px）

font-weight:字体加粗 值：normal去除加粗的效果

font-style:字体样式 值：italic斜体

font-family:设置字体

font:设置大小+字体

颜色的赋值方式和设置背景：

color：  

1. 值：颜色英文单词
2. #6位16进制
3. #3位16进制
4. 3位10进制（红绿蓝  rgb（0,0,225））
5. 4位16进制（红绿蓝+浓度  rgba（255,0,127,0.2））

背景设置：

background-color:设置背景颜色

background-image:设置背景图片

background-size:设置图片的尺寸

background-repeat:禁止重复 值：no-repeat /rɪˈpiːt/

background-position:设置背景图片出现的位置（1、直接写值 2、写百分比）

CSS选择器：

1. 标签名选择器：

语法：标签名{样式代码}（通过标签名称选中指定名称的所有标签）

1. 类选择器:

语法：.class属性值{样式代码}（通过class属性值选择指定的标签）

1. id选择器：

语法：#id属性值{样式代码}（通过id选中的是唯一的一个元素）

1. 后代选择器：

语法：祖先 后代{样式代码}（选择指定元素内部的指定后代元素）

1. 属性选择器：

语法：选择器[属性条件1][属性条件2]...{样式代码}

（选择器选中元素的基础上，根据元素的属性条件进行筛选元素）

1. 分组选择器：

语法：选择器1，选择器2...{代码样式}

（将多个选择器合并成一个选择器）

1. 任意元素选择器：

语法：*{样式代码}（选中页面中所有的文本）

1. 伪类选择器：

语法：标签名：状态{样式代码}

选择的是标签的状态：

• 未访问：link、访问过：visited、悬停：hover /ˈhʌvər/、点击：active

选择器的优先级：

不同选择器时：id选择器 > class选择器 > 标签选择器

相同选择器时：给标签中的文本设置同一个样式时，后面设置的样式会覆盖前面设置的样式。

盒子模型：

margin属性：外边距（控制标签显示的位置）

border属性：边框

• padding属性：内边距：（设置边框中内容显示的位置） /ˈpædɪŋ/

设置外边距

1. 单独给某个方向设置外边距：
2. 上下和左右设置外边距:
3. 四个方向赋值外边距：
4. 四个方向顺序赋值外边距：上右下左
5. 水平居中设置外边距：值auto

div：上下相邻两个标签彼此设置外边距，外边距取两个相邻外间距的最大值

span：没有上下边距，左右边距是相邻两个边距相加求和 /spæn/

设置边框+内边距

可以单独给某个方向设置边框

• border-radius属性:设置圆角 /ˈbɔːdə(r)/ /ˈreɪdiəs/

内边距，单独设置组合设置均可，设置方式同外边距一样

相对定位：

默认的定位方式是静态定位，由于静态定位无法实现叠层效果

position属性：设置定位方式

值：relative 相对定位 /ˈrelətɪv/

通过left/right/top/bottom控制元素的位置,坐标相对于元素的初始位置

绝对定位：

修改为绝对定位，元素会脱离文档流，后面的元素会顶上去

值：absolute绝对定位/ˈæbsəluːt/

通过left/right/top/bottom控制元素位置，坐标相对于窗口而言

浮动定位：

float标签:

通过left/right/top/bottom属性控制元素定位方向

JavaScript

js是弱类型语言,相同的变量可以用做不同的类型

声明时可以使用以下三种方式：

1、var 全局变量

2、let 局部变量

3、const 常量，一经设置不可修改，在设置时必须赋初始值

注：let和const是ES6推出的新特性。

js的引入方式

1. 内联引入：直接在标签的事件属性中添加js代码，事件触发则执行。

onclick 单击事件属性的属性值：alert（） /əˈlɜːt /

1. 内部引入：直接在script标签中添加js代码
2. 外部引入：通过script标签的src属性指定引入的js文件的路径

js数据类型

一、基本类型（值类型）

1、字符串（string），可以使用单引号或双引号

2、数字（number）js中是有一种数字类型，可以带小数点，可以不带。

在js中，所有数字在底层都是浮点数，但是在处理和显示的过程中会自动和整型进行转换。

3、布尔（boolean），逻辑类型，只有两个值：true或false

4、未定义（undefined）表示变量未定义，是指声明了变量，但是没有为变量赋值，该变量的值就是undefined，如果未声明直接使用会抛异常。

5、空（null）表示空，可以通过将变量的值设置为null来清空变量。

在js中，表示“什么都没有”，是一个只有一个值的特殊类型，返回的是object。

6、Symbol/ˈsɪmbl/，ES6引入的一种新的原始数据类型，表示独一无二的值。

二、引用类型

1、数组（Array）

在js中，数组是一种特殊化的对象类型，所以输出的是object。

2、函数（Function） /ˈfʌŋkʃn/

3、对象（Object）

console.log() 在控制台打印

typeof操作符，可以用来检测变量的数据类型

js的数组对象Array

修改数组长度的方法：

1. 直接赋值 语法：数组名.length=赋值
2. 通过下标 语法：数组名[新下标]=给新下标赋内容，数组长度会根据新下标自动改变长度

js的函数对象Function

Js函数的三种声明方式：

匿名函数（自调用函数）

声明一个匿名函数并执行（只需要执行一次）

（function(参数){要执行的代码}）（赋值）

箭头函数

语法：（参数1，参数2，...参数n）=>{代码}

有return直接省略return和{}

（）=>代码

返回使用const最安全，因为函数表达式始终是常量值

输出：console（y(赋值)）；

Js的对象Object

Js变量有只能包含单个值，而对象能包含多个值。

JS对象的定义：

1. 使用大括号定义，{}内部的值以键值对的方式定义，键值对之间用：分隔，每个值之间用，分隔。

值的书写格式：

对象属性：名称：值

对象方法：名称：函数

例如：let person={

Name1:“三三”,Name2:“四四”，

fun：function(){return this.Name1+this.Name2}

}

2、使用js关键字new创建对象。

例如：let p = new Object();

p.name:“小红”；

p.agw:12；

p.fun=function(){return this.name+this.name}

访问对象属性：

1. 对象名.属性名称
2. 对象名.[“属性名称”]

访问对象方法：

对象名.方法名() （如果不加（），则返回的是方法的内容）

JS对象的浅层复制:

当将创建好的对象赋值给一个新的对象时，两个对象会成为一个对象，传递了地址值，所以改变一个对象的属性，则另一个对象的属性也会改变。

JS的弹框方式

1. alert()警告框

特点：只有一个确认选项，点击确认后才能进入下一步操作，只是提醒，不会对脚本产生任何的改变。

2、confirm()确认/取消框/kənˈfɜːrm/

特点：有两个选项确认和取消，用户点击其中一个选项才能进入下一步，该方法有返回值，当点击确认返回true，当点击取消返回false

3、prompt()包含输入框/prɒmpt/

特点：

参数：一个参数时是指定提示信息，两个参数时第二个参数是输入框的默认值

返回值：有两个选项确认和取消，还有一个输入框，当不输入内容时点击确认，返回“”字符串，类型为string类型，当输入内容时，会返回字符串类型的内容。点击取消返回null，类型是object。

JS获取元素

1. 通过id属性值获取元素，返回单个值

方法：let d1 = document.getElementById("d1");

1. 通过class属性值获取元素，返回数组

方法：let d2 = document.getElementsByClassName("c1");

1. 通过name属性值获取元素，返回数组

方法：let d3 = document.getElementsByName("n1");

1. 通过标签名获取元素，返回数组

方法：let d4 = document.getElementsByTagName("div");

判断输入内容是否合法

isNaN()判断传入的参数是否不是一个数字，

返回值为boolean类型，不是一个数时返回true，否则返回false

 --NaN:not a number 不是一个数字*

、对属性

JS加法计算

字符串进行减、乘、除运算时会自动转成数值，加法不会 ，

可以先将字符串转换为数字parseInt()/parseFloat()再进行加法运算。

JS提供的运算符 ===

==和===的区别：

==时先统一两个变量的类型再比较值，所以只要值相同，返回结果就是true

===是先比较类型再比较值，只有类型和值都相同时才返回true

Js定时器

1. setInterval(函数名，间隔毫秒值)

每隔指定的毫秒值调用一次函数，调用clearInterval()停止执行。

1. setTimeout(函数名，间隔毫秒值)

在指定的毫秒值之后调用一次函数，只调用一次。

鼠标事件：

1. 鼠标移入：onmouseover
2. 鼠标移出：onmouseout
3. 鼠标移动：onmousemove
4. 鼠标按下：onmousedown
5. 鼠标抬起：onmouseup

键盘事件：

1. 键盘按下的按键编码：onkeydown
2. 键盘抬起的字符：onkeyup
3. event事件对象，表示事件的状态，只在事件发生的过程中才有效。
4. 按键编码转成字符串：String.fromCharCode(event.keyCode);

状态改变事件：

1. 内容改变事件：onchange

触发事件在{}中写入的内容就是想要改变成的内容 例如：下拉选select

1. 获取焦点事件：onfocus /ˈfəʊkəs/

例如：在输入框中点击光标，久触发了焦点事件中的内容

3、失去焦点事件：onblur /blɜː(r)/

事件绑定：

1. 事件属性绑定：

直接在标签中设置属性事件

1. 动态绑定：

需要使用时，用标签名中的id属性.事件,进行动态绑定。

事件传递：

二级联动：

步骤：

1. 设置下拉选项select省份
2. 设置下拉选项select城市
3. 在省份select中设置onchange事件属性
4. 在javaScript中定义对象，省将市放入数组
5. 触发事件，写内容在事件内

内容1、获取省份的值，

内容2、通过省份存入到数组获取对应的城市

内容3、遍历城市数组

内容1、创建option标签

Let o = document.createElement(“option”);

内容2、将城市修改到option标签中

内容3、将存好的option标签中的内容追加到select标签中

select中的id属性值.appendChild(o);

Qq好友列表：

corsor:pointer鼠标变小手

步骤：

1. 创建表格
2. 给表格设置style
3. 给每一个分组标题设置点击事件，传入this参数
4. 获取当前分组内的好友列表div

变量=参数.parentNode.getElementByTagName(“div”);

1. 判断这个div是展开还是关闭(关则打开，打开则关闭)

变量.style.display(“none”) 变量.style.display(“block”);

jQuery

jQuery引入方式：

使用jQuery之前，必须先引入jQuery函数库文件。

<script src=“函数库文件” type=“text/javaScript” charset=“utf-8”></script>

$是jQuery的标志

测试jQuery是否引入成功:

使用jQuery提供的文件就绪事件函数，$(document).ready(function(){})

简写：$(function(){})

jQuery动态绑定事件:

$(“#id属性值”).click(function(){触发事件的内容})

jQuery获取/修改标签中的内容:

$(“#id属性值”).text($(“#id属性值”).val());

Js和jq互转

1. js转jq

let 变量=$(获取的js对象)

1. Jq转js

let 变量=获取jq的对象[0]

JQuery的相关函数

css()函数是用于获取或设置元素的css属性，传参数是设置，不传参数是获取。

val()函数是用于获取元素的value值

html()函数是用于清空的

append()函数是用于追加的

hide()函数是设置元素状态为隐藏

toggle()函数是切换元素状态（如果是隐藏就显示，如果是显示就隐藏）

slideToggle(缩放的时间)函数是功能同上，附加缩放的动态效果

parent()获取父级元素

remove()删除

each(function(){})遍历标签

JQuery选择器

基础选择器：

1. id选择器： 语法：$(“#id属性值”)
2. class选择器： 语法：$(“.class”)
3. 标签名选择器： 语法：$(“标签名”)
4. 多元素选择器： 多个元素中间用逗号隔开
5. 任意元素选择器： 语法：$(“*”)

层级选择器：

1. 获取内部元素 语法：$(“夫标签 子标签”)
2. 获取下相邻元素 语法：$(“#id属性值+下一个标签”)

语法：$(“#id属性值”).next(“下一个标签（也可不填）”)

1. 获取上相邻元素 语法：$(“#id属性值”).prev(“上一个标签”)
2. 获取指定元素后面的所有兄弟元素

语法：$(“#id属性值”).nextAll(“(可填可不填)”)

获取指定元素前面的所有兄弟元素

语法：$(“#id属性值”).prevAll(“(可填可不填)”)

获取指定元素的所有兄弟元素

语法：$(“#id属性值”).siblings(“(可填可不填)”)

过滤选择器：

1. 选中所有相同标签中的第一个标签

语法：$(“标签名：first/eq(0)”)

1. 选中所有相同标签中的最后一个标签

语法：$(“标签名:last/eq(-1)”)

1. 选中所有相同标签中的第n个标签 eq(n-1)

语法：$(“标签名：eq(n-1)”)

1. 选中所有相同标签中可见的标签

语法：$(“标签名：visible”)

1. 选中所有相同标签中的隐藏标签

语法：$(“标签名：hidden”)

表单选择器：

1. 选中所有的表单项元素（例如：input/select/textarea）

语法：$(“：表单标签名”)

1. 选中所有普通文本输入框

语法：$(“:text”)

1. 选中所有密码输入框

语法：$(“:password”)

1. 选中所有单选框

语法：$(“:radio”)

1. 选中所有多选框

语法：$(“:checkbox”)

1. 获取所有下拉选

语法：$(“select”)

1. 获取所有被选中的下拉选

语法：$(“:select”)

相关项目

1. 二级联动

1. 设置下拉选select，option中写入省，设置点击事件
2. 设置下拉选select，option中写入市，设置点击事件
3. 将省中的点击事件写入内容，省市对象将省对应的市存入数组
4. 获取省份，把省份对象的市的数组获取出，遍历数组
5. 创建option，将数组中的元素存入option中
6. 将市追加到市的select后

1. 简易QQ列表

（1）

1. 简易购物车

1. 给所有多选框添加点击事件
2. 判断如果是全选框，将全选框设置被选中属性，然后将这个属性给除了全选框的多选框设置
3. 合计：遍历除了全选框之外的多选框，将被选中的多选框中的value值累加接收，将多选框的数量累加接收
4. 建立联系：记录除了全选框之外的多选框的数量，等于被选中的数量
5. 修改总价标签的文本：修改成累加的value的接收变量

1. 模拟员工信息

1. 获取想要添加的员工
2. 校验数据：1、不能为空字符串
3. 2、员工id不能重复，遍历标签寻找id判断
4. 然后把他追加到表格中，创建tr，tr.创建td以及内容，
5. 将tr追加到表格中

1. 轮播图

vue

vue安装常用方式：

1. 独立版本

直接在官网上下载并使用script标签引入，引入后vue会被注册为一个全局变量。

下载的有开发版本和生产版本两个选项，开发版本有健全的警告和debug，生产版本比较简洁。

1. npm安装

用vue，js构建大型应用的时候推荐用npm安装。

npm是javaScript的包管理工具，并且是Node.js平台默认的包管理工具，通过npm可以安装、共享。分发代码，管理项目依赖关系。

Node.js是一个运行在服务端的javaScript，是一个基于ChromejavaScript运行时建立的一个平台。

二、vue的引入方式

1、引入vue.js

2、在body中建立数据展示View和js，

3、在js中建立数据Model，然后创建Vue实例并传入参数，

4、参数对象是在指定连接时连接的内容：{（1）el：挂载点，指定绑定的html标签，（2）data：指定绑定的数据，}用于连接数据Model和数据展示View。

三、双向绑定：

主要用在表单控件元素上，创建双向的数据绑定，根据表单上的值，自动刷新绑定元素的值。用v-model实现。

• data的三种方式：

1. 直接写值data:{}
2. 函数的方式，将值返回，可以返回多个值data:function({})
3. ES6写法：data（）{}返回值

• methods方法：

内部数据：方法名：function（）{return this.数据中元素名}，有参传参。

this指代当前vue对象

• 基本用法：

数据展示：{{ }}   展示new Vue()中data的数据

1. 文本 例如：{{name}}
2. 数组 例如：{{数组名[下标]}}
3. 对象 例如：{{对象名.属性名}}
4. 对象集合 例如：{{集合名[下标].属性名}}-{{}}
5. 运算 例如：{{数字+-*/数字}}
6. 字符串 字符串的长度，字符换的截取，字符串的拼接{{属性名.}}

• 常用指令

vue指令是带有"v-"前缀的特殊属性，指令用于在表达式的值改变时，将某些行为应用在DOM上。

1. v-text显示文字
2. v-html显示HTML中的内容
3. v-if|v-else|v-else-if 判断数据值，符合条件就显示
4. v-show显示，符合条件就显示
5. v-for循环遍历，

1. 一个参数 元素in数组/对象 {{数组/对象元素}
2. 两个参数    （元素，下标）in数组 |（属性值，属性名）in对象
3. 三个参数 (属性值，属性名，下标) in 对象

1. v-bind属性绑定（：）属性值是变量非字符串，v-bind进行标识，vue自行处理。
2. v-on事件绑定 （@）绑定方法

• vue获取元素

vue提供了一个操作DOM的属性：ref，绑定在DOM上，作用与id类似

ref，绑定在标签中，通过vue对象获取元素this.$refs