JS、JQuery、CSS 踩过的坑.md

-------- 会长期更新碰到的一些问题

1. #####在与后台加载数据有关生成的相应的Dom元素的属性和事件须要经过事件委托来实现相应的方法

$('aaa').on('click | change | blur', 'bbb', function(){}) 
    //aaa 为dom根元素（最好为bbb的直接静态父DOM节点）   bbb 为想要触发事件的元素
 ```

2.  #####在JQUERY 中设置有关boolean类型的表单元素属性，例如checked | disable |  selected等，须要用prop方法，使用attr会报异常

 > To retrieve and change DOM properties such as the checked, selected, or disabled state of form elements, use the .prop() method.
 > 具备 true 和 false 两个属性的属性，如 checked, selected 或者 disabled 使用prop()，其余的使用 attr()

3. ##### JS中实现固定位长的函数toFixed()
 ```JavaScript
     //toFixed()
     var a =  84.6534354535;
     a = a.toFixed(3);
     a = 84.653;
 ```

4. ##### JS中删除对象中的内容应该使用 ***delete*** 操做符
 ```JavaScript
 var tdDetail = getRows("#tdForDetail");
     if (tdDetail.length > 0) {
      for (var i = 0; i < tdDetail.length; i++) {
         delete tdDetail[i].PRODUCT_NAME;
         delete tdDetail[i].BRAND_NAME;
         delete tdDetail[i].BALANCE;
       }
 ```

5. ##### JS中根据name读取cookie的内容
```javascript
function window.getCookie(name){
             var pattern = RegExp(name + "=.[^;]*");
              matched = document.cookie.match(pattern);
              if(matched){
                   var cookie = matched[0].split('=');
                   return cookie[1];
                }
                return false;
       }

6. inline-block块之间的空隙处理

   .father-node{ 
   /**去除inline-block的间隙**/
   font-size:0px; 
   /**兼容safari的处理**/
   word-spacing: 0px;
   letter-spacing:-2px;
   }

7. 固定表头表格的表名和表内容的列对齐

• 使用了colgroup标签，来对上下两个表格的列宽进行了定义，让他们保持一致。

  <colgroup>       
    <col width= 80px />/**有几列就使用几个该元素**/
    <col /> 
  </colgroup>

>上边的div .table-head添加了样式padding-right:17px，这个宽度是为了保证跟下边的div .table-body的滚动条保持一致，(移动端能够不设)同时下边的表格.table-body添加了样式overflow-y:scroll; 在不定高度的容器里使用flex布局能够完美实现填充满后数据表体滚动。    

8. Text文字首行缩进
- text-indent缩进语法与结构
   ```
       .divcss5{
              text-indent:25px；
      }
   ```

> 这里divcss5对象内段落首行开头文字缩进了25像素。css text-indent文本缩进样式属性单词，text-indent的值跟数字+单位组成缩进样式。使用em效果更好，2em相对2个文字的长度