前端面试（二）

一、jquery添加、删除class样式

1、使用attr()方法获取class和设置class

• 获取：

$('div').attr('class')；

• 设置：

$('div').attr('class'，'color')；

2、使用addClass()方法追加class样式

   $('div').addClass('width')；

3、使用removeClass()方法删除class样式

   $('div').removeClass('width')；//移除div元素中值为"width"的class
   $('div').removeClass('width color')；//移除div元素中值为"width"和"color"的class
   $('div').removeClass()；//移除div元素中所有的class

二、设置、获取自定义属性（数据集）

1、使用原生js

• 设置：setAttribute('data-id'，1)；
• 获取：getAttribute('data-id')；

2、使用jquery中的attr（）和prop（）

使用方法

• attr()

1、attr(属性名)
获取属性的值（取得第一个匹配元素的属性值。通过这个方法可以方便地从第一个匹配元素中获取一个属性的值。如果元素没有相应属性，则返回 undefined ）
2. attr(属性名, 属性值)
设置属性的值 （为所有匹配的元素设置一个属性值。）

注意：如果标签中已经存在了指定的属性（属性名），则给该属性赋值，若不存在，则给该属性添加一个该属性。

3. attr(属性名,函数值)
设置属性的函数值 （为所有匹配的元素设置一个计算的属性值。不提供值，而是提供一个函数，由这个函数计算的值作为属性值。）
4.attr(properties)
给指定元素设置多个属性值，即：{属性名一: “属性值一” , 属性名二: “属性值二” , … … }。(这是一种在所有匹配元素中批量设置很多属性的最佳方式。 注意，如果你要设置对象的class属性，你必须使用’className’ 作为属性名。或者你可以直接使用’class’或者’id’。)

• prop()

1.prop( propertyName [, value ] )
设置或返回指定属性propertyName的值。如果指定了value参数，则表示设置属性propertyName的值为value；如果没有指定value参数，则表示返回属性propertyName的值。
参数value还可以是函数，prop()将根据匹配的所有元素遍历执行该函数，函数中的this指针将指向对应的DOM元素。prop()还会为函数传入两个参数：第一个参数就是该元素在匹配元素中的索引，第二个参数就是该元素propertyName属性当前的值。函数的返回值就是为该元素的propertyName属性设置的值。
2.prop( object )
以对象形式同时设置任意多个属性的值。对象object的每个属性对应propertyName，属性的值对应value。

注意：prop()函数的所有”设置属性”操作针对的是当前jQuery对象所匹配的每一个元素；所有”读取属性”的操作只针对第一个匹配的元素。

attr和prop的区别

• 操作对象不同
  在jQuery中attr表示HTML文档节点属性，而prop则表示JS对象属性。
  prop()函数的设计目标是用于设置或获取指定DOM元素(指的是JS对象，Element类型)上的属性(property)。
  attr()函数的设计目标是用于设置或获取指定DOM元素所对应的文档节点上的属性(attribute)。
• 设置属性值类型不同
  由于attr()函数操作的是文档节点的属性，因此设置的属性值只能是字符串类型，如果不是字符串类型，也会调用其toString()方法，将其转为字符串类型。
  prop()函数操作的是JS对象的属性，因此设置的属性值可以为包括数组和对象在内的任意类型。

使用场景:

• 对于HTML元素本身就带有的固有属性，在处理时，使用prop()方法。
• 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr()方法。
• 具有 true 和 false 两个值的属性，如 checked, selected 或者 disabled 使用prop()方法。

三、替换字符串中某个字符

replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。会返回一个新的字符串。

stringObject.replace(regexp/substr,replacement)

它执行的是查找并替换的操作。它在 stringObject 中查找与 regexp 相匹配的子字符串，然后用 replacement 来替换这些子串。如果 regexp 具有全局标志 g，那么 replace() 方法将替换所有匹配的子串。否则，它只替换第一个匹配子串。

replacement 可以是字符串，也可以是函数。如果它是字符串，那么每个匹配都将由字符串替换。

把字符串中所有单词的首字母都转换为大写

name = 'aaa bbb ccc';
str=name.replace(/\b\w+\b/g, function(word){  
  return word.substring(0,1).toUpperCase()+word.substring(1);}
  //substring(0,1)返回第一个字符   substring(1)从第2个字符开始,截取到最后一个字符
  );

四、判断数组中是否包含某元素

方法一 indexOf(某元素)：找到返回下标，未找到则返回 -1。

if(arr.indexOf(某元素) > -1){ 
     //arr中包含该元素
}

方法二 find(): 它的参数是一个回调函数，所有数组元素依次遍历该回调函数，直到找出第一个返回值为true的元素，然后返回该元素，否则返回undefined。

注：1、该方法不会改变原数组 2、对于空数组，函数是不会执行的。

arr.find(function(value) {
   if(value === 要查找的值) {
       //则包含该元素
   }
})

方法三 findIndex(): 返回第一个符合条件的数组元素的位置(下标），如果所有元素都不符合条件，则返回-1。

注：1、该方法不会改变原数组 2、对于空数组，函数是不会执行的。

方法四 for(): 遍历数组，然后 使用if 判断

var arr = [1, 5, 10, 15];
//for
for(let i=0; i<arr.length; i++) {
    if(arr[i] === 查找值) {
        //则包含该元素
    }
}
// for...of
for(v of arr) {
    if(v === 查找值) {
        //则包含该元素
    }
}
//forEach
arr.forEach(v=>{
    if(v === 查找值) {
        //则包含该元素
    }
}) 

五、判断字符串中是否包含某个字符(串）

• String 对象的方法

方法一 indexOf(): 返回某个指定的字符串值在字符串中首次出现的位置。如果要检索的字符串值没有出现，则该方法返回 -1。

var str = "123";
console.log(str.indexOf("3") != -1 );  // true

方法二 search(): 检索字符串中指定的子字符串，或检索与正则表达式相匹配的子字符串。如果没有找到任何匹配的子串，则返回 -1。

var str = "123";
console.log(str.search("3") != -1 );  // true

方法三 match(): 在字符串内检索指定的值，或找到一个或多个正则表达式的匹配。

var str = "123";
var reg = RegExp(/3/);
console.log(str.match(reg) != -1);//true

• RegExp 对象方法

方法四 test(): 用于检索字符串中指定的值，返回 true 或 false。

var str = "123";
var reg = RegExp(/3/);
console.log(reg.test(str)!=-1); // true

方法五 exec(): 用于检索字符串中的正则表达式的匹配。返回一个数组，其中存放匹配的结果。如果未找到匹配，则返回值为 null。

var str = "123";
var reg = RegExp(/3/);
console.log(reg.exec(str) != -1); // true

六、移动端开发设置禁止双手缩放

可以通过meta标签设置禁止/允许用户缩放页面
user-scalable=no代表禁止；user-scalable=yes代表允许。

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

七、为什么要初始化css样式

因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。

八、rem

rem是CSS3新增的相对长度单位，是指相对于根元素html的font-size计算值的大小。（1rem=根元素的font-size ） 简单可理解为屏幕宽度的百分比。

    由于默认根元素的font-size都是16px的，所以1rem=16px；要改变rem的默认值，只需改变根元素的font-size。

九、内边距和外边距

• 内边距 （padding ）： 元素框的内边距在边框和内容区之间。
• 外边距（margin）：设置外边距会在元素外创建额外的“空白”，“空白”指不能放其他元素的区域。

外边距可以应用到行内元素，但是在垂直方向上没有任何影响

外边距重叠

在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

折叠结果遵循下列计算规则：

• 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
• 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
• 两个外边距一正一负时，折叠结果是两者的相加的和。

十、浏览器内核及代表浏览器

• Trident内核:IE系列（此内核只能应用于window平台，并且不是开源的）
• Gecko内核:Firefox（跨平台的、开源的）
• Webkit内核:Safari、Chrome（开源的）
• presto内核:opera（公认的渲染速度最快的引擎）
• Blink内核:是基于Webkit内核的子项目,使用的浏览器有:Chrome/opera等除IE、Firefox、Safari之外的几乎所有国产双内核浏览器（Trident/Blink）如360、猎豹、qq、百度等。

十一、如何设置元素不可见

• 方法一 display
  display: none ---隐藏
  display: block ---显示

• 方法二 opacity
  opacity:0 ---隐藏
  opacity: 1 ---显示

• 方法三 visibility
  visibility: hidden ---隐藏
  visibility: visible ---显示

• 方法四 使用定位
  先让待隐藏元素溢出，然后使用overflow：hidden隐藏

• 方法五 设置宽高为0

十二、diaplay：none与visibility：hidden的区别

visibility：hidden使元素不可见，但是该元素在网页上的所占的空间没有改变，相当于留出了一块空白区域；而diaplay：none使元素彻底消失不见。

十三、队列

队列是一种特殊的线性表。又称为先进先出线性表。

它只允许在表的前端进行删除操作，而在表的后端进行插入操作，和栈一样，队列是一种操作受限制的线性表。在队列中插入一个队列元素称为入队，从队列中删除一个队列元素称为出队。进行插入操作的端称为队尾，进行删除操作的端称为队头。队列中没有元素时，称为空队列。