前端遇到的坑小结

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

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

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[0]);

13. 取消特定事件的绑定

$('#Inputfield').bind('keyup.keep', function(e){/*...*/});
$('#Inputfield').bind('keyup.notkeep', function(e){/*...*/});

$('#Inputfield').unbind('keyup.notkeep');
// or event  $('#Inputfield').unbind('.notkeep');

14. 没有js的页面动态添加

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js';
document.head.appendChild(script);

15. input radio 单选按钮 取值赋值

var v = $container.find("[name=sort]").val();

$container.find("[name=sort]").val([v]);

16.  css3 3d

http://ds-overdesign.com/transform/matrix3d.html

margin 会影响matrix3d. 需要用到绝对相对定位

17. drag api

dragover, dragleave 必须设置 preventDefault, 否则不能触发drop事件。

dragOver, dragLeave 不能获取 dataTransfer中的数据。 

18. vh, vw可以指定容器相对于屏幕的宽高, 更多可参考 ，

7个你可能不认识的CSS单位

.slide {
    height: 100vh;
}

19. 修改滚动条样式

body::-webkit-scrollbar { width: 1em;}

body::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); }

body::-webkit-scrollbar-thumb { background-color: darkgrey; outline: 1px solid slategrey;}

https://www.w3schools.com/howto/howto_css_custom_scrollbar.asp

20. 修改复制黏贴内容

document.body.addEventListener('copy', function (e) {    

    if (window.getSelection().toString() && window.getSelection().toString().length > 42) {        

                setClipboardText(e);        

    alert('商业转载请联系作者获得授权,非商业转载请注明出处,谢谢合作。');    }

}); 

function setClipboardText(event) {    

    var clipboardData = event.clipboardData || window.clipboardData;   

     if (clipboardData) {        

        event.preventDefault();       

         var htmlData = ''+'著作权归作者所有。<br>'                         +'商业转载请联系作者获得授权,非商业转载请注明出处。<br>'                         +'作者:DIYgod<br>'                         + '链接:' + window.location.href + '<br>'                         + '来源:Anotherhome<br><br>'+ window.getSelection().toString();       

         var textData = ''+ '著作权归作者所有。\n'                         + '商业转载请联系作者获得授权,非商业转载请注明出处。\n'                         + '作者:DIYgod\n'                                     + '链接:' + window.location.href + '\n'                                     + '来源:Anotherhome\n\n'+ window.getSelection().toString();         

        clipboardData.setData('text/html', htmlData);        

        clipboardData.setData('text/plain',textData);    

}}

https://liyuans.com/archives/copyright-notice.html