100个前端小知识点

这里记录遇到的各种零散的问题

1.jQuery使用 $(元素).change() 可以主动触发onchange事件，但是仅仅是用于该事件仅适用于文本域（text field），以及 textarea 和 select 元素。同理有onclick()

2.div如何在另一个div里边居中：
style=”margin:auto;left:0; right:0; top:0; bottom:0; “

3.HTML5简单的文本框输入提示设置：
使用html5的placeholder属性可以设置文本框的输入提示：

type="text" placeholder="你的姓名..." name="lname">

通过下边的方式给输入提示设置单独的样式：

/* WebKit browsers */
::-webkit-input-placeholder {
    color: #777;
}
/* Mozilla Firefox 4 to 18 */
:-moz-placeholder {
    color: #777;
    opacity: 1;
}
/* Mozilla Firefox 19+ */
::-moz-placeholder {
    color: #777;
    opacity: 1;
}
/* Internet Explorer 10+ */
:-ms-input-placeholder {
    color: #777;
}

4.margin重叠现象：
在网页页面布局中，经常会出现以下两种现象：
1、相邻的两个普通元素，上下边距，不是简单的相加，而是取边距较大者的元素的边距值。
2、关系为父子的两个div元素，竖直方向上如果两个元素都设有margin值，则会取margin值较大的元素的边距值。

5.ajax返回 readyState=4 Status=200 但是却无法进入success，而是进入error。查了半天之后发现有两种可能性：1）数据库不一致，更换数据库就好了。2）返回的数据类型不是严格的json格式，js无法解析。
我遇到的是第一种，数据库我还不了解，但是确实更换了数据库就解决了这个问题….诡异….

6.设置td width=”160” 失效，实际的宽度大或者小了。这是因为默认的列宽是由内容来决定的，内容不同可能导致列宽不用。这时候给table加一个table-layout: fixed;表示列宽由表格宽度和列宽度设定，这样就解决了。

7.如下例代码中有3个div,其中div_right的高度会随着内容的变化而变化，如果想要div_left的高度自适应div_right，那么：1.改container加上overflow：hidden.表示container内部超出container的部分隐藏起来
2.改左边的div加上margin-bottom:-9999px;padding-bottom:9999px;。

<div id="container" style="overflow:hidden">
    <div id="div_left" style="margin-bottom:-9999px;padding-bottom:9999px;">div>
    <div id="div_right">div>
div>

这样div_left总会在container中显示最大的高度。

8.img标签插入容器中要进行缩放的时候，给img加上如下样式：

max-width:100%;height:auto;vertical-align: middle;

可以使得img在容器中占满且长宽比不变