<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <!--导入自定义的jQuery脚本-->
    <script type="text/javascript" src="js/Form_menu.js"></script>

/*定义编辑按钮的样式*/
.edit-mode{
    background-color: #b3b3b3;
    padding: 8px;
    text-decoration: none;
    color: white;
}
/*定义点击编辑按钮后的样式*/
.editing{
    background-color: #f0ad4e;
}

/**
 * Created by luo_t on 3/1/2016.
 */

STATUS = [
    {'id': 1, 'text': "在线"},
    {'id': 2, 'text': "下线"}
];

BUSINESS = [
    {'id': 1, 'text': "车上会"},
    {'id': 2, 'text': "二手车"},
    {'id': 3, 'text': "大保健"}
];

$(function(){
    // checkbox默认事件优先，然后执行自定义的事件
    $('#tb1').find(':checkbox').click(function(){
        var tr = $(this).parent().parent();
        if($("#edit_mode").hasClass('editing')){
            if($(this).prop('checked')){
                // 当前行进入编辑状态
                RowIntoEditMode(tr);
            }else{
                // 当前行退出编辑状态
                RowOutEditMode(tr);
            }
        }
    });
});

//退出编辑模式，函数（被下面掉用）
function RowOutEditMode(tr){
    tr.children().each(function(){  //tr下面的自标签
        var td = $(this);
        if(td.attr('edit') == 'true'){ //如果在编辑状态
            var inp  = td.children(':first');//获取td里面的第一个元素
            var input_value = inp.val();//取出里面的值
            td.text(input_value);//并复制给td标签
        }
    });
}

//进入编辑模式，函数（被下面掉用）
function RowIntoEditMode(tr){
    tr.children().each(function(){ //获取tr下面的所有td，循环
        var td = $(this);
        if(td.attr('edit') == 'true'){ //判断是否为可编辑状态
            if(td.attr('edit-type') == "select"){  //判断是否为input的select标签
                var all_values = window[td.attr('global-key')]; //获取全局变量判断获取当前的项目类型，
                var select_val = td.attr('select-val'); //获取当前类型的下的值
                select_val = parseInt(select_val); //把字符串转换为数字
                var options = "";//定义一个空值，把标签循环加上。
                $.each(all_values, function(index, value){ //循环这个项目类型
                    if(select_val == value.id){ //判断，当前选中的值和项目类型的ID的值是否相等，如果相等使用这个值
                        options += "<option selected='selected'>" + value.text + "</option>";
                    }else{//没有，使用默认的项目类型
                        options += "<option>" + value.text + "</option>";
                    }
                });
                //当input标签，类型为select的标签发生改变时执行
                var temp = "<select onchange='MultiChange(this);'>" + options + "</select>";
                td.html(temp);
            }else{ //如果不是select类型的那么
                var text = td.text(); //获取td里的val值
                var temp = "<input type='text' value='"  + text+    "' />";  //把值赋给input标签的value
                td.html(temp);
            }
        }
    })
}

globalCtrlKeyPress = false;
// 如果按下键盘的任意键，执行 function
window.onkeydown = function(event){
    console.log(event.keyCode);
    //如果按下ctrl键
    if(event && event.keyCode == 17){
        //设置globalCtrlKeyPress为true
        window.globalCtrlKeyPress = true;
    }else{
        //按下其他的键盘为false
        window.globalCtrlKeyPress = false;
    }
};

//如果任意键放开执行function
window.onkeyup = function (event) { //这里需要传入evnent
    //如果ctrl键up
    if(event && event.keyCode == 17 ){
        //设置globalCtrlKeyPress为false
        window.globalCtrlKeyPress = false;
    }
};

//提升逼格多行修改
function MultiChange(ths){
    // 检测是否按下ctr键
    if(window.globalCtrlKeyPress == true){
        // 获取当前td所在的tr中的索引位置
        var index = $(ths).parent().index();
        //获取当前td内的值
        var value = $(ths).val();
        //找到当前td下的所有的选中的(tr)标签，并循环
        $(ths).parent().parent().nextAll().find("td input[type='checkbox']:checked").each(function(){
            //找到当前选中标签（:checked）的上面获取的index索引值的的td标签，的子标签的值。
            $(this).parent().parent().children().eq(index).children().val(value);
        });

    }
}

//进入编辑模式 按钮触发功能
function EditMode(ths, tb){ //ths & tb 就是在html页面中我们传入的参数：onclick="EditMode(this, '#tb1');"
    // ths =this,
    var isEditing = $(ths).hasClass('editing');  //判断是否有这个editing的样式
    if(isEditing){  //如果有说明当前是编辑状态，那么点击的时候应该退出编辑状态
        // 退出编辑模式
        $(ths).text('进入编辑模式');  //修改他的内容，提升逼格用的。
        $(ths).removeClass('editing'); //移除这个editing样式
        $(tb).children().each(function(){ //获取这个form表单下的所有tr，并循环
             var tr = $(this); //当前的tr
            if(tr.find(':checkbox').prop('checked')){ //找到当选中的行
                // 当前行，推出编辑状态
                RowOutEditMode(tr);  //这里我们把代码进行了缩写，可以理解为python中调用函数的意思，我传入参数执行函数
            }

        });
    }else{
        // 进入编辑模式
        $(ths).text('退出编辑模式'); //修改他的内容，提升逼格用的。
        $(ths).addClass('editing'); //添加这个这个editing样式
        $(tb).children().each(function(){ //找到每个一个form表单下面的tr循环
            // $(this) 表示循环过程中,每一个tr，每一行数据
            var tr = $(this);
            var isChecked = $(this).find(':checkbox').prop('checked'); //获取当前tr下的checkbox的checked属性，用来判断是否为选中状态
            if(isChecked==true){//如果为选中状态
                // 当前行进入编辑状态
                RowIntoEditMode(tr);//我们可以把重复的代码进行简化，类似于python中的函数！
            }
        });
    }
}

//设置全选功能
function CheckAll(mode, tb){
    // 1、选中checkbox
    // 2、如果已经进入编辑模式，让选中行进入编辑状态
    // tb = #tb1
    //$(tb) = $('#tb1')
    $(tb).children().each(function(){//找到tb下面的所有tr，循环
        // $(this) 表示循环过程中,每一个tr，每一行数据
        var tr = $(this);
        var isChecked = $(this).find(':checkbox').prop('checked');//找到所有选中的tr标签
        if(isChecked==true){//如果选中什么都不做
        }else{//如果没有选中
            $(this).find(':checkbox').prop('checked',true);//如果没有选中首先把他设置为选中状态
            // 如果已经进入编辑模式，让选中行进入编辑状态
            var isEditMode = $(mode).hasClass('editing');
            if(isEditMode){
                // 当前行进入编辑状态
                RowIntoEditMode(tr);
            }
        }
    });
}

//设置反选功能
function CheckReverse(mode, tb){
    // 是否进入了编辑模式
    if($(mode).hasClass('editing')){//如果进入编辑模式
        $(tb).children().each(function(){//循环所有的tr
            // 遍历所有tr
            var tr = $(this);
            var check_box = tr.children().first().find(':checkbox');//找到所有的input的checkbox标签
            if(check_box.prop('checked')){  //判断如果选中
                check_box.prop('checked',false);//给他取消
                RowOutEditMode(tr);//并退出编辑模式
            }else{//如果没有选中
                check_box.prop('checked',true);//给他选中
                RowIntoEditMode(tr);//并进入编辑模式
            }
        });
    }else{//如果没有进入编辑模式
        $(tb).children().each(function(){ //找到所有的tr并循环
            var tr = $(this);
            var check_box = tr.children().first().find(':checkbox');//周到所有的checkbox标签
            if(check_box.prop('checked')){ //判断是否选中
                check_box.prop('checked',false);//如果选中，给他设置为为选中
            }else{
                check_box.prop('checked',true);//如果没有选中，给他设置为选中
            }
        });
    }
}

//设置取消功能
function CheckCancel(mode, tb){
    // 1、取消选中checkbox
    // 2、如果已经进入编辑模式，行退出编辑状态
    $(tb).children().each(function(){ //渠道所有的tr标签，并循环
        var tr = $(this);
        if(tr.find(':checkbox').prop('checked')){//找到所有选中的checked标签
            // 移除选中
            tr.find(':checkbox').prop('checked', false);
            //获取是否为编辑状态
            var isEditing = $(mode).hasClass('editing');
            if(isEditing == true){ //如果为编辑状态
                // 当前行，推出编辑状态
                RowOutEditMode(tr);
            }
        }
    });
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>shuaige</title>
</head>
<body>
    <div id="i1">

    </div>

    <div id="i2" style=" padding: 0px; color: rgb(0, 0, 255); line-height: 1.5 !important;">>

    </div>
    <script type="text/javascript" src="../js/jquery-1.8.2.min.js"></script>
    <script>
        $('#i1').append('<a>Hello Test Append</a>');//对这个id#i1的标签内尾部增加一条数据
        $('#i1').append('<div>Test Continue</div>');//对这个id#i1的标签内尾部增加一条数据

        $('#i1').prepend('<div>Prepend on the chiled tables</div>');//对这个id为i1的自标签内顶部增加一条数据

        $('#i1').appendTo('#i2'); //想让某一个标签添加到某一个和标签，可以用到appendTo，把i1放到i2里面了

        $('#i1').before('<h1>append content  same level up</h1>');//放在找到的'#i1'同级标签上面增加
        $('#i1').after('<h2>append content same level down</h2>');//放在知道的'#i1'统计标签下面增加
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>shuaige</title>
</head>
<body>
    <div id="search_conditions">
        <div class="condition">
            <a onclick="AddCondition(this,'#search_conditions')">+</a>
            <input/>
        </div>
    </div>

    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
    <script>
        //添加新增内容
        function AddCondition(ths,condition){
            //copy condition div
            //在吧copy的div追加到id="search_condition"的标签内下面
            var cp = $(ths).parent().clone();
            console.log(cp);
            //修改里面的内容,和属性
            cp.children(':first').text('-').attr('onclick',"RemoveCondition(this,'#search_conditions')");
            cp.appendTo('#search_conditions');
        }
        //新增完后的标签内新增的内容
        function RemoveCondition(ths,condition){
            $(ths).parent().remove();
        }
    </script>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>shuaige</title>
</head>
<body>

    <script type="text/javascript" src="jquery-1.8.2.min.js"></script>
    <!--这里必须优先导入jQuery原生的js，在导入扩展的jQuery-->
    <script type="text/javascript" src="extends.js"></script>
    <script>
        console.log($.luotianshuai())
    </script>
</body>
</html>

/**
 * Created by luotim on 16/2/28.
 */

//扩展使用自执行函数来写,逼格比较高点
(function (arg) {
    arg.extend({
        'luotianshuai':function (){
            return 123;
        },
        'login':function(){}  //他的代码是以字典形式存储的扩展jQuery
    })
})(jQuery);//jQuery为传进去的函数他的方程式:(function (arg) {})();第一个括号为函数,第二个括号内存储参数

jQuery.fn.extend({
  check: function() {
    return this.each(function() { this.checked = true; });
  },
  uncheck: function() {
    return this.each(function() { this.checked = false; });
  }
});

$("input[type=checkbox]").check();
$("input[type=radio]").uncheck();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>shuaige</title>
    <!--引入第三方的css-->
    <link href="extend_plugin-in/jquery.bxslider/jquery.bxslider.css" rel="stylesheet">
</head>
<body>
        <!--按照要求的格式书写-->
        <ul class="bxslider">
          <li><img src="data:images/image_1.jpg" /></li>
          <li><img src="data:images/image_2.jpg" /></li>
          <li><img src="data:images/image_3.jpg" /></li>
        </ul>
        <!--导入js文件-->
    <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
        <!--然后在导入插件内的js文件-->
    <script type="text/javascript" src="extend_plugin-in/jquery.bxslider/jquery.bxslider.min.js"></script>
    <script>
        $(document).ready(function(){ //当整个页面加载完成执行的函数
          $('.bxslider').bxSlider();
        });
    </script>
</body>
</html>

"""
eot、svg、ttf、woff、woff2
    @font-face语句是css中的一个功能模块，用于实现网页字体多样性的模块(设计者可随意指定字体，不需要考虑浏览者电脑上是否安装)。
    而由于网页中使用的字体类型，也是各浏览器对字体类型有不同的支持规格。 字体格式类型主要有几个大分类：TrueType、Embedded Open Type 、OpenType、WOFF 、SVG。
    eot  EOT– Embedded Open Type
        EOT是嵌入式字体，是微软开发的技术。允许OpenType字体用@font-face嵌入到网页并下载至浏览器渲染，存储在临时安装文件夹下。
    SVG Scalable Vector Graphics
        SVG是由W3C制定的开放标准的图形格式。SVG字体就是使用SVG技术来呈现字体，还有一种gzip压缩格式的SVG字体。
    ttf TrueType
        Windows和Mac系统最常用的字体格式，其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体，这使得它们比基于矢量的字体更容易处理，保证了屏幕与打印输出的一致性。同时，这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。
    woff WOFF–WebOpen Font Format
        WOFF（Web开发字体格式）是一种专门为了Web而设计的字体格式标准，实际上是对于TrueType/OpenType等字体格式的封装，每个字体文件中含有字体以及针对字体的元数据（Metadata），字体文件被压缩，以便于网络传输。

"""

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <!--指定告诉ID用高版本的解析-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Shuaige</title>
    <!-- Bootstrap -->
    <link href="extend_plugin-in_bootstrap/css/bootstrap.min.css" rel="stylesheet">

  </head>
  <body>
    <h1>你好，世界！</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-1.8.2.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="extend_plugin-in_bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>

"""
<meta charset="utf-8">
    编码

<meta http-equiv="X-UA-Compatible" content="IE=edge">
    Bootstrap 不支持 IE 古老的兼容模式。为了让 IE 浏览器运行*别的可用模式渲染显示内容

<meta name="viewport" content="width=device-width, initial-scale=1">
    为了确保适当的绘制和触屏缩放，需要在 <head> 之中添加 viewport 元数据标签。

    在移动设备浏览器上，通过为视口（viewport）设置 meta 属性为 user-scalable=no 可以禁用其缩放（zooming）功能。这样禁用缩放功能后，用户只能滚动屏幕，就能让你的网站看上去更像原生应用的感觉。
　　 注意，这种方式我们并不推荐所有网站使用，还是要看你自己的情况而定！

<meta name="renderer" content="webkit">
    国内浏览器厂商一般都支持兼容模式（即 IE 内核）和高速模式（即 webkit 内核），不幸的是，所有国产浏览器都是默认使用兼容模式，这就造成由于低版本 IE （IE8 及以下）内核让基于 Bootstrap 构建的网站展现效果很糟糕的情况。
　　 幸运的是，国内浏览器厂商逐渐意识到了这一点，某些厂商已经开始有所作为了,目前只有360浏览器支持此 <meta> 标签。希望更多国内浏览器尽快采取行动、尽快进入高速时代！
"""