一些小问题

平常小问题

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)实现。
倒三角使用CSS实现边框效果。

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，从而达到控制内联元素的效果。

8.火狐span设置overflow:hidden，文字过长会显示不全

这里要注意使用white-space: nowrap; 禁止文字自动换行即可。

9.jQuery中toggle已经被弃用

因为toggle会产生歧义，所以在jQuery中toggle被废弃，可以使用if else语句进行替换。

10.is()函数的使用

is可以判断一个元素所处的状态。
这里我用来判断元素是否可见
$(selector).is(':visible');

11.导航栏渐变的实现方法

实现渐变的两种方法

• 使用css opacity
• 使用background rgba

使用css

    jQuery.navOpacity = function() {
        $(window).scroll(function(){
            var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
            var targetHeight = $('.header').find('img').height();
            var opacity = (1 - (targetHeight - scrollHeight) / targetHeight);
            var nav = $('.nav');
            nav.css('opacity', opacity);
        });
    }
$.navOpacity();

使用background rgba

jQuery.navOpacity = function() {
    $(window).scroll(function(){
    var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop;
        var targetHeight = $('.header').find('img').height();
        var opacity = (1 - (targetHeight - scrollHeight) / targetHeight);
        var nav = $('.nav');
        nav.css('background-color', 'rgba(0, 0, 0, '+opacity+')');
    });
}
$.navOpacity();