jQuery facilitează punerea în funcțiune a proiectului. Deși a scăzut din favoare în ultimii ani, merită totuși să învățați elementele de bază, mai ales dacă doriți acces rapid la metodele sale puternice.

Dar, deși jQuery este o bibliotecă puternică, nu poate face totul. Acolo este util să ai o înțelegere solidă a vanilie JavaScript.

Spuneți că aveți un proiect Wikipedia Viewer ca acesta:

<div class="search">
  <p id="text">Search on Wikipedia</p>
  <input id="searchbox" type="search"></input>
  <button id="searchbutton">Search</button>
  <a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank"><button id="searchbutton">Random Article</button></a>
  <div class="resultingarticles"></div>
</div>
Sursă: Sandris Kupavskis
$("#searchbox").keyup(function(event) {
  if(event.keyCode === 13) {
    $("#searchbutton").click();
  };
});

$("#searchbutton").click(function() {
  
  var searchInput = document.getElementById("searchbox").value;
  searchInput = searchInput.toLowerCase();
  
  if(searchInput !== "") {
  
    var myRequest = new XMLHttpRequest();
    myRequest.open('GET','https://en.wikipedia.org/w/api.php?action=query&list=search&srsearch="+ searchInput + "&utf8=&format=json&origin=*');
  
      myRequest.onload = function() {
      var searchResults = JSON.parse(myRequest.responseText);
      
      $(".resultingarticles").empty();  
        
      for(i=0; i<10; i++) {
        var articleTitle = searchResults.query.search[i].title;
        var articleSnippet = searchResults.query.search[i].snippet;
        var articleId = searchResults.query.search[i].pageid;
        var articleLink = "https://en.wikipedia.org/?curid=" + articleId;
        $(".resultingarticles").append("<a href="" + articleLink + "" target="_blank">" + "<div class="article">" + "<p>"+articleTitle+"</p>" + "<p>" + articleSnippet + "</p>" + "</div>" + "</a>");
      };
        
      };
    
    myRequest.send();
    
  };
});

Totul funcționează așa cum vă așteptați – puteți introduce text în caseta de căutare, apăsați pe Enter sau pe butonul „Căutare” și puteți vedea o listă de articole Wikipedia.

Pentru că o folosești type="search" pe dumneavoastră input element, browserul Chrome va adăuga automat un „X” la sfârșitul intrării dacă există text și plasați cursorul peste intrare. Rețineți că alte browsere s-ar putea descurca type="search" diferit.

Când faceți clic pe „X”, textul dispare.

Dar spuneți că aveți deja o listă de articole și, atunci când ștergeți textul, doriți și să ștergeți articolele populate:

Directionare Faceti clic pe butonul „Stergeti X din campul de

Se pare că dacă faceți clic pe „X” în caseta de căutare declanșează un eveniment de „căutare”. jQuery nu acceptă evenimentul „căutare”, așa că va trebui să scrieți un ascultător de evenimente în vanilie JavaScript:

document.getElementById("searchbox").addEventListener("search", function(event) {
  $(".resultingarticles").empty();  
});

Acum, când este declanșat un eveniment de căutare, puteți utiliza jQuery pentru a șterge fișierul div element cu articolele:

1612078210 986 Directionare Faceti clic pe butonul „Stergeti X din campul de