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個文字的長度