H5知识点复习（面试必备）

淡淡的烟草味﹌ 2022-06-08 12:52 315阅读 0赞

H5知识点复习（面试必备）  
一，HTML部分  
01，WEB的三层结构？  
• 结构层：也叫内容层，由HTML提供。 HTML叫超文本标记语言。（HyperText Markup Language）  
• 样式层：修饰层，由CSS提供  
• 行为层：JavaScript提供  
  
  
02，HTML基本结构？  
文本声明 <!DOCTYPE html>  的作用？  
根标签 <html>  
头部 <head>  
主体 <body>  
  
  
03，HTML中的基本标签？  
标题标签：hn    headline   定义标题   经典用法：作为标题或网站logo  
段落标签：p     
超链接标签：a     站内（相对路径，绝对路径）， 站外（URL）， 锚点（设置锚点和链接到锚点）  
图像标签：img  alt(图片路径错误时显示alt对应属性值， SEO)  src  width  height  title    
div和span 没有任何语义， 是用来组织划分结构的，主是配合CSS完成页面布局和页面美化。  
  
  
04，alt和title的区别？  
1，title是仅仅是为了提示，有利于用户体验， alt有利于SOE。  
2，alt只能在图片标签中使用， titile可以在所有标签中使用  
  
  
05，什么是标签的语义化？  
所谓的标签语义化就是使用什么样的标签做什么样事，有利于SEO， 使网页结构更加合理，方便其它设备解析。  
  
  
06，列表标签？  
无序列表  
ul + li   list  u->unorder  li->list  type  
常见列表类， 导航， 轮播图， tab选项卡.....  
  
  
有序列表  
ol+li   o order  list    
  
  
自定义列表  
dl dt dd   definition  list  title  description   
作用：对一个值进行解释  
体现在三个方面：  
1，一个值一个解释  
2，一个值多个解释  
3，多个值一个解释  
  
  
07，表格标签？  
table  tr  th  td  thead  tbody   tfoot    
table的相关属性：  
width,  heigth,  bgcolor,   border,  cellspacing,  cellpadding, align   
tr的相关属性：  
height, bgcolor, allign, valign  
td和th的相关属性：  
rowspan   colspan  
  
  
08，表单？  
form（表单）   input （表单元素）   select和option(下拉菜单)   textarea(文本域)  
  
  
action: 提交哪个页面进行处理  
method: 提交方式，常见有get提交和post提交， 默认是get提交  
  
  
09，get和post的区别？  
1，get提交，提交内容都是出现在地址栏中，post不会  
2，get提交不太安全，post相对安全  
3，.........  
二，CSS部分  
01，CSS布局的优点？  
1，可以实现表现层和结构层的完全分离， 符合WEB标准  
2，便于维护，团队开发等  
02，CSS的继承性？  
所谓的继承性是指我们写的样式不仅可以应用到某具体的元素，还可以应用到它的后代。  
font-    text-   color  line-height  
03，CSS的层叠性？  
所谓的层叠性是指当多个样式冲突时，以哪个样式为准。  
引入CSS的三种方式：  
行内 > 内部 = 处部  
基本选择器：  
ID > CLASS > P  
选择器的特殊值：  
id:0100   class:0010    p:0001   行内：1000  
特殊值最终的结果是一样的，就采用就近原则  
!important  
04，CSS的基本语法？  
选择器\{\}      
  
  
05，CSS的选择器？  
基本选择器：  
标签选择器，ID选择器，CLASS选择  
其它选择器：  
通配符选择器， 后代选择器， 分组选择器， 伪类选择器， 交集选择器p.item  
  
  
06，引入CSS的三种方式？  
1，行内  要标签里面写入 style属性  
2，内部  在head标签中写入style标签   
3，外部  在当前页面的外面写一个css文件，然后通过link引入  
  
  
07，CSS的属性？  
字体 font-  6个   font-family  font-size  font-weight  font-style  font  color   
文本 text-   4个   text-align   text-indent  text-decoration    
盒模型 6大属性  
布局 4个  
列表 1 个  
定位 6个  
表格 3个  
  
  
08，什么是盒模型？  
HTML标签都是矩形的，类似于一个盒子，我们可以通过6大属性来控制这个盒子，那么这个矩形就是盒子模型。width, height, border,padding,marign,background  
  
  
09，元素的分类 ？  
在CSS中，我们把HTML标签分类了两类：块状与行内。 块状元素和行内元素。  
块级元素：  
div, hn, 列表类，p, 表格类， form  
行级元素：  
完全行级的  
span  a  em  strong  i  b   label  button    
行内块：  
img  input  
  
  
10，块级元素和行内元素的区别？  
1，块级元素独占一行，行内元素并排显示  
2，对于盒子模型的6属性，块级元素都起作用，行级元素width和height不起作用，maring和padding在我不垂直方向不起作用，其它都起作用  
3，行内块对盒模型6大属性都起作用，就是不能独占一行  
  
  
11，流动布局？  
所谓的流动布局就是按照标准文档流进行的布局，标准文档流中有两个特征：block  独占一行，从上到下进行布局， inline 从左到右并排显示，如果满一行，自动换行。  
12，浮动布局？  
什么是浮动布局？  
所谓的浮动布局是CSS又提出一个布局模型，流动布局是遵循标准文档，浮动布局是脱离标准文档，但是它并没有完全脱离。它的作用：让块级元素可以并排显示，在同一行上和平共处。  
  
  
注意点：  
1，浮动布局和流动布局是不同的布局模型。但是如果一个盒子浮动了，那么这个盒子的内部默认还是按照流动布局进行的。  
2，如果一个盒子浮动了，那么它就会被自动设置成块级元素。  
3，如果一个元素浮动了，那么它势必会对它后面的元素造成影响，可以使用clear去清除影响。也就是清除浮动。  
  
  
13，详解盒模型？  
盒模型分为：标准的盒模型和IE的盒模型  
  
  
width和height  
 对于块级元素，它表示内容区域  
 对于行级元素，无效，宽是由内容决定的，高是由font-size决定  
 默认值是auto， 可以给它设置百分比，是相对于父元素的widht和height来说的。  
  
  
border  粗细  样式  颜色   
 边框的大小（粗细） border-width  可以从四处方向进行描述  5px  thin  medium 等，   
 边框的样式  border-style  可以从四处方向进行描述   solid  dash  dotted  none  
 边框的颜色   border-color  可以从四处方向进行描述  三种表示法  
  
  
padding 内边距  补白  内容到border的距离  
padding后面写一个值：上，下，左，右的padding都一样  
        写两个值：第一个值表示上下，第二个值表示左右  
    写三个值：第一个值表示上，第二个值表示左右，第三个值表示下  
写四个值：按上，右，下，左顺序  
分为四个方向：  
 padding-top  
 padding-right  
 padding-bottom  
 padding-left   
  
  
注意点：  
1，有些标签有默认的padding  
2，对于行内元素，padding在垂直方向上不影响行高  
3，padding可以设置百分比，是相对于父元素的widht而言  
  
  
margin 外边距  元素与元素之间的距离  是在border之外的  
margin后面写一个值：上，下，左，右的padding都一样  
        写两个值：第一个值表示上下，第二个值表示左右  
    写三个值：第一个值表示上，第二个值表示左右，第三个值表示下  
写四个值：按上，右，下，左顺序  
分为四个方向：  
 margin-top  
 margin-right  
 margin-bottom  
 margin-left   
  
  
注意点：  
1，有些标签有默认的margin  
2，对于行内元素，margin在垂直方向上无效  
3，margin可以设置百分比，是相对于父元素的widht而言  
4，margin的重叠现象（margin塌陷问题）  
5，margin可以设置负值  
  
  
background  
 background-color   
 background-image  
 background-repeat  
 background-position  
 background-attachment  
  
  
  
  
14，浮动元素的表现？  
• 1，字围  
• 2，脱标  
• 3，贴靠  
• 4，收缩  
  
  
15，清除浮动？  
clear:both  
  
  
overflow:hidden   
  
  
  
  
  
  
16，display:none和visibility:hidden的区别  
display: 显示 作用是用来设置元素的显示状态  
block    
inline   
inline-block  
none   
  
  
一个元素如果设置了display:none，那么它就不显示了，并且在页面中不占任何空间。  
一个元素如果设置了visibility:hidden，那么它也不显示了，但是它会占据页面的空间。  
  
  
  
  
17，层布局模型？ position  
相对定位  
position:relative  需要配合 top, left, rigth, bottom来设置偏移距离 使用其中两个就可以， 相对于没有定位前的那个位置进行定位的，定位后原来的空间仍被保留  
  
  
什么地方用相对定位：  
1，作为绝对定位的参考点  
2，实现一些局部位置的调整时  
  
  
绝对定位  
position:absolute   需要配合 top, left, rigth, bottom来设置偏移距离 使用其中两个就可以， 还有可能要使用到z-index来设置顺序。  
它是按照参考点进行定位的，通常我们把参考点设置到它的父元素，子绝父相。  
使用绝对定位就完全脱离了标准文档流。可以使用z-index来改变显示的顺序。  
  
  
  
  
固定定位  
position:fixed   需要配合 top, left, rigth, bottom来设置偏移距离 使用其中两个就可以， 固定定位的参考点是相对于视窗。  
  
  
不固定：  
position:static   
  
  
18，列表布局  
list-style   
list-style-type  
list-style-positon  
list-style-imgage  
  
  
三，JS部分  
01，什么是JS？ JS包含哪些内容？  
JS是一门运行在浏览器端的脚本语言，是一门真正的编程语言。JS可以控制HTML，CSS，给页面提供行为。 JS游戏编程。   
内容：  
 ECMAScript  是JS的一个标准  
 BOM  浏览器对象模型， JS访问浏览器的接口  
 DOM  文档对象模型，JS访问页面内容的接口  
  
  
02，页面引入JS的三种方式？  
• 行内  将JS代码作为标签的属性  
• 内部  在页面中使用script标签，将JS代码写在scirpt标签中  
注意问题：1，script可以放在页面中任意位置，推荐放到最后。   
      2，script标签可以写多个，js代码就放在scirpt标签中。  
  
  
• 外部  在页面中通过script标签中的src属性引入外部的js文件  
注意问题：1，当你使用了外部引入js， 那么script中就不能写代码了，写了     
             也不会执行的。  
03，JS声明变量有哪些特征？  
var variable(变化)  
var a = 1;  // 定义了一个变量，名称叫a, 它的值是1;   
• 单独声明  
• 一次性声明多个  
• 遗漏声明  避免  
• 重复声明  避免  
04，JS的中都有哪些数据类型？  
数据类型：  
基本数据类型  
数值  number   
不区分整数和小数  
3.14  99  
最大值和最小值  
Number.MAX\_VALUE  Number.MIN\_VALUE  
整数有多种表示   
10进制   16进制   8进制  
小数也有多种表示  
3.14   .14   3.14e5  
算术运算符的特殊性  
溢出不报错  
除0不报错  
运算的不精确性  
不要比较两个小数  
  
  
字符串  
需要使用引号引起来  单引号  双引号， 引号在配对使用  
外双内单   外单内双  
  
  
布尔  
true  
false  
下面的数值会被隐式转化成false, 其它的被转化成true   
undefined   
null  
0/-0  
NaN  
“”  
  
  
undefined  
是针对普通变量来说的  
如果声明了一个变量，但是没有赋值，它的值就是undefined    
  
  
null  
是针对对象来说的  
var timer = null;  
  
  
引入数据类型  
 内置对象  JS语言（ECMAScript）中本身提供的对象  
 宿主对象  BOM或DOM中的对象  
 自定义对象  
  
  
  
  
05，JS的中都有哪些运算符？  
具有某种功能的符号叫运算符。JS中的运算符有6大类。  
• 算术运算符  
• 赋值运算符  
• 逻辑运算符  
• 关系运算符  
• 位运算符  
• 其它运算符  
  
  
算术运算符  
\+  -  \*  /  %   ++   --  
  
  
赋值运算符  
=    +=    -=    \*=   /=   %=  
a += 5  --->   a = a+5;  
  
  
逻辑运算符  
&&   ||    !   
  
  
关系运算符  
>    >=    <    <=    = =   = = =    ! =    ! = =  
  
  
位运算符  
略  
  
  
其它运算符  
typeof   +    ?:    delete   instance of  
  
  
06，如何理解i=j=k=10?  
赋值运算符的副作用：将一个数赋给一个变量，这个时候，整体表达式也有一个值，就是那个数。    
赋值运算符具有右结合性，首先它将10赋给了k, 那么此时k的值就是10， 又因为赋值运算符具有副作用，所以k=10整体也有一个值，这个值就是10. 接着又将这个10赋给了j .....  
  
  
07，= ，==， ===的区别？  
 =  是赋值运算符  具有右结合性  会将右边的值赋给左边的变量  
 ==  是关系运算符  是用来判断左右两个操作数的值是否相等  
 ===  也是关系运算符  是用来判断左右两个操作数的值和数据类型是否相等  
  
  
08，var a=6;  var b = true;  console.log( a && b );   console.log( b && a );  
第一个结果是 true  
第二个结果是6  
  
  
需要从三个层次去理解：  
1，如果操作数都是布尔值，只有二者都为true时，结果才为true, 否则为false  
2，&&可以对真值或假值进行运算，如果两个都是真值， 则返回一个真值。但是真值并不仅限于true, 假值也不仅限于false。下面的值会被转化成false:undefined, null, 0/-0, NaN, “”  。 最终的结果并不总是ture或false, 而是当前的值。如果第一个表达式的值为真，那么就以么二个表达式的值为结果，这个结果不是转换化的值，而是值本身。  
如果第一个表达式为假，那么就以第一个表达式的值作为结果，这个结果不是转换化的    
值，而是值本身。  
3，运算过程中，先计算左操作数的值，如果左操作数为假，则整个表达式的结果为假，也就是左操作数的值。同时停止对右操作数的运算。 如果左操作为真值，整体的结果就依赖于右操作数。  
  
  
  
  
  
  
09，var x = false;  var y = 3;   console.log( x && y-- );    console.log( y );  
第一个结果为false  
第二个结果为3  
  
  
10，强制类型转化的例子？隐匿类型转化的例子？  
强制转化：  
parseInt(), parseFloat(), Boolean(), String(), Number(), Object()  
隐式转化：  
字符串连接运算符+， 只在一个操作数为字符串，那么另一个操作数会被隐式转化成字符。  
！逻辑非， 会将操作数隐式转化成布尔值， 然后取反  
==  关系运算符  undefied == null  会将undefined和null都转化成false  
  
  
11，JS中都有哪些表达式？  
任何有值的内容都是表达式。  
• 原始表达式  
• 运算符构成的表达式  
• 对象和数组初始化表达式  
• 函数定义表达式  
• 调用表达式  
• 对象创建表达式  
  
  
原始表达式  
直接量，关键字，变量都是原始表达式，是表达式构成的最小单位。  
  
  
运算符构成的表达式  
算术表达式，关系表达式，逻辑表达式，赋值表达式  
  
  
对象和数组初始化表达式  
定义对象和定义数组  
  
  
函数定义表达式  
var f = function()\{\}  
  
  
调用表达式  
由于函数调用，都会返回一个值，叫调用表达式  
  
  
对象创建表达式  
var a = new Date();  创建对象，通常会返回一个对象，叫对象创建表达式  
  
  
12，打印九九乘法表？  
任何有值的内容都是表达式，语句就是命令或整句。它的特征以;结尾， 作用是用来执行某条指令。  
JS中常见语句：  
• 表达式语句   在表达式后面加上;就形成了表达式语句  
• 复合语句  \{\}  
• 声明语句   var   function  
• 条件语句   if   if..else..   if... else if...else   switch  
• 循环语句   for   while    do...while    
• 跳转语句   break   continue   return  标签跳转  
  
  
   
  
  
13，break和continue的区别？  
当用来循环语句时，break表示跳出整个循环，不再进行循环。continnue跳出本次循环，继续下次循环。  
break可以用来switch语句。   
  
  
return 跳转语句只能用来函数中。  
  
  
14，函数定义的两种方式？ 它们有什么区别？  
编程中的函数也是借鉴数学中的函数。 函数能够提示一些规律，有这个规律后可以解决实际问题，或者一个函数就是一个功能。我们要使用这个功能，那么我们就去调用这个函数。函数的作用：代码重用，用于组织代码，作为构造器，用于生成对象。  
  
  
• 函数声明  
• 函数表达式  
  
  
函数声明  
是使用function关键字  
格式如下：  
function 函数名（形参）\{ 函数体 \}    
函数声明后，只有调用了，能执行  
  
  
函数表达式  
var f = function()\{\}   
本质就是一个变量  
  
  
区别：  
使用声明的方式，会在预编译期间把函数声明提前。那么函数表达式不能提前，它的本质就是一个变量，我们就要遵循变量的使用规则---先声明后使用。  
  
  
  
  
15，JS是一门弱数据类型语言？都体现在哪些方面？  
1，变量在声明的时候，可以不指定类型  
2，函数中的参数，在声明的时候，也不需要指定类型  
3，.....  
  
  
16，JS中都有哪些作用域？  
作用域是针对变量来说的，是指变量的生效范围，就是一个变量在什么范围内可以访问，在什么范围内不能访问。  
全局作用域    --   全局变量   全局的是不能去访问局部的  
局部作用域    --   局部变量   局部的可以去访问全局的  
全局变量和局部变量的分界点 -- 函数  
JS中没有块级作用域\{\}  
  
  
17，目前我们学习的创建对象方式有如些？  
什么是对象？  对象是属性的无序集合， 把静态特征和动态的行为组合在一起，形成一个完整的对象。  
  
  
• 直接量（字面量）  
• new 关键字  
  
  
直接量（字面量）  
// 方式一  
var dog = \{ “name”:”haha”,  “age”:5,  “run”:function()\{\} \};  
// 方式二  
var dog = \{\};  
dog.name = “haha”;  
dog.age = 6;  
dog.run = function()\{\};  
  
  
new 关键字  
var dog = new Object();  
dog.name = “haha”;  
dog.age = 7;  
dog.run = function()\{\};  
  
  
18，什么是对象？什么是单体内置对象？  
什么是对象？  对象是属性的无序集合， 把静态特征和动态的行为组合在一起，形成一个完整的对象。  
所谓的单体内置对象就是不需要new，直接使用的，如Math  
  
  
  
  
19，随机一个\[20, 90)之间的整数？  
\[0 90)  \[20 90)  
   
20，打印出如下图形？  
\*  
\*\*  
\*\*\*  
\*\*\*\*  
\*\*\*\*\*  
  
  
  
  
   \*  
  \*\*\*  
 \*\*\*\*\*  
\*\*\*\*\*\*\*\*  
  
  
第一个图案：  
   
  
  
第二个图案：  
分析如下：  
   
   
  
  
  
  
21，什么是数组？ JS中的数组和C语言中的数组有什么区别？  
什么是数组？ 数组是值的有序集合，值就是我们前面所讲的各种数据类型的数据。  
  
  
区别（特点）：  
1，JS数组是无类型，数组元素可以是任意类型  
2，数据元素也可以是对象或数组  
3，JS数组是动态的，根据需要它会们增长或缩减  
4，JS数组的索引不一定是连续的，它们之间可以有空缺  
5，JS数组是对象的特殊形式，类似于矩形和正方形。  
  
  
22，创建数组有哪些方式？  
• 直接量（字面量）  
• new的方式  
  
  
直接量（字面量）  
var arr = \[“html”,  12,  true,  “css”\];    \[\]就表示一个数组  对象是使用\{\}  
  
  
new的方式  
var arr = new Array(“html”,  12,  true,  “css”);  
注意：  
var arr = new Array(5);  // 创建一个数组长度为5的数组  
var arr = new Array(“5”);  // 创建一个数组，里面有一个数组元素，为字符串5  
  
  
  
  
23，数组的基本操作？  
增删改查  
  
  
获取一个数组元素：  
数组名\[索引\]  
  
  
增加一个元素：  
var arr = \[1,2,3\];  
数组名\[索引\] = “haha”;     
  
  
修改一个元素：  
数组名\[索引\] = “haha”;   
  
  
添加：  
push 在数组的后面去追加新的元素  
var arr = \[1,2,3\];  
arr.push(4);   // 在arr后面追加一个4  \[1,2,3,4\]  
  
  
unshift  在数组的前面插入新的元素  
var arr = \[1,2,3\];  
arr.unshift(4);   // 在arr后面追加一个4  \[4,1,2,3\]  
  
  
删除：  
pop  删除数组中的最后一个元素  
var arr = \[1,2,3\];  
arr.pop();   //  \[1,2\]  
  
  
  
  
shift   删除数组中的第一个元素  
var arr = \[1,2,3\];  
arr.shift();   //  \[2,3\]  
  
  
  
  
24，数组中的常用方法？  
• join  
• reverse  
• concat  
• sort  
• slice  
• toString  
  
  
join  
将数组中的元素，使用某种符号连接起来，从而形成字符串  
   
  
  
reverse  
将数组中的元素，顺序倒置  
   
  
  
concat  
合并多个数组  
  
  
   
  
  
sort  
对数组中的元素进行排序  
   
  
  
slice  
切割，截取数组中的片段  
格式：slice(start, end);  start和end表示索引值（不包含end索引值对应的元素）  
   
  
  
toString  
是从object继承过来的，意思是将数组转化成字符串  
   
  
  
25，创建字符串都有哪些方式？  
• 直接量（字面量）  
• new方式  
  
  
直接量（字面量）  
直接使用引号引起来，就可以，单引号或双引号都可以  
   
  
  
  
  
new方式  
   
  
  
26，字符串的一些常见操作？  
• length  
• concat  
• 查找   
• 截取  
• 大小写转换  
• 替换  
• 转数组  
  
  
length  
可以通过length获取字符串的长度  
   
concat  
和+类似  
   
  
  
查找   
charAt   char是字符的意思  at在什么地方   charat可以获取字符串中的某个字符  
   
  
  
charCodeAt   获取字符串中的某个字符对应的ascii码  
   
   
indexOf   获取索引  
   
  
  
lastIndextOf   获取字符串自右向左中第一个字符出现的位置  
   
  
  
search  通常用在正则中  
  
  
截取  
substr(start, length)  
substring(start, stop)  
   
  
  
slice  
截取  
   
  
  
大小写转换  
toLowerCase,   toUpperCase  
  
  
替换  
replace  
str.replace(“a”, “A”);  
  
  
转数组  
split  
   
  
  
  
  
四，DOM部分  
01，什么是BOM？ 什么DOM？以及BOM与DOM的关系？  
bom（brower object model）: 浏览器对象模型  
bom的组成：  
window  
navigator  
frames  
location  
history  
document  
screen  
为什么需要bom?  
让JS有能力与浏览器进行”对话“。  
  
  
dom: 文档对象模型  
bom中包含了dom,   document非常重要，所以我们单独提出来形成一个概念：dom  
  
  
02，为什么现在还在使用DOM0？  
dom  是分版本， DOM0， DOM1， DOM2，DOM3  
  
  
• 1，DOM0的兼容性是最好的，所有浏览器都支持这个DOM0  
• 2，DOM0中提供了很多有方便的方法来获取文档中的元素  
03，DOM1中的两大核心？  
1，树模型  
 当页面加载完后，会形成一个树模型。  
   
树模型中常见的三大节点：  
• 元素节点  
• 属性节点  
• 文本节点  
  
  
节点与节点之间的关系：  
• parentNode  
• childNodes  
• firstChild  
• lastChild  
• nextSibling  
• previousSibling  
  
  
使用节点与节点之间的关系不好的地方：  
• 1，写起来费劲  
• 2，兼容性问题  
  
  
  
  
2，标准方法  
• getElementById  
• getElementsByTagName  
  
  
04，节点与节点之间都有什么关系？  
节点与节点之间的关系：  
• parentNode  
• childNodes  
• firstChild  
• lastChild  
• nextSibling  
• previousSibling  
  
  
注意：有一个关系没有问题，parentNode  
  
  
05，选取文档元素的方式都有哪些？  
• DOM0级中有若干个方法  
• 节点之间的关系  
• 标准方法  
06，操作元素节点？  
• 创建  createElement  
• 插入  appendChild   insertBefore  
• 删除  removeChild  
• 替换  replaceChild  
• 复制  cloneNode  
  
  
创建  createElement  
var h1 = document.createElement(‘h1);  
h1.innerHTML = “这是新创建的h1元素”  
  
  
注意：创建完之后，并没有插入到文档树中，需要使用插入元素的方法。  
  
  
插入  appendChild   insertBefore  
appendChild 在父元素的最后追加一个新元素  
insertBefore 在父元素的某个子元素之前插入一个新元素  
  
  
document.body.appendChild(h1);  
document.body.insertBefore(h1, p);  
  
  
删除  removeChild  
只有父节点才有删除元素的权限  
父节点.removeChild(h1);  
  
  
假如不想获取父节点，怎么删除：  
子节点.parentNode.removeChild(子节点);  
  
  
替换  replaceChild  
父节点.replaceChild(new, old);  
  
  
假如不想获取父节点，怎么替换：  
子节点.parentNode.replaceChild(new, old);  
  
  
复制  cloneNode  
要复制的元素.cloneNode(布尔值);  
false: 浅拷贝  只复制当前元素  
true: 深拷贝  复制当前元素以及当前元素的后代  
07，操作属性节点？  
获取：  
• box.getAttribute(“id”);  
• img.getAttribute(“src”);  
  
  
设置：  
• box.setAttribute(“id”, “item”);  
• img.getAttribute(“src”, “./imgs/01.jpg”);  
  
  
删除：  
• box.removeAttribute(“id”);  
  
  
08，操作文本节点？  
1，nodeValue  效率低  
2，innerHTML  可以一个标签中所有内容，包含其它标签， 还可以进行设置  
h2.innerHTML;   // 获取  
h2.innerHTML = “这是一个h2”； // 设置  
3，createTextNode  
  
  
09，DOM究竟是什么？  
• D:  Document, 就是HTML文档本身  
• O:  Object 对象  在具体的操作中，我们使用了大量的对象， document, element我们利用这些对象的属性或方法来完成相应的操作。  
• M:  Model  模型  树模型， 当页面载入完毕后，就会形成一个树模型。  
10，JS控制CSS都有哪些方式？  
• 1，脚本化行内样式  
• 2，脚本化CSS类  
• 3，查询计算出的样式  
• 4，获取元素的尺寸  
• 5，获取元素的位置  
  
  
1，脚本化行内样式  
ele.style.backgroundColor()  
  
  
2，脚本化CSS类  
ele.className =”box”;  
ele.className = “”;  
  
  
3，查询计算出的样式  
标准浏览器：window.getComputedStyle  
IE浏览器：ele.currentStyle\[“width”\]  
  
  
4，获取元素的尺寸  
offsetWidht = border+padding+widht  
offsetHeight = border+padding+height  
  
  
5，获取滚动条滚动的距离  
scrollTop  滚动条在垂直方向上滚动的距离  
scrollLeft  滚动条在水平方向上滚动的距离   
  
  
5，获取元素的位置  
offsetLeft  
offsetTop  
它们都是获取到相对于父定位元素的位置  
  
  
11，事件的三要素？  
事件模型的三要素：  
• 事件源    事件发生的地方  
• 事件   具体的一个事件  
• 监听器  事件发生后，做了什么事  
  
  
12，为什么需要事件绑定，以及都有哪些绑定方式？  
一个事件发生是需要载体的，就是在哪个元素上发生，那么就需要将事件绑定到这个元素上，让这个元素去监听这个事件是否发生，所以需要进行事件绑定。  
  
  
方式：  
• 1，DOM0级的事件绑定  
• 2，HTML方式的事件绑定  
• 3，DOM2级的事件绑定  
• 4，IE的事件绑定  
  
  
1，DOM0级的事件绑定  
JS:  ele.onclick = function()\{\}  
jQ:  $(“ele”).click(function()(\{\});  
  
  
2，HTML方式的事件绑定  
<h2 oncllick=”alert(‘点我干啥’)” > HTML方式事件绑定</h2>  
  
  
3，DOM2级的事件绑定  
绑定：  
事件源.addEventListenner(事件， 监听器);  
解绑：  
事件源.removeEventListenner(事件， 监听器);  
  
  
  
  
4，IE的事件绑定  
绑定：  
事件源.attachEvent(事件，监听器);  
解绑：  
事件源.detachEvent(事件，监听器);  
  
  
  
  
13，封装一个跨浏览器的事件绑定函数？  
  
  
   
14，什么是事件流？ 事件流的传播方式都有哪些？  
当一个元素发生了某个事件，那么它的父元素也可能引发这个事件，一层一层的，形成一个流，这就是事件流。  
  
  
事件流有两种传播方式：  
• 1，冒泡型  h2  -- >  div  --->  body  -->  html  -->  document  
• 2，捕获型  document  -- >  html  -- >  body  -- >  div  -- >  h2  
15，DOM中都有哪些事件类型？  
• 焦点事件  
• 鼠标事件  
• 键盘事件  
• UI事件  
• 表单事件  
  
  
焦点事件  
focus   
blur  
  
  
鼠标事件  
click  
mouseover  
muoseout  
muosedown  
mouseup  
mousemove  
  
  
键盘事件  
keyup  
keydown  
keypress  
  
  
UI事件  
load    
unload  
beforeunload  
select  
resize  
scroll  
  
  
表单事件  
submit  
reset  
change  
  
  
16，什么是事件对象？ 事件对象从什么地方来？  
js中提供事件对象的作用是为我们提供事件触发时的一些详细参数，我们可以利用这些参数来实现各种需求。  
  
  
事件对象从什么地方来？  
• 在标准浏览器，事件对象是作为监听器的一个参数，参数名没有要求。  
• 在IE浏览器中，事件对象是作为window的一个属性event. 这个名称是固定的  
  
  
17，事件中的this是什么玩意？  
在DOM0级方式绑定方式中：  
ele.onclick = funciton()\{ console.log(this) \}  //  ele 事件源  
  
  
在DOM2级方式绑定方式中：  
ele.addEventListener(‘click”, function()\{ console.log(this) \})  // ele  事件源  
  
  
HTML事件绑定方式中：  
<h2 onclick = “f1()”>HTML事件绑定</h2>  
<script>  
function f1()\{  console.log(this)  \}  // window  
</script>  
  
  
在DOM0级以及DOM2级中，this是指事件源， 在HTML级中，this并不总是指向事件源，有时候，它每指向window. 使用下面的方式，可以让this指向事件源：  
 <h2 onclick = “f1(this)”>HTML事件绑定</h2>  
  
  
  
  
18，如何阻止默认事件？  
有下面两种方式：  
• 在监听器中使用 return false;  这种是针对DOM0 和 HTML方式  
• 事件对象中有个preventDefault（DOM2）和returnValue（IE）属性， 针对DOM2和IE  
  
  
19，JS中实现动画是利用什么东西？ 它们有什么区别？ 使用时，需要注意什么问题？  
  
  
利用定时器：  
setTimeout()   一次性  
setInterval()    连续不继  
  
  
注意问题：  
使用前和使用后最好清除定时器。  
setTimeout()   ---> clearTimeout()  
setInterval()    ---> clearInterval()  
  
  
五，HTML5部分  
01，什么是HTML5，你是如何理解HTML5的?  
1，从狭义的角度，HTML5就是HTML4的一个升级版，增加了一些内部，删除了一些内容。  
2，广义的角度，html5 = html4升级版+css升级版+js的升级版， 或者说它是一个平台，在这个平台上，衍生出了各种技术。  
3，从行业角度，html5就是一个标准，一个规范。  
  
  
02，什么是标签的语义化？ 你是如何理解标签的语义化的？  
什么样的标签做什么事，赋予标签意义，用合适标签去描述WEB结构。  
  
  
03，HTML5中又增加了哪些新的标签？  
• header  
• footer  
• nav  
• section  
• artical  
• aside  
• fieldset  
• legend   
• time  
• figure  
• figurecation  
• progress  
• meter  
• mark  
• output  
  
  
  
  
04，对于不支持HTML5中新标签的浏览器，怎么做兼容？  
最简单是使用插件，把插件引到我们项目中。  html5shiv.js  
  
  
还可以把h5中用到标签创建出来，设置为块级元素。  
05，HTML5中新增的表单元素类型有哪些？  
• email  
• number  
• url  
• color  
• time  
• datetime  
• week  
• month  
• tel  
• range  
06，HTML5中新增的表单元素有哪些？  
• datalist 数据列表  
• output  输出  
07，HTML5中新增的表单属性有哪些？  
• autofocus  
• required  
• placehorder  
• pattern  
• multiple  
• autocomplete  
• autocomplete = “off”  
• form  
08，HTML5中音频和视频？  
视频：  
video   src   controls   poster  preload  loop   autoplay   
兼容性：video  
source src  
source src  
API:  
方法： play(),   pause()  
属性：paused,  duration,  volume,  muted,  currentTime  
  
  
音频：  
audio  src  controls   loop   autoplay  preload    
兼容性：audio    
source src  
source src  
  
  
  
  
09，HTML5中新增加的获取元素的方式有哪些？  
1, querySelector(“选择器”); // 选择满足条件第一个  
2, querySelectorAll(“选择器”); // 选择满足条件所有，返回一个数组  
3, getElementByClassName(“类名”);  // 选择满足条件所有，返回一个数组， 有兼容性问题  
  
  
  
  
10，HTML5中新增加的类操作是什么？  
classList中有几个方法：  
1，去掉一个类  ele.classList.remove(“class”);  
2，增加一个类  ele.classList.add(“class”);  
3，开关  ele.classList.toggle(“class”);  
4，判断是否有这个类  ele.classList.contains(“class”)  
  
  
  
  
  
  
11，如何访问HTML5中的自定义属性？  
自定义属性：  
以data-打头, 假如： data-her-Name  
访问：  
ele.dataset.herName  
12，使用自定义属性完成tab选项卡的思路？  
  
  
13，HTML5中新的事件拖拽事件有哪些？  
拖拽元素：  
• ondrap   拖拽时触发  
• ondrapstrrt  拖拽刚开始就触发     
• ondrapsend  拖拽结束就触发   
  
  
目标元素：  
• ondrapenter   拖拽元素进入目标元素时触发  
• ondrapleave   拖拽元素离开目标元素时触发  
• ondrapover   拖拽元素在目标元素上拖拽时触发  
• ondrop  拖拽元素在目标元素上扔下时触发  
  
  
  
  
  
  
  
  
  
  
六，CSS3部分  
  
  
01，CSS中都有哪些选择器？  
c2中有如下选择器(8个)：  
p  
id  
class  
div span  
div, span  
\*  
:hover  
div.box  
c3中有如下选择器：  
属性选择器：  
• input\[title\]  
• input\[title=”haha”\]  
• input\[title \*=”haha”\]  
• input\[title ^=”haha”\]  
• input\[title $=”haha”\]  
• input\[title ~=”haha”\]  
• input\[title |=”haha”\]  
  
  
关系选择器  
• div p  
• div>p  
• div+p  
• div~p  
  
  
伪类选择器  
• :nth-child(n)  
• :first-child  
• :last-child  
• :nth-last-child(n)  
• :only-child  
• :nth-child(2n)   :nth-child(even)  
• :nth-child(2n+1)  :nth-child(odd)  
• :nth-child(-n+5)  
  
  
• :nth-of-type(n)  
• :first-of-type  
• :last-of-type  
• :nth-of-type(2n)  :nth-of-type(even)  
• :nth-of-type(2n+1)  :nth-of-type(odd)  
• :nth-of-type(-n+5)  
• :only0-of-type  
• :nth-last-of-type(n)  
  
  
• :hover  
• :active   
• :focus  
• :checked  
• :disabled  
• :enabled  
• :lang()  
• :empty  
• :not()  
• :root  
  
  
伪元素选择器  
• :before  
• :after   
• :first-letter  
• :first-line  
• ::selection   
  
  
02，CSS3中增加了哪些新属性？  
  
  
03，CSS3中的三大核心是什么？  
• 过渡动画  
• 变形  
• 自定义动画   
  
  
过渡动画  
transition 属性名 动画时长  缓冲曲线  等待时间  
步骤：  
1，产生突变  
2，transition  
  
  
变形  
transform  
  
  
自定义动画   
animation  
  
  
04，CSS3中都有哪些二维变型？  
• 旋转变形  
• 斜切变形  
• 绽放变形  
• 位移变形  
  
  
旋转变形(z轴)  
transform:rotate(deg)  
  
  
斜切变形  
transform:skew(y轴和x轴靠拢的度数，x轴向y轴靠拢的度数)  
  
  
绽放变形  
transform:scale(x轴的缩放， y轴的缩放)  
  
  
位移变形  
transform:translate(x轴正方向位移， y轴的正方向位移)  
  
  
  
  
05，CSS3中都有哪些三维变型？  
旋转变形  
transform:rotateX(deg)  
transform:rotateY(deg)  
transform:rotateZ(deg)  
  
  
位移变形  
transform:translateX(deg)  
transform:translateY(deg)  
transform:translateZ(deg)  
  
  
  
  
06，在C3中如何自定义动画？  
1, 定义关键帧 @keyframes   
2, animation   
07，什么是响应式？  
一套代码在不同端都可以合理显示。 根据媒体查询实现。  
08，说一下rem单位？  
root   表示是根标签文字大小的多少倍。  
09，什么时间用到视口？  
做手机站时，需要使用视口。  
  
  
10，说一下你认识的百分比？  
width:50%;  相对于父元素的宽度的  
heigth:20%;  相对于父元素的高度的  
padding-left:10%; 相对于父元素的宽度的  
margin: 15%; 相对于父元素的宽度的  
border-widht:12%;  不能这么写，border不可以设置百分比  
  
  
11，什么是弹性布局？弹性布局中的四大概念是什么？  
弹性布局是C3中提出一个新的布局模型， 与之前的流动布局，浮动布局，层布局完全不一样。  
• 容器：只要给一个盒子加上display:flex, 那么这个盒子就是容器。  
• 项目：容器的直接子元素就是项目  
• 主轴：项目默认的排列顺序就是主轴  
• 交叉轴：与主轴垂直的那么轴就是交叉轴  
12，容器中都有哪些属性？ 项目中都有哪些属性？  
容器：  
• flex-direction   
• flex-wrap  
• justify-content  
• align-items  
• align-content  
• flex-flow   
  
  
项目：  
• order  
• flex-grow  
• flex-shrink  
• flex-basis  
• flex  
• align-self  
13，什么是媒体查询？  
使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。  
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。  
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。  
  
  
  
  
七，JQ部分  
  
  
01，JQ的入口函数和JS的入口函数有什么区别？  
1,  js: window.onload = function()\{\}   jq: $(function()\{\});    
2，js的需要等所有的资源加载后之后才执行， jq只需要DOM元素加载完就执行。  
3，js中的入口函数只能写一个，jq可以写多个。  
  
  
02，JQ如何控制HTML，如何控制CSS，如何控制标签性？  
控制HTML:  
.html(“<h1>123</h1>”)   没有参数，表示访问， 如果有一个参数，表示修改  
  
  
控制CSS：  
.css()  一个参数表示访问   两个参数表示修改  
  
  
控制属性：  
.attr()  一个参数表示访问，两个参数表示修改， 对于表单元素有个bug, 针对这个bug，jq提供了一个prop();  一个参数表示访问   两个参数表示修改  
  
  
03，说一下JQ中的选择器都有哪些？  
  
  
• 基本选择器：  
• 过滤选择器：  
• 筛选选择器：  
  
  
  
  
基本选择器：  
• p  
• id  
• class  
• div.box  
• ul li  
• div, span  
• \*  
• >  
• \+  
• ~  
  
  
过滤选择器：  
• 基本过滤选择器  
• 子元素过滤选择器  
• 内容过滤选择器  
• 可见性过滤选择器  
• 属性过滤选择器  
• 表单元素属性过滤选择器  
  
  
筛选选择器：  
• 过滤筛选选择器  
• 查找筛选选择器  
• 串联筛选器  
  
  
  
  
04，JQ中都有哪些动画，是怎么实现的？  
1, 显示，隐藏动画   .show()  .hide()    .toggle()  
2，滑动动画， .slideUp()    .slideDown()   .slideToggle()   
3，透明度动画  .fadeOut()    .fadeIn()   .fadeTo()  
4，自定义动画  .animate(\{\}, time)  也叫动画版的 .css(\{\})  
5，停止动画 .stop();  
05，JQ操作元素节点？  
查找元素：  选择器选择  
  
  
增加元素：   
在父元素内部增加   
.append()   .appendTo()   .prepend()   .prependTo()  
作为兄弟元素增加  
.brfore()    .insertBefore()   .after()    .insertAfter()  
包裹元素  
.wrap    .wrapAll    .wrapInner    
  
  
删除元素：  
  
  
.remove()   .empty()    .detach  
  
  
修改元素：  
.replaceWith()   .replaceAll()  
  
  
复制元素：  
.clone()  
06，JQ操作属性节点？  
• .attr()  
• .removeAttr()  
• .addClass()  
• .removeClass()  
• .hasClass()  
• .toggleClass()  
• .prop()  
• .val()  
  
  
  
  
07，JQ操作文本节点？  
• .html()  
• .text()  
08，JQ操作样式？  
• .css()  
• .widht()  
• .height()  
• .innerWidht()  
• .innerHeight()  
• outerWidht()  
• outerHeight()  
• outerWidht(true)  
• outerHeight(true)  
  
  
09，JQ都有哪些事件？  
1，标准的DOM事件  
和原生的是一样  
• UI事件  
• 鼠标事件  
• 键盘事件  
• 焦点事件  
• 表单事件  
  
  
2，自定义事件  
• 页面载入事件  
• 鼠标事件中又增加了两个：mouseenter   mouseleave  
• 焦点事件中又增加了两个：focusin  focusout  
  
  
3，事件绑定  
• bind  
• unbind  
• one  
• error  
4，事件委托  
• delegate()  
• undelegate()  
• on()  
• off()  
  
  
5，事件触发  
• 事件名（）  
• triggger(事件名)  
  
  
10，如何获取事件发生的位置？  
使用事件对象event中pageX,   pageY  
  
  
11，JQ中如何阻止事件冒泡？  
有三种方式：  
1，给事件加判断    
2，stopPropagation()  
3,  return false  
12，JQ如何阻止默认事件？  
有两种方式：  
1，return false  
2，event.preventDefault()  
  
  
13，JQ对象如何转化成JS对象？JS对象如何转化成JQ对象？  
  
  
jq  --  >  js    :      加下标\[0\]     .get(0)  
js  -- >  jq   :    $()包括起来就可以  
  
  
  
  
1