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();
})
手机阅读请扫描下方二维码：
上一篇：新手学习新闻发布系统步骤版
下一篇：分享几个在开发中遇到的一些小问题
12345678
1
1
1
1
1
1
1
1
1
1
1
1
1
1
12345678
12345678
12345678
12345678
12345678
12345678
12345678
1
12345678
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1
1