美文网首页
开发小技巧

开发小技巧

作者: LearningCoding | 来源:发表于2017-03-13 16:42 被阅读3次

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、表单提交前判断

<form method="post" action="" onsubmit="return true/false"></form>

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元素

相关文章

  • 使用Storyboards开发的10个小技巧

    使用Storyboards开发的10个小技巧 使用Storyboards开发的10个小技巧

  • iOS开发小技巧:根据文本,字体,计算UILabel高度及宽度

    iOS开发小技巧:根据文本,字体,计算UILabel高度及宽度 iOS开发小技巧:根据文本,字体,计算UILabe...

  • 2--NSTimer

    大纲: 创建计时器 暂停 恢复 销毁 开发小技巧 一、创建计时器 二、暂停 三、恢复 四、销毁 五、开发小技巧

  • 开发小技巧

    表格中刷新指定分区,UITableViewRowAnimationFade淡入淡出动画,[str integerV...

  • 开发小技巧

    *- 捡起初心, 慢慢走,希望自己好好努力,志于不用工作的人 * 1、禁止第三方键盘 在要填密码的地方, 为了安全...

  • 开发小技巧

    1、页面上的图片可以有两中形式: img和给 设置背景图background-img,一般需要占位的图片使用img...

  • 开发小技巧

    收起键盘的三种方法 1.重载UIViewController的touchesBegin方法,在里面执行[self....

  • iOS开发小技巧之--WeakSelf宏的进化

    iOS开发小技巧之--WeakSelf宏的进化

  • 小程序开发小技巧

    如何去掉button的边框? wxml wxss 参数传值的方法 data-id 我们可以给HTML元素添加dat...

  • IOS开发小技巧

    1、让Xcode显示编译时间,关闭Xcode,然后在终端输入命令 2、如何浏览苹果开源网站 从苹果源码首页下看到O...

网友评论

      本文标题:开发小技巧

      本文链接:https://www.haomeiwen.com/subject/yxbwwttx.html