做有态度的前端团队

网易FEG前端团队

index总结和移动兼容问题

做项目经常要用到index,关于index的几种用法,常常感到困惑。总结了一下,在这里列出来分享下。

1、index索引问题

<div id="nav">
    <a href="#">建站素材</a>
    <p>建站素材</p>
    <a href="#">jquery特效</a>
    <a href="#">懒人主机</a>
    <a href="#">前端路上</a>
</div>
$("#nav a").click(function(){
    var index1 = $("#nav a").index(this); //当前的a在 #nav下所有a中的索引值(js获取当前的a)
    var index2 = $("#nav a").index($(this)); //当前的a在 #nav下所有a中的索引值(jQuery获取当前的a)
    var index3 = $(this).index();      //当前的a在兄弟姐妹a中的索引,包括p(jQuery获取当前的a)
    var index3 = $(this).index('a');  //当前的a在兄弟姐妹a中的索引,不包括p(jQuery获取当前的a)
});

2、移动兼容问题

ios系统和某些移动端background-attachment:fixed不兼容性,没有任何效果,但可以hack一下就可以了,代码如下:(ps:想在哪个标签加背景,可以在它class后:before)

body:before{
  content:'';
  position: fixed;
  z-index: -1;
  top:0;
  right:0;
  bottom:0;
  left:0;
  background:url(path/to/image) center 0 no-repeat;
  background-size: cover;
}

3、关于苹果机子兼容写法

通过 CSS3 的 Media Queries 特性,可以写出兼容iPhone4/iPhone5/iphone 6/iphone6 plus的代码:

@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){
    .class{}/* 兼容iphone4/4s */
}
@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){
    .class{}/* 兼容iphone5 */
}
@media (device-width:375px) and (-webkit-min-device-pixel-ratio:2){
    .class{}/* 兼容iphone 6 */
}
@media (device-width:414px) and (-webkit-min-device-pixel-ratio:3.0){
    .class{}/* 兼容iphone6 plus */
}

4、弹层禁止底层内容滑动

//弹层黑色背景
$('#videobox')[0].addEventListener("touchmove", function(e){
    e.preventDefault();
}, false);
$("#videobox").on("click",function(e){
    //关闭弹窗的相关操作
    $(this).hide();
})
//弹层的内容
$("#videobox video").on("click",function(e){
    e.stopPropagation();
})

手机阅读请扫描下方二维码: