zoukankan      html  css  js  c++  java
  • 工作中碰到的一些问题以及解决方法

    一、左中右布局,左边定宽,中、右百分比的布局:

    (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>
  • 相关阅读:
    leetcode701. Insert into a Binary Search Tree
    leetcode 958. Check Completeness of a Binary Tree 判断是否是完全二叉树 、222. Count Complete Tree Nodes
    leetcode 110. Balanced Binary Tree
    leetcode 104. Maximum Depth of Binary Tree 111. Minimum Depth of Binary Tree
    二叉树
    leetcode 124. Binary Tree Maximum Path Sum 、543. Diameter of Binary Tree(直径)
    5. Longest Palindromic Substring
    128. Longest Consecutive Sequence
    Mac OS下Android Studio的Java not found问题,androidfound
    安卓 AsyncHttpClient
  • 原文地址:https://www.cnblogs.com/minozMin/p/8056881.html
Copyright © 2011-2022 走看看