将jQuery转换为原始JavaScript的逐步指南

发布时间：2020-02-26 22:15:20 作者：乐痴灬青尢阅读量：2787

我经常在这里看到人们要求处理jQuery，例如将其转换为原始JavaScript。
因此，我认为我将提供一个使用示例，比使用标准标准转换教程复杂得多的示例，该示例使用jQuery将代码从jQuery转换为原始JavaScript。本指南与事件处理程序一起使用自定义背景，这些背景会更改以匹配不同的选项卡颜色，并且也处理动画。
的原始代码是从上一个codePen标签面板，作为从中来执行转换的起点。

初始代码

这是我们开始使用的HTML，CSS和JavaScript：

选项卡和内容面板的HTML是：

<div class="tabbedPanels">
  <ul class="tabs">
    <li><a href="#panel1" class = "tabOne">About</a></li>
    <li><a href="#panel2" class = "tabTwo inactive">Details</a></li>
    <li><a href="#panel3" class = "tabThree inactive">Contact Us</a></li>
  </ul>
  <div class="panelContainer">
    <div class="panel" id="panel1">
      <h1 class = "panelContent">About</h1>
      <p class = "panelContent"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea illum magni error enim labore facere dolore obcaecati voluptate inventore nemo. Dolorum ipsam fuga nesciunt eos incidunt eum beatae quisquam enim.</span><span>Veniam velit quibusdam pariatur et autem veritatis nesciunt minima! Voluptas impedit voluptates amet dolores debitis labore asperiores quis libero est magnam voluptatum alias praesentium magni deserunt beatae optio quam itaque!</span></p>
      
    </div>
        <div class="panel" id="panel2">
      <h1 class = "panelContent">Details</h1>
      <p class = "panelContent"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea illum magni error enim labore facere dolore obcaecati voluptate inventore nemo. Dolorum ipsam fuga nesciunt eos incidunt eum beatae quisquam enim.</span><span>Veniam velit quibusdam pariatur et autem veritatis nesciunt minima! Voluptas impedit voluptates amet dolores debitis labore asperiores quis libero est magnam voluptatum alias praesentium magni deserunt beatae optio quam itaque!</span></p>
                <p class = "panelContent"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea illum magni error enim labore facere dolore obcaecati voluptate inventore nemo. Dolorum ipsam fuga nesciunt eos incidunt eum beatae quisquam enim.</span><span>Veniam velit quibusdam pariatur et autem veritatis nesciunt minima! Voluptas impedit voluptates amet dolores debitis labore asperiores quis libero est magnam voluptatum alias praesentium magni deserunt beatae optio quam itaque!</span></p>
    </div>
        <div class="panel" id="panel2">
      <h1 class = "panelContent">Details</h1>
      <p class = "panelContent"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea illum magni error enim labore facere dolore obcaecati voluptate inventore nemo. Dolorum ipsam fuga nesciunt eos incidunt eum beatae quisquam enim.</span><span>Veniam velit quibusdam pariatur et autem veritatis nesciunt minima! Voluptas impedit voluptates amet dolores debitis labore asperiores quis libero est magnam voluptatum alias praesentium magni deserunt beatae optio quam itaque!</span></p>
    </div>
      <div class="panel" id="panel3">
      <h1 class = "panelContent">Contact Us</h1>
      <p class = "panelContent"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea illum magni error enim labore facere dolore obcaecati voluptate inventore nemo. Dolorum ipsam fuga nesciunt eos incidunt eum beatae quisquam enim.</span><span>Veniam velit quibusdam pariatur et autem veritatis nesciunt minima! Voluptas impedit voluptates amet dolores debitis labore asperiores quis libero est magnam voluptatum alias praesentium magni deserunt beatae optio quam itaque!</span></p>
    </div>
  </div>
</div>

codePen中的CSS是SCSS代码。为了使它更容易理解，我使用了在线SCSS编译器对其进行了转换，并通过给它们适当的名称对其进行了一些微调。虽然我找不到足够接近的CSS颜色名称，但我使用HTML CSS颜色选择器来查找具有更有意义名称的匹配颜色。

这些颜色是：

███ ＃3D85B8
███ ＃2B5B82
███ ＃214559

这是我们将要开始的CSS代码：

.tabbedPanels {
    width: 75%;
    margin: 10px auto;
}
@media only screen and (max-width: 700px) {
    .tabbedPanels {
        width: 90%;
    }
}
.tabs {
    margin: 0;
    padding: 0;
}
.tabs li {
    list-style-type: none;
    float: left;
    text-align: center;
}
.inactive {
    position: relative;
    top: 0;
}
.tabs a {
    display: block;
    text-decoration: none;
    padding: 10px 15px;
    width: 8rem;
    color: black;
    border-radius: 10px 10px 0 0;
    font-family: 'Raleway';
    font-weight: 700;
    font-size: 1.2rem;
    color: white;
    letter-spacing: 2px;
}
@media only screen and (max-width: 700px) {
    .tabs a {
        width: 8rem;
        padding: 10px 12px;
    }
}
@media only screen and (max-width: 500px) {
    .tabs a {
        letter-spacing: 0;
        width: 7rem;
    }
}
.tabs a.active {
    border-radius: 10px 10px 0 0;
    position: relative;
    top: 1px;
    z-index: 100;
}
.tabOne {
    background-color: #4498c6; /* Curious Blue */
}
.tabTwo {
    background-color: #296586; /* Bahamas Blue */
}
.tabThree {
    background-color: #1d475f; /* Astronaut Blue */
}
.panel {
    width: 85%;
    margin: 1rem auto;
    background-color: white;
    border-radius: 20px;
    padding: 20px;
}
.panelContainer {
    clear: left;
    padding: 20px;
    background-color: #4498c6; /* Curious Blue */
    border-radius: 0 20px 20px 20px;
}
.panelContent {
    line-height: 1.5;
    font-family: Raleway;
    padding: 0 1rem;
    font-size: 1.2rem;
}
h1.panelContent {
    font-size: 2.2rem;
}
@media only screen and (max-width: 700px) {
    html {
        font-size: 14px;
    }
}
@media only screen and (max-width: 450px) {
    html {
        font-size: 12px;
    }
}

最后，我们开始使用的jQuery代码是：

  $('.tabs a').click(function(){
  $this = $(this);

  $('.panel').hide();
  $('.tabs').removeClass('active').addClass('inactive');
  $this.addClass('active').blur();
  
  var panelContainerColor = $this.css('background-color');

  $('.panelContainer').css({backgroundColor: panelContainerColor});
  
  var panel = $this.attr('href');
  
  $(panel).fadeIn(350);
  
  return false;
 
});//end click

$('.tabs li:first a').click();