撩课-Web大前端每天5道面试题-Day2
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相关推荐
- 撩课-Web大前端每天5道面试题-Day7
1. 你能描述一下渐进增强和优雅降级之间的不同吗? 定义: 优雅降级(graceful degradation): 一开始就构建站点的完整功能, 然后针对浏览器测试和修复渐进增强(progressiv ...
- 撩课-Web大前端每天5道面试题-Day39
1.谈谈你对webpack的看法? WebPack 是一个模块打包工具, 你可以使用WebPack管理你的模块依赖, 并编绎输出模块们所需的静态文件. 它能够很好地管理. 打包Web开发中所用到的`H ...
- 撩课-Web大前端每天5道面试题-Day12
1. 请写出至少5个html5新增的标签,并说明其语义和应用场景? section:定义文档中的一个章节;nav:定义只包含导航链接的章节; header:定义页面或章节的头部; 它经常包含 logo ...
- 撩课-Web大前端每天5道面试题-Day38
1.JavaScript实现二分法查找? 二分法查找,也称折半查找,是一种在有序数组中查找特定元素的搜索算法. 查找过程可以分为以下步骤: (1)首先,从有序数组的中间的元素开始搜索,如果该元素正好是 ...
- 撩课-Web大前端每天5道面试题-Day24
1.下面的代码将输出什么? for (var i = 0; i < 5; i++) {setTimeout(function() { console.log(i); }, i * 1000 ); ...
- 撩课-Web大前端每天5道面试题-Day40
1.git fetch和git pull的区别? git pull:相当于是从远程获取最新版本并merge到本地git fetch:相当于是从远程获取最新版本到本地,不会自动merge 复制代码 2. ...
- 撩课-Web大前端每天5道面试题-Day35
1.React 中 refs 的作用是什么? Refs 是 React 提供给我们的安全访问 DOM 元素或者某个组件实例的句柄. 我们可以为元素添加 ref 属性然后在回调函数中接受该元素在 DOM ...
- 02.Web大前端时代之:HTML5+CSS3入门系列~H5结构元素
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素 可以理解为语义话标记,比如:以前这么写&l ...
- 04. Web大前端时代之:HTML5+CSS3入门系列~HTML5 表单
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 一.input新增类型: 1.tel:输入类型用于应该包 ...
- 前端—每天5道面试题(十二)
前端-每天5道面试题(十二) 每天进步1% 不多 就1% 一.CSS3 新特性有哪些 1.颜色:新增 RGBA,HSLA 模式 2. 文字阴影(text-shadow.) 3.边框: 圆角(borde ...
最新文章
- oracle sqlplus @@用法
- numpy基础——对数组切片操作
- 安装配置Mysql主从
- python中的json_python中json的使用
- 关于js css html加载顺序整理
- 还不明白可空类型原理? 我可要挖到底了
- php对联广告,html左右对联代码 cms网站对联广告html代码
- LeetCode MySQL 1571. 仓库经理
- 互联网早报 | 10月3日 星期六 | 微信正式上线青少年模式;阿里巴巴首次披露技术研发投入;本田宣布2021赛季后退出F1...
- pandas学习笔记五之pandas合并
- franz ubuntu_重新审视Unix理念,持续测试,Franz,Gitbase,Python,Linux等
- windows录屏_ApowerREC for Mac(屏幕录屏工具) V1.2.7.10激活版
- python: 基本的日期与时间转换
- 电商3.0:构建互利共赢的生态圈
- Community Server Resources
- 软件测试:什么是图灵测试
- 《梦想新大陆》美术研发手札
- xp显示连接上不了网络连接服务器地址,xp本地连接受限制|windows xp系统本地连接提示受限制或无连接怎么办...
- Laya.TextInput组件中禁用后改变输入框背景色和文字颜色
- 暑假集训后的一些感想