Beispiel für eine JQuery-Bildauswahl

In diesem Tutorial wird die Verwendung des Bildselektors in JQuery erläutert. Der Bildselektor wählt alle Eingabeelemente vom Typ Bild im Dokument aus. Die Bildauswahl stellt ein Bild des Dokuments dar. In diesem Tutorial verwenden wir die Bildauswahl mit dem Eingabeelement und dem src-Attribut, das die URL des Bildes definiert, das auf der Webseite angezeigt werden soll. Das Bild ähnelt (type=“image“). Es kann als Doppelpunkt (:) vor dem Bildselektor geschrieben werden.

JQuery-Bildauswahlsyntax

 $(“:image”)

Beispiel für eine JQuery-Bildauswahl

<!doctype html>
<head>
<title>JQuery Image Selector</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Image Selector Example</h2>
<script type="text/javascript">
   $(document).ready(function(){
      $("input:image").css("border", "3px double green");
   });
</script>
<body>
  <form>
      <input type="image" src="https://javabeat.net/wp-content/uploads/2014/03/amazing-300x214.jpg" alt="amazing" width="300" height="214"   />
  </form>
</body>
</html>
  • Wie im obigen Programm gezeigt, haben wir den Code in $(document).ready verwendet, bei dem es sich um ein Ereignis handelt, das ausgelöst wird, wenn das Dokument bereit ist. Es wird ausgeführt, sobald das Seitendokumentobjektmodell für die Ausführung von JavaScript-Code bereit ist.
  • $(“input:image”).css(“border”, „3px double green“); Zeile definiert einen Bildselektor, der alle Elemente vom Typ Bild auswählt. Es verwendet die CSS-Stileigenschaft, die zwei Ränder mit der grünen Farbe um das Bild herum festlegt.

JQuery Image Selector-Demo

Wenn Sie das obige Beispiel ausführen, erhalten Sie die folgende Ausgabe:

Wenn wir mehrere Bilder auf einer Seite haben, können wir das jeweilige Bild wie im folgenden Skript gezeigt auswählen:

<!doctype html>
<head>
<title>JQuery Image Selector</title>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<h2>JQuery Image Selector Example</h2>
<body>
<div id="image_container">
   <input type="image" src="https://javabeat.net/wp-content/uploads/2014/03/amazing-300x214.jpg" alt="amazing"   />
    <input type="image" src="https://javabeat.net/wp-content/uploads/2014/05/dummy_image2-300x300.jpg" alt="dummy_image2" width="300" height="300"   />
    <input type="image" src="https://javabeat.net/wp-content/uploads/2014/05/dummy_image1-300x210.jpg" alt="dummy_image1" width="300" height="210"   />
</div>
<script>
    $("div#image_container :image").click(function () {
        $("div#image_container :image").css("border", "0");
        $(this).css("border", "14px double green");
    });
</script>
</body>
</html>

Das obige Skript erklärt, wie Sie mithilfe der Bildauswahl ein bestimmtes Bild aus den mehreren Bildern auf der Webseite auswählen. Wir verwenden die ID des div-Elements, um ein bestimmtes Bild auszuwählen, wenn der Benutzer auf dieses Bild klickt. Das bestimmte Bild wird mit einem grünen Farbrand auf der Seite ausgewählt.

Wenn Sie das obige Beispiel ausführen, erhalten Sie die folgende Ausgabe:

  • Führen Sie die JQuery Image Selector-Demo aus

Beispiel für eine JQuery-Bildauswahl

Kommentar verfassen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Nach oben scrollen