一、左中右布局,左边定宽,中、右百分比的布局:
(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"} ] } ] }