前端开发小扎

js

阻止冒泡事件

火狐：我们可以在点击事件时传入参数event，然后直接

event.stopPropagation(); 

ie：this.cancleBubble()

f

\n 换行

css

三角
width:0px; height:0px; overflow:hidden; border-width:10px; border-color:transparent transparent yellow transparent; border-style:dashed dashed solid dashed;
背景图按比例放大缩小
background-size:70% 200%;
省略号
white-space:nowrap;text-overflow:ellipsis; -o-text-overflow:ellipsis; overflow: hidden;

叉
×
box-sizing:border-box; -moz-box-sizing:border-box;-webik-box-sizing:border-box; 因盒子边框而掉块
filter:alpha(opacity=50)
textarea的兼容
overflow:hidden; padding-top:0px; magin：0px；

opcaity兼容opacity:0;filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity:0.5;

vertical-align:bottom; 解决边框高出几像素问题

解决input在手机端问题 var w_w = $(window).width(); var w_h = $(window).height(); $("body,#main,.page4").css({width:w_w,height:w_h}); 不能用fixed定位

在苹果手机上进入页面不能滑动

解决方法：将滑动事件放在图片加载完后执行
判断手机是否为安卓
function isAndroid(){
var u = navigator.userAgent;
if(u.indexOf('Android') > -1 || u.indexOf('Linux') > -1){

}

}
判断手机是否为苹果
function isIphone(){
var u = navigator.userAgent;
if (u.indexOf('iPhone') > -1) {
}
}

get请求

Main.get('',{Contact:Contact,Sex:Sex,Name:Name},function(res){
if(res.err==0){

}else if(res.err==2){
   alert(res.msg); 
}

})
Main.get = function(url, data, success) {
$.ajax({
type : 'get',
url : Main.url+url,
dataType : 'jsonp',
data : data,
success : function(response) {
console.log(response);
if(response.err==99){
location.href=response.url
return ;
}
success(response);
}
})
}

适应剧中
height: 50%; position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%);

背景图在苹果手机不适应
用position：fixed

点击事件不灵敏

层的关系

手机端//

去除按钮蓝色边框

a,button,input,textarea,span,div,em,i,img{-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent; /* For some Androids /
outline: none;
-moz-outline-style: none;
-webkit-user-select: none;/用户不可选 中元素的内容*/
}
出现能够拖动的问题

解决方法
<script>
$(function(){
    $('body').on('touchmove', function (event) {
        event.preventDefault();
     });
})
</script>
判断ie版本
if(navigator.userAgent.indexOf("MSIE")>0){   
      if(navigator.userAgent.indexOf("MSIE 6.0")>0){   
        location.href="http://e.sinreweb.com" 
      }   
      if(navigator.userAgent.indexOf("MSIE 7.0")>0){  
        location.href="http://e.sinreweb.com" 
      }   
      if(navigator.userAgent.indexOf("MSIE 8.0")>0 && !window.innerWidth){//这里是重点，你懂的
        location.href="http://e.sinreweb.com" 
      }   
      if(navigator.userAgent.indexOf("MSIE 9.0")>0){  
         location.href="http://e.sinreweb.com" 
      }  
	  
    } 
解决input在手机端问题
var w_w = $(window).width();
	var w_h = $(window).height();

	$("body,#main,.page4").css({width:w_w,height:w_h});



微信返回按钮返回上一页
$('.page_index .anniu2').click(function(){
	location.href='#a'	
 })
window.onhashchange=function(){
	var a=location.href.split('#');
	if(a.length>1){
		if(a[1].indexOf('a')>-1){
			$('.page_index').show().addClass('cur')
			$('.page_index2').hide()
		}else if(a[1].indexOf('b')>-1){
			$('.page_index2').show().addClass('cur')
			$('.page_index4').hide()
		}	
        }
}


Main.browerVersions=function(){
    var u = window.navigator.userAgent;
    var num ;
    if(u.indexOf('Trident') > -1){
        //IE
        return "IE";
    }else if(u.indexOf('Presto') > -1){
        //opera
        return "Opera";
    }else if(u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1){
        //firefox
        return "Firefox";
    }else if(u.indexOf('AppleWebKit' && u.indexOf('Safari') > -1) > -1){
        //苹果、谷歌内核
        if(u.indexOf('Chrome') > -1){
            //chrome
            return "Chrome";
        }else if(u.indexOf('OPR')){
            //webkit Opera
            return "Opera_webkit"
        }else{
            //Safari
            return "Safari";
        }
    }else if(u.indexOf('Mobile') > -1){
        //移动端
        if(!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)){
            //ios
            if(u.indexOf('iPhone') > -1){
                //iphone
                return "iPhone"
            }else if(u.indexOf('iPod') > -1){
                //ipod
                return "iPod"
            }else if(u.indexOf('iPad') > -1){
                //ipad
                return "iPad"
            }
        }else if(u.indexOf('Android') > -1 || u.indexOf('Linux') > -1){
            //android
            num = u.substr(u.indexOf('Android') + 8, 3);
            return {"type":"Android", "version": num};
        }else if(u.indexOf('BB10') > -1 ){
            //黑莓bb10系统
            return "BB10";
        }else if(u.indexOf('IEMobile')){
            //windows phone
            return "Windows Phone"
        }
    }
};
body {
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; /*使用无衬线字体*/
}

a, img {
    -webkit-touch-callout: none; /*禁止长按链接与图片弹出菜单*/
}

html, body {
    -webkit-user-select: none; /*禁止选中文本*/
    user-select: none;
}

button,input,optgroup,select,textarea {
    -webkit-appearance:none; /*去掉webkit默认的表单样式*/
}

a,button,input,optgroup,select,textarea {
    -webkit-tap-highlight-color:rgba(0,0,0,0); /*去掉a、input和button点击时的蓝色外边框和灰色半透明背景*/
}

input::-webkit-input-placeholder {
    color:#ccc; /*修改webkit中input的planceholder样式*/
}

input:focus::-webkit-input-placeholder {
    color:#f00; /*修改webkit中focus状态下input的planceholder样式*/
}

body {
    -webkit-text-size-adjust: 100%!important; /*禁止IOS调整字体大小*/
}

input::-webkit-input-speech-button {
    display: none; /*隐藏Android的语音输入按钮*/
}


<a href="tel:020-10086">打电话给:020-10086</a>
<a href="sms:10086">发短信给: 10086</a>
<a href="mailto:me@22278.club">发送邮件: me@22278.club</a>

<input type=file accept="image/*">

上面的文件上传框中，accept 可以限制上传文件的类型，参数为 image/* 是所有图片类型，点击会弹出图库，也可以指定图片格式，参数设置成 image/png 则可以限制图片类型为png；参数如果为 video/* 则是选择视频的意思；accept 还可以设置多个文件格式，语法为 accept="image/gif, image/jpeg" ；

使用box-shadow改变(挡住)表单自动填充后的黄色

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill{
    box-shadow:inset 0 0 0 1000px #fff;
}
获取url？后面的参数
function getQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]); return null;
}

注意：任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1em=16px。那么12px=0.75em,10px=0.625em。为了简化font-size的换算，需要在css中的body选择器中声明Font-size=62.5%，这就使em值变为 16px*62.5%=10px, 这样12px=1.2em, 10px=1em, 也就是说只需要将你的原来的px数值除以10，然后换上em作为单位就行了。

所以我们在写CSS的时候，需要注意两点：

    1. body选择器中声明Font-size=62.5%；
    2. 将你的原来的px数值除以10，然后换上em作为单位；
    3. 重新计算那些被放大的字体的em数值。避免字体大小的重复声明。

也就是避免1.2 * 1.2= 1.44的现象。比如说你在#content中声明了字体大小为1.2em，那么在声明p的字体大小时就只能是1em，而不是1.2em, 因为此em非彼em，它因继承#content的字体高而变为了1em=12px。

//滚动条样式

::-webkit-scrollbar {
    width: 1px;
}
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
    border-radius: 10px;
}
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0,0,0,0);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0);
}
::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(255,0,0,0);
}