1.伪类与伪元素的区别?

1) 定义区别

伪类伪类用于选择DOM树之外的信息,或是不能用简单选择器进行表示的信息。
前者包含那些匹配指定状态的元素,比如:visited,:active;后者包含那些满足一定逻辑条件的DOM树中的元素,比如:first-child,:first-of-type,:target。伪元素伪元素为DOM树没有定义的虚拟元素。不同于其他选择器,它不以元素为最小选择单元,它选择的是元素指定内容。
比如::before表示选择元素内容的之前内容,也就是"";::selection表示选择元素被选中的内容。

  

2) 语法区别

  在CSS3中,伪类与伪元素在语法上也有所区别,伪元素修改为以::开头。但因为历史原因,浏览器对以:开头的伪元素也继续支持,但建议规范书写为::开头。

  

3) 伪类/伪元素一览表

<伪类如下>:active 选择正在被激活的元素  1
:hover  选择被鼠标悬浮着元素  1
:link   选择未被访问的元素   1
:visited    选择已被访问的元素   1
:first-child    选择满足是其父元素的第一个子元素的元素 2
:lang   选择带有指定 lang 属性的元素   2
:focus  选择拥有键盘输入焦点的元素   2
:enable 选择每个已启动的元素  3
:disable    选择每个已禁止的元素  3
:checked    选择每个被选中的元素  3
:target 选择当前的锚点元素   3<伪元素如下>::first-letter  选择指定元素的第一个单词    1
::first-line    选择指定元素的第一行  1
::after 在指定元素的内容后面插入内容  2
::before    在指定元素的内容前面插入内容  2
::selection 选择指定元素中被用户选中的内容 3

  

2. css样式优先级,各自的权重

优先级别:通用选择器(*) < 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 < 内联样式权重:第一等:代表内联样式,如: style=””,权值为1000。
第二等:代表ID选择器,如:#content,权值为100。
第三等:代表伪类和属性选择器,如.content,权值为10。
第四等:代表类型选择器和伪元素选择器,如div p,权值为1。

3.常见的DOM操作有哪些?

主要操作包括:
查找节点,新建节点,添加节点,删除节点,修改节点;
开发中,我们用到最多的是element类型,
用于表现HTML元素,提供了对元素标签名、子节点及特性的访问。

1)DOM常用操作举例:

// 查找节点
document.getElementById('id属性值'); // 返回拥有指定id的第一个对象的引用
document.getElementsByClassName('class属性值'); // 返回拥有指定class的对象集合

2)新建节点:

// 创建新的元素节点
document.createElement('元素名');
// 创建新的属性节点
document.createAttribute('属性名');
// 创建新的文本节点
document.createTextNode('文本内容');
// 创建新的注释节点
document.createComment('注释节点');

3)添加节点:

var element = document.getElementsByTagName('p')[0];
element.innerHTML='新增文本内容'; //插入文本内容

4)删除节点:

parentNode.removeChild( existingChild ); //删除已有的子节点,返回值为删除节点
element.removeAttribute('属性名'); // 删除具有指定属性名称的属性,无返回值
element.removeAttributeNode( attrNode ); // 删除指定属性,返回值为删除的属性

5)修改节点:

// 添加属性节点,修改属性值
element.setAttribute( attributeName, attributeValue );

6)属性节点:

// 增添id属性,并修改class属性值
var element = document.getElementsByTagName('p')[0];// 添加属性节点
var attr = document.createAttribute('id');
attr.value = 'idValue';
element.setAttributeNode(attr);// 修改属性值
var attr = document.createAttribute('class');
attr.value = 'classNewValue';
element.setAttributeNode(attr);

7)DOM事件:

允许 JavaScript 对 HTML 事件作出反应,主要包括:onclick 事件——当用户点击时
onload 事件——用户进入
onunload 事件——用户离开
onmouseover事件——鼠标移入
onmouseout事件——鼠标移出
onmousedown事件——鼠标按下
onmouseup 事件——鼠标抬起

4.判断数据类型有哪些方法?

1)typeof

typeof 是一个操作符,其右侧跟一个一元表达式,并返回这个表达式的数据类型。
返回的结果用该类型的字符串(全小写字母)形式表示,
包括以下 7 种:number、boolean、symbol、string、object、undefined、function 等。

2) instanceof

instanceof 是用来判断 A 是否为 B 的实例,
表达式为:A instanceof B,如果 A 是 B 的实例,则返回 true,否则返回 false。
在这里需要特别注意的是:instanceof 检测的是原型

3) constructor

当一个函数 F被定义时,JS引擎会为F添加 prototype 原型,
然后再在 prototype上添加一个 constructor 属性,并让其指向 F 的引用。

4)toString

toString() 是 Object 的原型方法,调用该方法,默认返回当前对象的 [[Class]]点击并拖拽以移动 。这是一个内部属性,其格式为 [object Xxx] ,其中 Xxx 就是对象的类型。对于 Object 对象,直接调用 toString()  就能返回 [object Object] 。而对于其他对象,则需要通过 call / apply 来调用才能返回正确的类型信息。

5.介绍一下 JS 的基本数据类型?

Undefined、Null、Boolean、Number、String

  

6.介绍一下 JS 有哪些内置对象?

Object 是 JavaScript 中所有对象的父对象;
数据封装类对象:Object、Array、Boolean、Number、String
其他对象:Function、Argument、Math、Date、RegExp、Error

7.push()-pop()-shift()-unshift()分别是什么功能?

// push 方法
// 将新元素添加到一个数组中,并返回数组的新长度值。
var a=[1,2,3,4];
a.push(5);// pop 方法
// 移除数组中的最后一个元素并返回该元素。
var a=[1,2,3,4];
a.pop();// shift 方法
// 移除数组中的第一个元素并返回该元素。
var a=[1,2];
a.shift();// unshift 方法
// 将指定的元素插入数组开始位置并返回该数组。
var a=[1,2];
a.unshift(0);

8.null 和 undefined 有何区别?

1) null 表示一个对象被定义了,值为“空值”;undefined 表示不存在这个值。typeof undefined //"undefined"
2) undefined :是一个表示"无"的原始值或者说表示"缺少值",就是此处应该有一个值,但是还没有定义。
当尝试读取时会返回 undefined; 例如变量被声明了,但没有赋值时,就等于undefined。 typeof null //"object"  null : 是一个对象(空对象, 没有任何属性和方法);
3) 注意: 在验证null时,一定要使用 === ,因为 == 无法分别 null 和 undefined

9.new操作符具体干了什么?

1)  创建一个空对象,并且 this 变量引用该对象。
2)  属性和方法被加入到 this 引用的对象中。
3)  新创建的对象由 this 所引用。

10.你对 JSON 了解吗?

1) JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。
2) 它是基于JavaScript的一个子集。数据格式简单,易于读写,占用带宽小。
如:{"age":"12", "name":"back"}

1.伪类与伪元素的区别?

1) 定义区别

伪类伪类用于选择DOM树之外的信息,或是不能用简单选择器进行表示的信息。
前者包含那些匹配指定状态的元素,比如:visited,:active;后者包含那些满足一定逻辑条件的DOM树中的元素,比如:first-child,:first-of-type,:target。伪元素伪元素为DOM树没有定义的虚拟元素。不同于其他选择器,它不以元素为最小选择单元,它选择的是元素指定内容。
比如::before表示选择元素内容的之前内容,也就是"";::selection表示选择元素被选中的内容。

2) 语法区别

  在CSS3中,伪类与伪元素在语法上也有所区别,伪元素修改为以::开头。但因为历史原因,浏览器对以:开头的伪元素也继续支持,但建议规范书写为::开头。

3) 伪类/伪元素一览表

<伪类如下>:active 选择正在被激活的元素  1
:hover  选择被鼠标悬浮着元素  1
:link   选择未被访问的元素   1
:visited    选择已被访问的元素   1
:first-child    选择满足是其父元素的第一个子元素的元素 2
:lang   选择带有指定 lang 属性的元素   2
:focus  选择拥有键盘输入焦点的元素   2
:enable 选择每个已启动的元素  3
:disable    选择每个已禁止的元素  3
:checked    选择每个被选中的元素  3
:target 选择当前的锚点元素   3<伪元素如下>::first-letter  选择指定元素的第一个单词    1
::first-line    选择指定元素的第一行  1
::after 在指定元素的内容后面插入内容  2
::before    在指定元素的内容前面插入内容  2
::selection 选择指定元素中被用户选中的内容 3

2. css样式优先级,各自的权重

优先级别:通用选择器(*) < 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 < 内联样式权重:第一等:代表内联样式,如: style=””,权值为1000。
第二等:代表ID选择器,如:#content,权值为100。
第三等:代表伪类和属性选择器,如.content,权值为10。
第四等:代表类型选择器和伪元素选择器,如div p,权值为1。

3.常见的DOM操作有哪些?

主要操作包括:
查找节点,新建节点,添加节点,删除节点,修改节点;
开发中,我们用到最多的是element类型,
用于表现HTML元素,提供了对元素标签名、子节点及特性的访问。

1)DOM常用操作举例:

// 查找节点
document.getElementById('id属性值'); // 返回拥有指定id的第一个对象的引用
document.getElementsByClassName('class属性值'); // 返回拥有指定class的对象集合

2)新建节点:

// 创建新的元素节点
document.createElement('元素名');
// 创建新的属性节点
document.createAttribute('属性名');
// 创建新的文本节点
document.createTextNode('文本内容');
// 创建新的注释节点
document.createComment('注释节点');

3)添加节点:

var element = document.getElementsByTagName('p')[0];
element.innerHTML='新增文本内容'; //插入文本内容

4)删除节点:

parentNode.removeChild( existingChild ); //删除已有的子节点,返回值为删除节点
element.removeAttribute('属性名'); // 删除具有指定属性名称的属性,无返回值
element.removeAttributeNode( attrNode ); // 删除指定属性,返回值为删除的属性

5)修改节点:

// 添加属性节点,修改属性值
element.setAttribute( attributeName, attributeValue );

6)属性节点:

// 增添id属性,并修改class属性值
var element = document.getElementsByTagName('p')[0];// 添加属性节点
var attr = document.createAttribute('id');
attr.value = 'idValue';
element.setAttributeNode(attr);// 修改属性值
var attr = document.createAttribute('class');
attr.value = 'classNewValue';
element.setAttributeNode(attr);

7)DOM事件:

允许 JavaScript 对 HTML 事件作出反应,主要包括:onclick 事件——当用户点击时
onload 事件——用户进入
onunload 事件——用户离开
onmouseover事件——鼠标移入
onmouseout事件——鼠标移出
onmousedown事件——鼠标按下
onmouseup 事件——鼠标抬起

4.判断数据类型有哪些方法?

1)typeof

typeof 是一个操作符,其右侧跟一个一元表达式,并返回这个表达式的数据类型。
返回的结果用该类型的字符串(全小写字母)形式表示,
包括以下 7 种:number、boolean、symbol、string、object、undefined、function 等。

2) instanceof

instanceof 是用来判断 A 是否为 B 的实例,
表达式为:A instanceof B,如果 A 是 B 的实例,则返回 true,否则返回 false。
在这里需要特别注意的是:instanceof 检测的是原型

3) constructor

当一个函数 F被定义时,JS引擎会为F添加 prototype 原型,
然后再在 prototype上添加一个 constructor 属性,并让其指向 F 的引用。

4)toString

toString() 是 Object 的原型方法,调用该方法,默认返回当前对象的 [[Class]]点击并拖拽以移动 。这是一个内部属性,其格式为 [object Xxx] ,其中 Xxx 就是对象的类型。对于 Object 对象,直接调用 toString()  就能返回 [object Object] 。而对于其他对象,则需要通过 call / apply 来调用才能返回正确的类型信息。

5.介绍一下 JS 的基本数据类型?

Undefined、Null、Boolean、Number、String

6.介绍一下 JS 有哪些内置对象?

Object 是 JavaScript 中所有对象的父对象;
数据封装类对象:Object、Array、Boolean、Number、String
其他对象:Function、Argument、Math、Date、RegExp、Error

7.push()-pop()-shift()-unshift()分别是什么功能?

// push 方法
// 将新元素添加到一个数组中,并返回数组的新长度值。
var a=[1,2,3,4];
a.push(5);// pop 方法
// 移除数组中的最后一个元素并返回该元素。
var a=[1,2,3,4];
a.pop();// shift 方法
// 移除数组中的第一个元素并返回该元素。
var a=[1,2];
a.shift();// unshift 方法
// 将指定的元素插入数组开始位置并返回该数组。
var a=[1,2];
a.unshift(0);

8.null 和 undefined 有何区别?

1) null 表示一个对象被定义了,值为“空值”;undefined 表示不存在这个值。typeof undefined //"undefined"
2) undefined :是一个表示"无"的原始值或者说表示"缺少值",就是此处应该有一个值,但是还没有定义。
当尝试读取时会返回 undefined; 例如变量被声明了,但没有赋值时,就等于undefined。 typeof null //"object"  null : 是一个对象(空对象, 没有任何属性和方法);
3) 注意: 在验证null时,一定要使用 === ,因为 == 无法分别 null 和 undefined

9.new操作符具体干了什么?

1)  创建一个空对象,并且 this 变量引用该对象。
2)  属性和方法被加入到 this 引用的对象中。
3)  新创建的对象由 this 所引用。

10.你对 JSON 了解吗?

1) JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。
2) 它是基于JavaScript的一个子集。数据格式简单,易于读写,占用带宽小。
如:{"age":"12", "name":"back"}

转载于:https://www.cnblogs.com/gxq666/p/10030165.html

撩课-Web大前端每天5道面试题-Day2相关推荐

  1. 撩课-Web大前端每天5道面试题-Day7

    1. 你能描述一下渐进增强和优雅降级之间的不同吗? 定义: 优雅降级(graceful degradation): 一开始就构建站点的完整功能, 然后针对浏览器测试和修复渐进增强(progressiv ...

  2. 撩课-Web大前端每天5道面试题-Day39

    1.谈谈你对webpack的看法? WebPack 是一个模块打包工具, 你可以使用WebPack管理你的模块依赖, 并编绎输出模块们所需的静态文件. 它能够很好地管理. 打包Web开发中所用到的`H ...

  3. 撩课-Web大前端每天5道面试题-Day12

    1. 请写出至少5个html5新增的标签,并说明其语义和应用场景? section:定义文档中的一个章节;nav:定义只包含导航链接的章节; header:定义页面或章节的头部; 它经常包含 logo ...

  4. 撩课-Web大前端每天5道面试题-Day38

    1.JavaScript实现二分法查找? 二分法查找,也称折半查找,是一种在有序数组中查找特定元素的搜索算法. 查找过程可以分为以下步骤: (1)首先,从有序数组的中间的元素开始搜索,如果该元素正好是 ...

  5. 撩课-Web大前端每天5道面试题-Day24

    1.下面的代码将输出什么? for (var i = 0; i < 5; i++) {setTimeout(function() { console.log(i); }, i * 1000 ); ...

  6. 撩课-Web大前端每天5道面试题-Day40

    1.git fetch和git pull的区别? git pull:相当于是从远程获取最新版本并merge到本地git fetch:相当于是从远程获取最新版本到本地,不会自动merge 复制代码 2. ...

  7. 撩课-Web大前端每天5道面试题-Day35

    1.React 中 refs 的作用是什么? Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄. 我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM ...

  8. 02.Web大前端时代之:HTML5+CSS3入门系列~H5结构元素

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素 可以理解为语义话标记,比如:以前这么写&l ...

  9. 04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单

    Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 一.input新增类型: 1.tel:输入类型用于应该包 ...

  10. 前端—每天5道面试题(十二)

    前端-每天5道面试题(十二) 每天进步1% 不多 就1% 一.CSS3 新特性有哪些 1.颜色:新增 RGBA,HSLA 模式 2. 文字阴影(text-shadow.) 3.边框: 圆角(borde ...

最新文章

  1. oracle sqlplus @@用法
  2. numpy基础——对数组切片操作
  3. 安装配置Mysql主从
  4. python中的json_python中json的使用
  5. 关于js css html加载顺序整理
  6. 还不明白可空类型原理? 我可要挖到底了
  7. php对联广告,html左右对联代码 cms网站对联广告html代码
  8. LeetCode MySQL 1571. 仓库经理
  9. 互联网早报 | 10月3日 星期六 | 微信正式上线青少年模式;阿里巴巴首次披露技术研发投入;本田宣布2021赛季后退出F1...
  10. pandas学习笔记五之pandas合并
  11. franz ubuntu_重新审视Unix理念,持续测试,Franz,Gitbase,Python,Linux等
  12. windows录屏_ApowerREC for Mac(屏幕录屏工具) V1.2.7.10激活版
  13. python: 基本的日期与时间转换
  14. 电商3.0:构建互利共赢的生态圈
  15. Community Server Resources
  16. 软件测试:什么是图灵测试
  17. 《梦想新大陆》美术研发手札
  18. xp显示连接上不了网络连接服务器地址,xp本地连接受限制|windows xp系统本地连接提示受限制或无连接怎么办...
  19. Laya.TextInput组件中禁用后改变输入框背景色和文字颜色
  20. 暑假集训后的一些感想

热门文章

  1. Charles for Mac(抓包工具)
  2. 好用的HTML文本编辑器BBEdit for Mac
  3. Mac电脑直接拔掉U盘和移动硬盘会有什么影响
  4. python实现oss文件下载
  5. 修改docker网桥模式下的网络地址
  6. 数组reduce()方法
  7. JEPLUS表格高级展示——JEPLUS软件快速开发平台
  8. PostgreSQL Server进程检查启动脚本
  9. drupal7 payment module:把支付form元素注入到form中
  10. eclipse中设置JVM内存