index总结和移动兼容问题
做项目经常要用到index，关于index的几种用法，常常感到困惑。总结了一下，在这里列出来分享下。
1、index索引问题
1 2 3 4 5 6 7 | <div id="nav"> <a href="#">建站素材</a> <p>建站素材</p> <a href="#">jquery特效</a> <a href="#">懒人主机</a> <a href="#">前端路上</a></div> |
1 2 3 4 5 6 | $("#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）
1 2 3 4 5 6 7 8 9 10 11 | 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的代码:
1 2 3 4 5 6 7 8 9 10 11 12 | @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、弹层禁止底层内容滑动
1 2 3 4 5 6 7 8 9 10 11 12 | //弹层黑色背景$('#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
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
1
1