Beispiel für den grundlegendsten Ein- und Ausblendeffekt basierend auf jQuery_jquery

Das Beispiel in diesem Artikel beschreibt, wie Sie den grundlegendsten Ein- und Ausblendeffekt basierend auf jQuery erzielen. Teilen Sie es als Referenz mit allen. Die spezifische Analyse lautet wie folgt:

jQuery ist eine JavaScript-Bibliothek, eine Erweiterung von JavaScript, die verwendet wird, um den steigenden Anforderungen an verschiedene Spezialeffekte gerecht zu werden. Seine Essenz ist JavaScript

Lassen Sie uns ein einfaches JQ-Programm schreiben, um JQ zu veranschaulichen.

1. Grundlegende Ziele

Es gibt die folgenden drei Schaltflächen auf der Webseite: Eine kann nur Text ausblenden, eine kann nur Text anzeigen und man kann Text gleichzeitig ausblenden und anzeigen, erneut klicken, um ihn auszublenden Der Zyklus ist endlos. Wie unten gezeigt:

2. Produktionsprozess

1. Zuerst müssen Sie eine JQ-Supportdatei von der offiziellen JQ-Website herunterladen und in Ihrem Site-Ordner ablegen. Diese Unterstützungsdatei ist jQuery1.11 (klicken Sie, um den Link zu öffnen). Sie können auf der offiziellen jQuery-Website jQuery1.11 herunterladen, das mit dem alten Browser IE6 kompatibel ist (klicken Sie, um den Link zu öffnen), anstelle von jQuery2, das nicht kompatibel ist kompatibel mit dem alten Browser IE6.

2. Der gesamte Webseitencode lautet wie folgt, zur Erläuterung in Fragmente unterteilt:

Code kopieren Der Code lautet wie folgt:

 
 
     
         
         
        <script>  <br>             $(document).ready(function() {  <br>                 $("#hide").click(function() {  <br>                     $("#text").hide();  <br>                 });  <br>                 $("#show").click(function() {  <br>                     $("#text").show();  <br>                 });  <br>                 $("#toggle").click(function() {  <br>                     $("#text").toggle();  <br>                 });  <br>             });  <br>         </script> 
         
 
 
         
         
     
     
        
   

 
        被折腾的文本 
   

 
     
     
        隐藏 
     
     
        显示 
     
     
        隐藏/显示 
      
     

（1）部分
部分主要是实现核心代码部分，放在后面来讲,先说部分

复制代码 代码如下:

Der geworfene Text

​  

ausblenden
anzeigen
ein-/ausblenden



(2)



Code kopieren


Der Code lautet wie folgt:

<script> <!--Wenn Sie JQ-Code schreiben, müssen Sie zuerst $(document).ready(function() {}); verwenden, um eine Gesamtfunktion zu definieren. Ohne das von dieser Funktion bereitgestellte Framework können Dinge nicht ausgeführt werden.             $(document).ready(function() {                                            & Lt;!-Dann schreiben Sie die benötigten Funktionen in diese Funktion-& gt;                                                                                                                                                                                                                                                                                                   $("#hide").click(function() {                                           In                    $("#text").hide();               });                                             $("#show").click(function() { <p> In                      $("#text").show( <br>               });                            $("#toggle").click(function() { </p> <div class="codetitle">                                                                                                                                                                                                      $("#text").toggle( <span>               });                                     });  <a style="CURSOR: pointer" data="73956" class="copybut" id="copybut73956" onclick="doCopy('code73956')"> </script>