开发小技巧

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

img和给

设置背景图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%;
}

2、href 、src、 url使用

href:
          
src: 
        
url:  backgroud: url("images/")

3、input使用

数字键盘时:
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元素

你可能感兴趣的:(开发小技巧)