jQuery(實例)

来源:https://www.cnblogs.com/zmdComeOn/archive/2019/08/12/11340095.html
-Advertisement-
Play Games

1.開關燈效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .hide{ display: none; } </style> </head> <body> <i ...


1.開關燈效果

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
    </style>
</head>
<body>
    <input id="i1" type="button" value="開關" />
    <div class="c1 hide">假裝現在有效果了</div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $('#i1').click(function () {
            /* 第一種方法
            if($('.c1').hasClass('hide')){
                $('.c1').removeClass('hide')
            }else {
                $('.c1').addClass('hide')
            }   */
            //jquery實現方法
            $('.c1').toggleClass('hide')
        })
    </script>
</body>
</html>
View Code

2.模態對話框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .shade{
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,.6) ;
            z-index: 20;
        }
        .modal{
            position: fixed;
            left: 50%;
            top: 50%;
            height: 300px;
            width: 400px;
            margin-top: -150px;
            margin-left: -200px;
            z-index: 30;
            border: 1px solid #ddd;
            background-color: white;
        }
        .hide{
            display: none;
        }
        .modal form {
            position: fixed;
            left: 50%;
            top: 50%;
            height: 200px;
            width: 229px;
            border: 1px;
            margin-left: -115px;
            margin-top: -100px;
        }
        .modal form p {
            float: right;
            margin-top: 12px;
        }
        .modal form span {
            float: right;
            display: inline-block;
            height: 18px;
            width: 170px;
            background-color: #FFEBEB;
            text-align: center;
            border: 1px solid #ffbdbe;
            color: #e4393c;
            font-size: 14px;
            visibility: hidden;
        }
        .modal form [type="button"] {
            position: absolute;
            bottom: -30px;
            left: 115px;
        }
        .modal form [value="提交"]{
            left: 50px;
        }
    </style>
</head>
<body>
    <div style="width: 300px; margin: 0 auto">
        <input type="button" value="添加主機" onclick="return Add();" />
        <table style="border: 2px solid #F5F5F5; width: 300px;">
            <thead>
                <tr>
                    <th >主機名</th>
                    <th >IP</th>
                    <th >埠</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td target="host">c1.com</td>
                    <td target="ip">1.1.1.1</td>
                    <td target="port">8888</td>
                    <td onclick="Edit(this);">Edit</td>
                </tr>
               <tr>
                    <td target="host">c2.com</td>
                    <td target="ip">1.1.1.1</td>
                    <td target="port">8888</td>
                    <td onclick="Edit(this);">Edit</td>
                </tr>
                <tr>
                    <td target="host">c3.com</td>
                    <td target="ip">1.1.1.1</td>
                    <td target="port">8888</td>
                    <td onclick="Edit(this);">Edit</td>
                </tr>
                <tr>
                    <td target="host">.com</td>
                    <td target="ip">1.1.1.1</td>
                    <td target="port">8888</td>
                    <td onclick="Edit(this);">Edit</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="shade hide"></div>
    <div  class="modal hide">
        <form action="" method="get">
            <p>主機名:<input type="text" id="host" name="host"><br><span></span></p>
            <p>IP地址:<input type="text" id='ip' name="ip"><br><span></span></p>
            <p>埠號:<input type="text" id='port' name="port"><br><span></span><br></p>
            <input type="button" value="提交" onclick="return SubmitForm();">
            <input type="button" value="取消" onclick="HideModal();">
        </form>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $(function () {
           $("tr:even").css("background-color","#f5f5f5");
        });
        function Edit(ths) {
            $(".shade,.modal").removeClass("hide");
            prevList = $(ths).prevAll();
            prevList.each(function () {
                var text = $(this).text();
                var target = $(this).attr("target");
                $("#"+target).val(text);
            });
        }
        function HideModal() {
            $(".shade,.modal").addClass("hide");
            $(".modal").find("input[type='text']").val("");
            Addd = false;
        }
        function SubmitForm() {
            var flag = Detection();

            try {
                    if (Addd && flag){
                    $("tbody").append($("tr").last().clone());
                    $(".modal").find("input[type='text']").each(function () {
                        var value = $(this).val();
                        var name = $(this).attr("name");
                        ($("tr").last().children()).each(function () {
                            if ($(this).attr("target") == name){
                                $(this).text(value);
                                return
                            }
                                }
                        )});
                    Addd = false;
                    HideModal();
                    return false;
                }
            }catch (e){}


            if (flag){
                $(".modal").find("input[type='text']").each(function () {
                    var value = $(this).val();
                    var name = $(this).attr("name");
                    $(prevList).each(function () {
                        if ($(this).attr("target") == name){
                            $(this).text(value);
                            return
                        }
                            }
                    )});
                    $(".modal,.shade").addClass("hide");
                    HideModal();
                }
            return flag;
            }


        function Detection() {
            var flag = true;
            $(".modal").find("input[type='text']").each(function () {
                var value = $(this).val();
                if (value.length == 0){
                    $(this).next().next().css("visibility","visible").text("親，不能為空");
                    flag = false;
                    return false;
                }else {
                    $(this).next().next().css("visibility","hidden").text("");
                }

                if ($(this).attr('name') == "host"){
                    var r = /(\.com)$/;
                    if (r.test(value) == false){
                        $(this).next().next().css("visibility","visible").text("主機名必須以.com結尾");
                        flag = false;
                        return false;
                }
                }else if ($(this).attr('name') == "ip"){
                    var r2 = /^(([0-2]?[0-9][0-9]?)\.){3}([0-2]?[0-9][0-9]?)$/;
                    if (r2.test(value) == false){
                        $(this).next().next().css("visibility","visible").text("ip 地址格式有誤");
                        flag = false;
                        return false;
                    }
                }else if ($(this).attr('name') == "port"){
                    var r3 = /^([0-9]{1,5})$/;
                    if ((r3.test(value) == false) || (value > 65535)){
                        $(this).next().next().css("visibility","visible").text("埠必須為0-65535");
                        flag = false;
                        return false;
                    }
                }else {
                    $(this).next().next().css("visibility","hidden").text("");
                }
        });
        return flag;
        }

        function Add() {
            Addd = true;
            $(".shade,.modal").removeClass("hide");
        }
    </script>
</body>
</html>
View Code

3.點擊菜單顯示對應的內容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            height: 38px;
            background-color: #eeeeee;
            line-height: 38px;
        }
        .active{
            background-color: brown;
        }
        .menu .menu-item{
            float: left;
            border-right: 1px solid red;
            padding: 0 5px;
            cursor: pointer;
        }
        .content{
            min-height: 100px;
            border: 1px solid #eeeeee;
        }
    </style>
</head>
<body>

    <div style="width: 700px;margin:0 auto">

        <div class="menu">
            <div  class="menu-item active" a="1">菜單一</div>
            <div  class="menu-item" a="2">菜單二</div>
            <div  class="menu-item" a="3">菜單三</div>
        </div>
        <div class="content">
            <div b="1">內容一</div>
            <div class="hide"  b="2">內容二</div>
            <div class="hide" b="3">內容三</div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.menu-item').click(function () {
            //點擊menu-item，加上active，同時兄弟標簽去掉active
            $(this).addClass('active').siblings().removeClass('active');
            //獲取a的屬性值2
            var target = $(this).attr('a');
            $('.content').children('[b="'+target+'"]').removeClass('hide').siblings().addClass('hide');
            // '[b="'+target+'"]'  字元串的拼接，找到content兒子裡面屬性等於2的，刪除掉hide，同時兄弟加上hide
        })


    </script>
</body>
</html>
View Code 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .menu{
            height: 38px;
            background-color: #eeeeee;
            line-height: 38px;
        }
        .active{
            background-color: brown;
        }
        .menu .menu-item{
            float: left;
            border-right: 1px solid red;
            padding: 0 5px;
            cursor: pointer;
        }
        .content{
            min-height: 100px;
            border: 1px solid #eeeeee;
        }
    </style>
</head>
<body>

    <div style="width: 700px;margin:0 auto">

        <div class="menu">
            <div  class="menu-item active" a="1">菜單一</div>
            <div  class="menu-item" a="2">菜單二</div>
            <div  class="menu-item" a="3">菜單三</div>
        </div>
        <div class="content">
            <div b="1">內容一</div>
            <div class="hide"  b="2">內容二</div>
            <div class="hide" b="3">內容三</div>
        </div>
    </div>
    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.menu-item').click(function () {
            $(this).addClass('active').siblings().removeClass('active');
            //eq($(this).index())是獲取menu-item的索引
            $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');
        })
    </script>
</body>
</html>

索引菜單欄.html
通過索引實現菜單更方便

4.編輯功能

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        .edit-mode{
            background-color: #b3b3b3;
            padding: 8px;
            text-decoration: none;
            color: white;
        }
        .editing{
            background-color: #f0ad4e;
        }
    </style>
</head>
<body>

    <div style="padding: 20px">
        <input type="button" onclick="CheckAll('#edit_mode', '#tb1');" value="全選" />
        <input type="button" onclick="CheckReverse('#edit_mode', '#tb1');" value="反選" />
        <input type="button" onclick="CheckCancel('#edit_mode', '#tb1');" value="取消" />

        <a id="edit_mode" class="edit-mode" href="javascript:void(0);"  onclick="EditMode(this, '#tb1');">進入編輯模式</a>

    </div>
    <table border="1">
        <thead>
        <tr>
            <th>選擇</th>
            <th>主機名</th>
            <th>埠</th>
            <th>狀態</th>
        </tr>
        </thead>
        <tbody id="tb1">
            <tr>
                <td><input type="checkbox" /></td>
                <td edit="true">v1</td>
                <td>v11</td>
                <td edit="true" edit-type="select" sel-val="1" global-key="STATUS">線上</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td edit="true">v1</td>
                <td>v11</td>
                <td edit="true" edit-type="select" sel-val="2" global-key="STATUS">下線</td>
            </tr>
            <tr>
                <td><input type="checkbox" /></td>
                <td edit="true">v1</td>
                <td>v11</td>
                <td edit="true" edit-type="select" sel-val="1" global-key="STATUS">線上</td>
            </tr>
        </tbody>
    </table>

    <script type="text/javascript" src="jquery-1.12.4.js"></script>
    <script>
        /*
         監聽是否已經按下control鍵
         */
        window.globalCtrlKeyPress = false;

        window.onkeydown = function(event){
            if(event && event.keyCode == 17){
                window.globalCtrlKeyPress = true;
            }
        };
        window.onkeyup = function(event){
            if(event && event.keyCode == 17){
                window.globalCtrlKeyPress = false;
            }
        };

        /*
         按下Control，聯動表格中正在編輯的select
         */
        function MultiSelect(ths){
            if(window.globalCtrlKeyPress){
                var index = $(ths).parent().index();
                var value = $(ths).val();
                $(ths).parent().parent().nextAll().find("td input[type='checkbox']:checked").each(function(){
                    $(this).parent().parent().children().eq(index).children().val(value);
                });
            }
        }
    </script>
    <script type="text/javascript">

$(function(){
    BindSingleCheck('#edit_mode', '#tb1');
});

function BindSingleCheck(mode, tb){

    $(tb).find(':checkbox').bind('click', function(){
        var $tr = $(this).parent().parent();
        if($(mode).hasClass('editing')){
            if($(this).prop('checked')){
                RowIntoEdit($tr);
            }else{
                RowOutEdit($tr);
            }
        }
    });
}

function CreateSelect(attrs,csses,option_dict,item_key,item_value,current_val){
    var sel= document.createElement('select');
    $.each(attrs,function(k,v){
        $(sel).attr(k,v);
    });
    $.each(csses,function(k,v){
        $(sel).css(k,v);
    });
    $.each(option_dict,function(k,v){
        var opt1=document.createElement('option');
        var sel_text = v[item_value];
        var sel_value = v[item_key];

        if(sel_value==current_val){
            $(opt1).text(sel_text).attr('value', sel_value).attr('text', sel_text).attr('selected',true).appendTo($(sel));
        }else{
            $(opt1).text(sel_text).attr('value', sel_value).attr('text', sel_text).appendTo($(sel));
        }
    });
    return sel;
}

STATUS = [
    {'id': 1, 'value': "線上"},
    {'id': 2, 'value': "下線"}
];

BUSINESS = [
    {'id': 1, 'value': "車上會"},
    {'id': 2, 'value': "二手車"}
];

function RowIntoEdit($tr){
    $tr.children().each(function(){
        if($(this).attr('edit') == "true"){
            if($(this).attr('edit-type') == "select"){
                var select_val = $(this).attr('sel-val');
                var global_key = $(this).attr('global-key');
                var selelct_tag = CreateSelect({"onchange": "MultiSelect(this);"}, {}, window[global_key], 'id', 'value', select_val);
                $(this).html(selelct_tag);
            }else{
                var orgin_value = $(this).text();
                var temp = "<input value='"+ orgin_value+"' />";
                $(this).html(temp);
            }

        }
    });
}

function RowOutEdit($tr){
    $tr.children().each(function(){
        if($(this).attr('edit') == "true"){
            if($(this).attr('edit-type') == "select"){
                var new_val = $(this).children(':first').val();
                var new_text = $(this).children(':first').find("option[value='"+new_val+"']").text();
                $(this).attr('sel-val', new_val);
                $(this).text(new_text);
            }else{
                var orgin_value = $(this).children().first().val();
                $(this).text(orgin_value);
            }

        }
    });
}

function CheckAll(mode, tb){
    if($(mode).hasClass('editing')){

        $(tb).children().each(function(){

            var tr = $(this);
            var check_box = tr.children().first().find(':checkbox');
            if(check_box.prop('checked')){

            }else{
                check_box.prop('checked',true);

                RowIntoEdit(tr);
            }
        });

    }else{

        $(tb).find(':checkbox').prop('checked', true);
    }
}

function CheckReverse(mode, tb){

    if($(mode).hasClass('editing')){

        $(tb).children().each(function(){
            var tr = $(this);
            var check_box = tr.children().first().find(':checkbox');
            if(check_box.prop('checked')){
                check_box.prop('checked',false);
                RowOutEdit(tr);
            }else{
                check_box.prop('checked',true);
                RowIntoEdit(tr);
            }
        });


    }else{

        $(tb).children().each(function(){
            var tr = $(this);
            var check_box = tr.children().first().find(':checkbox');
            if(check_box.prop('checked')){
                check_box.prop('checked',false);
            }else{
                check_box.prop('checked',true);
            }
        });
    }
}

function CheckCancel(mode, tb){
    if($(mode).hasClass('editing')){
        $(tb).children().each(function(){
            var tr = $(this);
            var check_box = tr.children().first().find(':checkbox');
            if(check_box.prop('checked')){
                check_box.prop('checked',false);
                RowOutEdit(tr);

            }else{

            }
        });

    }else{
        $(tb).find(':checkbox').prop('checked', false);
    }
}

function EditMode(ths, tb){
    if($(ths).hasClass('editing')){
        $(ths).removeClass('editing');
        $(tb).children().each(function(){
            var tr = $(this);
            var check_box = tr.children().first().find(':checkbox');
            if(check_box.prop('checked')){
                RowOutEdit(tr);
            }else{

            }
        });

    }else{

        $(ths).addClass('editing');
        $(tb).children().each(function(){
            var tr = $(this);
            var check_box = tr.children().first().find(':checkbox');
            if(check_box.prop('checked')){
                RowIntoEdit(tr);
            }else{

            }
        });

    }
}


    </script>

</body>
</html>
View Code

5.模態對話框添加刪除功能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .hide{
            display: none;
        }
        .modal{
            position: fixed;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 400px;
            margin-left: -250px;
            margin-top: -250px;
            background-color: #eeeeee;
            z-index: 10;
        }
        .shadow{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            opacity: 0.6;
            background-color: black;
            z-index: 9;
        }
    </style>
</head>
<body>
    <a onclick="addElement();">添加</a>

    <table border="1" id="tb">
        <tr>
            <td target="hostname">1.1.1.11</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">編輯</a> | <a class="del">刪除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.12</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">編輯</a> | <a class="del">刪除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.13</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">編輯</a> | <a class="del">刪除</a>
            </td>
        </tr>
        <tr>
            <td target="hostname">1.1.1.14</td>
            <td target="port">80</td>
            <td target="ip">80</td>
            <td>
                <a class="edit">編輯</a> | <a class="del">刪除</a>
            </td>

        </tr>
    </table>

    <div class="modal hide">
        <div>
            <input name="hostname" type="text"  />
            <input name="port" type="text" />
            <input name="ip" type="text" />
        </div>

        <div>
            <input type="button" value="取消" onclick="cancelModal();" />
            <input type="button" value="確定" onclick="confirmModal();" />
        </div>
    </div>

    <div class="shadow hide"></div>

    <script src="jquery-1.12.4.js"></script>
    <script>

        $('.del').click(function () {
            $(this).parent().parent().remove();
        });

        function  confirmModal() {

            var tr = document.createElement('tr');
            var td1 = document.createElement('td');
            td1.innerHTML = "11.11.11.11";
            var td2 = document.createElement('td');
            td2.innerHTML = "8001";

            $(tr).append(td1);
            $(tr).append(td2);

            $('#tb').append(tr);

            $(".modal,.shadow").addClass('hide');
//            $('.modal input[type="text"]').each(function () {
//                // var temp = "<td>..."
//
//
//
//            })
        }

        function  addElement() {
            $(".modal,.shadow").removeClass('hide');
        }
        function cancelModal() {
            $(".modal,.shadow").addClass('hide');
            $('.modal input[type="text"]').val("");
        }

        $('.edit').click(function(){
            $(".modal,.shadow").removeClass('hide');
            // this
            var tds = $(this).parent().prevAll();
            tds.each(function () {
                // 獲取td的target屬性值
                var n = $(this).attr('target');
                // 獲取td中的內容
                var text = $(this).text();
                var a1 = '.modal input[name="';
                var a2 = '"]';
                var temp = a1 + n + a2;
                $(temp).val(text);
            });


//            var port = $(tds[0]).text();
//            var host = $(tds[1]).text();
//
//            $('.modal input[name="hostname"]').val(host);
//            $('.modal input[name="port"]').val(port);
            // 迴圈獲取tds中內容
            // 獲取 <td>內容</td> 獲取中間的內容
            // 賦值給input標簽中的value

        });
    </script>
</body>
</html>
View Code

6.點贊

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .container{
            padding: 50px;
            border: 1px solid #dddddd;
        }
        .item{
            position: relative;
            width: 30px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">
            <span>贊</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span>贊</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span>贊</span>
        </div>
    </div>
    <div class="container">
        <div class="item">
            <span>贊</span>
        </div>
    </div>

    <script src="jquery-1.12.4.js"></script>
    <script>
        $('.item').click(function () {
            addFavor(this);
        })
        function addFavor(self) {
            var fontSize = 15;
            var top = 0;
            var right= 0;
            var opacity = 1;

            var tag = document.createElement('span');
            $(tag).text('+1');
            $(tag).css('color','green');
            $(tag).css('position','absolute');
            $(tag).css('fontSize',fontSize + 'px');
            $(tag).css('right',right + 'px');
            $(tag).css('top',top + 'px');
            $(tag).css('opacity',opacity + 'px');
            $(self).append(tag);

            var obj = setInterval(function () {
                fontSize = fontSize + 10;
                top = top - 10;
                right = right - 10;
                opacity = opacity - 0.1;

                $(tag).css('fontSize',fontSize + 'px');
                $(tag).css('right',right + 'px');
                $(tag).css('top',top + 'px');
                $(tag).css('opacity',opacity);
                if(opacity < 0 ){
                    clearInterval(obj);
                    $(tag).remove();
                }

            },40);
        }
    </script>
</body>
</html>
View Code

7.隨滑鼠移動的框

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div style="border: 1px solid #ddd;width: 600px;position: absolute;">
        <div id="title" style="background-color: black;height: 40px;"></div>
        <div style="height: 300px;"></div>
    </div>
<script type="text/javascript" src="jquery-1.12.4.js"></script>
<script>
    $(function(){
        $('#title').mouseover(function(){
            $(this).css('cursor','move');
        });
        $("#title").mousedown(function(e){
            //console.log($(this).offset());
            var _event = e || window.event;
            var ord_x = _event.clientX;
            var ord_y = _event.clientY;

            var parent_left = $(this).parent().offset().left;
            var parent_top = $(this).parent().offset().top;

            $('#title').on('mousemove', function(e){
                var _new_event = e || window.event;
                var new_x = _new_event.clientX;
                var new_y = _new_event.clientY;

                var x = parent_left + (new_x - ord_x);
                var y = parent_top + (new_y - ord_y);

                $(this).parent().css('left',x+'px');
                $(this).parent().css('top',y+'px');

            })
        });
        $("#title").mouseup(function(){
            $("#title").off('mousemove');
        });
    })
</script>
</body>
</html>
View Code

8.表單驗證

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .error{
            color: red;
        }
    </style>
</head>
<body>
    <form id="f1" action="s5.html" method="POST">
        <div><input name="n1" tex = "用戶名" type="text" /></div>
        <div><input name="n2" tex = "密碼" type="password" /></div>
        <div><input name="n3" tex = "郵箱" type="text" /></div>
        <div><input name="
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 2019.8.12
    一. javascript三種引入方式 head 頭部引入<script type="text/javascript"></script> 行內引入<p ....="javascript"></p> 例如 <a href="javascript:confim('。。。。。。。');"></a> <p ...
  • JavaScript之時間對象Date
    寫在前面：時間是物理學七大常量之一。生活中記錄時間有兩種方式（或者說有兩種計時系統）：GMT（格林尼治時間）和UTC（協調世界時間）。 一 創建Date對象 JS中的Date對象只能通過new關鍵字創建。 var now = new Date(); 需要註意的是：若將Date()作為常規函數調用（即 ...
  • HTML發展歷程
    HTML是超文本標記語言的縮寫，不同於C或JAVA等編程語言，HTML由標簽組成。通過標簽可以在網頁中插入文字、圖片、鏈接、音頻、視頻等元素，進而描述網頁。和Windows一樣，隨著技術的發展，HTML經歷了多次版本更新。 HTML1.0：1993年6月，HTML作為互聯網工程工作小組（IETF）工 ...
  • 基於 Lerna 管理 packages 的 Monorepo 項目最佳實踐
    對於維護過多個package的同學來說，都會遇到一個選擇題，這些package是放在一個倉庫里維護還是放在多個倉庫里單獨維護，本文通過一個示例講述瞭如何基於Lerna管理多個package，並和其它工具整合，打造高效、完美的工作流，最終形成一個最佳實踐 ...
  • vue.js（4）--字元串跑馬燈
    製作一個字元串的跑馬燈效果 （1）實例代碼 （2）摘要 實現案例的基本思路是利用substring截取字元串再進行拼接，然後使用定時器來達到動態的效果。 箭頭函數可以解決this的指向問題，箭頭函數內部的this相對於外部this的指向。 需要訪問data中數據時，一定要使用this訪問，比如thi ...
  • JavaScript之數學對象Math
    寫在前面：Javascript 中Math和其他對象不同，它具有數學常數和函數的屬性和方法。因為它的屬性是數學常數，所以不能被改變（可以進行賦值操作，但最後值不變）。 Math的方法就是普通函數，調用他們直接用Math.method即可，而無需使用new關鍵字創造它的實例。JS中的其他對象也有類似這 ...
  • JS遞歸及二叉搜索樹的移除節點
    1遞歸含義：在某時某刻某個條件下調用包含自己的函數 2:註意點：⑴遞歸過程中一定要加限制條件，要不然會陷入死迴圈： 死迴圈eg： 正常調用： ⑵遞歸有個過程，不是一步到位的，這一點尤其重要，因為在學習JS數據結構與演算法中的二叉搜索樹的移除代碼會至關重要，不懂遞歸過程的話很容易看不懂移除代碼 過程如下 ...
  • 19.8.12 第一天的學習
    一...........三種引入.................. 1.內部引入 <script type="text/javascript"> </script> 2.行內引入 <a href="javascript:confirm('你確定要報名嗎');" 報名</a> <p onclick= ...
一周排行
    -Advertisement-
    Play Games
  • .NET 6 Entity Framework Core Db First（1） 創建模型
    .Net8.0 Blazor Hybird 桌面端 (WPF/Winform) 實測可以完整運行在 win7sp1/win10/win11. 如果用其他工具打包,還可以運行在mac/linux下, 傳送門BlazorHybrid 發佈為無依賴包方式 安裝 WebView2Runtime 1.57 M ...
  • 資料庫升級PostgreSql+Garnet
    目錄前言PostgreSql安裝測試額外Nuget安裝Person.cs模擬運行Navicate連postgresql解決方案Garnet為什麼要選擇Garnet而不是RedisRedis不再開源Windows版的Redis是由微軟維護的Windows Redis版本老舊，後續可能不再更新Garne ...
  • 如何基於surging架設流媒體視頻推流（視頻講解）
    C#TMS系統代碼-聯表報表學習 領導被裁了之後很快就有人上任了，幾乎是無縫銜接，很難讓我不想到這早就決定好了。我的職責沒有任何變化。感受下來這個系統封裝程度很高，我只要會調用方法就行。這個系統交付之後不會有太多問題，更多應該是做小需求，有大的開發任務應該也是第二期的事，嗯？怎麼感覺我變成運維了？而 ...
  • EAV模型（實體-屬性-值）的設計和低代碼的處理方案（2）--數據的查詢處理
    我在隨筆《EAV模型（實體-屬性-值）的設計和低代碼的處理方案（1）》中介紹了一些基本的EAV模型設計知識和基於Winform場景下低代碼（或者說無代碼）的一些實現思路，在本篇隨筆中，我們來分析一下這種針對通用業務，且只需定義就能構建業務模塊存儲和界面的解決方案，其中的數據查詢處理的操作。 ...
  • C# 程式集、模塊和類型概念及關係
    對某個遠程伺服器啟用和設置NTP服務(Windows系統) 打開註冊表 HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\W32Time\TimeProviders\NtpServer 將 Enabled 的值設置為 1，這將啟用NTP伺服器功 ...
  • Django信號與擴展：深入理解與實踐
    title: Django信號與擴展：深入理解與實踐 date: 2024/5/15 22:40:52 updated: 2024/5/15 22:40:52 categories: 後端開發 tags: Django 信號 松耦合 觀察者 擴展 安全 性能 第一部分：Django信號基礎 Djan ...
  • Django3.2安裝源碼xadmin2步驟以及遇到的問題
    使用xadmin2遇到的問題&解決 環境配置： 使用的模塊版本： 關聯的包 Django 3.2.15 mysqlclient 2.2.4 xadmin 2.0.1 django-crispy-forms >= 1.6.0 django-import-export >= 0.5.1 django-r ...
  • 原創->CommonsCollections1-DefaultMap鏈
    今天我打算整點兒不一樣的內容，通過之前學習的TransformerMap和LazyMap鏈，想搞點不一樣的，所以我關註了另外一條鏈DefaultedMap鏈，主要調用鏈為： 調用鏈詳細描述： ObjectInputStream.readObject() DefaultedMap.readObject ...
  • 05-應用級開發者 AI 時代破局點
    後端應用級開發者該如何擁抱 AI GC？就是在這樣的一個大的浪潮下，我們的傳統的應用級開發者。我們該如何選擇職業或者是如何去快速轉型，跟上這樣的一個行業的一個浪潮? 0 AI金字塔模型 越往上它的整個難度就是職業機會也好，或者說是整個的這個運作也好,它的難度會越大,然後越往下機會就會越多,所以這是一 ...
  • Java面試題：讓依賴註入變得簡單，面對@Autowired和@Resource，該如何選擇？
    @Autowired是Spring框架提供的註解，@Resource是Java EE 5規範提供的註解。 @Autowired預設按照類型自動裝配，而@Resource預設按照名稱自動裝配。 @Autowired支持@Qualifier註解來指定裝配哪一個具有相同類型的bean，而@Resourc... ...
所有分類