前端遇到的坑小结

本人前端开发中遇到的坑或小技巧，浪费不少时间。
以后遇到这类坑，都会在此做个小结笔记，防止下次再踩坑或忘记， 节约时间。

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-sp
18cae
ace: 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