工作问题-CSDN博客

本文链接：https://blog.csdn.net/qq232218719/article/details/52040157

平常小问题

1.map的使用

简述

在jquery中，map接受两个参数，第一个参数是index，第二个是item.index是元素所在的索引。item则代表那个元素。
在javascript中，map接受两个参数，第一个参数是item，第二个参数是index，和在jq中相反。

例子

['a', 'b', 'c'].map(function(item, index){
    console.log(item); //输出abc
    console.log(index); //输出123
})

2.Jquery将很多选择器绑定同一个事件，以及取消事件

假如现在有两个标签 <div id='btn1'></div> <div id=''btn2></div> 如果要为他们添加一个点击事件则可以使用Jquery的.add()方法具体方法如下:

$('#btn1').add($('#btn2')).click(function(){
    //your code
})

取消事件:
Jquery.unbind()方法

3.多行文本的垂直居中

2016年7月26日，领导让我们实现多行文本的垂直居中，这里我参考了张鑫旭大神的博客，链接在此http://www.zhangxinxu.com/wordpress/2009/08/%E5%A4%A7%E5%B0%8F%E4%B8%8D%E5%9B%BA%E5%AE%9A%E7%9A%84%E5%9B%BE%E7%89%87%E3%80%81%E5%A4%9A%E8%A1%8C%E6%96%87%E5%AD%97%E7%9A%84%E6%B0%B4%E5%B9%B3%E5%9E%82%E7%9B%B4%E5%B1%85%E4%B8%AD/
我的代码实现如下:

//父元素:  
`#parent{display:table-cell; verticle-align: middle;}`  

//子元素
`#child{verticle-align: middle}`

4.数组与类数组的转换

在用Jquery对元素进行操作时，得到的选择器经常是一个类数组，这个时候虽然可以获取length属性，但是其他很多数组方法是不能用的。这里就需要对类数组进行转换，转换代码如下:

//假如你要转换的数组是str 
Array.prototype.slice.call(str, 0);

5.获取屏幕的宽度

document.documentElement.ClientWidth以及document.documentElement.ClientHeight可以获得屏幕的宽度和高度，但是在火狐浏览器中，如果将html的display设置成none的时候，document.documentElement.ClientWidth获取的宽度则变成0了。

6.利用纯CSS实现倒三角效果

这里我使用伪元素(形如:first-letter、:before、:after)实现。

7.块级元素和内联元素的区别

块级元素独占一行。宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;。
和相邻的内联元素在同一行宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小。

如何控制内联元素呢？
可以给内联元素设置margin-left|margin-right，padding-left|padding-right，从而达到控制内联元素的效果。