前端遇到的坑小结

本人前端开发中遇到的坑或小技巧，浪费不少时间。

以后遇到这类坑，都会在此做个小结笔记，防止下次再踩坑或忘记， 节约时间。

1. first-child误区

first-child是一个元素在它的父元素中的顺序。而非多个这种元素中第一个。

<div>
 <h4>1</h4>
 <p>2</p>
 <p>3</p>
</div>

$('div > p:first-child') 取不到任何元素，$('div > p:last-child')  却可以。

因为p在父节点中的顺序是2、3，没有同时既是p, 顺序又是1的元素。

$('div > h4:first-child'), $('div p:nth-child(2)') , 是可以取到元素的。

2. 背景图片定位， 搜索引擎不好搜，容易浪费时间

background-image: url('/images/a.png');

background-size: 150%;

background-repeat: no-repeat; 

background-position: center center; /* 50%, 50%, left, top, right, bottom */

另外background-size: contain 可以拉伸图片使宽（或高）撑满容器，但高（或宽）会留空。

        background-size: cover 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。

3.行内元素before, after添加图片，并上下定位。

li:after {
  content: url('/images/explorationIcon.png');
  position: relative;
  top: 4px;
}

4.文字上下居中，让line-height 和 元素高一致。行内元素文字也可以用position relative + top

div {
  height: 30px;
  line-height: 30px;
}

5. 同样高度的 input, button 在同一行，但高度不在一条直线上

display: inline-block;
vertical-align: top;

6. 最一步到位的时间选择器：支持各种格式（秒，毫秒，时区），依赖jqueryUI, 

http://trentrichardson.com/examples/timepicker/

require.js 同名解决：

require.config({  map: {    '*': {      'jquery-ui': 'jqueryUI'    }  }})

默认日期格式：
$.datepicker.setDefaults({
    dateFormat: 'yy-mm-dd'
});

本地化：

    $.datepicker.setDefaults({
      closeText: "关闭",
      prevText: "<上月",
      nextText: "下月>",
      currentText: "今天",
      monthNames: [ "一月","二月","三月","四月","五月","六月",
      "七月","八月","九月","十月","十一月","十二月" ],
      monthNamesShort: [ "一月","二月","三月","四月","五月","六月",
      "七月","八月","九月","十月","十一月","十二月" ],
      dayNames: [ "星期日","星期一","星期二","星期三","星期四","星期五","星期六" ],
      dayNamesShort: [ "周日","周一","周二","周三","周四","周五","周六" ],
      dayNamesMin: [ "日","一","二","三","四","五","六" ],
      weekHeader: "周",
      dateFormat: "yy-mm-dd",
      firstDay: 1,
      isRTL: false,
      showMonthAfterYear: true,
      yearSuffix: "年"
    });

    $.timepicker.setDefaults(
      $.timepicker.regional['zh-CN']
    );

    $container.find('input[name=startTime]').datetimepicker({
      timeFormat: 'HH:mm:ss',
      stepHour: 2,
      stepMinute: 10,
      stepSecond: 10
    });

7.  屏幕宽度不同导致的显示bug，可以通过设置最小宽度，或者设置media样式针对性处理。

@media all and (max-width: 980px) {
    #element{
        margin-left: 0px;
        left: 220px;
    }
}

8. 如何保持footer在页面没有屏幕高时出现在页面最底部，如果页面高于屏幕，则出现在更下面。关键是要让footer出现在容器的最底部，而容器的高度则是至少撑满一个屏幕。

#main-wrapper {
   
    padding: 0 0 100px 0;
    position: relative;
}

footer {
   
    bottom: 0;
    height: 100px;
    left: 0;
    position: absolute;
    width: 100%;
}

9. 不要在浏览器console中 尝试focus,如 $('input').focus(), 因为此时焦点永远在console中。

10. 文字空格不只显示一个 

{

white-space: pre; 

}

11. 文字多了显示... 

{ 

text-overflow: ellipsis;

overflow: hidden;

white-space: nowrap;

}

12. 元素是否在dom树上

exists = $.contains(document.documentElement, $element