工作中碰到的一些問題以及解決方法
阿新 • • 發佈:2017-12-18
post content 獲取json jquery app div ner htm his
一、左中右布局,左邊定寬,中、右百分比的布局:
(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"} ] } ] }
工作中碰到的一些問題以及解決方法