HTML的select控件美化

CSS：

.div-select

{

    border: solid 1px #999;

    height: 40px;

    line-height: 40px;

    cursor: default;

}

.div-select-text

{

    float: left;

    background-color: #fff;

    height: 100%;

    word-break: keep-all;

    overflow: hidden;

    cursor: default;

}

    .div-select-text > div

    {

        padding: 3px;

        line-height: 34px;

    }

.div-select-arrow

{

    background-color: #fff;

    float: right;

    width: 40px;

    height: 100%;

    color: #999;

    cursor: default;

}

    .div-select-arrow > div

    {

        border: solid 1px #999;

        margin: 2px;

        height: 34px;

        background-color: #f2f2f2;

        text-align: center;

        line-height: 34px;

        font-size: 22px;

    }

.div-select-list

{

    position: absolute;

    float: left;

    top: 100px;

    left: 100px;

    border: solid 1px #999;

    max-height: 300px;

    overflow: auto;

    background-color: #9f9;

    display: none;

    z-index:;

}

    .div-select-list .div-select-item:nth-child(2n+1)

    {

        background-color: #fff;

    }

.div-select-item

{

    height: 50px;

    line-height: 50px;

    padding-left: 3px;

    padding-right: 3px;

    background-color: #f2f2f2;

    word-break: keep-all;

    overflow: hidden;

    cursor: default;

}

.div-select-item-hover

{

    background-color: #3399ff!important;

}

.div-select-selected

{

    background-color: #3399ff !important;

}

JS：

//2015年2月8日

//select美化

var divSelectListIndex = 0;

$(function () {

    initDivSelect();

});

//初始化select美化插件

function initDivSelect() {

    $(".div-select-target").each(function () {

        divSelectListIndex++;

        var select = $(this);

        if (select.css("display") == "none") {

            return;

        }

        else {

            select.css("display", "none")

        }

        if (select.next("div").find(".div-select-list").length == 0) {

            select.after('<div><div class="div-select"><div class="div-select-text"><div></div></div><div class="div-select-arrow"><div>∨</div></div></div></div>');

            $("body").append('<div class="div-select-list div-select-list-' + divSelectListIndex + '"></div>');

        }

        var div = select.next("div");

        var divText = div.find(".div-select-text");

        var divSelect = div.find(".div-select");

        var divArrow = div.find(".div-select-arrow");

        var list = $(".div-select-list-" + divSelectListIndex);

        function updateText(item) {

            divText.find("div").html(item.html());

        }

        select.find("option").each(function () {

            var option = $(this);

            var text = option.html();

            var value = option.attr("value");

            list.append('<div class="div-select-item" value="' + value + '">' + text + '</div>');

            list.find(".div-select-item:last").click(function () {

                var item = $(this);

                var value = item.attr("value");

                select.val(value);

                select.change();

                list.find(".div-select-selected").removeClass("div-select-selected");

                item.addClass("div-select-selected");

                updateText(item);

                list.hide();

            });

            list.find(".div-select-item:last").mouseenter(function () {

                var item = $(this);

                var selectedMark = list.find(".div-select-selected");

                selectedMark.removeClass("div-select-selected");

                selectedMark.addClass("div-select-selected-mark");

                list.find(".div-select-item-hover").removeClass("div-select-item-hover");

                item.addClass("div-select-item-hover");

                updateText(item);

            });

        });

        list.mouseleave(function () {

            var selectedMark = list.find(".div-select-selected-mark");

            if (list.find(".div-select-selected").length == 0) {

                selectedMark.addClass("div-select-selected");

                updateText(selectedMark);

            }

            selectedMark.removeClass("div-select-selected-mark");

            list.find(".div-select-item-hover").removeClass("div-select-item-hover");

        });

        if (select.attr("width")) {

            divSelect.width(select.attr("width") - 2);

            divText.width(divSelect.width() - divArrow.width());

            if (select.attr("width") > list.width()) {

                list.width(divSelect.width());

            }

        }

        div.keydown(function (e) {

            list.find(".div-select-selected-mark").removeClass("div-select-selected-mark");

            list.find(".div-select-item-hover").addClass("div-select-selected");

            list.find(".div-select-item-hover").removeClass("div-select-item-hover");

            if (e.keyCode == 40) {

                var currentSelected = list.find(".div-select-selected");

                var nextSelected = currentSelected.next(".div-select-item");

                if (nextSelected.length == 0) {

                    nextSelected = list.find(".div-select-item:first");

                    nextSelected.addClass("div-select-selected");

                    currentSelected.removeClass("div-select-selected");

                    list.scrollTop(0);

                } else {

                    nextSelected.addClass("div-select-selected");

                    currentSelected.removeClass("div-select-selected");

                    var i = 0;

                    while (nextSelected.position().top < 0

                        || nextSelected.position().top > list.height() - nextSelected.height()) {

                        list.scrollTop(list.scrollTop() + nextSelected.height());

                        if (i++ > 100) break;

                    }

                }

                updateText(nextSelected);

                return false;

            }

            if (e.keyCode == 38) {

                var currentSelected = list.find(".div-select-selected");

                var nextSelected = currentSelected.prev(".div-select-item");

                if (nextSelected.length == 0) {

                    nextSelected = list.find(".div-select-item:last");

                    nextSelected.addClass("div-select-selected");

                    currentSelected.removeClass("div-select-selected");

                    list.scrollTop(list.find(".div-select-item").length * nextSelected.height());

                }

                else {

                    nextSelected.addClass("div-select-selected");

                    currentSelected.removeClass("div-select-selected");

                    var i = 0;

                    while (nextSelected.position().top < 0

                        || nextSelected.position().top > list.height() - nextSelected.height()) {

                        list.scrollTop(list.scrollTop() - nextSelected.height());

                        if (i++ > 100) break;

                    }

                }

                updateText(nextSelected);

                return false;

            }

            if (e.keyCode == 13) {

                var selectedItem = list.find(".div-select-selected");

                var value = selectedItem.attr("value");

                select.val(value);

                list.hide();

                select.change();

            }

        });

        divSelect.click(function () {

            $("a").bind("click", function () {

                $("a").unbind("click");

                list.hide();

            });

            if (list.css("display") == "none") {

                list.show();

            }

            else {

                list.hide();

            }

            list.css("top", divSelect.offset().top + divSelect.height() + 1);

            list.css("left", divSelect.offset().left);

            if ($(window).scrollTop() + $(window).height() < list.offset().top + list.height() + 2) {

                list.css("top", $(window).scrollTop() + $(window).height() - list.height() - 2);

            }

            if (list.width() < divSelect.width()) {

                list.width(divSelect.width());

            }

            var currentSelected = list.find(".div-select-selected");

            if (currentSelected.position().top > list.height() - currentSelected.height()) {

                list.scrollTop(currentSelected.position().top - currentSelected.height() * 2);

            }

            return false;

        });

        $("html,body").bind("click", function () {

            list.hide();

        });

        list.click(function () {

            return false;

        });

        function initSelect() {

            list.find(".div-select-selected").removeClass("div-select-selected");

            var matchItem = list.find(".div-select-item[value='" + select.val() + "']");

            if (matchItem.length > 0) {

                matchItem.addClass("div-select-selected");

                updateText(matchItem);

            }

        }

        initSelect();

        select.change(function () {

            initSelect();

        });

    }); // $(".div-select-target").each

}

如何使用：

第1步、引用CSS和JS：

<link type="text/css" href="~/Scripts/DivSelect/divSelect.css" rel="stylesheet" />

<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="~/Scripts/DivSelect/divSelect.js"></script>

第2步、给select控件加上class="div-select-target" width="200"，其中class="div-select-target"是必须的，width="200"是可选的。完整HTML代码如下：

<link type="text/css" href="~/Scripts/DivSelect/divSelect.css" rel="stylesheet" />

<script type="text/javascript" src="~/Scripts/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="~/Scripts/DivSelect/divSelect.js"></script>

<div style="border: solid 1px #f99; margin: 50px; padding: 50px;">

    <select name="sel" class="div-select-target" width="200" >

        <option value="1">中国</option>

        <option value="2">美国</option>

        <option value="3">法国</option>

        <option value="4">英国</option>

        <option value="5">俄罗斯</option>

        <option value="6">德国</option>

        <option value="7">韩国</option>

        <option value="8">日本</option>

        <option value="9">印度</option>

        <option value="10">巴西</option>

        <option value="11">意大利</option>

        <option value="12">这个国家的名称很长很长很长很长很长很长很长很长</option>

        <option value="13">瑞士</option>

        <option value="14">越南</option>

        <option value="15">缅甸</option>

        <option value="16">泰国</option>

        <option value="17">加拿大</option>

        <option value="18" selected="selected">南非</option>

        <option value="19">澳大利亚</option>

        <option value="20">新西兰</option>

        <option value="21">挪威</option>

        <option value="22">巴勒斯坦</option>

        <option value="23">以色列</option>

        <option value="24">新加坡</option>

        <option value="25">马来西亚</option>

        <option value="26">波兰</option>

        <option value="27">国家27</option>

        <option value="28">国家28</option>

        <option value="29">国家29</option>

        <option value="30">国家30</option>

        <option value="31">国家31</option>

        <option value="32">国家32</option>

        <option value="33">国家33</option>

        <option value="34">国家34</option>

        <option value="35">国家35</option>

        <option value="36">国家36</option>

        <option value="37">国家37</option>

        <option value="38">国家38</option>

    </select>

</div>

<div style="border: solid 1px #f99; margin: 50px; padding: 50px; margin-top: 700px; margin-bottom: 700px;">

    <select name="sel" class="div-select-target" width="200" >

        <option value="1">中国</option>

        <option value="2">美国</option>

        <option value="3">法国</option>

        <option value="4">英国</option>

        <option value="5">俄罗斯</option>

        <option value="6" selected="selected">德国</option>

        <option value="7">韩国</option>

        <option value="8">日本</option>

    </select>

</div>

效果图：

滚动条美化版：

CSS：

.div-select

{

    border: solid 1px #999;

    height: 40px;

    line-height: 40px;

    cursor: default;

}

.div-select-text

{

    float: left;

    background-color: #fff;

    height: 100%;

    word-break: keep-all;

    overflow: hidden;

    cursor: default;

    font-size: 16px;

    font-family: 微软雅黑,雅黑;

}

    .div-select-text > div

    {

        padding: 3px;

        line-height: 34px;

    }

.div-select-arrow

{

    background-color: #fff;

    float: right;

    width: 40px;

    height: 100%;

    color: #999;

    cursor: default;

}

    .div-select-arrow > div

    {

        border: solid 1px #999;

        margin: 2px;

        height: 34px;

        background-color: #f2f2f2;

        text-align: center;

        line-height: 34px;

        font-size: 22px;

    }

.div-select-list

{

    position: absolute;

    float: left;

    top: 100px;

    left: 100px;

    border: solid 1px #999;

    max-height: 300px;

    overflow: hidden;

    background-color: #9f9;

    display: none;

    z-index:;

    font-size: 16px;

    font-family: 微软雅黑,雅黑;

}

    .div-select-list .div-select-item:nth-child(2n+1)

    {

        background-color: #fff;

    }

.div-select-item

{

    height: 50px;

    line-height: 50px;

    padding-left: 3px;

    padding-right: 3px;

    background-color: #f2f2f2;

    word-break: keep-all;

    overflow: hidden;

    cursor: default;

}

.div-select-item-hover

{

    background-color: #3399ff!important;

}

.div-select-selected

{

    background-color: #3399ff !important;

}

.div-select-list-scrollbar

{

    position: absolute;

    float: left;

    border: solid 1px #999;

    border-left:;

    background-color: #e8e8ec;

    width: 40px;

    height: 300px;

    display: none;

    cursor: default;

    z-index:;

}

.div-select-scrollbar-up

{

    border-bottom: solid 1px #fff;

    height: 39px;

    font-size: 22px;

    line-height: 39px;

    color: #999;

    background-color: #cdcdcd;

    text-align: center;

}

.div-select-scrollbar-pos

{

    height: 220px;

}

    .div-select-scrollbar-pos > div:last-child

    {

        width: 40px;

        height: 20px;

        background-color: #cdcdcd;

    }

.div-select-scrollbar-down

{

    border-top: solid 1px #fff;

    height: 39px;

    font-size: 22px;

    line-height: 39px;

    color: #999;

    background-color: #cdcdcd;

    text-align: center;

}

JS：

//2015年2月8日

//select美化

var divSelectListIndex = 0;

$(function () {

    initDivSelect();

});

//初始化select美化插件

function initDivSelect() {

    $(".div-select-target").each(function () {

        divSelectListIndex++;

        var select = $(this);

        if (select.css("display") == "none") {

            return;

        }

        else {

            select.css("display", "none")

        }

        if (select.next("div").find(".div-select-list").length == 0) {

            select.after('<div><div class="div-select"><div class="div-select-text"><div></div></div><div class="div-select-arrow"><div>∨</div></div></div></div>');

            $("body").append('<div class="div-select-list div-select-list-' + divSelectListIndex + '"></div>');

        }

        var div = select.next("div");

        var divText = div.find(".div-select-text");

        var divSelect = div.find(".div-select");

        var divArrow = div.find(".div-select-arrow");

        var list = $(".div-select-list-" + divSelectListIndex);

        var scrollbar;

        var scrollbarPosTop;

        var scrollbarPos;

        var scrollbarScrollHeight;

        var scrollbarUp;

        var scrollbarDown;

        var itemHeight;

        var itemCount;

        var itemsHeight;

        var scrollFlag = false;

        function updateText(item) {

            divText.find("div").html(item.html());

        }

        select.find("option").each(function () {

            var option = $(this);

            var text = option.html();

            var value = option.attr("value");

            list.append('<div class="div-select-item" value="' + value + '">' + text + '</div>');

            list.find(".div-select-item:last").click(function () {

                var item = $(this);

                var value = item.attr("value");

                select.val(value);

                select.change();

                list.find(".div-select-selected").removeClass("div-select-selected");

                item.addClass("div-select-selected");

                updateText(item);

                list.hide();

                if (scrollbar) scrollbar.hide();

            });

            list.find(".div-select-item:last").mouseenter(function () {

                var item = $(this);

                var selectedMark = list.find(".div-select-selected");

                selectedMark.removeClass("div-select-selected");

                selectedMark.addClass("div-select-selected-mark");

                list.find(".div-select-item-hover").removeClass("div-select-item-hover");

                item.addClass("div-select-item-hover");

                updateText(item);

            });

        });

        list.mouseleave(function () {

            var selectedMark = list.find(".div-select-selected-mark");

            if (list.find(".div-select-selected").length == 0) {

                selectedMark.addClass("div-select-selected");

                updateText(selectedMark);

            }

            selectedMark.removeClass("div-select-selected-mark");

            list.find(".div-select-item-hover").removeClass("div-select-item-hover");

        });

        if (select.attr("width")) {

            divSelect.width(select.attr("width") - 2);

            divText.width(divSelect.width() - divArrow.width());

        }

        else {

            divText.width(list.width());

        }

        div.keydown(function (e) {

            list.find(".div-select-selected-mark").removeClass("div-select-selected-mark");

            list.find(".div-select-item-hover").addClass("div-select-selected");

            list.find(".div-select-item-hover").removeClass("div-select-item-hover");

            if (e.keyCode == 40) {

                var currentSelected = list.find(".div-select-selected");

                var nextSelected = currentSelected.next(".div-select-item");

                if (nextSelected.length == 0) {

                    nextSelected = list.find(".div-select-item:first");

                    nextSelected.addClass("div-select-selected");

                    currentSelected.removeClass("div-select-selected");

                    list.scrollTop(0);

                } else {

                    nextSelected.addClass("div-select-selected");

                    currentSelected.removeClass("div-select-selected");

                    var i = 0;

                    while (nextSelected.position().top < 0

                        || nextSelected.position().top > list.height() - nextSelected.height()) {

                        list.scrollTop(list.scrollTop() + nextSelected.height());

                        if (i++ > 100) break;

                    }

                }

                updateText(nextSelected);

                updateScrollbarPos();

                return false;

            }

            if (e.keyCode == 38) {

                var currentSelected = list.find(".div-select-selected");

                var nextSelected = currentSelected.prev(".div-select-item");

                if (nextSelected.length == 0) {

                    nextSelected = list.find(".div-select-item:last");

                    nextSelected.addClass("div-select-selected");

                    currentSelected.removeClass("div-select-selected");

                    list.scrollTop(list.find(".div-select-item").length * nextSelected.height());

                }

                else {

                    nextSelected.addClass("div-select-selected");

                    currentSelected.removeClass("div-select-selected");

                    var i = 0;

                    while (nextSelected.position().top < 0

                        || nextSelected.position().top > list.height() - nextSelected.height()) {

                        list.scrollTop(list.scrollTop() - nextSelected.height());

                        if (i++ > 100) break;

                    }

                }

                updateText(nextSelected);

                updateScrollbarPos();

                return false;

            }

            if (e.keyCode == 13) {

                var selectedItem = list.find(".div-select-selected");

                var value = selectedItem.attr("value");

                select.val(value);

                list.hide();

                if (scrollbar) scrollbar.hide();

                select.change();

            }

        });

        itemHeight = list.find(".div-select-item:first").height();

        itemCount = list.find(".div-select-item").length;

        itemsHeight = itemHeight * itemCount;

        if (itemsHeight > list.height()) {

            $("body").append('<div class="div-select-list-scrollbar div-select-list-scrollbar-' + divSelectListIndex + '"><div class="div-select-scrollbar-up">∧</div><div class="div-select-scrollbar-pos"><div></div><div></div></div><div class="div-select-scrollbar-down">∨</div></div>');

        }

        scrollbar = $(".div-select-list-scrollbar-" + divSelectListIndex);

        scrollbarPosTop = scrollbar.find(".div-select-scrollbar-pos").find("div:first");

        scrollbarPos = scrollbar.find(".div-select-scrollbar-pos").find("div:last");

        scrollbarScrollHeight = scrollbarPos.parent().height() - scrollbarPos.height();

        scrollbarUp = scrollbar.find(".div-select-scrollbar-up");

        scrollbarDown = scrollbar.find(".div-select-scrollbar-down");

        scrollbar.click(function () {

            return false;

        });

        scrollbarUp.click(function () {

            list.scrollTop(list.scrollTop() - list.height());

            updateScrollbarPos();

        });

        scrollbarDown.click(function () {

            list.scrollTop(list.scrollTop() + list.height());

            updateScrollbarPos();

        });

        scrollbar.mousedown(function () {

            scrollFlag = true;

        });

        scrollbar.mouseup(function () {

            scrollFlag = false;

        });

        scrollbar.mousemove(function (e) {

            if (scrollFlag) {

                var pos = e.pageY - scrollbar.offset().top - 50;

                if (pos <= scrollbarScrollHeight) {

                    scrollbarPosTop.height(pos);

                    list.scrollTop(scrollbarPosTop.height() / scrollbarScrollHeight * (itemsHeight - list.height()));

                }

            }

        });

        function updateScrollbarPos() {

            scrollbarPosTop.height(scrollbarScrollHeight * list.scrollTop() * 1.0 / (itemsHeight - list.height()));

            if (list.scrollTop() + list.height() == itemsHeight) {

                scrollbarPosTop.height(scrollbarScrollHeight);

            }

        }

        divSelect.click(function () {

            $("a").bind("click", function () {

                $("a").unbind("click");

                list.hide();

                scrollbar.hide();

            });

            if (list.css("display") == "none") {

                list.show();

                scrollbar.show();

            }

            else {

                list.hide();

                scrollbar.hide();

            }

            list.css("top", divSelect.offset().top + divSelect.height() + 1);

            list.css("left", divSelect.offset().left);

            var listOffsetTop = list.offset().top;

            if ($(window).scrollTop() + $(window).height() < list.offset().top + list.height() + 2) {

                list.css("top", $(window).scrollTop() + $(window).height() - list.height() - 2);

            }

            if (list.width() < divSelect.width()) {

                if (!(itemsHeight > list.height())) {

                    list.width(divSelect.width());

                }

                else {

                    list.width(divSelect.width() - scrollbar.width());

                }

            }

            scrollbar.find(".div-select-scrollbar-pos").find("div:first").height(0);

            scrollbar.css("left", divSelect.offset().left + list.width() + 1);

            scrollbar.css("top", divSelect.offset().top + divSelect.height() + 1);

            if ($(window).scrollTop() + $(window).height() < listOffsetTop + list.height() + 2) {

                scrollbar.css("top", $(window).scrollTop() + $(window).height() - list.height() - 2);

            }

            var currentSelected = list.find(".div-select-selected");

            if (currentSelected.position().top > list.height() - currentSelected.height()) {

                list.scrollTop(currentSelected.position().top - currentSelected.height() * 2);

            }

            updateScrollbarPos();

            return false;

        });

        $("html,body").bind("click", function () {

            list.hide();

            scrollbar.hide();

        });

        list.click(function () {

            return false;

        });

        function initSelect() {

            list.find(".div-select-selected").removeClass("div-select-selected");

            var matchItem = list.find(".div-select-item[value='" + select.val() + "']");

            if (matchItem.length > 0) {

                matchItem.addClass("div-select-selected");

                updateText(matchItem);

            }

        }

        initSelect();

        select.change(function () {

            initSelect();

        });

    }); // $(".div-select-target").each

}

效果图：

HTML的select控件美化的更多相关文章

  1. jquery 双向select控件bootstrap Dual listbox

    http://www.cnblogs.com/hangwei/p/5040866.html       -->jquery 双向select控件bootstrap Dual listboxhtt ...

  2. SELECT控件操作的JS代码示例

    SELECT控件操作的JS代码示例 1 检测是否有选中 if(objSelect.selectedIndex > -1) { //说明选中 } else { //说明没有选中 } 2.动态创建s ...

  3. IE6下div层被select控件遮住的问题解决方法

    Select在IE6下是处于最顶层的,因此想要遮住它,设置zIndex属性是不行的,就需要一个优先级更高的元素,就是iframe,当把iframe嵌套在弹出div层中后,把iframe设置为不可见,但 ...

  4. .net获取select控件中的文本内容

    .net获取select控件中的文本内容 2009-11-28 21:19小V古 | 分类:C#/.NET | 浏览1374次 <select id="SecType" st ...

  5. Jquery 操作Html 控件 CheckBox、Radio、Select 控件 【转】http://www.cnblogs.com/lxblog/archive/2013/01/09/2853056.html

    Jquery 操作Html 控件 CheckBox.Radio.Select 控件   在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio ...

  6. js+CSS实现模拟华丽的select控件下拉菜单效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. Asp.net绑定带层次下拉框（select控件）

    1.效果图 2.数据库中表数据结构 3.前台页面 <select id="pid" runat="server" style="width:16 ...

  8. Selenium webdriver 之select 控件封装，解决onchange问题

    使用webdriver的时候,select 控件经常会绑定onchange 事件,在selenium2.09 之前click 方法对onchange 事件有bug,2.09 以后修复了,但是根据经验也 ...

  9. Jquery 操作Html 控件 CheckBox、Radio、Select 控件

    在使用 Javascript 编写前台脚本的时候,经常会操作 Html 控件,比如 checkbox.radio.select,用 Jquery 库操作其他会方便很多,下面用Jq对这些控件的操作进行一 ...

随机推荐

  1. django开发个人简易Blog——数据模型

    提到数据模型,一定要说一下MVC,MVC框架是现代web开发中最流行的开发框架,它将数据与业务逻辑分开,减小了应用之间的高度耦合.个人非常喜欢MVC开发框架,除了具有上述特性,它使得web开发变得非常 ...

  2. 用python实现的百度新歌榜、热歌榜下载器

    首先声明,本工具仅仅为学习之用,不涉及版权问题,因为百度音乐里面的歌曲本身是可以下载的,而且现在百度也提供了”百度音乐播放器”,可以通过这个工具进行批量下载. 我当时做这个工具的时候,百度还没有提供” ...

  3. 风筝的C++随时记

    关于常量指针与指针常量 关于按位运算符(&.|.<<.>>)   关于常量指针和指针常量 两个概念经常混淆啊,这是在考中文四六级啊,所以我给这两个概念起个长一点的名字. ...

  4. 实战使用Axure设计App,使用WebStorm开发(6) – 迈向后端

    系列文章 实战使用Axure设计App,使用WebStorm开发(1) – 用Axure描述需求  实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目   实战使 ...

  5. 前端chrome浏览器调试总结

    引言 "工欲善其事,必先利其器" 恩,这句话我觉得说的特别有道理,举个例子来说吧,厉害的化妆师都有一套非常专业的刷子,散粉刷负责定妆,眼影刷负责打眼影,各司其职,有了专业的工具才能 ...

  6. 数据库MySQL开篇

    作为一名前端,后天方面的知识虽说不一定要精通后台但是对后台方面的知识有一定了解是非常必要的. 今天先说一些概念方面的,因本人才疏学浅,对于数据库这方面的自学相当于摸着石头过河,有什么写的不对的地方,希 ...

  7. struts2学习笔记之五:表单数据收集的几种方式

    方法一:struts2对ModelDriven模式的支持(模型驱动模式) Struts2可以采用类似于Struts1中的ActionForm方式收集数据,这样方式叫ModelDriven模式 Acti ...

  8. JS操作页面

    DOM操作 1 windows对象操作 属性(值或者子对象): opener:打开当前窗口的源窗口,如果当前窗口是首次启动浏览器打开的,则opener是null.可以利用这属性来关闭源窗口 方法(函数 ...

  9. Java 线程 — AbstractQueuedSynchronizer

    锁 锁就是一种状态,比如互斥锁:同一时间只能有一个线程拥有,可以使用一个整型值来标志当前的状态 0:表示没有现成占有锁 1:表示锁已经被占用 AbstractQueuedSynchronizer 实现 ...

  10. 初次使用IDEA的相关技巧

    前言:由于初次使用IDEA,所以很多配置都不是非常熟悉,经过一下午慢慢熟悉和同事的帮助,终于有所斩获,现在我把这个总结写出来,希望能够帮助初次使用的java工程师. 1:下载和安装 下载地址:http ...