主頁 > 軟體設計 > 如何使用引導程式5和jquery更改/切換按鈕內的圖示？

如何使用引導程式5和jquery更改/切換按鈕內的圖示？

2022-01-28 18:40:24 軟體設計

所以我想在點擊按鈕時更改按鈕內的圖示，所以第一個圖示是 <i ></i>，第二個圖示 onclick 應該是<i ></i>那么我該如何實作呢？
在我的按鈕單擊上，我希望從左側打開引導程式 offcanvas，因此我在我的 html 代碼中添加了 offcanvas 屬性
button_div是我的主要按鈕請忽略其余的 CSS
我只想知道如何在按鈕時更改/切換按鈕內的圖示被點擊

body{
    margin: 0;
    padding: 0;
}
@media screen and (min-width: 300px) and (max-width: 500px){
    .hero_image{
        height: 100vh !important;
        background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url('https://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg') !important;
        background-position: right !important;
        background-size: cover  !important;
        background-repeat: no-repeat !important;
    }
    .button_div{
        width:50px !important;
        height:50px !important;
        border-radius: 50%;
        background-color: #66ACDC;
        position: absolute;
        top: 0;
        right: 0;
        margin-top: 1em;
        display: block !important;
        border: none;
    }
    .nav_tabs{
        margin-top: 2em;
    }
    .hero_name{
        margin-left: auto !important;
    }
    .left_bar{
        width: 80% !important;
        padding-left: 1.5em !important;
        padding-right: 1.5em !important;  
    }
    .socials{
        width: 100%;
        
    }
}
@media screen and (min-width: 500px) and (max-width: 700px){
    .hero_image{
        height: 100vh !important;
        background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url('https://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg') !important;
        background-position: right !important;
        background-size: cover  !important;
        background-repeat: no-repeat !important;
    }
    .button_div{
        width:100px;
        height:100px;
        border-radius: 50%;
        background-color: #66ACDC;
        position: absolute;
        top: 0;
        right: 0;
        margin-top: 1em;
        display: block !important;
        border: none;
    }
    .nav_tabs{
        margin-top: 2em;
    }
    .hero_name{
        margin-left: 1em !important;
    }
}
@media screen and (min-width: 700px) and (max-width: 900px){
    .hero_image{
        height: 100vh !important;
        background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url('https://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg') !important;
        background-position: right !important;
        background-size: cover  !important;
        background-repeat: no-repeat !important;
    }
    .button_div{
        width:100px;
        height:100px;
        border-radius: 50%;
        background-color: #66ACDC;
        position: absolute;
        top: 0;
        right: 0;
        margin-top: 1em;
        display: block !important;
        border: none;
    }
    .nav_tabs{
        margin-top: 2em;
    }
    }
}
@media screen and (min-width: 900px) and (max-width: 920px){
    .hero_image{
        height: 100vh !important;
        background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url('https://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg') !important;
        background-position: right !important;
        background-size: cover  !important;
        background-repeat: no-repeat !important;
    }
    .button_div{
        width:100px;
        height:100px;
        border-radius: 50%;
        background-color: #66ACDC;
        position: absolute;
        top: 0;
        right: 0;
        margin-top: 1em;
        border: none;
        display: block !important;
    }
    .nav_tabs{
        margin-top: 2em;
    }
}
    /* .fa-times{
        display: none !important;
    }
    .button_div:active .fa-times{
        display: block !important;
    }
    .button_div:focus .fa-times{
        display: block !important;
    }
    .button_div:active .fa-bars{
        display: none !important;
    }
    .button_div:focus .fa-bars{
        display: none !important;
    } */
    .fas .fa-times{
        display: block !important;
    }
    .hero_name{
        display: flex;
        height: 100vh;
        align-items: center;
        margin-left: 3em;
        color: white;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: 4em;
    }
    .button_div{
        width:100px;
        height:100px;
        border-radius: 50%;
        background-color: #66ACDC;
        position: absolute;
        right: 0;
        margin-top: 1em;
        margin-right: 1em;
        display: none;
    }
    .left_bar{
        height: 100vh;
        background-color: #030C13;
        margin: 0;
    }
    .hero_image{
        position: relative;
        height: 100vh;
        background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url('https://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg');
        background-position: center;
        background-position: right;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .img-thumbnail{
        border: none !important;

    } 
    .profile_pic {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        margin-top: 3em;
        display: flex;
        justify-content: center;
        box-shadow: -1px 0px 0px 14px #262837
    }
    .name{
        display: flex;
        justify-content: center;
        margin-top: 1em;
        color: #FCFEFF;
    }
    .fb_div{
        position: relative;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #1D212B;
        padding: 1.5em;
        margin-left: 1em;
    }
    .tw_div{
        position: relative;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #1D212B;
        padding: 1.5em;

    }
    .lg_div{
        position: relative;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #1D212B;
        padding: 1.5em;
        margin-left: 1em;
    }
    .fa-twitter {
        font-size: 20px;
        left: 16px;
        position: absolute;
        top: 15px;
        color: white;
        cursor: pointer;
    }
    .fa-facebook-f {
        font-size: 20px;
        left: 19px;
        position: absolute;
        top: 15px;
        color: white;
        cursor: pointer;
    }
    .tw_div:hover{
        background-color: #377DB3;
    }
    .tw_div:hover .fa-twitter{
        color:white ;
    }
    .fb_div:hover{
        background-color: #377DB3;
    }
    .fb_div:hover .fa-facebook-f{
        color: white;
    }
    .lg_div:hover{
        background-color: #377DB3;
    }
    .lg_div:hover .fa-instagram{
        color: white;
    }
    .fa-instagram {
        font-size: 24px;
        left: 15px;
        position: absolute;
        top: 12px;
        color: white;
        cursor: pointer;
    }
    .fa-skype{
        font-size: 24px;
        left: 15px;
        position: absolute;
        top: 12px;
        color: white;
        cursor: pointer;
    }
    .fa-linkedin-in{
        font-size: 24px;
        left: 15px;
        position: absolute;
        top: 12px;
        color: white;
        cursor: pointer;
    }
    .sky_div{
        position: relative;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #1D212B;
        padding: 1.5em;
        margin-left: 1em;
    }
    .sky_div:hover{
        background-color:#377DB3 ;
    }
    .sky_div:hover .fa-skype{
        color: white;
    }
    .ld_div{
        position: relative;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #1D212B;
        padding: 1.5em;
        margin-left: 1em;
    }
    .ld_div:hover{
        background-color:#377DB3 ;
    }
    .ld_div:hover .fa-linkedin-in{
        color: white;
    }
    .nav_tabs{
        display: flex;
    }
    .nav-link{
        color: #92959D ;
        margin-bottom: 1em
    }
    .nav-link:hover{
        color: white;
    }
    .fa-home{
        color: #377DB3;
        font-size:1.5em;
    }
    .fa-user{
        color: #5F656F;
        font-size:1.5em;
    }
    .nav-link:hover .fa-user{
        color: #377DB3;
    }
    .fa-file{
        color: #5F656F;
        font-size:1.5em;
    }
    .nav-link:hover .fa-file{
        color: #377DB3;
    }
    .nav-link:hover .fa-list-alt{
        color: #377DB3;
    }
    .fa-list-alt{
        color:#5F656F ;
        font-size:1.5em;
    }
    .nav-link:hover .fa-server{
        color: #377DB3;
        
    }
    .fa-server{
        color: #5F656F;
        font-size:1.5em;
    }
    .nav-link:hover .fa-envelope{
        color: #377DB3;
    }
    .fa-envelope{
        color: #5F656F;
        font-size:1.5em;
    }
    .nav-item a{
        margin-left: 1em;
    }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Assignment 8</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/popper.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div class="container-fluid">
<button type="button" class="button_div toggleBtn" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample " data-toggle="collapse">
            <div class="icon_div">
              <span id='myIcon' ><i class="fas fa-bars"></i></span>
          </button>
            </div>
       
            </div>
     </div>
    </div>
</div>
</body>
</html>

我在下面發布我的代碼片段

uj5u.com熱心網友回復：

有兩種方法可以做到這一點，首先你可以用字體欄簡單地制作 2 個 css 類，當有類 .clicked 時切換到字體的其他內容真棒是時代

#myIcon i::before {
    content: "\f0c9";
}
#myIcon.clicked i::before {
    content: "\f00d";
}

然后使用 javascript 切換類 .clicked$('#myIcon').toggleClass('clicked');

或者只是做一個 var = 0; 并在值之間切換

let toggleVar = 0; // somewhere outside function on click

if(toggleVar === 0) {
    $('i').removeClass('fa-bars').addClass('fa-times');
    toggleVar = 1;
} else {
    $('i').removeClass('fa-times').addClass('fa-bars');
    toggleVar = 0;
}

uj5u.com熱心網友回復：

您只需要添加一個JavaScript function并處理按鈕onClick

function toggleIcon() {
  const child = document.getElementById('myIcon').childNodes[0];
  if (child.className === 'fas fa-bars')
    child.className = "fas fa-times";
  else
    child.className = "fas fa-bars";
}
body {
  margin: 0;
  padding: 0;
}

@media screen and (min-width: 300px) and (max-width: 500px) {
  .hero_image {
    height: 100vh !important;
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg') !important;
    background-position: right !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
  .button_div {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50%;
    background-color: #66ACDC;
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 1em;
    display: block !important;
    border: none;
  }
  .nav_tabs {
    margin-top: 2em;
  }
  .hero_name {
    margin-left: auto !important;
  }
  .left_bar {
    width: 80% !important;
    padding-left: 1.5em !important;
    padding-right: 1.5em !important;
  }
  .socials {
    width: 100%;
  }
}

@media screen and (min-width: 500px) and (max-width: 700px) {
  .hero_image {
    height: 100vh !important;
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg') !important;
    background-position: right !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
  .button_div {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #66ACDC;
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 1em;
    display: block !important;
    border: none;
  }
  .nav_tabs {
    margin-top: 2em;
  }
  .hero_name {
    margin-left: 1em !important;
  }
}

@media screen and (min-width: 700px) and (max-width: 900px) {
  .hero_image {
    height: 100vh !important;
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg') !important;
    background-position: right !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
  .button_div {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #66ACDC;
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 1em;
    display: block !important;
    border: none;
  }
  .nav_tabs {
    margin-top: 2em;
  }
}


}
@media screen and (min-width: 900px) and (max-width: 920px) {
  .hero_image {
    height: 100vh !important;
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg') !important;
    background-position: right !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
  
  .button_div {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #66ACDC;
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 1em;
    border: none;
    display: block !important;
  }
  
  .nav_tabs {
    margin-top: 2em;
  }
}

/* .fa-times{
        display: none !important;
    }
    .button_div:active .fa-times{
        display: block !important;
    }
    .button_div:focus .fa-times{
        display: block !important;
    }
    .button_div:active .fa-bars{
        display: none !important;
    }
    .button_div:focus .fa-bars{
        display: none !important;
    } */
.fas .fa-times {
  display: block !important;
}
.hero_name {
  display: flex;
  height: 100vh;
  align-items: center;
  margin-left: 3em;
  color: white;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 4em;
}
.button_div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #66ACDC;
  position: absolute;
  right: 0;
  margin-top: 1em;
  margin-right: 1em;
  display: none;
}
.left_bar {
  height: 100vh;
  background-color: #030C13;
  margin: 0;
}
.hero_image {
  position: relative;
  height: 100vh;
  background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg');
  background-position: center;
  background-position: right;
  background-size: cover;
  background-repeat: no-repeat;
}
.img-thumbnail {
  border: none !important;
}
.profile_pic {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-top: 3em;
  display: flex;
  justify-content: center;
  box-shadow: -1px 0px 0px 14px #262837
}
.name {
  display: flex;
  justify-content: center;
  margin-top: 1em;
  color: #FCFEFF;
}
.fb_div {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #1D212B;
  padding: 1.5em;
  margin-left: 1em;
}
.tw_div {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #1D212B;
  padding: 1.5em;
}
.lg_div {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #1D212B;
  padding: 1.5em;
  margin-left: 1em;
}
.fa-twitter {
  font-size: 20px;
  left: 16px;
  position: absolute;
  top: 15px;
  color: white;
  cursor: pointer;
}
.fa-facebook-f {
  font-size: 20px;
  left: 19px;
  position: absolute;
  top: 15px;
  color: white;
  cursor: pointer;
}
.tw_div:hover {
  background-color: #377DB3;
}
.tw_div:hover .fa-twitter {
  color: white;
}
.fb_div:hover {
  background-color: #377DB3;
}
.fb_div:hover .fa-facebook-f {
  color: white;
}
.lg_div:hover {
  background-color: #377DB3;
}
.lg_div:hover .fa-instagram {
  color: white;
}
.fa-instagram {
  font-size: 24px;
  left: 15px;
  position: absolute;
  top: 12px;
  color: white;
  cursor: pointer;
}
.fa-skype {
  font-size: 24px;
  left: 15px;
  position: absolute;
  top: 12px;
  color: white;
  cursor: pointer;
}
.fa-linkedin-in {
  font-size: 24px;
  left: 15px;
  position: absolute;
  top: 12px;
  color: white;
  cursor: pointer;
}
.sky_div {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #1D212B;
  padding: 1.5em;
  margin-left: 1em;
}
.sky_div:hover {
  background-color: #377DB3;
}
.sky_div:hover .fa-skype {
  color: white;
}
.ld_div {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #1D212B;
  padding: 1.5em;
  margin-left: 1em;
}
.ld_div:hover {
  background-color: #377DB3;
}
.ld_div:hover .fa-linkedin-in {
  color: white;
}
.nav_tabs {
  display: flex;
}
.nav-link {
  color: #92959D;
  margin-bottom: 1em
}
.nav-link:hover {
  color: white;
}
.fa-home {
  color: #377DB3;
  font-size: 1.5em;
}
.fa-user {
  color: #5F656F;
  font-size: 1.5em;
}
.nav-link:hover .fa-user {
  color: #377DB3;
}
.fa-file {
  color: #5F656F;
  font-size: 1.5em;
}
.nav-link:hover .fa-file {
  color: #377DB3;
}
.nav-link:hover .fa-list-alt {
  color: #377DB3;
}
.fa-list-alt {
  color: #5F656F;
  font-size: 1.5em;
}
.nav-link:hover .fa-server {
  color: #377DB3;
}
.fa-server {
  color: #5F656F;
  font-size: 1.5em;
}
.nav-link:hover .fa-envelope {
  color: #377DB3;
}
.fa-envelope {
  color: #5F656F;
  font-size: 1.5em;
}
.nav-item a {
  margin-left: 1em;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Assignment 8</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script type="text/javascript" src="js/popper.min.js"></script>
  <script type="text/javascript" src="js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
  <div class="container-fluid">
    <button onClick="toggleIcon()" type="button" class="button_div toggleBtn" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample " data-toggle="collapse">
            <div class="icon_div">
              <span id='myIcon' ><i class="fas fa-bars"></i></span>
          </button>
  </div>

  </div>
  </div>
  </div>
  </div>
</body>

</html>

uj5u.com熱心網友回復：

$(document).on('click', '.toggleBtn', function(){
   $('#myIcon').children().toggleClass('fa-times')
})

uj5u.com熱心網友回復：

這很簡單，因為你有 jQuery 標簽，我用它例如這樣：

下面的代碼定義了您要單擊的元素

$( ".toggleBtn" )

之后，您需要在所選元素上定義事件偵聽器，如下所示：

$( ".toggleBtn" ).click(function() {})

在函式體內，您首先需要使用要切換的類定義元素：

$( ".toggleBtn" ).click(function() {$("#myIcon")})

我會洗掉這個“跨度”元素，這樣你的 html 就會是這樣的：

<i id="myIcon" class="fas fa-bars"></i>

現在只需像這樣添加 jQuery 'toggleClass' 方法：

$( ".toggleBtn" ).click(function() {$("#myIcon").toggleClass("fa-bars fa-times")})

這應該可以解決您的問題。

轉到 jQuery 檔案.toggleClass()并在此處閱讀。

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/422389.html

標籤：

上一篇：如何檢查當前選定選項的值（使用Javascript）

下一篇：在javascript中，如何在一行中創建具有許多屬性的元素createElement()？[復制]

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • 面試突擊第一季，第二季，第三季

    第一季必考 https://www.bilibili.com/video/BV1FE411y79Y?from=search&seid=15921726601957489746 第二季分布式 https://www.bilibili.com/video/BV13f4y127ee/?spm_id_fro ......

    uj5u.com 2020-09-10 05:35:24 more
  • 第三單元作業總結

    1.前言 這應該是本學期最后一次寫作業總結了吧。總體來說，對作業的節奏也差不多掌握了，作業做起來的效率也更高了。雖然和之前的作業一樣，作業中都要用到新的知識，但是相比之前，更加懂得了如何利用工具以及資料。雖然之間卡過殼，但總體而言，這幾次作業還算完成的比較好。 2.作業程序總結 相比前兩個單元，此單 ......

    uj5u.com 2020-09-10 05:35:41 more
  • 北航OO（2020）第四單元博客作業暨課程總結博客

    北航OO（2020）第四單元博客作業暨課程總結博客 本單元作業的架構設計 在本單元中，由于UML圖具有比較清晰的樹形結構，因此我對其中需要進行查詢操作的元素進行了包裝，在樹的父節點中存盤所有孩子的參考。考慮到性能問題，我采用了快取機制，一次查詢后盡可能快取已經遍歷過的資訊，以減少遍歷次數。 本單元我 ......

    uj5u.com 2020-09-10 05:35:48 more
  • BUAA_OO_第四單元

    一、UML決議器設計 ? 先看下題目：第四單元實作一個基于JDK 8帶有效性檢查的UML(Unified Modeling Language)類圖，順序圖，狀態圖分析器 MyUmlInteraction，實際上我們要建立一個有向圖模型，UML中的物件（元素）可能與同級元素連接，也可與低級元素相連形成 ......

    uj5u.com 2020-09-10 05:35:54 more
  • 6.1邏輯運算子

    邏輯運算子 1. && 短路與 運算式1 && 運算式2 01.運算式1為true并且運算式2也為true 整體回傳為true 02.運算式1為false，將不會執行運算式2 整體回傳為false 03.只要有一個運算式為false 整體回傳為false 2. || 短路或 運算式1 || 運算式2 ......

    uj5u.com 2020-09-10 05:35:56 more
  • BUAAOO 第四單元 & 課程總結

    1. 第四單元：StarUml檔案決議 本單元采用了圖模型決議UML。 UML檔案可以抽象為圖、子圖、邊的邏輯結構。 在實作中，圖的節點包括類、介面、屬性，子圖包括狀態圖、順序圖等。 采用了三次遍歷UML元素的方法建圖，第一遍遍歷建點，第二、三次遍歷設定屬性、連邊，實作圖物件的初始化。這里借鑒了一些 ......

    uj5u.com 2020-09-10 05:36:06 more
  • 談談我對C# 多型的理解

    面向物件三要素：封裝、繼承、多型。 封裝和繼承，這兩個比較好理解，但要理解多型的話，可就稍微有點難度了。今天，我們就來講講多型的理解。 我們應該經常會看到面試題目：請談談對多型的理解。 其實呢，多型非常簡單，就一句話：呼叫同一種方法產生了不同的結果。 具體實作方式有三種。 一、多載 多載很簡單。 p ......

    uj5u.com 2020-09-10 05:36:09 more
  • Python 資料驅動工具：DDT

    背景 python 的unittest 沒有自帶資料驅動功能。 所以如果使用unittest，同時又想使用資料驅動，那么就可以使用DDT來完成。 DDT是 “Data-Driven Tests”的縮寫。 資料：http://ddt.readthedocs.io/en/latest/ 使用方法 dd. ......

    uj5u.com 2020-09-10 05:36:13 more
  • Python里面的xlrd模塊詳解

    那我就一下面積個問題對xlrd模塊進行學習一下： 1.什么是xlrd模塊？ 2.為什么使用xlrd模塊？ 3.怎樣使用xlrd模塊？ 1.什么是xlrd模塊？ ?python操作excel主要用到xlrd和xlwt這兩個庫，即xlrd是讀excel，xlwt是寫excel的庫。 今天就先來說一下xl ......

    uj5u.com 2020-09-10 05:36:28 more
  • 當我們創建HashMap時，底層到底做了什么？

    jdk1.7中的底層實作程序（底層基于陣列+鏈表） 在我們new HashMap()時，底層創建了默認長度為16的一維陣列Entry[ ] table。當我們呼叫map.put(key1,value1)方法向HashMap里添加資料的時候： 首先，呼叫key1所在類的hashCode()計算key1 ......

    uj5u.com 2020-09-10 05:36:38 more
最新发布
  • 【中介者設計模式詳解】C/Java/JS/Go/Python/TS不同語言實作

    * 中介者模式是一種行為型設計模式，它可以用來減少類之間的直接依賴關系，
    * 將物件之間的通信封裝到一個中介者物件中，從而使得各個物件之間的關系更加松散。
    * 在中介者模式中，物件之間不再直接相互互動，而是通過中介者來中轉訊息。 ......

    uj5u.com 2023-04-20 08:20:47 more
  • 露天煤礦現場調研和交流案例分享

    他們集團的資訊化公司及研究院在一個礦區正在做智能礦山的統一平臺的 試點，專案投資大概1億，包括了礦山的各方面的內容，顯示得我們這次交流有點多余。他們2年前開始做智能礦山的規劃，有很多煤礦行業專家的加持，他們的描述是非常完美，但是去年底應該上線的平臺，現在還沒有看到影子。他們確實有很多場景需求，但是被... ......

    uj5u.com 2023-04-20 08:20:25 more
  • 《社區人員管理》實戰案例設計&個人案例分享

    設計是一個讓人夢想成真程序，開始編碼、測驗、除錯之前進行需求分析和架構設計，才能保證關鍵方面都做正確 ......

    uj5u.com 2023-04-20 08:20:17 more
  • 軟體架構生態化-多角色交付的探索實踐

    作為一個技術架構師，不僅僅要緊跟行業技術趨勢，還要結合研發團隊現狀及痛點，探索新的交付方案。在日常中，你是否遇到如下問題 “ 業務需求排期長研發是瓶頸；非研發角色感受不到研發技改提效的變化；引入ISV 團隊又擔心質量和安全，培訓周期長“等等，基于此我們探索了一種新的技術體系及交付方案來解決如上問題。 ......

    uj5u.com 2023-04-20 08:20:10 more
  • 【中介者設計模式詳解】C/Java/JS/Go/Python/TS不同語言實作

    * 中介者模式是一種行為型設計模式，它可以用來減少類之間的直接依賴關系，
    * 將物件之間的通信封裝到一個中介者物件中，從而使得各個物件之間的關系更加松散。
    * 在中介者模式中，物件之間不再直接相互互動，而是通過中介者來中轉訊息。 ......

    uj5u.com 2023-04-20 08:19:44 more
  • 露天煤礦現場調研和交流案例分享

    他們集團的資訊化公司及研究院在一個礦區正在做智能礦山的統一平臺的 試點，專案投資大概1億，包括了礦山的各方面的內容，顯示得我們這次交流有點多余。他們2年前開始做智能礦山的規劃，有很多煤礦行業專家的加持，他們的描述是非常完美，但是去年底應該上線的平臺，現在還沒有看到影子。他們確實有很多場景需求，但是被... ......

    uj5u.com 2023-04-20 08:19:07 more
  • 《社區人員管理》實戰案例設計&個人案例分享

    設計是一個讓人夢想成真程序，開始編碼、測驗、除錯之前進行需求分析和架構設計，才能保證關鍵方面都做正確 ......

    uj5u.com 2023-04-20 08:18:57 more
  • 軟體架構生態化-多角色交付的探索實踐

    作為一個技術架構師，不僅僅要緊跟行業技術趨勢，還要結合研發團隊現狀及痛點，探索新的交付方案。在日常中，你是否遇到如下問題 “ 業務需求排期長研發是瓶頸；非研發角色感受不到研發技改提效的變化；引入ISV 團隊又擔心質量和安全，培訓周期長“等等，基于此我們探索了一種新的技術體系及交付方案來解決如上問題。 ......

    uj5u.com 2023-04-20 08:18:49 more
  • 05單件模式

    #經典的單件模式 public class Singleton { private static Singleton uniqueInstance; //一個靜態變數持有Singleton類的唯一實體。 // 其他有用的實體變數寫在這里 //構造器宣告為私有，只有Singleton可以實體化這個類! ......

    uj5u.com 2023-04-19 08:42:51 more
  • 【架構與設計】常見微服務分層架構的區別和落地實踐

    軟體工程的方方面面都遵循一個最基本的道理：沒有銀彈，架構分層模型更是如此，每一種都有各自優缺點，所以請根據不同的業務場景，并遵循簡單、可演進這兩個重要的架構原則選擇合適的架構分層模型即可。 ......

    uj5u.com 2023-04-19 08:42:41 more

Copyright © 2010-2020 有解無憂