A jQuery megkönnyíti a projekt üzembe helyezését. Bár az utóbbi években elmaradt a kedvenceitől, mégis érdemes megtanulnia az alapokat, különösen, ha gyors hozzáférést szeretne elérni hatékony módszereihez.
De bár a jQuery egy hatalmas könyvtár, nem képes mindent megtenni. Itt hasznos a vanília JavaScript megértése.
Tegyük fel, hogy van egy ilyen Wikipedia Viewer projektje:
Search on Wikipedia
Search Random Article $("#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','//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 = "//en.wikipedia.org/?curid=" + articleId; $(".resultingarticles").append("" + " " + ""+articleTitle+"
" + "" + articleSnippet + "
" + " " + ""); }; }; myRequest.send(); }; });Minden a várt módon működik - beírhat szöveget a keresőmezőbe, megnyomhatja az Enter vagy a "Keresés" gombot, és megtekintheti a Wikipedia cikkeinek listáját.
Mivel type="search"az inputelemét használja, a Chrome böngésző automatikusan "X" -et ad a bemenet végéhez, ha van szöveg és az egérmutatót a bemenet fölé viszi. Vegye figyelembe, hogy más böngészők type="search"másképp kezelhetik .
Az "X" gombra kattintva a szöveg eltűnik.
De mondjuk, hogy már van cikklistája, és a szöveg törlésekor a kitöltött cikkeket is törölni szeretné:
Kiderült, hogy a keresőmezőben az "X" gombra kattintva "keresés" esemény indul. A jQuery nem támogatja a "keresés" eseményt, ezért vanília JavaScript-ben kell írnia egy eseményfigyelőt:
document.getElementById("searchbox").addEventListener("search", function(event) { $(".resultingarticles").empty(); });Most, amikor egy keresési esemény elindul, a jQuery segítségével törölheti az divelemet a cikkekkel:
