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

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

我经常在这里看到人们要求处理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();

那是我们在Codepen 选项卡式面板中使用的初始代码,并将转换为删除所有jQuery代码。

下一步

当代码易于使用和修改时,它会有所帮助,因此接下来是测试和整理。
然后,我们对代码进行划分,以使其更容易转换,并减少错误和错误。





Original article, reproduced please specify:将jQuery转换为原始JavaScript的逐步指南 | 青尢Blog

支付宝打赏 微信打赏

我要评论

阿里云主机

Copyright © 2019-2020 青尢Blog 版权所有 | Designed by 乐痴灬青尢 由阿里云强力驱动
本站以勉强运行:
站点地图 青尢Blog
闽ICP备20002240-2号
Catfish(鲶鱼) Blog V 3.3.0