• 欢迎访问杨思积的博客,专注于前端资讯分享,前端技术交流!

index总结和移动兼容问题

技术分析 Tomy 414次浏览 已收录 0个评论 扫描二维码

做项目经常要用到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();
})

杨思积的博客 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明index总结和移动兼容问题
喜欢 (0)
[嘿嘿,你懂的]
分享 (0)
Tomy
关于作者:
一个前端爱好者!
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址