工作中碰到的一些问题以及解决方法

一、左中右布局，左边定宽，中、右百分比的布局：

（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代码：

$.ajax({
    url: 'test.json',
    dataType: 'json',
    success: function(result){
        var list = result.list;
        var htmlArr = [];
        for(var i = 0; i < list.length; i ++){
            if(list[i].url && list[i].url != ""){
                htmlArr .push('<a href="' + list[i].url + '" target="_blank"><span title="' + list[i].name + '">' + list[i].name + '</span></a>');
            } else {
                htmlArr .push('<a><span title="' + list[i].name + '">' + list[i].name + '</span></a>');    
            }
            $(".content").append(htmlArr.join(""));
        }   
    }
});        

 （3）test.json文件：

{
"list":[
     {"name": "aaa1", "url": ""}, 
     {"name": "aaa2", "url": ""}, 
     {"name": "aaa3", "url": ""}, 
     {"name": "bbb1", "url": ""}, 
     {"name": "bbb2", "url": ""}, 
     {"name": "bbb3", "url": ""} 
 ]
}

 

六、获取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;
        var htmlArr = [];
         $(".select-content").html(list[0].name);    //下拉框的默认显示list列表的第一条数据
         for(var i = 0; i < list[0].typeList.length; i ++){
             if(list[0].typeList[i].url && list[0].typeList[i].url != ""){
                htmlArr .push('<a href="' + list[0].typeList[i].url + '" target="_blank"><span title="' + list[0].typeList[i].name + '">' + list[0].typeList[i].name + '</span></a>');
            } else {
                htmlArr .push('<a><span title="' + list[0].typeList[i].name + '">' + list[0].typeList[i].name + '</span></a>');
            }
        }    //文本展示框默认显示list列表第一条typeList数据

        $(".show-content").append(htmlArr.join(""));
        
        var htmlArr = [];
         for(var i = 0; i < list.length; i ++){
             $(".list-content ul").append("<li data-value="' + i + '">' + list[i].name + '</li>"); 
         }    //下拉框列表的展示数据

    //下拉框的点击事件
        $(".list-content ul").delegate("li", "click", function(){
            $(".show-content").empty();
            var _liVal = $(this).attr("dta-value");
            var htmlArr = [];
            $(".select-content").html(list[_liVal].name);
            for(var i = 0; i < list[_liVal].typeList.length; i ++){
               if(list[_liVal].typeList[i].url && list[_liVal].typeList[i].url != ""){
                    htmlArr .push('<a href="' + list[_liVal].typeList[i].url + '" target="_blank"><span title="' + list[_liVal].typeList[i].name + '">' + list[_liVal].typeList[i].name + '</span></a>');
            } else {
                htmlArr .push('<a><span title="' + list[_liVal].typeList[i].name + '">' + list[_liVal].typeList[i].name + '</span></a>');
            }
         }    //根据下拉框选中的值再显示文本框的值
        $(".show-content").append(htmlArr.join(""));
        });
    }
});    

 

 （3）test.json文件：

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

 

 七、display: inline-block;在IE7下没效果的解决方法：

.content {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

 八、设置border圆角渐变（不兼容IE）：

（1）HTML代码：

<div class="border">
</div>

 

（2）CSS代码：

.border{
    position: relative;
    border: 4px solid transparent;
    border-radius: 16px;
    background: linear-gradient(orange, violet);
    background-clip: padding-box;
    padding: 10px;
    /* just to show box-shadow still works fine */
    box-shadow: 0 3px 9px black, inset 0 0 9px white;
}
.border::after{
    position: absolute;
    top: -4px; bottom: -4px;
    left: -4px; right: -4px;
    background: linear-gradient(red, blue);
    content: '';
    z-index: -1;
    border-radius: 16px;
}

 九、设置子元素的样式（第一个和第四个相同、第二个和第五个相同、第三个和第六个相同...以此类推），兼容IE的做法：

（1）HTML代码：

<ul>
    <li>
        <div class="con">This is content!!!</div>
    </li>
    <li>
        <div class="con">This is content!!!</div>
    </li>
    <li>
        <div class="con">This is content!!!</div>
    </li>
    <li>
        <div class="con">This is content!!!</div>
    </li>
    <li>
        <div class="con">This is content!!!</div>
    </li>
    <li>
        <div class="con">This is content!!!</div>
    </li>
</ul>

 

（2）jQuery代码：

$("ul li:nth-child(3n) .con").css("background", "#CCC");
$("ul li:nth-child(3n+1) .con").css("background", "#CCC");
$("ul li:nth-child(3n+2) .con").css("background", "#CCC");

 十二、select下拉框的一些操作：

（1）HTML代码：

<select id="selectID" >
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
</select>

 

（2）jquery代码：

<script language="javascript">
        $(document).ready(function() {
        //绑定下拉框change事件，当下来框改变时调用 SelectChange()方法
        $("#selectID").change(function() { SelectChange(); }); 
        })
        function SelectChange() {
        //获取下拉框选中项的text属性值
        var selectText = $("#selectID").find("option:selected").text();
        alert(selectText);
        //获取下拉框选中项的value属性值
        var selectValue = $("#selectID").val();
        alert(selectValue);
        //获取下拉框选中项的index属性值
        var selectIndex = $("#selectID").get(0).selectedIndex;
        alert(selectIndex);
        ////获取下拉框最大的index属性值
        var selectMaxIndex = $("#selectID option:last").attr("index");
        alert(selectMaxIndex);
    }

    function aa() {
        //设置下拉框index属性为5的选项 选中
        $("#selectID").get(0).selectedIndex = 5;  
    }
    function bb() {
        //设置下拉框value属性为4的选项 选中
        $("#selectID").val(4);
    }
    function cc() {
        //设置下拉框text属性为5的选项 选中
         $("#yyt option:contains('5')").attr("selected", true);
    }
    function dd() {
        //在下拉框最后添加一个选项
        $("#selectID").append("<option value='7'>7</option>");
    }
    function ee() {
        //在下拉框最前添加一个选项
        $("#selectID").prepend("<option value='0'>0</option>")
    }
    function ff() {
        //移除下拉框最后一个选项
        $("#selectID option:last").remove();
    }

    function gg() {
        //移除下拉框 index属性为1的选项
        $("#selectID option[index=1]").remove();
    }

    function hh() {
        //移除下拉框 value属性为4的选项
        $("#selectID option[value=4]").remove();
    }
    function ii() {
        //移除下拉框 text属性为5的选项
        $("#selectID option[text=5]").remove();
    }    
    </script>