一、左中右布局，左邊定寬，中、右百分比的布局：

（1）HTML代碼：

<div class="three-left">
    
</div>
<div class="three-right-container">
    <div class="three-mid">
    
    </div>
    <div class="three-right">
    
    </div>
</div>

（2）CSS代碼：

.three-left {
  float: left;
  width: 300px
 
;  
}

.three-right-container {
  margin-left: 300px;  
}

.three-mid {
  float: left;
  width: 50%;  
}

.three-right {
  float: left;
  width: 50%;  
}

二、左中右布局，中定寬，左右百分比的布局：

（1）HTML代碼：

<div class="three-left">
    <div class="innerLeft"></div>
</div>
<div class="three-mid">
 

    
</div>
<div class="three-right">
    <div class="innerRight"></div>
</div>

（2）CSS代碼：

.three-left,
.three-right {
    float: left;
    width: 50%;
    margin:0 0 0 -151px;
}
.innerLeft,
.innerRight {
    margin: 0 0 0 151px;
    background-color: #efefef;
}
.three-mid {
    float
 
: left;
    width: 300px;
    background-color: #ccc;
}

三、jquery獲取本地json文件的方法：

$.ajax({
    url: "test.json",
    dataType: "json",
    success: function(result){
        //result即為該json文件的數據
    }
});

四、獲取DOM元素的data屬性：

（1）HTML代碼：

<div data-value="1"></div>

（2）jquety代碼：

var _data = $("div").attr("data-value");
console.log(_data);    //_data的值即為HTML代碼中div的data-value的值

五、動態添加元素的點擊事件：

（1）HTML代碼：

<div class="content">
   <ul></ul>
</div>

（2）jquery代碼：

$(".content").append("<li>需要添加的內容</li>");

// 動態添加的li列表的點擊事件
$(".content ul").delegate("li", "click", function(){
    // 點擊事件的動作
});

六、獲取json文件的數據，並加載到下拉列表以及文本框，再根據下拉列表的值動態顯示文本框的值的方法：

（1）HTML代碼：

<div class="content">
    <div class="select-content"></div>
    <div class="list-content">
        <ul></ul>
    </div>
    <div class="show-content">
        <ul></ul>
    </div>
</div>

（2）jquery代碼：

$.ajax(function(){
    url: "test.json",
    dataType: "json",
    success: function(result){
        var list = result.list;
         $(".select-content").html(list[0].name);    //下拉框的默認顯示list列表的第一條數據
         for(var i = 0; i < list[0].length; i ++){
             $(".show-content").append("<li>‘ + list[0].typeList[i].name + ‘</li>"); 
        }    //文本展示框默認顯示list列表第一條typeList數據
         for(var i = 0; i < list.length; i ++){
             $(".list-content ul").append("<li data-value="‘ + i + ‘">‘ + list[0.name + ‘</li>"); 
         }    //下拉框列表的展示數據

    //下拉框的點擊事件
        $(".list-content ul").delegate("li", "click", function(){
            $(".show-content").empty();
            var _liVal = $(this).attr("dta-value");
            $(".select-content").html(list[_liVal].name);
            for(var i = 0; i < list[_liVal].typeList.length; i ++){
             $(".list-content ul").append("<li>‘ +list[_liVal].typeList.name + ‘</li>"); 
         }    //根據下拉框選中的值再顯示文本框的值
        });
    }
});

            

（3）test.json數據文件：

{
"list":[
  {
     "name": "aaa",
     "typeList": [
         {"name": "aaa1"}, 
         {"name": "aaa2"}, 
         {"name": "aaa3"} 
      ]   
   },
   {
     "name": "bbb",
     "typeList": [
         {"name": "bbb1"}, 
         {"name": "bbb2"}, 
         {"name": "bbb3"} 
      ]   
   }
 ]
}

工作中碰到的一些問題以及解決方法