开发小技巧

1、页面上的图片可以有两中形式：

img和给<div>设置背景图background-img，一般需要占位的图片使用img,不需要占位的图片使用设置background-image

// 设置背景图
#wrap{
            background: url("images/bgImg.jpg") no-repeat center center;
            background-size: 100% 100%;
        }
// 给image设置 宽度高度按图片比 
img{
       height:auto; width:auto\9; width:100%;
}
<img src="">

2、href 、src、 url使用

href：<a href="http://"></a>
          <link href="style/style.css" rel="stylesheet">
src: <img src="">
        <script style="text/javascript" src="js/jq"></script>
url:  backgroud: url("images/")

3、input使用

数字键盘时：<input type="tel" name="" value="" placeholed="" id="textfield">
input获得焦点: $("input[name=""]").focus();
清空input输入框：$("input").val(""); $("input").attr("value", "");
jq取值时 $("#textfield").val()
jq清空输入框 $("#textfield").attr("value", "")
设置占位符颜色

// firefox
::-moz-placeholder {
            color: #90dcd0;
            opacity: 1!important;
        }
// ie
        :-ms-input-placeholder {
            color: #90dcd0;
        }
// safari chrome
        ::-webkit-input-placeholder {
            color: #90dcd0;
        } 
// opera
 ::-o-input-placeholder {
            color: #90dcd0;
        } 
// 使用到了伪元素

监听input输入：$("input").keyup(function () {});
去掉点击后的框：outline：none
去除添加border之后的阴影：-webkit-appearance: none;
input元素放在绝对定位上面在安卓机上会发生无法上划，应该设置成相对定位
input checkbox选中问题
$(input[type="checkbox"]).is(":checked")

4、弹框

设置好样式后 display：none 隐藏
当出现时：使用jq $("#alert").show() 隐藏 $("#alert").hide()

5、表单提交前判断

6、h5页面在手机端长按选中元素，取消这个事件

给需要取消事件的div设置样式
-webkit-user-select: none;/*禁用手机浏览器的用户选择功能 */
-moz-user-select: none;

7、前端屏蔽滑动

overflow : hidden, height : 100%
恢复正常： overflow:auto

8、关于点击某个元素调用方法

如果是在dom元素里面onclick=”方法名(this)“,必须把this传过去
在js里面给dom元素添加click事件，this代表改dom元素

最后编辑于：2017.12.06 00:53:28